ランディングページはさまざまな要素を詰め込む必要があり、自ずと用意するコンテンツの量が多いため、サイトが長くなりユーザーにとってはやや敬遠されがちな傾向にあります。

しかし、内容に説得力を持たせるためにも、Webページの品質基準に沿うためにも、一定以上の文字数というのは欠かせません。

そこで、今回は少々分量多めの文字数でもユーザーを飽きさせずに情報提供するための文字デザインについて解説していきます。文字デザインをする際に心がけるべき工夫ポイントをわかりやすくお伝えしますので、ぜひ参考にしてくださいね！

WEBコンサルタントのご紹介

弊社は、上場企業も含め300社以上のランディングページ制作に携わってきました。
ランディングページは、企画構成が重要で、これを怠ると思うような結果は出ません。
我々は数多くの制作実績から蓄積された経験と企画構成力で商材に合わせた売れるためのランディングページを提案できますので、お気軽にご相談ください！

ZERO式ランディングページ制作はこちら

ポイント1：文字組みに気をつける

魅力的な文字デザインの裏には、文字組みへの細やかな配慮が隠されています。ここでは、ランディングページ上の文字を見やすく魅力的にするために文字組みでできる工夫をご紹介しましょう。ポイントを4つに分けてわかりやすくご説明します。

行を揃える

文字組みの中でも最も基本的なのが行を揃えることです。行の揃え方には、左揃え・右揃え・中央（センター）揃え・両端（等間隔）揃えという4つの種類があります。

目的やレイアウトに応じてこの4つの揃え方を使い分け、読みにくくて離脱するというリスクを避けましょう。

使い分けを簡単にまとめると以下の通りです。

行間を揃える

読みやすさを重視して行間の余白を揃えるようにしましょう。ランディングページは通常1ページで完結する”ペライチ”広告なので、行間に統一感がないと気が散って文章に集中しにくい印象を与えてしまいます。

広告サイトである限り文字から商材の情報を得てもらわなければコンバージョンに至りにくいため、行間の乱れはマイナスに働きます。ちょっとした行間の違いもユーザーにとっては気になるものです。全体に一貫性を持たせ、行間を整然と揃えるよう留意しましょう。

文字詰め（トラッキングとカーニング）

文字と文字の間隔設定である文字詰めも、適切に行わなければ閲覧する際に不快感を与えてしまうので気をつけなければなりません。

文字詰めにはトラッキングとカーニングという、パーセンテージで文字間の空白を調節する技術を使用します。

トラッキングは例えば一行全ての文字を等間隔に刻むような場合に用いる手法であり、カーニングはある文字と文字の間のみを限定的に調整するスポットの技術です。カーニングはキャッチコピーや各見出しなどの短文で活躍します。全体のバランスをよく見ながら、それぞれの文字詰めを適切に行う必要があります。

全角半角を分ける

英数字や記号の全角半角が適切に使い分けられていない文章は読みにくいだけでなく、まずもって見映えが悪いことが問題です。見栄えの悪い文字や文章は、内容の質まで疑わしくなるような良くない印象をユーザーに与えてしまう恐れがあります。

全角半角のいずれかに統一し文面を整然とさせるだけでも仕上がりにかなり違いが出てくるので、デザインの初期段階で全角にするのか半角にするのか明確に決めておきましょう。

ポイント2：使用ルールを設け文字の統一感を図る

1つのランディングページの文字デザインをする際には統一感が重要です。見た目の美しさは『読みやすそう』という印象につながり、ユーザーの目を広告情報に集中させます。

文字の統一を図るには以下の4つを意識しましょう。

・文字サイズ
・文字カラー
・ベースラインを合わせる
・フォントの種類や特徴

それでは各要素についてご説明していきましょう。

文字サイズ

文字サイズのバランスは見た目の美しさを大きく左右する部分です。1つのランディングページの中でも、見出しは見出しでボディーコピーはボディコピーでそれぞれ文字サイズを統一します。ただし、キャッチコピーや見出しについては、役割や重要性に応じて統一感を阻害しない程度に変化をつけることはOKです。

商材や業界によっても文字サイズを調整する必要があるほか、パソコン用デザインとスマートフォンデザイン用でも文字サイズを使い分けることも忘れないようにしましょう。パソコンと同じ文字サイズではスマホからは読みづらくなってしまいます。

文字カラー

1つのランディングページの中にさまざまな文字カラーが存在すると注目ポイントがわかりづらく、うまく伝わらない可能性があります。

そのため、重要な内容を述べていることを表す”強調色”は統一しましょう。
ユーザーが条件反射的に今日朝食に目が行くので、効率良くコンテンツを読み進めてくれます。

ベースラインを合わせる

ベースラインとは、文字列の最低辺を指します。ここが少しでも揃っていないと文字列が乱れてちぐはぐになってしまい、ユーザーに違和感を与えるので注意が必要です。特に英数字や記号を用いる場合半角を使用する際にはベースラインが崩れがちになります。記号も含めた底辺が美しく一直線に並んでいるかどうかをしっかりと確認しましょう。

フォントの種類や特徴

文字フォントの種類は非常に多いですが、1つのランディングページの中でのフォントは必ず統一しましょう。

フォントは和文・欧文用の2つにざっくり分かれるほか、それぞれに豊富に種類がありますが、和文で主流なのは明朝体かゴシック体です。一定以上の文字数を統一するとなると、この両者くらいクセのないフォントが読みやすくなります。

ただし、明朝体は文字の先端部分に装飾を帯びたフォルムの字体で女性的、ゴシック体は直線使いだけなので男性的な印象を与えるといった特徴があります。こうした性格も、さらに太さでニュアンスを変えるなどして商材のイメージを演出できます。フォントをうまく活用してターゲットユーザー層を踏まえたフォント選びを念頭に置きましょう。

デザインを先行して特殊なフォント（Webフォント）を無理に使うと表示速度が遅くなるので注意してください。
パソコン・スマホに基本装備されているフォントの種類はそこまで多くありません。
そのため、特殊なフォントを多用すると、パソコン・スマホがサーバ上から探さなければならず、表示速度が遅くなります。
どうしても使用したい場合は致し方ありませんが、基本的にはパソコン・スマホに本来内蔵されているフォントを使用するようにしましょう。

ポイント3：複数の文字要素はレイアウトを工夫する

文字ルールはサイトの統一感を表すのに効果的ですが、ランディングページは場合によって、1コンテンツ内に複数の文字要素を入れる必要があります。そんな時にはレイアウトを工夫して収まりを良くしましょう。詳しくご説明します。

文字のブロック化

サイズやフォント、カラーなどが異なる文字を同一のコンテンツ内で使いたい場合には、囲んで1つのかたまりとして独立させると違和感なくまとまります。ユーザーにとっても、『このかたまりにはこの情報が集められている』ことが一目瞭然となり、見やすさも向上します。

また、ブロック化してパッケージのように収めれば見栄えも改善できます。ただし、フォントやサイズなどが違っても、ベースラインは揃えるのが統一感を出すための鉄則です。

正転と反転を組み合わせる

正転とは今ご覧いただいている状態の、下地に黒色文字が載った通常の見せ方です。

反転とはバックが黒地で文字が白抜きとなるようなデザインをいいます。文字の大きさが異なるコピーが前後したり、文字数の多いコンテンツが続いて見出しが目立たなくなる場合などには、このような正転と反転を上手に組み合わせることで目先に変化をもたらし、ユーザーを飽きさせないようにする工夫も必要です。

ポイント4：画像フォントとデバイスフォントを組み合わせる

ランディングページでは画像フォントとデバイスフォントを組み合わせて文字デザインを施していきます。画像フォントは画像ファイル形式で作成するもので、細やかな装飾・デザインの表現が可能です。

一方のデバイスフォントは、今こうして文章を綴っている部分のような通常の文字形式用のフォントをいいます。商品説明文などの本文はデバイスフォントで十分ですが、キャッチコピーや見出しなど、デザインが必要な文字については画像フォントを使用して見た目のクオリティや視認性を上げるのがベストです。

ポイント5：写真・イラストなどと組み合わせる

ランディングページは広告サイトです。商材の具体的な情報はもちろんですが、写真やイラストで表現するイメージがユーザーの心理を動かすケースが少なくありません。

文章のデザインだけでなく、写真やイラストなどの組み合わせも重要です。

まとめ：神は細部に宿る

今回はランディングページで使用する文字デザインについて留意することをご紹介してきました。お役に立ちましたか？一口に文字デザインと言っても、おしゃれで格好良ければいいというものではなく、ユーザー目線に立った文字デザインが重要です。

神は細部に宿るなどと言われますが、パッと見では差がわからないような小さな工夫やこだわりだとしても、積もりに積もれば全体の品質の向上を大きく左右する要素となるのです。ぜひユーザーの読みやすさを最優先にした文字デザインやレイアウトを心がけながらWeb制作を行ってくださいね。

WEBコンサルタントのご紹介

弊社は、上場企業も含め300社以上のランディングページ制作に携わってきました。
ランディングページは、企画構成が重要で、これを怠ると思うような結果は出ません。
我々は数多くの制作実績から蓄積された経験と企画構成力で商材に合わせた売れるためのランディングページを提案できますので、お気軽にご相談ください！

ZERO式ランディングページ制作はこちら