コラム

2022年7月4日

デザイナー TNデザイン部

印象がこんなに変わる！ WEBデザインにおけるフォントの選び方・使い方

WEBサイト制作において、「情報を、どれだけ意図したイメージで正しく伝えられるか」は、重要な課題です。コンセプトに沿って情報を伝えつつ、分かりやすく、読みやすいデザインを実現にするには、適したフォントを使用することがとても大切です。また、適切なフォントを選んだとしても、大きさや太さをどうするかによって印象は大きく変わるため、それぞれのフォントの印象を知ったうえでデザインすることが求められます。

また、近年はタイポグラフィを使った、インパクトのあるデザインのWEBサイトを多く見かけます。コンセプトや企業の持つイメージなどを表現するにあたり、適したフォントを選び、使うことの重要性はますます高まっていると言えるでしょう。

このコラムでは、フォントは、種類や使い方によってどのように印象が変わるのか、どう選び、どう使えばいいかを、実例を示しながらご紹介したいと思います。
なお、欧文フォントも魅力的なものがたくさんありますが、今回は和文フォントに絞らせていただきます。

フォントの種類について

初めに、フォントの種類についておさらいです。
和文書体は「ゴシック体」「明朝体」のほか、「行書体」などの筆書体や数多くのデザイン書体が存在しますが、ここでは、基本となる「ゴシック体」「明朝体」に絞ってお話しをしたいと思います。

◼️ゴシック体の特徴

縦線と横線がほぼ同じ太さに見えるようなデザインが特徴の書体で、もともとは見出しなど目立たせたい文字を強調することを目的として作られた書体です。線の太さが均一のため、遠くから見ても分かりやすく可読性が高いという性質を持ちます。しかし、長い文章の場合、太い字体を使用してしまうと全体的に黒の割合が高くなるため可読性が下がり、読み手に負担がかかってしまうため、行間や文字間を多く取るなど余白とのバランスが重要となります。

◼️明朝体の特徴

縦線が太く、横線が細いことが特徴の書体で、画数が多い漢字を小さいサイズで使用しても、黒くつぶれにくいという性質を持ちます。また、縦書きで使用した際には、太い縦線が視線を導いてくれるといった効果もあります。線に強弱があるため文字の形を判別しやすく、長い文章を読んでも疲れを感じにくいという特徴があります。

フォントが与える印象について

フォントには「力強い」「優しい」「真面目」「カジュアル」など、それぞれ個性があります。フォントを選ぶ際には、その個性がコンセプトに合っているかなど、デザインの目的に適しているかを考える必要があります。しかし、同じフォントでも、太さやサイズなどを変えることによって、印象は大きく変化します。
次の項目では、WEBサイトのトップページに使われているフォントの印象が、デザインによってどのように変わるかを見ていきたいと思います。

WEBサイトの実例からフォントによる印象の違いと使い方を解説

◼️Apple Inc. Apple Watchページ – 大きく太いゴシック体を使用してユーザーに「力強い」インパクトを与えるデザイン

https://www.apple.com/jp/apple-watch-series-7/

まずは、みなさんご存じApple社のWEBサイトです。実店舗や製品のコンセプトと同様、シンプルに構成されたページに、太いゴシック体を大きく配置しています。目を引く大きなタイトルとコントラストの強い配色によって、言葉がダイレクトに伝わると同時に、見た人に大きなインパクトや「力強い」「自信がある」といった印象を与えます。

◼️スイコウ 東京支店 – 細いゴシック体を使用して「誠実」「丁寧」さが伝わるデザイン

https://suikou-tokyo.jp/

空調･給排水衛生設備工事会社、株式会社スイコウ（東京支店）のWEBサイト。細いゴシック体と清潔感のある配色により、タイトルにもある「誠実」「丁寧」「繊細」「安心」という印象を受けます。書体は細いものを使用していますが、大きく配置することにより、静かに強い意志が感じられます。

◼️西宮回生病院 – 丸ゴシック体を使用することで「優しさ」「親しみやすさ」を表現したデザイン

https://kaiseihp.jp/

整形外科とリハビリテーションを軸とした西宮回生病院のWEBサイト。丸ゴシック体を使用することによって柔らかい雰囲気になり、フォントのサイズを控えめにすることで優しく語りかけられているような印象になります。また、少し太い字体にすることより「親しみやすさ」や「安心感」といった印象も与えています。

◼️IPROS RECRUIT – 明朝体を大きく配置し、赤のラインを引くことで「野心」を表現したデザイン

https://recruit.ipros.jp/

BtoBデータベースサイトを運営する株式会社イプロスの採用サイト。「ビジネス戦国時代」というコンセプトに沿ったイラストに合わせ、古典的な印象を持ち合わせた明朝体を使用しています。明朝体は一般的には「繊細」な印象と言われていますが、太めの書体を選択し、フォントの下に赤いラインを引くことで「野心」「情熱」「闘志」などの「力強い」印象に。タイトルの「野心」「変革」以外の文字を長体（横を縮めて縦長に変形させた文字のこと）にすることにより、自然と一番伝えたい文字に目が行くデザインになっています。

◼️里山十帖 THE HOUSE – 明朝体を小さく配置することで「特別感」を表現したデザイン

https://satoyama-jujo.com/thehouse/

一日一組限定の宿泊施設、里山十帖 THE HOUSEのWEBサイト。古民家から感じる「文化・歴史」「伝統的な雰囲気」などのイメージに合った明朝体を使用し、細く小さな書体にすることで、まるで「内緒で教えるよ」と言われているような「特別感」や「静けさ」が感じられます。背景の画像と文字のコントラストがそれほどないことが、「隠れ家」のイメージを一層引き立たせています。可読性が高くないこともあまり気になりません。

ジャンプ率を意識して視覚効果をうまく利用しよう

タイトルにあるジャンプ率とは、「大きい文字と小さい文字のフォントサイズの比率」のことです。また、文字以外の「画像のサイズに大小の差をつける場合」にも、ジャンプ率という言葉を使います。
ジャンプ率を高くするか、低くするかでサイトの印象は変わるため、フォントを決めることと同様、ジャンプ率をどう活用するかは、サイトのデザインを考えるにあたり重要な項目のひとつとなります。

まず、ジャンプ率が高いデザインはメリハリが生まれ、「躍動感」「エネルギッシュ」などの印象をつくり出します。また、大きい文字に視線が誘導され、印象に残りやすい効果があります。

ジャンプ率が低いデザインは落ち着いた雰囲気となり、「高級感」「信頼感」といった印象となります。ジャンプ率が高いデザインと比較するとインパクトはありませんが、流れるように文字を読めるため、じっくり文章を読んでほしい場合などに適しています。

フォントの種類とジャンプ率の組み合わせで、どのような印象になるかを見ていきたいと思います。

◼️CRISP SALAD WORKS – ジャンプ率が高く、大きく配置されたゴシック体によって「想いを伝えたい」という強い意志を感じるデザイン

https://corp.crisp.co.jp/

カスタムサラダ専門のレストラン、CRISP SALAD WORKSのWEBサイト。ファーストビューでは画像表示をせずに、画面いっぱいに配置されたゴシック体からインパクトを受けるとともに、「伝えたい」という強い意志が感じられます。他ページも、シンプルな画面構成で余白をたっぷりと使い、ジャンプ率を高くすることで、判読性に優れたデザインとなっています。

◼️森ノ宮ピロティホール – ジャンプ率は高いが、明朝体を使うことでインパクトがありつつも上品さを感じるデザイン

https://piloti-hall.jp/about/

大阪市の劇場、森ノ宮ピロティホールのWEBサイト。ジャンプ率を高くすることで、インパクトのあるレイアウトとなっていますが、柔らかい印象の明朝体を使用することにより、主張が強過ぎず上品な印象を受けます。目線が大きい文字から小さい文字へ自然と移るよう、情報の優先順位通りスムーズな視線誘導が行われたデザインとなっています。

◼️つなぎ美術館 – ジャンプ率が低めで、細いゴシック体が使われていることにより、落ち着いた印象を受けるデザイン

https://www.tsunagi-art.jp/about/outline.php

熊本県の美術館、つなぎ美術館のWEBサイト。文字のジャンプ率が低いデザインは視線を誘導する効果が弱く、分かりづらくなる場合がありますが、このサイトは、線で区切り、情報をかたまりとして捉えることで、これを解消しています。また、余白を取って枠のサイズを調整することでジャンプ率が生まれ、より見やすいレイアウトとなっています。細いゴシック体でまとめられ、落ち着いた、洗練された印象を受けるサイトです。

最後に

どのフォントを選び、使うかは、「どのような目的や意図をもって情報を伝えたいか」を考えることが、まず重要です。「好きなフォントがあるから、それを使いたい」という場合もあるかもしれません。しかし、その場合も、やはりサイズや書体の太さ、（今回は触れませんでしたが）配色などを適切に選び、使用しなければ、自分の意図とは違う伝わり方をしてしまうかもしれません。
フォントは奥の深い世界です。新しいフォントも次々生まれ、トレンドも変わっていきます。デザインをする過程で新たな発見もたくさんあるので、いろいろな種類のフォントを使ってみて、その魅力を楽しみましょう。