Webサイトにおけるタイポグラフィの重要性

タイポグラフィとは

デザインにおけるタイポグラフィは、以下の2つに分けられます。

• 文章を読みやすく見せる方法
• 文字そのものを、デザインの一部として魅せる方法

以下、それぞれを詳しく解説します。

文章を読みやすく見せる方法

この意味でのタイポグラフィは、フォントの種類、文字の大きさや行間などを調整し、文章を読みやすくすることを指します。日本語で言うと文字組が近いでしょうか。この意味でのタイポグラフィは、Webサイトにおける全ての文字情報において意識する必要があります。

文字そのものを、デザインの一部として魅せる方法

タイポグラフィのもう1つの意味としては、文字をデザインの一部として魅せる方法が挙げられます。Webサイトで言えば、主にメインビジュアルで使われるキャッチコピーなどは、こちらのタイポグラフィも意識して作られています。

またWebサイトに限らずに言えば、会社やアニメなどのロゴにもタイポグラフィが使われています。例えば『ドラえもん』のロゴは、キャラクターとの共通項として「ド」の濁点をドラえもんの目に、「え」の点を鈴にしています。

Webサイトでタイポグラフィがなぜ重要なのか

Webサイトにおいて、タイポグラフィは重要な要素の一つです。なぜなら、現状Webサイトはほとんどが文字でできているため。Webサイトには画像や動画、絵なども使われてはいます。しかしそれらで興味を引いたとしても、ユーザーは結局は文字情報を見るでしょう。

例えばレストランのホームページで美味しそうな料理に注目したとしても、値段やレストランの営業時間を知るためには、文字を読む必要があります。

このような場合に文字が読みにくいと、ユーザーに負担がかかってしまいます。極端な例ですが、目を凝らさないほど文字が小さかったり文字の色が一文字ずつ変わっていたりしたら、しっかり読む前にユーザーは離脱してしまうでしょう。適切な情報をユーザーに届けるために、タイポグラフィを意識する必要があるのです。

おすすめのタイポグラフィの手法5つ

ここでは、ユーザーの興味を引く、あるいは読みやすくする手法を5つご紹介します。

デザインの4原則に則る

まず最も重要なのが、デザインの4原則を利用すること。タイポグラフィもデザインの1種なので、デザインの4原則も当てはまります。デザインの4原則とは、以下4つの基本的なポイントのことです。

• 近接
• 整列
• 反復
• コントラスト

以下、それぞれを解説します。

近接

近接とは、要素同士の関連性に基づいてレイアウトを整えることです。関連性の高い要素は近づける、逆に低い情報は遠ざけることで情報にまとまりが生まれ、ユーザーが内容を理解しやすくなります。

例として、レストランのメニューを想像してみてください。料理の写真と名前の間がどこも等間隔で並んでいたら、どの料理がどんな名前なのか、わかりませんよね。

しかしその間隔を変える、つまりハンバーグの写真とテキストの余白を詰めて、逆にハンバーグのテキストとステーキの写真の間隔は開ければ、ユーザーが情報を理解しやすくなります。

整列

タイポグラフィにおける整列とは、簡単に言えば行を揃えること。主な行の揃え方として、以下の3つがあります。

• 左ぞろえ
• 中央ぞろえ
• 右ぞろえ

日本では、横書きのほとんどは左ぞろえで書かれています。一方で中央ぞろえや右ぞろえは、見出しやコンセプトなど目立たせたい部分で使われます。この点については、後述の「コントラスト」もご参照ください。

反復

反復とは、同じ方法や並べ方を繰り返すこと。レイアウトや色を反復させることで、ユーザーが考える手間が減ります。例えば「リンクテキストは青色にする」というルールに則りデザインすれば、Webページをざっと見ただけでどこがクリックできるか、ユーザーが理解できます。

コントラスト

コントラストとは、ある部分のテイストを、他の部分と変えることです。コントラストによって、狙った部分にユーザーの注意を引くことができます。例えば黒字の文章の中に赤字の単語を入れれば、ユーザーはまずその赤字の単語を見るようになるでしょう。

Webサイトのコンセプトに合わせる

多くの場合、Webサイトには「賑やか」、「スタイリッシュ」などといったコンセプトがあります。コーポレートサイトやレストランのホームページなら、その会社やレストランの雰囲気の再現が求められるでしょう。そのコンセプトにあったタイポグラフィを考えるのが重要です。例えば和風レストランのWebサイトなら、和のイメージがある明朝体を使うのが一般的です。

コンセプトに合ったタイポグラフィがわからなければ、競合他社のサイトや、おしゃれなWebサイトがまとめられたギャラリーサイトなどを使うのがおすすめです。

例えばギャラリーサイト「SANKOU!」なら、「爽やか」「ポップ」といった雰囲気でWebサイトを検索できます。いくつかWebサイトをピックアップして、「なぜこれらのサイトは爽やかだと感じるのか」などと考えてみるのがいいでしょう。

フォントは3種類だけ使う

世界には、何百種類ものフォントがあります。とはいえ、フォントを何種類も使うのは逆効果。それには2つの理由があります。

1つ目の理由は、使いすぎるとユーザーが困惑するから。色を何十色も使うと印象がぼやけてしまうように、フォントも何種類も使ってしまうと、どこが重要な要素かわからなくなってしまいます。

2つ目の理由は、Webサイトの表示が遅くなってしまう可能性があるため。Webサイトでフォントを表示させる方法の1つとして、Webフォントがあります。別のサーバーからフォントのデータを送ってもらうことで、どのOS、ブラウザから見ても見た目を同じにすることができるのです。

しかし画像と同じように、Webフォントも使いすぎると重くなってしまいます。おしゃれにしようとしてWebサイトが見れなくなってしまっては本末転倒。適切な数、具体的には1つのWebサイトにつき3種類ぐらいまでのフォントを使うのがおすすめです。

適切なフォントサイズ、行間を使う

タイポグラフィの概要で申し上げたように、適切なフォントサイズ、行間を使うことで文章はグッと読みやすくなります。

一般的には、フォントサイズは16px以上、行間はフォントサイズの1.5倍ぐらいが良い、と言われています。とはいえこの数字は絶対ではありません。同じターゲットユーザーが使いそうなWebサイトを参考にして、適切な大きさ、行間の広さを判断するといいでしょう。

例えば新卒向け採用サイトをデザインするなら、同じ新卒採用サイトで使われているフォントサイズ、行間を調査するのがおすすめです。

基本的な文字色は、#000000以外の黒にする

皆さんもご存知の通り、Webサイトの上の多くの文字は黒で書かれています。そのため皆さんがタイポグラフィを考える際も、黒を基本に考えるのがおすすめです。

しかしここで注意があります。それは、#000000以外の黒を設定すること。#000000は自然界にはない色であり、見るひとに負担を与えてしまいます。そのため#222222や#333333など、「黒っぽくない黒」を使うのがおすすめです。

画像と文字をうまく組み合わせる

画像と文字の組み合わせは、特にメインビジュアルにおいてよく用いられる手法です。例えば画像を背景にして、その上に文字を置く、などですね。

一口に組み合わせると言っても、

• 被写体に沿うように文字を配置する
• 画像を文字型に切りぬく
• 文字を背景画像と切り抜いた画像(人物画像など)で挟む

といった手法があります。

可読性をあげる

画像の上に文字をそのまま置くと、文字が読みにくくなる場合があります。そのような時には、

• 画像全体を暗くする
• 文字に影をつける

などするのが大事です。

タイポグラフィが優れたWebサイト5選

ここでは、タイポグラフィが優れたWebサイトを3つご紹介します。

note

noteは、ユーザーが漫画や文章などを投稿できるWebアプリケーションです。記事本文が

• フォントサイズ 18px
• 行間 36px(フォントサイズの2倍)

と、ちょうど良い文字の大きさとゆったりとした行間でできており、ストレスなく読むことができます。

またnoteのコンテンツ幅は620px。横幅が短いので、文章を読む際の視線の動きが少なくてすみます。ユーザーが多いTwitterも横幅が近い数字です。文章を読むのにストレスを感じにくい幅がこのくらいという表れでしょう。

JR東日本：東日本旅客鉄道株式会社

JR東日本のコーポレートサイトは、ほとんどのリンクが緑文字、あるいは緑地で統一されています（トップの運行情報を除く）。そのため初めて見たときでも、どこをクリックできるのがわかりやすくなっています。

西野建設工業株式会社

大阪市にある建設会社、西野建設工業株式会社のコーポレートサイトには、タイポグラフィに関して2つの特徴があります。

1つ目の特徴は、明朝体と縦書きで信頼感を出している点。建物の建築には莫大なお金がかかるもの。信頼できない会社には頼みたくないですよね。その不安感を、明朝体と縦書きで解消しています。 一方で基本的にはゴシック体を用いることで、Webサイトの雰囲気が重くなりすぎることを防いでいるのもポイントです。

2つ目の特徴は、背景に太文字の英語を入れることで、ダイナミックさも出している点。この英単語によって、信頼感と若々しさが両立しています。

デザインにタイポグラフィをうまく取り入れた良い例でしょう。

株式会社GO

PR・広告・マーケティングを行なっている株式会社GO。株式会社GOコーポレートサイトのメインビジュアルはキャッチコピーのみでできており、画像が使われていません。それによってキャッチコピーが否応無しに目に入る作りになっています。

また「GO」の「O」が、まるでペンで書いたようにアニメーションで書かれるのもポイント。デザインそのものはシンプルでありつつ、アニメーションでインパクトを与えることに成功しています。

岡山芸術交流 OKAYAMA ART SUMMIT 2019

OKAYAMA ART SUMMIT 2019のメインビジュアルは、

• 横幅いっぱいに敷き詰められた、人の名前
• イベント情報
• 1枚の絵画

で構成されています。

芸術関連のイベントとなると、複数枚の絵画を一度にまとめて、あるいはスライドで表示するのが一般的かもしれません。しかしそれでは、絵画1枚ごとのインパクトはどうしても薄まります。

一方でこちらのWebサイトは参加者の名前を敷き詰めることで、絵画1枚の魅力をそのままに、多くの人の作品が見られる美術展であることを的確に伝えています。

タイポグラフィを学べる書籍やサイト3選

ここでは、タイポグラフィを学べる書籍やサイトを3つご紹介します。

タイポグラフィの基本ルール -プロに学ぶ、一生枯れない永久不滅テクニック-[デザインラボ]

題名の通り、タイポグラフィの基礎をまとめた本です。丁寧な解説と具体例つきで、読み応えがあります。

なるほどデザイン

タイポグラフィを含む、デザインの様々な要素をまとめた本です。難解で1回読んだだけではよくわからないかもしれないので、繰り返し読むことをおすすめします。

大企業のWebサイトや大手Webサービス

大企業のWebサイトや大手Webサービスは、多くの人に見られることを考慮しているので、勉強になる可能性が高いです。前述のJR東日本公式サイトも、その理由で選出しました。

デザインと聞くと独創性が大事と思われがちですが、まずユーザーに適切に情報を提供するのが重要です。その意味で型や定石として、これらWebサイトやWebサービスを研究するのがおすすめです。

タイポグラフィはユーザーへの思いやり

この記事では、まず以下の内容をお伝えしてきました。

• タイポグラフィとは、文章を読みやすくする工夫、あるいは文字をデザインとして魅せる方法のこと
• Webサイトのほとんどは文字情報でできているため、タイポグラフィは重要

次にタイポグラフィのおすすめの技法や、参考になる書籍・サイトをご紹介しました。タイポグラフィを工夫することで、Webサイトの文章はグッと読みやすくなります。まずは自分が知っている大企業のWebサイトを見て、文字サイズや行間を確認してみましょう。きっと、参考になることが何かあるはずです。

タイポグラフィはユーザーへの思いやりです。いかにユーザーにストレスを与えず読みやすくするか、伝えたい情報をいかに伝えるか。思いやりとおもてなしの心を持って、タイポグラフィを再考してみてはいかがでしょうか。

WEBでのお問い合わせはこちら