その他

キャンペーンサイトの作り方とは？2022年お年玉キャンペーン事例を大解剖

更新日：2023-01-13 公開日：2022-03-15

WRITERさえ Webマーケーター

ジーピーオンラインでは、お客さまへ向けた年末年始のご挨拶をかねてオリジナルのキャンペーンを実施しています。新しいミッション、「人とデジタルで“ありがとう”をつくる。」を発表した2021年度は、さらに多くのみなさまに感謝の気持ちを伝えられるように拡大バージョンでキャンペーンを実施しました！
この記事では、キャンペーンサイトの作り方と、当社の実施したキャンペーン事例をご紹介します。

ジーピーオンラインにキャンペーンサイト制作の相談をする

キャンペーンの進め方は？

初めにキャンペーンの進め方をご紹介します。ステップは大まかに以下の7つに分かれます。

キャンペーンの目的を決める
コミュニケーション方法を決める
ストーリーを組み立てる
応募の参加条件や景品を決める
スケジュールを組む
キャンペーンサイトを制作する
キャンペーンの告知をおこなう

キャンペーンの目的を決める

まずはキャンペーンで何を実現したいのか、軸となる目的を決めます。当社の場合は、2021年に刷新したミッション・ビジョン・バリュー（MVV）をキャンペーンを通して多くの方に知ってもらい、ステークホルダーであるみなさまに「ありがとう」を伝えることを目的として設定しました。

MVVの中でも、理念刷新を機に掲げることになった“Digital Tech Agency”というフレーズをキーにしてストーリーを組み立てることになりました。

キャンペーンの目的を決める

コミュニケーション方法を決める

いきなり「当社は“Digital Tech Agency”として出発します！」と言っても、興味をもっていただける方はごく少数と予想されます。直接的に訴えるのではなく、受け取ってもらいやすい形にしてメッセージを届ける方法（コミュニケーション方法）を考える必要があります。そこで、今回はキャンペーンサイトを立ち上げ、サイト上でゲームをみなさまに楽しんでいただきながら、“Digital Tech Agency”としての船出をお伝えすることになりました。

ストーリーを組み立てる

キャンペーンの方向性が決まったところで、さらに詳細を煮詰めていきます。

ゲームのモチーフは？どんなタッチ？
どんなストーリー展開のゲームにする？
どうすればゲームクリアになる？

上記のような内容を詰めていきます。今回は年明けに年始のご挨拶もかねたキャンペーンとして実施する予定でしたので、「お正月」というキーワードから、めでたいイメージのある「だるま」と七福神を掛け合わせたキャラクターに決まりました。

七福だるま

ジーピーオンラインが20周年を迎えたことから、これまでの20年間を超ダイジェストで七福だるまで再現するストーリー展開になりました。分岐イベントの発生は、ゲーム性を高めることと、さまざまな意思決定をおこなってきたことを伝えることがねらいとしてありました。

ジーピーオンラインが倒産してゲームオーバー、応募資格ゲットならず…という展開も当初は予定していましたが、ゲームに参加してくださった全員がゴールにたどり着けるようにしよう！という意見から、どのシナリオを選択してもゴールにたどり着けるエンディングに固まりました。

応募の参加条件や景品を決める

キャンペーンの参加条件や景品を決めます。一般的なキャンペーンでは、特定の商品を購入したり、指定の期間に入会したりした方が応募対象になります。しかし、今回の当社のキャンペーンは広くみなさまにチャンスが訪れるよう、ゲームをプレイしてくださった全員が応募可能とするオープン懸賞の形式をとることにしました。

スケジュールを組む

キャンペーンの全体像が見えてきたら、スケジュールに落とし込みます。年始のキャンペーンなので、デッドラインがおのずと決まってきます。

キャンペーンサイトを制作する

上記の情報を元にキャンペーンサイトを制作します。制作のフローは後ほど「キャンペーンサイトの作り方」で詳しくご紹介します。

キャンペーンの告知をおこなう

キャンペーンが開始されたら、キャンペーンサイトのキービジュアルを使ってメディアに情報を公開していきます。今回はメールやプレスリリース、当社コーポレートサイトでのお知らせ、Facebookなどを使用しました。

キャンペーン開始後は、問い合わせ対応やキャンペーン期間終了時のクローズ対応、抽選、景品発送をおこない、プロジェクト完了となります。

キャンペーンサイトの作り方

では、キャンペーンで最も重要な役割を担う、キャンペーンサイトの作り方を以下の8ステップでご紹介します。

ストーリー設計
ワイヤー作成
イラスト制作
デザイン
コーディング
動作チェック
公開
クローズ対応

ストーリー設計

20周年超ダイジェストのストーリーを、場面ごとに切り分けて設計していきます。ストーリーをいくつの場面に分けるかは、必要なデザインの数に、ひいては制作工数に直接関係してくるので、慎重に吟味する必要があります。ストーリー展開が楽しめて、かつ制作時間が膨れないように調整していきます。また、分岐が起こる場面ではイベント発生を知らせるアニメーションなどもあるとゲームのわくわく感が増えるので必要点数に含めておきます。

ワイヤー作成

ストーリーができあがったら、「ワイヤーフレーム」と呼ばれる画面設計書に落とし込んでいきます。ワイヤーの段階ではイラストなどの素材はほとんど揃っておらず、テキストと丸や四角などで要素を配置して、ざっくりしたイメージを掴んでいきます。テキストはこれで問題ないか、必要な画面遷移のボタンは必要な場所に設置されているかなどがチェックポイントになってきます。

キャンペーンの場合は、参加条件や景品の内容、注意事項などを訪問したユーザーに正確にお伝えする必要がある情報があるので、それぞれ適切な場所へ不足がないように盛り込みます。

イラスト制作

デザインより先行して、イラストの制作に入ります。今回のモチーフとなった七福だるまは、プロのイラストレーターさん（山口絵美さま（asterisk-agency））に作成いただきました。シーンごとにさまざまな表情の七福だるまや背景イラストが必要になるので、丁寧に洗い出しておきます。
イラストのイメージを伝える際には、アートディレクターが用意する以下のような資料を用います。資料にはシーンの説明だけでなく、希望しているイラストのタッチやNGなタッチもまとめておくと、より明確にイメージを共有できます。

イラスト資料

キーワードに「Digital Tech Agency」があったので、イラストも手書き風のものではなくなめらかなタッチを目指して作成いただきました。七福神それぞれの特徴をとらえた顔と持ち物で個性豊かなキャラクターの誕生です！

デザイン

ワイヤーフレームを元にデザインを作成していきます。イラストが反映され、カラフルになって明確に完成イメージが沸くようになりますね！ページと一緒にゲーム画面のデザインも用意します。SNSでのシェアも想定して、OGPもオリジナルのものを作りました。

コーディング

デザインが確定したら、コーディングです。今回のキャンペーン特設ページは1ページですが、ゲーム画面が31画面あるため、通常のキャンペーンページよりも制作工数が多くかかります。

ゲーム画面はJavaScriptを用いて、できるだけ多くアニメーションをつけました。どこまで動くようにするかはスケジュールとの兼ね合いもありますが、「ゲームを楽しんでもらう」というコンセプトから外れないよう、ナレーションのテキストが一文字ずつ表示されるタイプライター演出などを盛り込みました。

また、PC、タブレットだけではなく、さまざまな大きさのスマートフォンで閲覧した時にゲーム画面が途切れることのないように調整が必要でした。アニメーションが遅いと間延びした印象になってしまうので、早さも入念に調整してコーディングしていきます。

動作チェック

コーディングやデザインに問題がないか、最後に動作チェックをおこないます。Web制作会社で「ブラウザチェック」と呼ばれている検証工程で、誤字脱字がないか、デザインが崩れている（予定している通りに表示されていない）箇所がないか、クリックしても反応しないボタンがないかなど、隅々までチェックしていきます。

特定のブラウザで不具合が発生することもあります。Chromeは問題なく表示されていても、SafariやFirefoxだと表示されない、といった現象も起こるので、いくつかの主要なブラウザで確認します。デバイスも同様に、画面の大きさが異なる複数のスマートフォンで試します。OSやバージョンで差異が発生することも多々あるので、当社にはさまざまな検証用のデバイスが常備されています。

公開

キャンペーンの開始日時と同時にキャンペーンページを公開します。テスト環境と呼ばれる開発時のページ上でも十分に確認はおこなっていますが、本番環境ならではの予期せぬエラーが発生している可能性もあるので、公開後にもいくつかのデバイスやブラウザで問題がないかチェックしていきます。問題がなければ公開作業は終了です！

クローズ対応

忘れてはいけないのが、クローズ対応と呼ばれる、キャンペーン期間が終了した際のキャンペーンページの変更です。キャンペーン特設ページは、期間が終了すれば役目を終えます。そのためページ自体をWeb上から削除するか、アップしたまま「キャンペーンは終了しました」という文言を追記する対応などがおこなわれます。

当社の今回のキャンペーンは、ゲームを後からでも楽しんでいただけるように、削除はしない方針となりましたので、終了の文言を追加でアップしました。

お年玉キャンペーンのこだわりポイント

2022年1月14日から1月31日という短い期間でしたが、このキャンペーンサイトにはさまざまなこだわりがありました。最後にその中から3点ご紹介します。

七福だるまに込められた裏設定
再現したのは歴史だけじゃない？！
微調整に微調整を重ねたアニメーション

七福だるまに込められた裏設定

大黒天、毘沙門天、恵比寿天、寿老人、福禄寿、弁財天、布袋尊からなる七福神にはそれぞれに司るものがありますが、同様にジーピーオンラインにあてはめた時の特性が設定されていました。

大黒天（五穀豊穣・子孫愛育・出世開運・商売繁盛）…チャレンジ精神
毘沙門天（武道成就・降魔厄除・家内安全・夫婦和合）…課題解決力
恵比寿天（商売繁盛・除災招福・五穀豊穣・大魚守護）…企画／提案力
寿老人（幸福長寿・家庭円満・延命長寿・福徳智慧）…創業20年の実績、経営力
福禄寿（財運招福・延命長寿・立身出世・招徳人望）…ホスピタリティ
弁財天（恋愛成就・学徳成就・諸芸上達・福徳施与）…クリエイティブ力
布袋尊（千客万来・家運隆盛・家庭円満・商売繁盛）…リーダーシップ

よくゲーム画面を見返すとセリフと特性がマッチしていることがお分かりいただけるかと思います。ちなみに、七福神には当社スタッフも裏設定として決められています。一緒にお仕事させていただいたことのある方は、「あの人かな？」と思い当たった方もいらっしゃったでしょうか？

再現したのは歴史だけじゃない？！

今回のストーリーは創業から20年間を追体験するものでした。しかし、再現したのは20年間のできごとだけではありません。実は、背景のオフィス風景も実際のオフィスを再現しています！

オフィスのイラスト

左が大阪本社、右が2021年に移転したばかりの東京本社です。現在は時節柄なかなかお越しいただくことも難しい状況ではありますが、もし今後機会がありましたら、ぜひ再現度を確認してみてください。

微調整に微調整を重ねたアニメーション

ゲーム中に、イベントからストーリーへ戻る際にだるまが画面を埋め尽くして消えていくアニメーションを挟んでいますが、コーディング担当者いわくここが最も試行錯誤したパートでした。

滑らかにだるまが積み重なって、消える頃には次の場面に展開している…。微調整しては確認、微調整しては確認を繰り返してできたのが、あのアニメーションです。しかも、このアニメーションは元々は存在しておらず、途中で「ここの場面展開、なにかあったほうがいいよね？」という声が上がり急遽追加されたパートでもありました。ぜひもう一度プレイして展開を楽しんでみてください。

まとめ

2022年1月に実施したお年玉キャンペーンのキャンペーンサイト制作をご紹介しました。ゲームには選択を迫られる分岐が登場しますが、創業からの20年間で実際に数々の選択をしてきたからこそ、こうしてみなさまに今もコンテンツをお届けできているのではないかと思います。ジーピーオンラインはミッション・ビジョン・バリューを刷新し、Digital Tech Agencyとして新たな船出を迎えました。これから、みなさまに“ありがとう”をより一層つくりだせるよう邁進してまいりますので、今後ともどうぞよろしくお願いいたします。