伝わる！デザインのセオリー 読みやすい文字組編

とかくデザインは「センス」が必要だと思われがちですが、デザインのセオリーを押さえておくことで誰でもデザイン力を向上・磨くことは可能です。このコラムではわかりやすい例を見ながら、基本的なデザインセオリーを解説します。

今回はデザインに欠かせない「文字」について、その読みやすさや見やすさ、伝わりやすさを決めるポイントを紹介します。

はじめに

「文字」の持つ意味

写真やイラスト、色のない制作物はあっても、文字がないものはありません。Webサイトでも雑誌、パッケージはもちろん、最近では動画の中でもテロップが必須要素になっています。

文字は他のデザイン要素とは違い、より正確に素早くコミュニケーションを図るための「情報」なのです。

そのため、美しさや華やかさ、インパクトといったデザイン的な考え方に加えて「読みやすさ」を確保することが大切になるのです。

読みやすさとは

読者は積極的ではない

「読みやすい」というのは文字にしか使われない言葉です。もちろん文章や書かれている内容によっても「読みやすい」「読みにくい」ものはありますが、ここでは触れません。

まず前提として、読み手は積極的ではないことを覚えておきましょう。読みにくい状態でも頑張って読んでもらえる、とは思わないことです。可能な限り読みやすい状態に持っていくよう考えなければなりません。

では、読みやすさは何で決まるのでしょうか？例を挙げてみてみましょう。

読みやすさ＝見やすい＋わかりやすさ

上の例では、第一段階としてフォントや文字組みを変更しました。これが文字の「見やすさ」です。次の段階として色や形を工夫し「わかりやすさ」を追加しています。デザインにおける「読みやすさ」は、この2つの段階によって作られます。

ここからは、2つの段階の要素について、ひとつひとつ見ていくことにしましょう。

見やすさのセオリー

フォントによる見やすさ

フォントの選び方は、読みやすさに大きく影響を与えます。特に長い文章をレイアウトする際には、シンプルで古くから日本人にとって馴染みの深い印刷用の書体であるゴシック体、明朝体が見やすいでしょう。一般的に横組みの文章にはゴシック体、縦組みの文章には明朝体が向いています。

文字のサイズ

適正な文字のサイズは、使われる場所によって異なります。またその制作物がどこで、どのような距離で見るものなのかによっても違います。
どのような制作物でも基準になるのは「本文」です。タイトル部分は本文よりも大きく、補足部分は本文より小さくします

本文の基準は、3mm角の文字サイズ（約8.5pt）程度と考えると良いでしょう。離れて読む媒体や年齢層の高い人が読むものの場合はそれよりも大きく、若年層向けやスマホ用の媒体では小さく調整します。
どのような場合も、実際に使われるシチュエーションで、いくつかのサイズ違いを試して読みやすさをテストするようにしましょう。

行長と文字数

行長（ぎょうちょう）とは、1行の長さを示します。長さで表す場合と文字数で表す場合とがあります。
小説などの長文の場合は1行に40文字程度、ニュースや新聞の場合には12文字程度と、文章やその役割によって適正な行長は変わります。

一般的なビジネス文書の場合は、20～30字程度が読みやすいでしょう。行長が長くなれば視線の移動距離も長くなり、次の行への移動に迷ったり目が疲れてしまうこともあります。

長すぎる行長を短くする場合、段組みと呼ばれる方法を使います。Webサイトなどの場合は、段組みにできないので改行を多くしたり、行間を広めにする工夫が必要です。

余白

文字の周りに適切な余白があることが、見やすさにつながります。

余白には文字と文字との間にある「文字間」、行と行との間にできる「行間」、段と段との間の「段間」、そしてページの周囲に「マージン」があります。それぞれ単独で設定するものではなく、本文のサイズやフォントを決めてからそれに連動して決めていくようにします。

組み方向

横組み、縦組みのどちらを選んでも、それぞれに読みやすい文章は作れます。

ページものを作る場合は、開く方向によって本文の組み方向が決まります。左開きの場合は横組み、右開きの場合は縦組みです。
ただし、見出しや特別なコラムのページなどは組み方向を変えても、縦横が混在しても構いません。

Webやモバイルデバイス向けの製作物ではスクロールが基本になるので、横組みの方が自然でしょう。

注意したいのは、ビジネス文書等で数字や英語表記が多くなる場合です。アルファベットや数字は縦組みにすると読みづらくなってしまいます。

禁則処理

行頭に句読点や閉じ括弧、行末に開き括弧などが来ると読みづらくなります。こういったことを避けるために「禁則」と呼ばれる決まり事を作っておきます。

一般的なレイアウトソフトでは、自動的に禁則処理が行われることが多くユーザーが意識しない場合も多いのですが、どのように処理されているのかわかっていないと調整も難しくなります。まずは意識してみるところから始めてください。

わかりやすくする工夫

フォントの表現力

ここからは、見やすさに加える「わかりやすさ」について解説していきます。フォントの項目は先にもありましたが、実際にはフォントを見やすさだけでは選べません。作るものの内容に合った表現力を持ったフォントを選ぶ必要があるのです。

よくフォントは「声優」に例えられます。同じ文言を記述してもフォントによって声色が変わります。
与えたいイメージによってフォントを使い分けることで、より伝わりやすくわかりやすい製作物になります。

フォント表現については、このコラムの5回目でさらに詳しく掘り下げていきます。

編集とビジュアライゼーション

内容をわかりやすくするには、文字の読みやすさだけでは足りません。よりわかりやすい構造に編集し、効果的にビジュアル化したりビジュアルと組み合わせる必要があります。特に長い文章は単に文字を並べるだけでは伝わりません。

わかりやすくする工夫にはさまざまなものがありますが、ここでいくつか例を紹介しましょう。

メリハリ・対比

長い文章にアクセントを加えて内容をわかりやすくするのが、見出しや小見出しです。メリハリを出すには「対比」の構造を作ることが必要です。

「対比」には、明暗差やサイズの差、色彩差などさまざまなものがあります。文字の場合には特に太さと大きさで対比を作り出すと良いでしょう。

文字でメリハリを出すには、太さが重要です。文字の線の太さを「ウエイト」と呼びます。和文書体でもウエイトのバリエーションを持つものが増えています

文字の加工

文字をグラフィックのひとつとして捉え、伝えたいイメージに合った加工を加えることでより伝わりやすくなる場合もあります。加工を加えた分読みやすさが損なわれるため、短い文章で限られた場所に絞って使うようにしましょう。

配色

見やすさを考えた場合、文字には明度の差をはっきりとつけてやる必要があります。

しかし配色が人に与える印象は、とても直感的で印象に残るものです。また季節や楽しさなどの演出に色は欠かせません。文字の中に色を取り入れるのは、言葉とイメージを一体化させるために重要な手法のひとつです。

まとめ

「見やすさ」と「わかりやすさ」の両立

今回は「文字の読みやすさ」について解説してきました。ゴシック体や明朝体を使い、適切な余白を作って配置することで「見やすい」状態を作り出すことができます。

さらに編集やビジュアライゼーション、加工、配色といったデザインの要素を加えていくと、長い文章でも読み続けることができるメリハリが生まれたり、時間をかけて読み込まなくても内容が伝わりやすい「わかりやすい」状態に持っていくことができます。

書店に行けば雑誌や書籍の表紙など、読みやすい文字の見本がたくさんあります。そういったものを見て勉強することも大切です。

ぜひこの「見やすさ」と「わかりやすさ」の両立を目指して、読みやすい文字をデザインしてみてください。

株式会社TART DESIGN OFFICE代表
デザイナー，ライター
昭和女子大学環境デザイン学科非常勤講師
経団連事業本部セミナー講師

伊達千代（だて・ちよ）氏

メーカーのデザイン部、広告制作会社で広告・SP分野を中心にグラフィックデザインに携わる。2002年株式会社TART DESIGN OFFICE設立、デザインに加えて編集・執筆・大学や企業でのデザイン講習など活動の幅を広げる。2017年に任意団体「フォントかるた制作チーム」設立。近著は『デザインのルール、レイアウトのセオリー』『配色デザイン見本帳 配色の基礎と考え方が学べるガイドブック』『デザイン・ルールズ［新版］デザインを始める前に知っておきたいこと（共著）』（いずれもエムディエヌコーポレーション刊）。『文字のきほん』（グラフィック社刊）など。