フォントはランディングページ全体の印象を決める重要な要素

ランディングページにおいて、フォントはページ全体の印象を決める大変重要な要素です。

「字はその人の性格を表す」とはよく言ったもので、もし同じ言葉が書かれていたとしても、どのフォントが使われているかで、受ける印象が大きく変わってきます。

フォントも文字ではありますが、形状をもった一つのデザイン要素であり、特にこだわりもなく軽く考えてしまうと、最終的にとても痛い目にあってしまいます。

たとえば、海外旅行にいくと、駅の券売機で日本語表示可能なものがありますが、このような外国のフォントにひどく違和感を感じませんでしょうか？

どこか機械的で、洗練されていない違和感を感じることかと思います。なぜなら、普段私達が日本の券売機で見慣れないフォントだからです。

このように、フォントひとつでそれを見た人の印象は大きく異なり、ことランディングページになると、その印象によっては成約率に多大な影響を及ぼす可能性もあります。

どのような手順でLPの適切なフォントを選んでいけばいいのか

そこで、本記事では、初めてランディングページを制作させるという方でも、どのような手順を踏んで適切なフォントを選んでいけばいいのか、私が日々デザイン制作を行いながら考えている3つのポイントに絞って解説してみたいと思います。

【ポイント①】 明朝体とゴシック体に大別し、それぞれの代表的な種類を知る

日本で流通しているフォントには、無料・有料問わず、数え切れないほどの種類があります。

ただ、いきなりそれらのフォントをすべて把握した上で、自社の商材にマッチした適切なフォントをひとつ選び出そうというような無茶なことを考える必要はありません。そのようなことをしていたら、フォント選びだけで何ヶ月もかかってしまいます。

まず、押さえるべきポイントは、フォントの種類を「明朝体」と「ゴシック体」に大別し、それぞれで用いられる一般的なフォントを把握することです。

フォントのジャンル 代表的なフォントの種類

正直に言ってしまえば、ランディングページデザインの現場においても、使用されるフォントの種類はそこまで多くはありません。

なぜなら、フォントの種類を多くすればするほど、統一感が失われ、ごちゃごちゃとして見えづらくなってしまうことや、ランディングページではパソコンやスマホの画面という小さな領域の中に情報を詰め込まなければならないため、基本的には一般人が普段目にしている読みやすいフォントが選ばれる傾向にあるからです。

そのため、デザイナーにランディングページの制作を依頼するときは、上記の中からフォントを指定して作成してもらえば、そこまで最終的な作品のイメージが異なるということはないでしょう。

上記で紹介したのは、いわばフォントの日本代表選手のようなもので、街を歩けば至るところにこれらのフォントが使用されています。無難な選択といえばそれまでですが、どのようなテーマの素材でも、見やすく分かりやすいページを作れる安定感が魅力です。

【ポイント②】 明朝体とゴシック体の特徴の違い、受ける印象の違いを把握する

明朝体とゴシック体の代表的なフォントを把握したら、次に知るべきことはそれぞれのフォントの特徴の違いと、ユーザーに与える印象を押さえることです。

1.明朝体の特徴について

明朝体は、横線が細く、縦線を太くした書体の総称です。最大の特徴としては、各線に筆意を表す「うろこ」や「はね」「はらい」などが表現されていることです。

明朝体は日本人にとって普段から馴染みのある書体で、身の回りでも書籍や雑誌、新聞など様々な場面で使用されています。

明朝体は洗練され、落ち着いた印象を持っているため、日本的な演出や信頼感・安心感を与えたいケースによく使われることが多い書体です。また、使う言葉によっては、切実さや清潔感を表現するのにも明朝体は適しています。

ランディングページ制作において、明朝体はよく女性関連の美容品や、真面目で誠実な印象を示したいセミナー募集などのテーマで使用することが多いです。またストーリー風に、ドラマチックな表現をしたい場合にも使用します。

2.ゴシック体の特徴について

ゴシック体は、すべての線と点画がほぼ同じにないように設計された書体の総称です。基本的に直線的な形状であるため、大きくしても小さくしても一定の可読性を保つことができるという特徴があります。

身の回りを見ると、ゴシック体は駅のポスターや街頭の看板やチラシなど、高い視認性が求められるデザインでよく使用されています。ゴシック体は並べたときに、1つの塊のような印象を与えることから、雑誌の見出しやロゴなどにも活用されています。

ランディングページ制作においてゴシック体は、たとえば大人向けの英会話教室だったり、ビジネスのフラチャイズの応募ページといった、真面目ではあるが、あまり敷居の高さを感じさせずに、まずは気軽に参加してほしいといった雰囲気を作り出す際に使うことが多いです。

このように、明朝体とゴシック体では、それぞれ特徴や受ける印象が異なるため、自身の商材に合わせてどのようなイメージをユーザーに与えたいのか、じっくりと考えてからフォントを選択するようにしましょう。

特に、ファーストビューの領域に明朝体とゴシック体のどちらを用いるのかについては、ユーザーの第一印象を決定づける項目ですので、適当に決めてしまうようなことはなるべく避けましょう。

扱う商材に対して、ある程度業界のトーンアンドマナーや、空気感を把握しているデザイナーであれば、的確なフォントを選んでくれますが、そうでない場合、全く狙った印象と異なるページができてしまいます。

【ポイント③】 ①、②を踏まえた上で、アクセントとして特殊なフォントを検討する

もちろん、フォントは明朝体とゴシック体だけではありません。外国のアルファベットのフォント(欧文)も合わせると、他にも様々な種類のものがあります。

ですが、日常で日本語を扱う私たちにとって、まず押さえるべきは明朝体とゴシック体です。その上で、アクセントとして他のフォントを効果的に用いて、ページ全体にメリハリを出していくようにしましょう。

以下では、明朝体とゴシック体の他に、随所でアクセントとして使用するのがおすすめのフォントを紹介します。

(1)丸ゴシック

丸ゴシックは、ゴシック体の角を丸めた書体の総称です。曲線的で、優しい雰囲気を持っているため、温かさや親近感などを演出する際によく使用されるフォントです。

例えば、絵本や子供向けテレビ番組など、幼さや可愛さを表現するのにも活躍しています。また言葉の印象を和らげる効果もあるので、主張しながらも物腰は柔らかく伝えるのにも適しています。

具体的なランディングページ制作の現場では、優しくて頼りになる先生がいるという印象を与えるために整骨院のページで使用したケースや、女性向けの求人ページなどで用いたケースなどがあります。

ただ、全ての文字を丸ゴシックにすると、メリハリがなく単調になってしまうため、タイトル部分や見出しなどで目を引かせたい部分に使用するようにしましょう。

(2)手書き文字

手書き文字は、最近カフェなどのメニューで流行りのフォントであり、また女性的な印象を直接的に与える効果があるため、美容品などによく用いられます。

例えば、ボタニカルという商品名のオーガニックシャンプーがありますが、これは手書きの印象をうまく活かしたデザインのボトルになっています。

手書き文字は、他の無機質なフォントと異なり、人の温かさを感じるため、アクセントとして使えば目を引くことができます。

ただ、ランディングページ全体を手書き文字にしてしまうと、非常に見えづらくなってしまうので気をつけましょう。特にレスポンシブ対応などの場合、手書き文字はスマホの画面においてサイズによっては非常に読みづらく、何が書かれているのか判読できない可能性もあります。

また、手書き文字は基本的に細いウェイトであるため、タイトル文字などに大きく使うと、やせ細った貧弱な印象にもなってしまいますので注意しましょう。

そのため、手書き文字に関しては、ファーストビューの領域にアクセントとして用いる程度に留めておくのが無難といえます。

(3)その他特殊フォント　

その他にも、個性豊かなフォントは沢山存在します。オリジナリティー溢れるランディングページを制作したいのであれば、モリサワやAXISなどの有料フォントを購入し、色々と試してみるのもおすすめです。

例えば、サンセリフ(モリサワ)は、ゴシック体の持っているポップ感と力強さをより助長してくれますし、フォルムの可愛げがあるため、親近感も湧いてきます。

また、こぶりな(モリサワ)については、アニメやイラスト風の素材との相性が抜群で、吹き出しなどと一緒に使用することで、コミカルな表現を行うことが可能です。

フォント選びで言葉の印象が180度変わってしまうことに気をつける

以上、ランディングページにおいてどのようにフォントを選択していけばいいのかについて解説をしてきました。

最後にもう一度そのポイントをまとめると

1.明朝体とゴシック体の代表的なフォントを知る
2.商材のテーマやコンセプト、与えたい印象に応じて使用するフォントの割合を決める
　(例)明朝:ゴシック=7:3といったように、割合を決めてメリハリを持たせて使用する
3.上記のフォントの割合をベースにして、アクセントで特殊なフォントの使用を検討する

もちろん、高いデザインセンスがあれば、このプロセスを無視して自分の感覚でフォントを選んでしまっても構いません。

ですが、ランディングページは、アートの世界ではなく、デザインの世界です。フォント選びひとつにしても、そこには明確な論理があり、根拠があります。適当に感覚で選んでしまうと、もし失敗したときになぜうまくいかなくなったのかわからなくなってしまう場合もあります。

どんなに立派で、素晴らしい言葉が書いていても、フォントでその印象は180度変わってしまいます。

フォントはランディングページの血液のようなものです。

自身で様々なフォントを調べたり、デザイナーに相談したりすることで、自身の商材に合った適切なフォントを選ぶようにしましょう。

本日のまとめ

というわけで、本日の話を1枚のカードにまとめました。

ランディングページ制作をより深く学びたいあなたへ

★無料配布している電子書籍

コネも人脈も実績もスキルも完全にゼロの状態からどのように年間100件&月商100万を安定的に維持できるWebデザイナーになるのかについて、必要な知識やスキルに加えて、私が辿ってきた具体的なプロセスと共に、約5万字の分量を費やして、徹底的に解説することに努めました。

片岡がどのような人間なのか知りたい方は、まずこのコンテンツからお読みいただければと思っています。

★片岡が運営するLP制作講座

・合計6時間半に及ぶランディングページ制作学習動画
・段階的・計画的に学習できる１ヵ月配信ステップメール
・自分のペースで学べる参加者限定サイト
・すぐに形にできるWordPressLPテンプレート
・参加者限定Facebookグループ
・講座受講者のみ参加できるオプション勉強会への無料参加権
・特典のセミナー映像30時間以上

といったコンテンツを収録している片岡LP作成メソッドの集大成です。

すでに250名以上が参加しており、この講座をきっかけにLP制作を自分の武器とすることができた参加者の方が数多くいます。

興味がありましたらぜひ募集ページだけでもご覧ください。