ランディングページ（以下LP）のデザインにはコツがあり、一般的なWEBサイトとは違ったテクニックが必要ですよね。まず、普通のサイトのようにユーザーが何度も訪問してコンテンツを読むことがないので、見た人を一度でひっつかむ魅力が必要です。また、ページあたりの情報量が多いので、細部まで情報の明確な順位付けを行わなければなりません。
私は最近LPデザインのディレクションをした際、どうチェックして修正を出せばいいのかすごく悩みました。その結果、以下の本を参考にしながらLPデザインのチェックリストを作ってみました。
『ランディングページ・デザインメソッド WEB制作のプロが教えるLPの考え方、設計、コーディング、コンテンツ制作ガイド』
参考にしたこちらの本は、デザインだけを掘り下げているわけではなく、ワイヤーの書き方や効率の良いコーディングまで、LP制作フローが一通り学べる専門書でした。「LP制作」に全内容振り切った本ってあまりない気がする。結構おすすめです。
というわけで以下チェックリスト。
ワイヤーで定義した情報設計を具現化しているか
LPはユーザーにアクションを促すためのストーリに沿って設計されており、各セクションには明確な役割があります。「FVで引きつけ」→「悩み訴求でターゲットに当事者意識を持たせ」→「商品説明で解決策を打ち出し」…みたいな。
これらのセクションの違いが直感的に伝わるデザインでないと、ユーザー心理が計画通りに変化せず、だらだらとした印象になり飽きられてしまいます。
これは本に例えると、「章」「節」間にデザイン的な変化がなく、だらだらと文章が続くようなもの。余白や背景色、見出しを工夫してセクションを分け、メリハリあるデザインにしましょう。
強調箇所の場所と順番は正しいか
各セクションを構成する段落や図それぞれの中にも、明確な強調箇所と優先順位があるのがLP。ワイヤー制作者の意図通りに強調が成されているかチェックです。
商品のコンセプトとターゲットにそぐう雰囲気になっているか
その商品「らしさ」を表し、かつターゲットの嗜好に合ったデザインが求められます。
商品コンセプト/ターゲット/デザインキーワードは明確に言語化されている？
ふさわしいデザインにまとめるには、その前提となる商品コンセプト/ターゲット/デザインキーワードを文字に落とし込むことが必要。ここをあいまいにすると、高確率で迷子になります。デザインする前にしっかり言語化し、ワイヤー制作者とすり合わせしましょう。
商品コンセプト・ターゲットに沿ったトーンとマナーが決められているか
上記に沿ったデザインを実現するために、一定のトンマナが必要です。
写真の雰囲気、題材
pixtaとか写真素材サイトでいくつか選定し、チームで「これはありorなし」を打ち合わせするとイメージが固まっていい感じです。
配色
ルール化すべき色がいくつかあります。これらはグローバルカラーとしてスウォッチに登録し作業すると、後から調整が利いて効率いいです。
- メインカラー（ブランドカラー）
- サブカラー（アクセント）
- コンバージョンカラー（アクション）
- 背景色
- 基本の文字色
- オブジェクト全体のトーン
フォント
同じく、フォントにもルールを敷くべき項目があります。
- 文字サイズ
- メインフォント
- サブフォント
- デバイスフォントにする箇所
メインフォントとサブフォントは、違うフォントグループにするとデザインしやすいです。メインが明朝ならサブはゴシックとか。 メインフォントはサイトの雰囲気を決めるので、メインコピーに沿ったものになると思います。
余白
続いて余白のルール。
- 左右のマージン
- セクション間
- 見出しと本文の間
- 行間
フォントとカラーのルールはある程度デザインを作りながら決めていきますが、余白については最初に上記を決めきり、要素を配置してから必要に応じて崩していった方が作りやすい気がします。まずはコンセプトに沿った「間隔感」と見やすさとを担保するってかんじ。
レイアウト
レイアウトにも上から下まで統一感が必要。
- 版面率：要素と余白のバランス
- 図版率：文字と図のバランス
- ジャンプ率：大きい要素と小さい要素の差
- グリッド拘束率：レイアウトの自由度
- 揃え位置
- 段組み
ファーストビュー（FV）は魅力的か
FVがぱっと見魅力的かどうかってのが、LPの最初の関門です。そのために見るポイントがこちら。
キャッチコピーはちゃんと目立っているか
あくまで私の意見ですが、基本的に、一番最初にユーザーに認識させるのは「キャッチコピー」です。 写真を優先させるのは、よっぽどそれがユニークで魅力的な場合。でも、そんな素材を用意できるケースって少ないように思います。
ターゲットにとって魅力的な写真か
競合だけではなく、そのターゲットが買うであろう別商材のデザインも合わせて参考にすると、だいぶ近づけるんじゃないかと思います。
ナビゲーションはわかりやすいか
ナビゲーションがある場合、初見のユーザーが迷わないか。
コンセプトとマッチしているか
商品自体のコンセプトと、FVの印象が合っているか確認しましょう。
コンバージョン（CV）エリアはわかりやすいか
LPにとって一番大事なポイントです。ユーザーにアクションを促すため、以下を確認しましょう。
CVエリアは他とは違うブロックとしてまとまっているか
CVエリアは、一目見て「他と違う感」が伝わるデザインとなります。ここに濃いめの色で枠を付けたLPをよく見ますよね。
ボタンは一目見てそれとわかるか、複数ある場合、迷わせないか
ゴーストボタンやフラットデザインのボタンはかっこいいですが、私はあくまでLPの場合、シャドウやグラデでボタンっぽさを出したデザインの方がいいと思う…。 また、そのボタンを押したら何ができるのかはっきりさせましょう。何を買えるのか、資料請求できるのか、登録できるのか、とか。
「アクション後押し要素」が役目を果たしているか
「初回50％OFF」「送料無料」など、アクション後押し要素が適度な目立ち具合をしているか確認です。ボタンを邪魔せず、値段や商品写真といった重要情報も邪魔せず、程よくアピールしているか？
LP全体とあまりにもかけ離れていないか
CVエリアは目立たせる必要がありますが、全体の雰囲気からからあまりにも浮いているのは考え物です。しろーとっぽくなります。
全体を見て、違和感を感じる/見づらい部分はないか
全体を見た時になんかもやっとしたり、視認性が悪かったり、違和感が働くところはないでしょうか。見つけた場合、なぜそれを感じるのか言語化し、デザイナーと話し合いましょう。
まとめ：デザイナーと「売ってやるぜ」精神を共有しているか？
このチェックリストを作って、良いLPにはデザイナーの方でも商品理解やターゲットユーザーへの意識が不可欠なんだなーって気づきました。ということはつまり、デザインを依頼する側も、そういう部分をデザイナーに共有する意識が必要だということ。
高水準の情報設計力＆デザイン力に「売ってやるぜ」って意識がプラスされてこそ、ユーザーにアクションさせ得るLPとなります。LPのデザインをチェックするときは、そんなチームワークの部分も改めて見直すといいんじゃないでしょうか（＾＾） 以上、久々にデザイナーっぽいこと書いてみました～。
