Webマーケティング・制作

LPで最も重要な要素:ファーストビューデザインについて解説!

こんにちは。

ジャスティスのWEB制作担当の戸田です。

 

今日はLPの中でも

最も重要な部分と言ってもいい、

ファーストビューのデザイン原則について

お伝えしていきます。

 

LPのデザインと聞くと、

「LPを作る時はデザイナーに外注するから、

知らなくても問題ないのでは?」

と思われる方もいるでしょう。

 

しかし、自分でデザインを作らないとしても、

今回お伝えする内容は知っておいて損はありません。

 

なぜなら、どこかに外注したとしても、

このファーストビューのデザイン原則を

知らないと、実際に提案されたデザインが

本当に適切なものなのか判断することが

難しくなるからです。

 

なので、

LPを自分で作ろうと考えている方も、

外注を検討されている方も、

ぜひ今回のコラムでデザインの基礎知識を

習得していただければと思います。

 

 

ファーストビュー2つのパターン

まず、ファーストビューとは、

ユーザーがページに訪れた時に

最初に目に入る部分のことを言います。

 

ファーストビューのパターンには、

大きく分けて2つのパターンがあります。

 

パターン1 文字70:画像30

 

 

ファーストビューというのは、

表示できる領域が異なります。

 

ページを開いたときに、

PCやスマホの画面で映る範囲が

読み手に見せることのできる最大です。

 

より具体的に数値で表すと、

PC 横1000px程度 縦700程度

スマホ 横640px程度 縦900px程度

というのが、

読み手に見せることのできる範囲です。

 

なので、その限られたエリアに対して、

自分が伝えたい情報を取捨選択し、

バランス良く配置していくというのが、

デザインの重要なポイントになります。

 

そして、文字と画像のバランスは、

文字70%:画像30%

というのが、最もオーソドックスな

パターンです。

 

実際、私もLP制作をする際は、

このバランスを意識しています。

 

その理由としては、

この割合が一番ユーザーにコンセプトや

ベネフィットを明確に伝えることができて、

更にイメージによって直感的に内容を理解

してもらいやすいからです。

 

ただ、もちろん文字情報や写真・画像の

サイズや量はLPによって異なるため、

必ずこの割合でなければならないわけでは

ありません。

 

あくまで1つの基準として考えてください。

 

パターン2 文字は左・写真は右側に配置する

 

 

パターン1でお見せした参考画像は、

文字が上側、画像が下側でしたが、

文字と画像を横に並べるパターンも

よくあるレイアウトです。

 

そして、その場合に、守るべきルールとして、

 

文字は左側、写真は右側

 

というものがあります。

 

なぜなら、人間の目線というのは、

スクリーンを見たときに、

基本的に左から右に動いていく法則があるからです。

 

この法則は、目線の動きになぞらえて、

「Zの法則」と呼ばれていますが、

そのように心理学の観点から見ても、

左から右へと人は文字を読んでいくという

ことは、科学的事実として認められています。

 

ですので、

魅力的なファーストビューを構築するには、

基本的に一番読ませたい文字は左に配置して、

補足説明の役割がある画像は右に配置する

というのがセオリーとなります。

 

もちろん、画像を左で文字を右にしても

全く不正解ということではなく、

実際はケースバイケースなのですが、

初めてLPを作るのであれば、

この鉄則は守る方が失敗は減るでしょう。

 

キャッチコピーのメリハリを意識する

文字サイズのメリハリを意識することで、

デザインにリズムが出てきます。

 

具体的には、

 

・キャッチコピーは大きく目立つようにサイズを大きくする

・逆にサブキャッチなどは、キャッチコピーよりも文字を小さくする

 

というような考え方です。

 

 

メリハリを考えずにデザインをすると、

せっかく頑張って考えたキャッチコピーが

小さくて見えにくいものになったり、

自分の意図した情報が一度で伝わらなかったりします。

 

このメリハリの考え方は、

デザインをする上で非常に重要な要素なので、

ぜひ様々なLPを見ながら、

どのようなバランスが最適なのか、

色々と考えてみてください。

 

というわけで、

ファーストビューひとつ考えるだけでも、

色々なことを考える必要があり、

かなり大変であることがお分かりいただけた

かと思います。

 

しかし、そこを突き詰めていくからこそ、

ライバルとはひと味違った印象のLPが

生み出せますし、最終的にそれが明確な

結果となって返ってくるのです。

 

ぜひ、オリジナルのファーストビューを

作り出せるようになってくださいね。

 

参考になれば幸いです。

 

弊社のLP制作サービスはこちらをご覧ください。

メルマガのご登録はこちら

Leave a Response

戸田 雄貴
2017年にWEB制作・管理担当として株式会社ジャスティスに入社。社内・社外を問わず数多くの制作案件をこなし、集客に直接的な効果を生むWEBデザイン制作の経験を積む。 これまで携わった制作案件は、士業・コンサルタントや治療家の公式ホームページ・ランディングページ・会員サイトの他に、ECサイト、求人募集サイト、外国人向けのポータルサイト等、多岐に渡る。 クライアントの中には、日本一の実績を出しゴールデンタイムのテレビで紹介される専門家もおり、WEBを活用して影響力を発揮するためのサポートを行っている。 また制作管理以外にも、WEBマーケティングを中心にメルマガやコラムなどの原稿を執筆している。