#6 絶対に外さないファーストビューのレイアウト典型パターン

ランディングページにおけるファーストビューのデザイン・レイアウトの重要性

ランディングページにおいて、ファーストビューのデザイン・レイアウトをどうするのかという問題は、最終的な成約率を大きく左右する問題です。

ファーストビューで読者に自分が扱う商材の特徴やベネフィットを明確に伝えることができないと、そのまま離脱されてしまったり、もし読み進めてもらったとしても内容について誤解されてしまったりする可能性があるからです。

ランディングページを制作する際は、ファーストビューの重要性について認識して、そこですべて伝えきるぐらいの気持ちでデザインすることが大切です。

ただ、だからといって伝えたい分だけ文字を羅列したところで、見づらく、わかりにくくファーストビューができてしまいます。ファーストビュー内の情報は、必ず相手が理解しやすいように整理されていなければいけません。

そこでデザインの出番となってくるわけですが、この記事ではいかに人間の心理的・本能的な目線の動きに従って、効果的に文字や画像を配置していくのか、その道筋となる典型的なレイアウトパターンを3つ紹介します。

もし初めてランディングページを制作する場合、ひとまずはこのレイアウトに従って文字や画像を考えたり、選択していけば、そう大きく間違った作品にはならないでしょう。

実際、私も制作現場において、採用しているレイアウトパターンというのは、そう多くはありません。あまりにも現代アートのような、アーティスティックなレイアウトにしても、芸術に興味がある人は別として一般人には受け入れられにくいからです。

ランディングページは、特定の悩み・欲望・欲求を抱えた人がクリックをして訪問するページです。だからこそ最優先すべきなのは、そのお客さんの気持ちに応えるファーストビューを用意することであり、決してこちらの感性を押し付けるものではありません。

典型レイアウト その1 左側文字・右側画像(人物・商品)パターン

人はWebページを読む時、必ずと言っていいほど、「左⇒右」へと目線が動いていきます。

もちろん、目線が「右から左」になったり、「下から上」といった動きになったりする可能性もなくはないですが、Web制作業界においては基本的に「左⇒右」というのが人にとって一番自然な目線であると考えられています。(ちなみに、この「左⇒右」の目線を動きは「Z型」と呼ばれています)

そのため、ランディングページのファーストビューにおいてもこの原則は例外ではなく、基本的にこの「左⇒右」の目線に合わせて文字と画像を配置していくケースが多いです。実際に何かネット上で適当なランディングページを探してみてください。きっと多くのファーストビューがこのパターンで作られていると思います。

このレイアウトの肝は、左側に文字、右側に画像を配置するという方法です。このレイアウトを採用すると、まずページを開いたら読者に最初は文字を読ませて、次にそれに関連した人物写真や商品画像を見せることができるため、ランディングページ全体の伝達力とインパクトを強めることができます。

このレイアウトを採用する際の注意点としては、左側のキャッチコピーやサブキャッチなどの文字はできる限り簡潔にまとめ上げて、できる限りレイアウトを崩さないようにすることです。そのために類語を用いて短くしたり、要約したりするなどして、逐一編集を行うようにしましょう。

また、右側の画像部分に関しては、商品を紹介したいのであればそのまま商品を配置するのが効果的でが、もし人物を配置したいのであれば、その写真に移っている人物の目線には注意して配置するようにしましょう。

人の目線というものは、私たちはつい無意識に気になってしまうものです。たとえば、駅の混雑しているホームで、目の前の人間が全員一気に同じ方向を見たとしたら、気になって自分もそっちを見てしまうでしょう。そのぐらい、人の目線というのは、人の注意を惹きつけるものなのです。

デザイン業界において、こうした人の目を惹きつける性質のことを「誘目性」と言いますが、ファーストビューに人物を配置する際には、この誘目性を意識したデザインを施すべきです。

図1・文字を見ている女性

図2・こっちを見ている女性

図3・文字を見ていない女性

例として人物を配置したパターンを挙げましたが、図1.2と比べて、図3は全然別の方向を向いてしまっているので、なんとなくまとまりのないファーストビューになってしまっていることがわかりますでしょうか。

このように、写真の人物の目線を活用すれば、読者の注意を意図的に惹くことができるのです。

なので、もし人物を配置するのであれば、「文字を見ている」か、「画面の前に座っている人を見ている」か、この2つのパターンのどちらかにするのがおすすめです。

典型レイアウト その2 中央揃えパターン(シンメトリー)

中央揃えパターンは、セールスレターなど、ヘッダー部分に一定以上の情報量を含ませる必要がある場合に、効果的なレイアウトです。

このレイアウトはただ単に中央揃えをするだけで、誰にでも簡単に実現できそうに見えますが、それでも読みやすいデザインと、読みにくいデザインとを分けるポイントが2つ存在します。

まず1つ目が、ファーストビューのレイアウトを中央揃えにすると決めたのであれば、最後まで中央揃えを守り続けるということです。下手に途中で左揃えのテキストを配置したり、右にテキストを寄せたりすると、読者の視線が混乱し、途端に見えづらくなってしまいますので注意しましょう。

また、2つ目は、文字サイズのメリハリ(ジャンプ率)をつけるということです。中央揃えというのは、誰にでも簡単にレイアウトできる反面、それだけでは単調な印象となってしまい、途中で読者に飽きられてしまうことも多いレイアウトです。

なので、タイトルを大きくしたり、テキストの中でも目立たせたいキーワードの文字サイズを大きくしたり、色を変えたりするなどコントラストをつけるように工夫しましょう。

この2つを守ってデザインをすれば、それだけでインパクトの強いファーストビューを構築することが可能です。

典型レイアウト その3 スマホ専用ランディングページ向けのLO型レイアウト

図 そのまま詰め込むと小さい・・・・⇒下にいくつか要素を移動させることで、スマホでも見やすいレイアウトに!

典型1、2を土台にして、あとは少しずつアレンジを加えていけば、大体のファーストビューのレイアウトはうまくいくのですが、ことスマホ専用ランディングページになると、少し違った視点が必要になってきます。

スマホというのは、パソコンと比べて表示領域が異なり、より小さな範囲でレイアウトを組み立てなければいけません。ただ、パソコンの場合と同様に、ファーストビュー内でできる限りの情報を伝え切るという意識を忘れてはいけません。

そこで私が普段の制作現場でも頻繁に用いていて、オススメしたのが、「LO型」と名付けているレイアウトです。

これは基本的には典型1のように「左⇒右」への自然な視線の流れを活用したレイアウトになりますが、スマホにおいては「キャッチコピー」+「画像」+「サブキャッチ」を以下のようにLOのような形に配置すると、始めて見た人にとっても、非常にわかりやすく、見やすくなります。

スマホは画面が小さいため、パソコンと同じ感覚で文字を詰め込むと小さくなって見えづらくなります。そこで、スマホがパソコンと異なり画面が縦長(長方形)であるという利点を活かし、少しばかり下部分に情報を移すことで、ユーザーの読みやすさを優先することが可能になります。

スマホ専用ランディングページでは、パソコンそのままの情報量(文字数)を掲載することは難しい場合も多いため、時によってスマホ向けにライティングを編集する必要性もあるでしょう。

いずれにせよ、誰が見てもみやすく、わかりやすいレイアウトとはどのような形だろうかということを念頭において、文章を構成していくのがベターです。

正しく情報を伝達するために、正しいレイアウトが必要不可欠

以上、この記事ではランディングページの命とも言うべくファーストビューの典型的なレイアウトについて解説をしてきました。

もし、誰にも思いつかないような天性のレイアウトが思い浮かべば、特にこの典型例に従わなくてもいいでしょう。ですが、それは情報を正しく伝達するというよりも、自分の感性を表現するアート作品と紙一重になる危険性もあるため、非常にリスクが大きいことは心得ておくべきです。

奇抜なレイアウトで人の目を惹きつけたとしても、それは単に珍しいだけで、飽きられてしまえばおしまいです。また、芸術性の高いファーストビューが、そこに掲載されている商品やサービスを購入するのかといえば、それについては断定できません。人々にとって、単なる一過性のネタで終わってしまう可能性も十分あります。

「広告というのは、自分の愛する家族や恋人に、商品を紹介するものだ」とかつて広告業界の帝王と呼ばれたデイビット・オグルヴィは言いました。

だからこそ、ランディングページのファースビューにおいても、自分の商品やサービスを大切な人に紹介するように心がけることを忘れなければ、最終的には誰にとってもわかりやすく、見やすいページを生み出すことができるようになるのです。

無料電子書籍
Webデザイナーの思考法と仕事術

実績・スキルゼロスタートでも年間100件のLP制作を担当できるWebデザイナーの思考法と仕事術を1冊の本にまとめて無料で配布しています。