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

 

「テキストを多く入れたい」

 

デザイン制作会社であればクライアント企業からの要望、社内でランディングページを制作している場合は、企画担当者や商品担当者からの要望で、どうしても文字数や量が多いランディングページを作らなければいけないケースがあると思います。

 

必ずしも文字数や量が多いランディングページが悪いかどうかの成否は分けられませんが、一般的な傾向としては、よほど興味の深い人でなければ、そのランディングページに訪れたときに、しっかりと文章を読んでくれないのでは？ということが言えます。

 

ランディングページは広告でもあるため、短いキャッチとビジュアルや図解等で、直感的な理解を促していくことが大きなポイントになってきます。もちろん、あえて記事風のページにして展開するということもありえますが、下までのコンテンツをすべて記事風にすることは実際難しいとも言えます。

 

さて、そうした文字数や量が多いランディングページのデザインを組む際に、ちょっとした工夫で見栄えが良くなったり、読みやすくすることができると思います。

いくつか、ご紹介したいと思います。

 

 

 

【文字数や量の多いランディングページを見やすくデザインするPOINT】

 

1.画像フォントとデバイスフォントをうまく差別化する。

 

2.文字サイズを意図的に変える。

 

3.反転した文字を組み合わせる。

（背景に色があり、載せる文字は白くする）

 

4.字間の調整で見栄えを整える。

 

5.強調する文章の太さや色を変える。

 

6.写真と組み合わせて直感性を高める。

 

 

ひとつひとつ見ていきたいと思います。

 

 

画像フォントとデバイスフォントをうまく差別化する。

 

 

そのランディングページの運用・編集方針によってはきますが、見出し部分を画像にすることが可能なら、画像フォントをうまく活用して、長文の説明箇所はテキスト（デバイス）フォントにすることで差をつけるといったことがまずやれる方法です。

 

当たり前のことですが、画像フォントであれば、サイズや色をはじめ、様々な装飾ができますので、
それだけで文字としての機能だけでなく、ビジュアルとしての機能も高まります。

まずは画像フォントとデバイスフォントの住み分けとすることで視認性や見栄えのアップを検討してみましょう。

 

 

文字サイズを意図的に変える。

 

 

1とつながりますが、ランディングページは下までスクロールしてもらいたい縦長1ページの構造のため、意図的に読ませたい文章の文字サイズを大きくするということはひとつのポイントです。特に見出しとなるキャッチやサブキャッチを大きくしたりすることで、詳細なテキストを読まなくても言いたいことの全容がつかめるようにしておくということは文字におけるUIデザインのひとつと言えます。

 

ただし、あまりにバラバラなサイズ感で設定すると、デザイン的なレイアウトとしての統一感が失われてしまうため、大枠のサイズルールは設定しておいたほうが良いかもしれません。

 

 

反転した文字を組み合わせる。（背景に色があり、載せる文字は白くする）

 

 

説明が必要な商材の場合、キャッチやサブキャッチに相当するものがひとつのコンテンツで複数続くケースがあります。

 

そうした場合、何を強調したいのかわからないということが起こり得ます。ですが、企画者や依頼主に全部強調したい！という意向があればなんとかその条件下でデザインを組まなければいけません。

 

どうしても見出し的な要素が複数続くと文字文字しくなってしまい、デザイン的にも非常に組みづらい状態になります。

そのようなケースでは、反転した文字を途中途中で組み合わせることで、見た目の文字文字しさをなくしたり、デザイン的な見栄えを整えることができます。

 

正転→反転→正転→正転→反転

 

という形で、組み合わせることでリズムがつくれます。

 

 

字間の調整で見栄えを整える。

 

 

 

こちらも同様にキャッチに相当する文字・テキストが続く場合、文字数によって、見栄えが崩れてしまいかねません。

その場合は、横幅を同じ形にして、字間を調整することで見栄えを整えるという方法があります。
（もちろん、文字量によっては難しい場合もありますが。）

この方法は単純にファーストビューでの複数コピーの組み合わせ（文字・テキストを固まり化させる）という点でも活用できます。
こちらの記事の「3.のコピー要素のブロック化」という項目です。

 

 

強調する文章の太さや色を変える。

 

 

強調する文章の太さや色を変える。こちらは見出し要素でもボディーコピー要素にも適用できることです。
案外面倒でやらない場合もありますが、非常に簡単なことなので、特にランディングページにおいては、やっておいたほうが得です。考え方としては、縦長のランディングページにおいては、訪れたユーザーに下までスクロールしてもらい、興味を高めていくことが大切であるため、読み飛ばされていいように強調したい文章や文字の太さや色を変えることがちょっとした工夫になります。上記に挙げた「2.文字サイズを意図的に変える。」と同様の考え方です。

 

 

写真と組み合わせて直感性を高める。

 

 

最後に、文字そのものの要素だけではどうしても難しい場合、写真を組み合わせるという方法は非常に効果的です。
過去の記事でもお伝えしたように写真の訴求力はランディングページでは非常に重要であり、効果的なものです。

ですから、その文章から想像できるイメージ写真をうまく組み合わせることが文字量の多いテキストを補完することになります。基本的な方法にはなりますが、困った時の方法として頭に入れておくといざという時に助かります。

 

 

まとめ

 

なかなか教えてもらえないことですが、今回取り上げたことは日々のデザイン業務の中で、案外起こり得ることです。

 

ランディングページの目的は、伝えたいことを少しでもユーザーに理解してもらうこと。そのためには、デザインしづらい文字要素の多いランディングページでも工夫次第では、その訴求力を高めることはできると思います。

 

画像フォントとデバイスフォントの住み分け、フォントサイズ・カラーおよび反転文字との組み合わせ、字間調整、写真との組み合わせ等の細かい工夫で、少しでもよいランディングページに仕上がる可能性が高まります。

今回は、文字数・量という面からランディングページのデザインを捉えてみました。