キャンペーン実施が決まり、LPの制作が始まったら情報を整理しましょう。

 

 

通常LPに掲載する情報は基本的に以下の通りです。
 
オープンキャンペーンの場合
・メインビジュアル
・キャンペーン期間
・賞品
・応募方法
・応募規約
・問い合わせ情報
 

 
基本これらの情報のみあれば問題ありませんが、例えばキャンペーンに合わせてCMがある、という場合はCMを掲載してもいいかもしれません。LP以外に実施する施策などがあればこの時に関係者に相談していきましょう。

 

 

パソコンで見た場合、スマートフォンで見る場合のどちらも最適に表示させることをレスポンシブ対応といいます。ほとんどの人はパソコンで仕事をしているのでLP制作の際ついパソコンの表示ばかり気にしてしまうので注意が必要です。
 

 
レスポンシブは現在ほとんど必須の対応と言えますが、キャンペーンの種類によっては圧倒的にスマートフォンでのアクセスが多い場合があります。その場合は、スマートフォンのデザインのみを作成し、パソコンでは表示が崩れない程度に同じものを表示することも多いです。レスポンシブ対応をすることで費用感やスケジュールに影響が出るので、必要かどうかも含めてよく考えてこの段階で決めるようにしましょう。
   

 

 

 
昨今ではOGPの設定はマストになりつつあります。特に、拡散を目的としたキャンペーンなどでは必ず設定するようにしましょう。こちらもレスポンシブ同様、対応することで費用感やスケジュールに影響が出てくるので事前に確認しておきます。必要と判断した場合は、OGPで表示させる画像を誰が作るかも事前に確認しておきましょう。
 
情報をまとめたら、次はワイヤーフレームというラフ、設計図のようなものを作っていきます。

 

 
ワイヤーフレームとは簡単に言うとLPの設計図になります。概要部分のみ決まっていた場合も、実際LPに落とし込むにはテキストや写真、イラストなどを工夫して掲載する必要があります。このワイヤーフレームの段階で、どんなテキストで訴求するか、賞品の良さをアピールするかなどを考えていきます。実際のデザイン部分よりも一番大切な部分となってきます。
 
ワイヤーフレームで入れるべき部分は以下の通りです。

 

 

キャンペーンタイトルや開催期間だけでなく、賞品説明のテキストは必要か、応募方法の説明はどのような言葉にするかなど細かく記載していきます。この時点でテキストを固めておくと、これ以降のSTEPの作業を減らすことができ、ミスも発生しにくくなります。
 
※未確定情報はダミーでも問題ありませんが、テキストの分量はどのくらいなのか事前に決めておくとこの後の差し替え作業の時間を短縮することができます。

 

 

 
トンマナの認識を事前に関係者で揃えておくと、デザイン初校後の修正ややり取りを少なくすることが可能です。ただ、この認識を揃える作業というのが非常に難易度が高く注意が必要な部分です。例えば、「青くてかっこいいデザイン」と言っても「青」や「かっこいい」の概念が人によって異なるため、言葉だけでは認識がずれてしまいます。そうならない為には、ワイヤーフレーム段階でイメージに近いデザインのスクリーンショットや写真等を貼っておきましょう。そうするとここでいう「かっこいい」はこういうイメージなんだ、という部分が目で見て分かるので認識のずれが少なくなります。
   

 

 

参考サイトや過去のLPで同じ動作をしたい部分がある場合は、それもワイヤーフレーム段階で分かるとあとの作業を短縮することができます。例えば以下のようなものはデザインにも影響してくるので事前に入れたい旨を伝えましょう。
 
・カルーセル
横にスライドできます。自動でスライドを動かすことも可能。スライダーと呼ぶこともある。
 

 
・モーダルウィンドウ
クリックすると画面上に別のウィンドウが立ち上がる。背景か✕ボタンを押すまで画面が変わらない。
 

 
・アコーディオンメニュー
リストをクリックするとアコーディオンのように下に内容が表示されるメニュー。
 

 

 

 
ワイヤーフレームで大枠が固まったらデザイナーがデザインを開始します。ワイヤーフレームを基にデザインを作成するので、ワイヤーフレームを細かく握っておけばおくほど、お客様と自分、そしてデザイナーとイメージにずれがない初校が上がってきます。
 
▼デザインが上がってきたら確認するポイント
・ワイヤーフレームに記載されているものが全て入っているか
・誤字脱字がないか
・デザインに違和感がないか
 
「まだ初校だし、だいたい見ればいいんでしょ？」と思う方もいるかもしれませんが、一番しっかり見た方がいいのは初校になります。なぜかというと、この時点であれば修正箇所が多少多くとも対応する時間がありますが、スケジュールが進むにつれてできることの幅がどんどん狭まってきます。そのため、最初に気になるところは全てつぶしておき、次の修正校以降では修正指示が反映されているかくらいの戻しにしましょう。そうすることでスムーズな進行を実現することができます。
 

 
デザインに関しては大きくイメージと異なる部分は修正するようにしましょう。しかし、LPにおいて重要なのはデザインよりもコンテンツ（中身）になるため、細かすぎる修正はただ工数を増やすだけで応募数には影響がない場合もあります。LPの成功を握るのはワイヤーフレーム段階までになります。
 
デザイン確認が完了したらデザインFIXとなります。FIX後はデザインや誤字脱字などの修正が発生しないようもう一度すべて見返しておきましょう。

 

 

 
デザインがFIXしたらコーディングに入ります。コーディングはデザイナーが対応する場合もあればコーダーという専門の職種の人が対応する場合もあります。基本的にデザインデータを基にコーディングがされるのでこちらから指示することは少ないですが、以下は事前に共有しておきましょう。
 
・リンク先のURL（応募ボタンをクリックした先のURLやSNSキャンペーンの場合はSNSアカウントのURLなど）
・タイトル（title）
・ディスクリプション（description）
・最終的なページのURL
 

 

 
次に、コーディングしたデータはテストアップとして上がってきます。テストアップが上がってきたら以下を確認していきます。
 
・ デザイン通りにコーディングができているか
・表示くずれがないか
・挙動に問題がないか
・リンクが正しく設定されているか
※逆にデザインはFIX済なのでここでは修正指示を出さないようにします。
ここからデザインを変えようとするとまた工数が追加でかかっていくので注意が必要です。
 
このとき、パソコンだけではなく、必ずスマートフォン（実機）でも確認するようにしましょう。ユーザーはパソコンだけでなくスマートフォンでも閲覧します。パソコンでは表示が問題なくてもスマートフォンで崩れていたらユーザーにとってはおかしなページとなってしまいます。必ずパソコン、スマートフォンで両方で確認します。
 

 
また、パソコンやスマートフォンの中でも、ブラウザによっては見え方が変わることがあります。可能であれば各媒体、各ブラウザで確認するようにしましょう。全媒体、全ブラウザ全てを確認することは不可能ですが、シェア率の高いものに関しては確認するようにしましょう。

 

 

 
テストアップで不備がないことを確認したら、本番環境にアップします。テストアップで確認しているので問題ないと思いがちですが、テストアップで修正した場所が先祖返りしていないか、OGPが反映されているかなど細かく確認するようにしましょう。本番環境にアップしたものがユーザーも閲覧するページとなるため、もう一度端から端まで確認していきます。
 
確認が問題なければこれでLPは完成となります。

 

無事にLPが公開できればもう安心！これで応募がたくさん来る！と思うかもしれませんが、基本的に公開したばかりのLPにユーザーが流入する可能性はほとんどありません。アップしたからといってGoogleなどのサーチエンジンにヒットすることはまずないと考えましょう。サーチエンジンにヒットさせるためには、SEO対策が必要になります。
 

 
しかしながら基本的にはキャンペーンLPにSEO対策をする意味はありません。SEO対策は長期的な施策であり、数か月で効果が出るものではありません。キャンペーン期間は数週間～数か月のため、そのためにSEO対策をするのであればその予算で広告を出稿したり、SNSで告知する方が効率的と言えます。万が一SEO対策する場合は、デザインで使用できるフォントやデザインの自由度なども変わってくるため大きく工数が変わります。
 
まとめると、LPを公開したからといってユーザーの流入は見込めないため、必ず導線を作るようにします。その導線は検索エンジンではなく、広告やSNSがベターです。キャンペーン成功のためにLPを作るだけではなく導線までセットで考えるようにしましょう。

 

■LP
LP（Landing Page）とは、検索やSNSなどから流入した訪問者のアクションを誘導することに特化した縦長のレイアウトのページのことを指す。
 
■Webサイト
商品や企業の情報を掲載したページの集まり。商品の購買を促すだけでなく、運営企業の概要や経営理念など様々な情報が掲載されている。
 
■メインビジュアル
LPの顔となり、ユーザーが一番最初に目にする部分。MVと表記されることも多い。キャンペーンの内容が簡潔に伝わるタイトルや、印象に残りやすいキャッチコピー、魅力的な賞品などを記載することが多い。KV（キービジュアル） FV（ファーストビュー）とも呼ばれる。
 
■レスポンシブ対応
様々なデバイスに合わせてデザインを表示するようにする対応のこと。レスポンシブ対応をしないと、スマートフォンでパソコンで見るようなサイトが表示されたり、パソコンでスマートフォンでみるようなサイトが表示されてしまう。※レスポンシブルと誤表記されている場合もあるが正しくはレスポンシブ
 
■OGP
SNSでLPのURLがシェアされた際に画像やページの情報を表示させる仕様のこと。OGPは基本設定しないと表示されないため、設定有無は制作会社に確認が必要なことと、設定には最適な画像の作成も必要になる。
 
■ワイヤーフレーム
LPの設計図・ラフのこと。全体の構成や実際に入れるテキストを記載し、これを基にLPのデザインを作成する。
 
■トンマナ
トーン＆マナーの略で、デザインに統一感を出すためのもの。
 
■LPにおけるデザインとは
デザインの完成見本を作る作業のこと。PhotoshopやIllustratorというソフトを使う。完成したら初校という形で提出される。
 
■初校
最初のデザインデータのこと。イメージと違う場合はこの段階で伝える必要がある。（初校以降大きな修正はスケジュール上難しくなる場合が多い）
 
■修正校
初校戻し（初校に対する修正指示）を反映させたデータのこと。1校、2校など数字を重ねる時も。
 
■コーディング
HTML、CSSといった特定のプログラミング言語を使ってソースを記述することです。この記述をすることでWebでデザインを見ることができるようになります。
 
■テストアップ
本番公開用のURLとは別のURLにアップしたページのこと。テスト環境にアップしているためIDとパスワードでロックをかけ、それらを知る人のみが確認できるようにしている場合が多い。
 
■タイトル（title）
ページのタイトルのこと。ブラウザのタブや、検索エンジン等に表示される。
 
■ディスクリプション（description）
ページの説明のこと。検索エンジン等に表示される。
 
■ブラウザ
Webサイトなどのページを閲覧するためのソフトウェア。代表的なものはGoogleChromeやMicrosoftEdge、Safariなどがある。
 
■サーバーアップ
インターネット上に公開されている箱（サーバー）の中に作成したページを入れる（アップする）こと。サーバーにアップしない限り一般ユーザーから閲覧されることはない。
 
■本番環境
一般ユーザーに対して公開する環境のこと。反対にテスト環境は最終チェックに使う環境のこと。
 
■SEO対策
検索エンジン最適化という意味で、検索結果においてより上位に表示させるための施策のこと。