押さえておきたい「ランディングページのデザインディレクションのポイント」

ランディングページの出来不出来を見た目で判断する上で、最もわかりやすいのは「デザイン」です。

ランディングページの制作工程はご存知の通り、①企画設計・構成制作②デザイン制作③コーディングの3つの工程が必要になります。すべての工程が重要であるため、それぞれの重要度に順番はつけられません。ですが、見た目の判断という点では、「デザイン」が良くも悪くも一番評価しやすい対象になるでしょう。

今回の記事は、そのランディングページの「デザイン」をどのようにディレクションするのか？というテーマでポイントを整理してみました。

「自分でデザインを行わずに、デザインをディレクションする立場の方」にとって参考にしていただきたいと思い、今回の記事を書くことにしました。

デザインディレクションを行う立場の人は、大きく2つのパターンに分かれるでしょう。

一つ目のパターンは「自分でもデザインができるけど、他のデザイナーのデザインをディレクションする」パターン。いわゆるデザイナーによるアートディレクション。
二つ目のパターンは「自分ではデザインはできず、デザイナーのデザインをディレクションする」パターン。こちらは、企画職やディレクターが行うパターンで、デザイナーによるアートディレクションではありません。

一つ目のパターンであれば、自分自身でデザインしていることもあり、より精度が高く、細かい点も踏まえてのフィードバックが可能になるでしょう。
そのため、今回は、二つ目のパターン、「自分ではデザインはできず、デザイナーのデザインをディレクションする」場合において、どのような点を気をつけていけば良いのかという指針をお伝えします。

今回のテーマは、心構えの部分が多いため、難しく感じずに取り組めるのではないかと思います。

デザインの得手不得手は関係ない

まずは自分の頭の中にある既成概念を壊しましょう。

●自分はデザインのセンスが全くない…
●小さい頃、図工や美術が苦手だったからデザインのことはさっぱり分からない…
●そんな自分が人のデザインを評価して、さらに指示をすることなんてできない…

デザインとは限られた才能ある人のみができることであり、どうしてもとっつきづらい。と思われている人は多いかもしれません。

でも、ランディングページのデザインの評価に、センスは全く必要ありません。

ノンデザイナーであっても、目的やコツを掴めば、センスの有無は関係なく、デザインの評価や指示ができるようになる。この点をまず覚えておいてください。

コンバージョンするLPデザインになっているか

では、デザインをどう評価していけば良いのでしょうか？

それは、一言でいうと、「そのランディングページのデザインがコンバージョンに有効か？」

この視点で見ることに尽きます。

コンバージョンへの有効性という視点で、そのデザインの課題を見つけることができるようになっていけばそこを起点に自ずとデザインディレクションの幅や応用力が身についていきます。

そのためには、ひとつの指針として、NGとなるケースを抑えておくと、とっかかりとして判断がつきやすくなります。

コンバージョンに有効ではないLPデザイン

要素が多くごちゃごちゃしている

伝えたいことが多すぎたり、いろんな人の意見を取り入れすぎてしまったことでデザインする要素が多すぎるケースです。

＜解決策＞一例として解決策をご紹介します。

①要素を削る（構成自体に手を加えてしまう）、②縦幅を広げて余白を設けることで一つ一つの要素を見やすくする、③要素のサイズに差をつけてメリハリを出す。

商品・サービスとトンマナが合っていない

商品・サービスが持つ世界観やブランドイメージと、デザインのイメージがずれているようなケースです。トンマナを構成する要素は、ロゴ/色/フォント/要素のサイズ/余白感/写真など様々あります。事前にデザインガイドラインやベースとなるカラーなど関係者間で共有できているとズレの幅も小さく抑えられます。

＜解決策＞一例として解決策をご紹介します。

①事前情報の共有（ガイドライン、色、参考デザインなど）、②サービスの顔であるロゴに合ったデザインになっているか検証してみる、③色を変えてみる、④フォントの種類やサイズを変えてみる、⑤余白感をコントロールする、⑥写真を変える。

何を伝えたいのか分からない/メリハリがない

要素が多いNG例と共通する部分もありますが、デザインにメリハリがなく、何を伝えたいのか？がわからないケースです。ランディングページは広告になりますので、せっかくページに訪れても興味がないとなればすぐに離脱してしまいます。そのためには短時間で魅力を訴求する必要があります。

＜解決策＞一例として解決策をご紹介します。

①訴求内容の優先順位を決める、②要素にジャンプ率をつける（例：見出しや重要キーワードを大きくする）、③コンテンツごとのレイアウトを変えてみる、④背景の色をコンテンツごとに変えてみる。

ユーザーがアクションしづらい（=ボタンに気づかない）

ランディングページの目的はユーザーがコンバージョンすることです。コンバージョンとは、資料請求、問い合わせ、申し込み、購入、予約、無料体験などLPを通じて、ユーザーに起こしてもらいたいアクションです。このアクションが起きづらい状態になっていないかどうかというポイントです。具体的にはコンバージョンボタンに気付きにくいという課題が考えられます。（色が他のコンテンツの配色と同化している、ボタンが小さい、ボタンに見えないなど）

＜解決策＞一例として解決策をご紹介します。

①LP全体のカラーリングを設計する（メインカラー/サブカラー/コンバージョンカラー）、②要素の形状をルール化する（角丸を使うのはボタンだけ）、③ボタンの装飾を変える（影があるなど立体的に表現するのはボタンのみ）

（参考記事）ランディングページのカラー戦略まとめ

https://conversion-labo.jp/report/lp_design/3021/

このように代表的なNGケースと対処法を取り上げてみました。

デザインの依頼時はデザイナーが作業しやすいように

より良いデザインを行ってもらうには、ランディングページの企画設計の意図を含めてターゲットや商品・サービスの強みなどをきちんとデザイナーに理解してもらうとともに、素材がどこにあるか分からずに探す時間がかかってしまうなどデザイナーが無駄な時間を使わなくて良いようにしっかりディレクションすることも期日までに質の高いデザインを出してもらうためのデザインディレクションのPOINTのひとつです。

具体的な項目としては次のような項目があります。

プロジェクトの全体像/目的を伝える

プロジェクト立ち上げの経緯/目標の共有とともに、全体のスケジュール感も認識のズレがないように共有しましょう。

取り組みにあたっての注意点なども合わせて共有しましょう。企業によっては、ブランドガイドラインやコーディングルールを設けている場合もありますので、関係者やクライアント企業に事前に確認するなどしてスムーズに制作に入れるようにしましょう。

ターゲット像を伝える

年齢/性別/職業/年収など具体的な属性情報をしっかり把握するとともに、最も重要なことはそうした属性の方々が抱えている課題やニーズ等の定性情報を把握することです。ここはランディングページの訴求内容やデザインの方向性とも絡む要素のために非常に重要です。

ディレクター自身が、ユーザーが抱えている悩みやニーズを深くイメージしておきましょう。わかりやすくいうと、知っている人やイメージできる人に置き換えて想像することができればと良いと思います。（例：ミドルエイジ向けの化粧品であれば、自身のお母さんを想像してみるなど）

商品・サービスの強みを伝える

商品・サービス理解は基本中の基本です。
対象となるユーザーにとってどのような点が強みや導入メリットになるかをしっかり情報としてデザイナーに伝えましょう。

競合について伝える

競合企業のランディングページがどのようなデザインでどのような打ち出しをしているか。また、競合企業に比べてどのような差別化ポイントを示したいのか？実際にランディングページをローンチした際に、ユーザーは比較検討するため、デザインやトンマナの違いを出すためにも競合情報は重要な情報の一つです。

アウトプットイメージの共有

特に重要なことはトンマナの起点になるような参考情報の提供です。
トンマナは関係者間で認識がずれてやり直すリスクも高い要素でもあるため、事前に関係者間の認識のズレはできるだけ回避できていたほうが後々進行もスムーズになります。そのため、分かりやすい方法としては、ベンチマークしているLPやサイトの情報を伝える。その際、URLなど以外にも参考となるページのどの部分に着目してほしいのかも合わせて伝えることがポイントです。

写真やテキストなどの素材はどこにどの素材を格納したのか分かりやすく伝える

構成案を作っていく過程で、素材となる写真などの番号やデータをストックし忘れることなどが原因で、デザイナーが素材サイトなどで探し直すなどの手間が発生することがあります。そのため、構成案を作成する過程で、収集した素材はしっかりフォルダなどにまとめて管理したり、メモにURLを記載しておくなどして、デザイン依頼時にまとめて伝えられるようにしておきましょう。
地味な作業にはなりますが、デザイナーが素材を探す上で迷う時間を極力なくすことで、デザインにかけられる時間が増えますので、そのような視点で、素材情報の受け渡しをスムーズに行いましょう。

なお、デザイナー側でも同様の意識を持ってデザインに取り組むことが重要であると思い、以前、上記の内容をデザイナー向けの記事としてまとめています。こちらもディレクター目線でも参考になるかと思いますので合わせてぜひ確認していただければと思います。

（参考記事）ランディングページ（LP）のデザイン前にデザイナーが理解しておきたいこと

https://conversion-labo.jp/report/lp_design/10238/

ユーザーの気持ちになる

デザイン確認をする上で、視点の切り替えはとても重要です。
実際にランディングページを見て、アクションを起こすのはユーザーであるため、制作者視点からユーザー視点へ切り替えてデザイン確認することが求められます。

ユーザー視点になるとは、前述に挙げた属性（年齢/性別/職業/年収）でかつ、想定課題を持ったターゲットに自分自身がなったつもりでランディングページを見てみるということです。

そのような視点で見ると、制作段階では気づけなかった課題が見えてくることがあります。

・情報が詰め込まれていて、何を言いたいのか？わからない。
・どこで申し込みなどをしたらいいのか？ボタンに気づけない。
・写真に写っている人が自分とは年齢も全然違うし、あまり自分には関係ないのかな。
・キャッチコピーの意味がわからない。

このようにデザインだけでなく、構成やライティング自体にも課題があるかもしれないということに気づけます。

LPデザインの進行フローはステップを刻む

先ほど、デザイン進行過程において、やり直しになるリスクが高いものとして「トンマナ」という要素を挙げさせてもらいました。
「トンマナ」は概念的でもあるため、デザイン開始までに共有が難しく、たとえば、カラーリングをしっかり指定したり、他のLPやサイトを参考イメージとして共有してもらっていても、出来上がってみたものを見てはじめて良し悪しの判断になることが実際は多いと思います。

その場合に、トンマナがイメージと異なるため、やり直したいとなった際、デザイン全体を作りきった後にやり直すのと、途中段階でやり直すのでは全く工数も時間も変わってきます。

そのため、やり直しの有無はさておき、早い段階で、デザインを関係者間で共有しておくことで、そのズレを回避することができます。

デザイン確認のステップの刻み方としては、コンバージョンの要となる「ファーストビュー」までか、「ファーストビュー＋1コンテンツ（コンバージョンエリアなど）」のデザインを第一段階のデザイン確認にすると良いでしょう。
ここでデザインの方向性が決まれば、その後のやり直しのリスクは大きく軽減されます。

また、関係者も安心できるため、その点でもよりスムーズにプロジェクトが進行しやすくもなるでしょう。

ワイヤー/構成案が100%でないことを伝える

「ワイヤーのイメージを100%踏襲レイアウトなどにしないといけないのか？」
「ワイヤーのレイアウトは大きく変えても良いのか？」
そのあたりのワイヤーの再現度のレベルは、依頼時に合わせて伝えた方が良いかと思います。
特に経験があまりないデザイナーに対して、前提条件を伝えなければ、ワイヤーの指示に準じたデザインをそのまま行ってしまう可能性があります。（ワイヤーをそのままデザインしてしまい、デザインとしての工夫のないものになってしまう）

ある程度、デザイン的な発想も用いながらワイヤーを用意し、かつ、顧客とのやりとりでレイアウトなども含めた構成案として固まるような状況でなければ、デザイン側である程度、より良いレイアウトになるように自由にデザインしてもらうという前提の上で、デザインを依頼するほうが、コンバージョン獲得という点でもより効果的なデザインになるものと思います。

ですので、よほどの制約がない限りは、「要素はワイヤーに従い、レイアウトは自由にデザインしてください（ワイヤーから変えて良い）」ということを、前提にしておいたほうが良いでしょう。

また、変更不可などの制約がない限りは、要素は基本的に構成案に従いつつも、テキストの言い回しを変えたり、写真を別の写真に選定したり、必要な調整もデザイン側で行っても良いと思います。

実際にデザインすることで、文字数によってキャッチの組み方が変わり、視認性などが変わってくることもあり得ますし、写真についても、レイアウトした結果、サイズ感が足りない、見栄えがトンマナに合っていないなどのケースもあり得るでしょう。

そうした点もデザイン側で柔軟に変更ができるようであれば事前に示しておけると良いでしょう。

フィードバックはスピーディーかつ丁寧に

この項目では、初校デザインなどへのフィードバックについて記載したいと思います。
デザインは、実際にプレゼンの場に出すまで、関係者間で揉まれていくものであり、出来上がって一発目でなんの修正もなくOKになることはほぼ稀なことでしょう。

ですので、デザインに対して、なんらかの修正依頼を伝える場面は必ずと言っていいようにあります。

さて、そのフィードバックに際して注意したいのは2つのポイントがあります。

ひとつは、
①スピーディーにフィードバックをすること。
もう一つは、
②丁寧にフィードバックをすること。

まずひとつめです。

スピーディーにフィードバックをすること

スピーディーとは、デザインをもらってから戻すまでの時間を極力短くしましょうということです。
ディレクター側で手持ちの確認時間を減らすということです。なぜなら、早くデザイナーにフィードバックすることで、修正や検証にかけられる時間を増やせるからです。

フィードバックの観点については、「コンバージョンするデザインになっているか。」で挙げた確認ポイントをもとに、チェックしましょう。

経験が浅いうちは、チームのメンバーや上司にもサポートしてもらいながらにはなりますが、コンバージョンするデザインかという観点からデザインの良し悪しを評価できる訓練をし、できるだけリアルタイムにフィードバックすることを心がけましょう。

丁寧にフィードバックをすること

フィードバックの仕方を間違うと修正の意図がずれて、無駄な作業をデザイナーにさせてしまう可能性があります。そのような時間のロスはできるだけ防ぎたいものです。

フィードバックの際は、ただ、「イメージと違う」などの曖昧なフィードバックをするのではなく、「どの点がイメージと違い、具体的にどのようにしてほしいのか？」までを伝える必要があります。
その際に、言葉だけで伝えられない場合、実際に図を書いてみたりするのも良いですし、それが難しいなら他のサイトなどから参考になるようなイメージやレイアウト、写真などを見つけて、共有するだけでも認識がずれないようにするために有効な手段になります。

また、写真のイメージなどが違う場合などは、いくつか近しい写真の候補を複数挙げてみて、イメージをより具体的に共有するといった方法もあります。

時間を置いてLPデザインを再度見てみる

デザイナーに早くフィードバックすることも大事ですが、一方で時間を置いて見ることで、初見では気づかなかった問題点も見えてくることがあります。

先に挙げたようにデザイナー視点で何度かデザインを見て、実際に触って操作（スライダーやボタンをタップ）することで、また新しい課題の発見があります。
デザイナーには素早くフィードバックして修正作業を行ってもらいつつも、並行して、本当にこのデザインで良いのか？改めて検証する時間も作っておけるとよりデザインの精度を高めていくことが可能になります。

評価に迷ったら、パターンを用意してみる

コンバージョン視点で見てみても、時間を置いて何度か検証しても、本当に良いデザインか判断できない時があります。そのような場合は、別のデザインパターンを用意して、実際にA/Bテストでどのパターンが良いのか？判断するという方法があります。
あるいは、A/Bテストまで実施しなくても、プレゼン段階で、複数パターンがあることで、関係者が比較して選択できるようになる分、判断もしやすくなることもあります。

ただし、当然ながらパターンを別に用意することで作業工数（予算/期間）も増えますので、その点は考慮する必要がありますが、パターンがあることで、デザインの評価がしやすくなるというメリットがありますので、困った時の選択肢として頭に入れておきたい方法のひとつです。

最後に　ーディレクションとは「やさしさ」であるー

さて、今回の記事では、デザインディレクションについて、様々な角度からまとめてみましたが、最後にデザインのディレクションに限らず、ディレクションとは何か？を触れてみたいと思います。

ディレクターはプロジェクトの推進をしたり、ハブになる立場だと思います。
目的は、プロジェクトの成功に向けて舵取りを行っていくことになりますが、その目的達成のためには多くの人の協力があってこそになります。

そのために、ディレクションする際に、気をつけるべきことを、「関係者の立場」になること。
つまり、「やさしさ」です。
そのようなスタンスになることで、相手にとってどのような依頼の仕方をすればやりやすいのか？ということが見えてきます。
例えば、先に記載したように、デザイナーが作業しやすいように素材の場所を明示しておくことや、作業時間を考慮して、早めにフィードバックすることなどもその一つです。

相手の作業のしやすさなどを考えた依頼をすれば、デザイナー側もより良い動きをし、ディレクター側の立場のことも考えてくれるはずです。
こうしたスタンスを持ってディレクションにあたることで、至るところにプラスの効果が生まれるのです。

ディレクションとは「やさしさ」。このことは、テクニックの前の、基本スタンスとして、知っておきたいところです。

（参考記事）デザインディレクション関連ブログ

デザインディレクションについて参考になりそうな過去の記事をまとめていますので、こちらもご参照ください。
ディレクターだけでなく、デザイナーやエンジニアにもヒントになることが書かれていると思います。

●デザイナー必見!ランディングページデザイン品質チェックリスト30

https://conversion-labo.jp/report/lp_design/8187/

●ランディングページ（LP）のデザイン前にデザイナーが理解しておきたいこと

https://conversion-labo.jp/report/lp_design/10238/

●情報量の多いLPをわかりやすくデザインする10の方法

https://conversion-labo.jp/report/lp_design/10344/

●BtoBとBtoCでのランディングページデザインの違いと制作ポイントを紐解く

https://conversion-labo.jp/report/lp_design/8360/

●文字数や文字量が多いランディングページのデザインのポイント

https://conversion-labo.jp/report/lp_design/5760/

●WEBサイトデザインとランディングページデザインの違いを考える

https://conversion-labo.jp/report/lp_design/4685/

●ランディングページのファーストビューデザインを集めました。

https://conversion-labo.jp/report/lp_design/4598/

●ランディングページのUIデザインを考える

https://conversion-labo.jp/report/lp_design/4212/