公開日:2021/02/22タイポグラフィとは、文章を読みやすく見せる方法、あるいは文字や単語をデザインの一部として魅せる方法です。いえこれだけだと、なんのことかいまいちわかりませんよね。そこでこの記事では、タイポグラフィの概要おすすめのタイポグラフィの手法タイポグラフィが優れた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つご紹介します。notenoteは、ユーザーが漫画や文章などを投稿できるWebアプリケーションです。36px(フォントサイズの2倍)と、ちょうど良い文字の大きさとゆったりとした行間でできており、ストレスなく読むことができます。noteのコンテンツ幅は620px。横幅が短いので、文章を読む際の視線の動きが少なくてすみます。ユーザーが多いTwitterも横幅が近い数字です。文章を読むのにストレスを感じにくい幅がこのくらいという表れでしょう。JR東日本のコーポレートサイトは、ほとんどのリンクが緑文字、あるいは緑地で統一されています(トップの運行情報を除く)。コーポレートサイトには、タイポグラフィに関して2つの特徴があります。1つ目の特徴は、明朝体と縦書きで信頼感を出している点。建物の建築には莫大なお金がかかるもの。信頼できない会社には頼みたくないですよね。その不安感を、明朝体と縦書きで解消しています。一方で基本的にはゴシック体を用いることで、Webサイトの雰囲気が重くなりすぎることを防いでいるのもポイントです。2つ目の特徴は、背景に太文字の英語を入れることで、ダイナミックさも出している点。この英単語によって、信頼感と若々しさが両立しています。デザインにタイポグラフィをうまく取り入れた良い例でしょう。株式会社GOPR・広告・マーケティングを行なっている株式会社GO。株式会社GOコーポレートサイトのメインビジュアルはキャッチコピーのみでできており、画像が使われていません。それによってキャッチコピーが否応無しに目に入る作りになっています。「GO」の「O」が、まるでペンで書いたようにアニメーションで書かれるのもポイント。デザインそのものはシンプルでありつつ、アニメーションでインパクトを与えることに成功しています。横幅いっぱいに敷き詰められた、人の名前イベント情報1枚の絵画で構成されています。芸術関連のイベントとなると、複数枚の絵画を一度にまとめて、あるいはスライドで表示するのが一般的かもしれません。それでは、絵画1枚ごとのインパクトはどうしても薄まります。一方でこちらのWebサイトは参加者の名前を敷き詰めることで、絵画1枚の魅力をそのままに、多くの人の作品が見られる美術展であることを的確に伝えています。タイポグラフィを学べる書籍やサイト3選ここでは、タイポグラフィを学べる書籍やサイトを3つご紹介します。-プロに学ぶ、一生枯れない永久不滅テクニック-[デザインラボ]題名の通り、タイポグラフィの基礎をまとめた本です。丁寧な解説と具体例つきで、読み応えがあります。デザインタイポグラフィを含む、デザインの様々な要素をまとめた本です。難解で1回読んだだけではよくわからないかもしれないので、繰り返し読むことをおすすめします。大企業のWebサイトや大手Webサービス大企業のWebサイトや大手Webサービスは、多くの人に見られることを考慮しているので、勉強になる可能性が高いです。前述のJR東日本公式サイトも、その理由で選出しました。デザインと聞くと独創性が大事と思われがちですが、まずユーザーに適切に情報を提供するのが重要です。その意味で型や定石として、これらWebサイトやWebサービスを研究するのがおすすめです。タイポグラフィはユーザーへの思いやりこの記事では、まず以下の内容をお伝えしてきました。次にタイポグラフィのおすすめの技法や、参考になる書籍・サイトをご紹介しました。タイポグラフィを工夫することで、Webサイトの文章はグッと読みやすくなります。自分が知っている大企業のWebサイトを見て、文字サイズや行間を確認してみましょう。参考になることが何かあるはずです。タイポグラフィはユーザーへの思いやりです。ユーザーにストレスを与えず読みやすくするか、伝えたい情報をいかに伝えるか。思いやりとおもてなしの心を持って、タイポグラフィを再考してみてはいかがでしょうか。