LP制作〜公開までの流れを解説！ディレクターの立ち回り方やフィードバックで見るべきポイントとは？

商品・サービスをアピールし、ユーザーの行動を促す上で重要な役割を持っているLP（ランディングページ）。

そんなLP制作にはライターやデザイナー、コーダーなど複数人が関わるケースが多いため、全体を取りまとめる責任者、いわゆるディレクターを決めておくと制作をスムーズに進めることができます。

こちらの「LP制作を円滑に進めるための情報整理術とディレクションのコツ」では、LPの種類や要件の確認など、制作に入る前の事前準備について解説しました。

今回は関係者への依頼や、できあがった制作物に対するフィードバックなど、実際に制作に入ってからのディレクターの立ち回り方をご紹介していきます。

前回のおさらい：スケジュールと進め方

LP制作が1人で完結するパターンもありますが、今回はディレクションの説明がしやすいように複数の担当者が関わるケースを想定し、下記の流れに沿って解説していきます。

＜LP制作の進め方の一例＞

前回は、上図のSTEP1「制作の目的・ペルソナ設定」でLPの要件を固めるところまで解説しました。

要件が固まり、スケジュールと制作費の見積もりを算出したら、いよいよ制作スタートです。

構成・テキスト原稿の制作

LPは「誰に」「何を」「どうやって」伝えるのかを基盤に、ターゲット心理を想像しながら、ファーストビューからコンバージョンまでの動線を設計していく必要があります。

その上ですべてのベースとなるライティングは、最も力をかけるべきところと言っても過言ではありません。特に1番最初にユーザーが目にするファーストビューや、行動を促すCTA（コール・トゥー・アクション）の周辺は、CVRを大きく左右する要素です。企業分析や顧客インサイトの深掘りを通して、ユーザーに行動を起こしてもらえるようなコピーや文章を心がけていきましょう。

テキスト原稿はWordのようなドキュメントファイルなど、どんなツールで作っても構いません。別の人が原稿をチェックしても見やすいように、見出しと本文の文字サイズを変えたり、リンクボタンには遷移先URLを指定しておくなど、装飾を入れておくと親切です。

また、この時点でLPに使用する画像やイラストなどの素材も準備しておきます。使用する場所がイメージできている場合はテキスト原稿の中にも貼り付け、全体の流れをわかりやすくしておきしょう。

ワイヤーフレームの制作

次にワイヤーフレームを作成していきます。ワイヤーフレームとは、Webページの構成やレイアウトを視覚的にわかりやすく伝えるための「設計図」にあたります。パソコンとモバイルで見え方が大きく異なる場合は、それぞれのワイヤーフレームを用意しましょう。

また、デザインカンプ制作以降にコンテンツの作り替えなどが発生すると余計に工数が大きくなるため、できる限りこの段階でクライアントや上長チェックを挟み、全体の構成やイメージを固めておくと安心です。

ワイヤーフレームの作成に関してはこちらの記事が参考になります。

【ノンデザイナー向け】ランディングページを提案したいときに読みたい、ワイヤーフレーム作成の３STEP

記事LPのようにテキストメインでデザインが簡素なものであれば、デザインカンプをスキップしてコーディングに進むケースもあります。その場合も、テキストの装飾（強調箇所や色を変える部分、マーカーなど）や使用画像の配置イメージが伝わるように、ワイヤーフレームを作り込んでおきましょう。

デザインカンプの制作

完成したワイヤーフレームを元にデザインカンプを制作していきます。デザインカンプとはWebページの見た目を共有する完成図を指します。どこに何の要素があるかを示したワイヤーフレームをベースに、レイアウトを確定させ、フォントや配色、装飾などのディティールを整えたものです。

ディレクター自身がデザインする場合を除けば、このデザインカンプの制作部分からデザイナーに依頼するというパターンが多いかと思います。デザイナーに依頼する上でわからないことがあったり自信がないときは、適宜ミーティングを設けて擦り合わせを行いましょう。

デザイン担当者への共有事項

希望納期

デザインFIX予定日ではなくデザインの初稿提出日を伝えます。修正対応や確認の時間が入ることを考慮して設定しましょう。

ワイヤーフレーム

ワイヤーフレームのデータまたはドキュメントのURLを共有します。

使用素材

写真やイラストなどの素材データを提供します。なるべく画質が良く、サイズが大きいものを選ぶと良いでしょう。クライアントからの使用許可が降りていないものや、商用利用できない素材を共有しないように十分注意してください。

レスポンシブやサイズなどの仕様

コンテンツ幅など制作サイズに指定があれば、共有します。サイト内にLPを組み込んだり既存のLPを踏襲して作る場合は、該当のWebページのURLを共有して横幅を合わせて作ってもらった方が確実です。

参考サイトやLP、トンマナなどのイメージ

ベンチマークしているサイトやLP、トンマナ、デザインに関するレギュレーション資料などがあれば併せて共有します。ヘッダーやフッターなど既存のLPからデザインを流用する箇所がある場合は、元のLPのURLも共有しておきましょう。

実装方法

デザインの表現に関わる要素なので明確にしておきましょう。今後テスト検証やLPO（ランディングページ最適化）を積極的に行っていくならば、テキストの更新性を高めるために画像として組み込むのではなく、なるべくコーディングで再現することが望ましいです。その際有料のWebフォントが使えるのか、無料のWebフォントやOSのデバイスフォントを使うべきなのか、制作体制や環境によって異なってくるので確認しておきましょう。一方テキスト部分も含めてすべて画像で作る場合は、更新性が悪くなるものの表現の幅が広がります。

いずれも認識のズレや大規模な修正が発生しないようにするために必要な情報です。事前に共有済みの内容でも改めて伝えておきましょう。

デザインカンプのチェックリスト

できあがったデザインにフィードバックする際は、ディレクター自身の趣味趣向で判断せず、ターゲットに対して正しく情報設計がされているかどうかに重きを置いて確認していきます。以下は一例です。

LPはじっくり見ずに飛ばし読みされることが多いため、パッと見たときの直感的なわかりやすさも大切です。

フィードバックする際に全体のスクリーンショットを撮ってスマホの実機に送り、実際にスクロールして確認してみるのも効果的です。「要素がごちゃごちゃしていてわかりにくいな」「見出しが小さくて目に留まらない」など、新たな気づきが得られるかもしれません。

実装（コーディング）

デザインカンプが完成したら、次はコーディングを依頼します。

デザイナーとコーダーが別々のケースでは、デザイナーも交えて三者でコミュニケーションが取れる状態にすると意思疎通が捗ります。

コーディング担当者への共有事項

納品形式

htmlファイル一式（html、css、js、画像など）の納品をもって完了なのか、サーバーへのアップロードをもって完了なのか、何を持って作業が終わりとするのかを明確にしておきます。

希望納期

例えばhtmlファイル一式の納品をもって完了のケースでは、公開予定日から逆算して納期を伝えます。

デザインカンプ

Adobe XDやPhotoshop、Figmaなどで作成したデザインデータを共有します。

ブラウザサポート環境

OSやブラウザのサポート範囲を共有します。

リンクボタンの遷移先のURL

リンクにしてほしい場所と、遷移先のURLを共有します。必要に応じて同窓内でページ遷移するのか、別タブで新しく開かせるのかも指定します。

タイトル、ディスクリプション

タイトル（タイトルタグ）はブラウザのタブやオーガニック検索時のタイトルに表示され、ディスクリプション（メタディスクリプションタグ）はオーガニック検索時のタイトル下の説明として表示されます。忘れがちですが、これも共有しておきましょう。

本番環境にアップロードする際のURL（ディレクトリ名）

LPは最終的にHTMLファイル、CSSファイル、使用画像、JSファイルなどのファイル一式をサーバーにアップロードすることで公開完了となります。

例えば本番URLが「https://anagrams.jp/lp/demo/」 であれば、「anagrams.jp」のドメイン直下にあるサブディレクトリ「lp」フォルダの中にファイル一式を内包した「demo」フォルダをアップロードすると公開されます。コーディング担当者に忘れずにディレクトリ名も伝えておきましょう。

画像のalt属性（任意）

画像が表示されないときに代替されるテキスト情報です。画像と整合性のあるテキストを設定しておくと検索エンジン側で情報を理解しやすくなり、SEO対策にも繋がります。目の見えない方が使う音声読み上げブラウザでも活用されます。

広告タグの設置（任意）

広告などのタグの設置をコーダーにお願いする場合は、共有しておきましょう。

ファビコン、アップルタッチアイコン、OGP画像（※任意）

ファビコンやアップルタッチアイコンを設定すると公式感を強めることができます。OGPはSNSでシェアしたときに表示されるタイトルやサムネイル画像などのオブジェクトを指します。

アニメーションの指示（任意）

リンクボタンを振動させたり光らせたいとき、スライドショーを自動で動かしたいときなど、要素のアニメーションに細かい指定があれば補足します。以下はLPでよく見かけるリンクボタンアニメーションの一例です。

Webページのアニメーションがまとまっている便利なサイトもあります。こちらは筆者もよく参考にしているサイトです。

参考：動くWebデザインアイディア帳

デザインとコーディングを同じ人が担当する場合は、デザインカンプなどを共有する必要はありませんが、いずれのパターンでも納品形式や遷移先のURL、ブラウザサポート環境などのデザイン以外の情報は、ディレクション担当が把握しておきたい内容です。

WordPressなどのCMSに組み込む場合は、保存ファイル形式や画像のパスの指定方法が異なるケースがありますので、このあたりも作業が進む前にしっかりと確認しておきましょう。

コーディング実装のチェックリスト

デザインまで順調に進んでいても、コーディングの不備が原因でコンバージョンに繋がらなければ本末転倒です。読み込み速度や操作性、ユーザビリティを重点的に見ていきます。以下は一例です。

テストアップ環境のフェーズで、パソコンやスマホの実機で必ず確認してください。特にコンバージョンに直結するCTAボタンまわりやフォームの入力確認は念入りに行いましょう。

最終チェック・公開

テストアップ環境のみならず、公開後も必ず最終チェックを行いましょう。テストコンバージョンをして、購入や申し込みなどが問題なく行えるかチェックすることも大切です。

運用型広告でLPを利用する場合は、広告タグの実行チェックを行い、各広告媒体の審査にかけていきます。

これにてLP制作の一連の流れが完了となります。お疲れさまでした。

まとめ

本記事はこれにて終わりですが、LPは公開がゴールではありません。テストや検証などのLPOを行っていくことでより成果の高いLPへと育てていくことができます。

離脱率が高い場合はLPの途中にコンテンツを追加したり、ファーストビューを差し替えるなど、さまざまな施策を通して改善を重ねていきましょう。

LPOに関しては以下3つの記事もお読みいただくと参考になります。

【ランディングページを「育てる」】LPOを前提としたデザイン・コーディングについて考える

ランディングページについて相談されたとき、広告運用者としてアドバイスするための5つのポイント

ランディングページを改善するために、最低限押さえておきたい5つのポイント

デザイナーやコーダーなどたくさんの人々が関わるLP制作プロジェクトにおいては、手探りながらも各担当者の仕事についての理解を深め、どのような依頼や準備をすれば相手が作業しやすいか配慮することが大切だと感じています。

わからないことをわからないままにせず、相互コミュニケーションを積み上げながら、ディレクション力をアップさせていきましょう。