伝わるデザイン

トップページ 伝えるとは 読みやすく 見やすく 見栄えよく 実践
伝えるとは

 

2

 

せっかく読みやすい書体を選んでも、文字の使い方によっては、非常に読みにくい文章になってしまうことがあります。日本語の文字だけだけが登場する資料ならば、さほど注意することはありませんが、アルファベットのみ、あるいは日本語とアルファベット(英語など)が混ざった資料を作る場合には、少々注意が必要です。ここでは、より具体的・実践的に、日本語書体と欧文書体の選び方と文字の使い方を紹介します。

 

英文には等幅フォントを使わない

欧文書体には、「等幅書体」「プロポーショナル書体」があります。等幅書体とは、下の例のように、すべての文字が同じ文字幅でデザインされている書体です。一方、プロポーショナル書体は、文字の形によって、文字の幅が異なります。欧文書体を使って読みやすい文を書くならば、プロポーショナル書体を使うのが鉄則です。

多くの英文書体は、プロポーショナル書体なので心配ありませんが、OCRBという書体やCourier Newという書体などは等幅書体です。これらの等幅書体で文を書くと、可読性が著しく低下します。余計なスペースが多く、文がぶつぶつに切れている印象になるからです。よほどの理由がない限り、等幅の英文書体は、避けましょう。

 

 

英文には和文フォントを使わない

等幅書体とほとんど同じ理由で、英文(英単語)に、日本語の書体を使うのは避けた方が良いです。いくつかの日本語書体のアルファベットは等幅書体です(例えばMSゴシック)。また、日本語フォントに含まれるアルファベットは、美しくなく、可読性も低いです。例外はありますが、原則、英文を日本語フォントで書かない方が賢明です。

下の例は、日本語の書体で、アルファベットを表示したものです。緑色の丸で示した部分にスペースが目立ちます。極端に言えば、「Yuma Takahashi」でなく「Y uma T akahash i」のように見えます。これでは、単語が認識しづらく、結果として、可読性や視認性が低下してしまいます。

このようなことを避けるため、英単語には、英語専用の書体で書きましょう! その効果は、Calibri やAdobe Garamond で書いた下の例を見れば一目瞭然です。

 

大文字の場合も同じです。日本語フォントを使うと、スカスカ、バラバラになり、あまりに不格好です。

 

文章でも同じです。英文を書く場合は、和文フォントの明朝体やゴシック体ではなく、欧文フォントを使ったほうが圧倒的に読みやすく、美しいです。英語は欧文フォントで!

文章

 

 

和欧混植の文章ではアルファベットの書体に注意

ちょっと忘れがちなのが、日本語の文中の英単語です。メイリオやヒラギノ角ゴ、小塚ゴシックなどならば、アルファベットも美しく作られていて、かつ、日本語との相性も良いようにデザインされているので問題ないのですが、上で述べたように日本語フォントで英単語を書くと可読性が下がる場合があります(特に、下の例のようにMSゴシックやMS明朝などのフォントで英単語を書いたとき)。このような場合は、設定がほんの少し面倒ですが、英単語の部分だけ個別に英語の書体に設定すべきです。デザイン的にも、英語は英文書体にした方がカッコいいです。もちろん、メイリオやヒラギノ角ゴなどでも、アルファベット部分を適切な欧文フォントにすることで、さらに美しく読みやすくなります。

日本語がゴシック体なら、その中の英単語はサンセリフ体のフォント(Segoe UI, Arial, Helvetica, Corbel etc.)、日本語が明朝体なら英単語はセリフ体のフォント(Times New Roman, Adobe Garamond etc.)を合わせるとよいでしょう。下の例は、小見出しを一般的な太めのゴシック体(あるいは明朝体)、本文をMSゴシック(あるいはMS明朝)で書いた文章です。どちらの例であっても英数字を欧文フォントにした場合のほうが見栄えが良く、読みやすいのが一目瞭然です。ここで用いている英文フォントは、Segoe UIとAdobe garamondです。Segoe UIは最近のWindowsのPCに標準搭載されている美しいサンセリフ体です。

 

 

相性の良い和文フォントと欧文フォントを組みわせる

日本語がゴシック体なら、英単語はサンセリフ体、日本語が明朝体なら英単語はセリフ体と述べましたが、どんなフォントでも相性が良いわけではありません。英単語だけが目立ったり、英単語だけが目立たなかったりしたら可読性は低下します。

英語と日本語フォントを組み合わせるときに考慮すべきなのは、次の3点です。

●雰囲気が似てる(当然ですが、ゴシックならサンセリフ、明朝ならセリフということ)

●サイズが似ている(アルファベットだけが極端に小さく見えるような字は組み合わせない)

●太さが似ている(例えば、MS 明朝とCenturyは太さが違い過ぎます)

 

下の例の場合、ゴシック体の例では、日本語書体は、MSゴシックです。当然、これに組み合わせるのは、雰囲気の似ているサンセリフ体なのですが、このときに下の例のようにCalibriを組み合わせてしまうと、アルファベットが小さく見えるうえに、文字のベースラインがずれていて(アルファベットが浮いて見える)、相性のよい組み合わせとは言えません。このような場合は、たとえば、欧文フォントをSegoe UIやTahomaにするとバランスよく見えます。これらのフォントは、Calibriなどよりは少し大きめにデザインされた欧文フォントですので、日本語との組み合わせは良いかもしれません。アルファベットが小さく見える場合は、アルファベットだけを個別に文字サイズを大きくするというのも、少し手間ですが、一般的な方法です。

a

 

下の例の明朝体の場合も同じです。事務書類や報告書などでは、互換性の観点から、MS明朝をしばしば使います。MS明朝体と組み合わせるべきなのは、当然セリフ体です。ですが、例えば、「Century」を合わせるのはよくありません。Centuryでは、見ての通り、アルファベットがとても太く見え、不格好です。英単語だけが目立ってしまいます。MS明朝のように細い明朝体には、細めのセリフ体を組みあわせましょう。よくある書体では、Garamondなどの書体がベストですが、Times New Romanなども比較的相性が良いです。似た太さの書体を組み合わせた方がよいというルールは、ゴシック体の場合も同じです.

a

 

 

タイトルなどの大きな文字は字間を調整する

長い文章では、気にする必要がありませんが、「タイトル」や「小見出し」など、短い文や単語を大きな文字で示す場合、字間にはもっともっと気を配らなければなりません。下の例のように、ひらがなカタカナ(とくに促音と拗音)の連続は、漢字の連続よりも字間が空いて見えるため、調整しないとスカスカしてバランスの悪い印象を与えます。とりわけ、タイトルはパッと見たときの印象が重要です。パッと見ただけで、単語や文を認識しやすいようにすることは、ユニバーサルデザインの観点からとても重要なことです。

詰める

 

下の例では、「形態的特徴」という部分は文字がキツキツに詰まって見えますが、カタカナやひらがなの連続である「コイノボリの」のあたりは少しスカスカな印象を受けます。大きい文字でこういったことが起こると、可読性や視認性が低下します。はっきりとは感じませんが、読むときにストレスを感じてしまいます。このような場合、ひらがなの部分の字間を狭くする必要があります。このような字間の調節を「カーニング」といいます。PowerPointなどでは、<文字の間隔>機能で調節することができます。Illustratorであれば、<文字間のカーニング設定>で、「オプティマル」か「自動」を選択すれば簡単にできます。ただし、やや面倒な作業なので、カーニングは、かなり大きい文字や目立つ文字だけ行なえばよいでしょう。

aa

 

下の例も同様に、緑丸で示した部分にスペースが生じるせいで、単語がぶつ切りになってしまいます。これでは、スムーズに読むことができません。どちらの例も、カーニングによりとても読みやすくなります。タイトルや見出しでは、必要に応じてカーニングをしましょう。

aaa

 

 

?や!は半角にすると良い(かも)

ここからは、少々細かい話になってきます。細かいですが、馬鹿にできません。こういう気配りの積み重ねで、読みやすさが変わります。

まずは、「?」「!」などの文末記号。通常、日本語でこれらの記号を使うとき、全角で入力してしまいます。ただ、これだと、スペースが空き過ぎで、文と記号が独立しているように見えます。これでは読みにくいですし、勢い(緊張感)が出ません。丁寧に字間を詰めるのが好ましい方法かもしれませんが、文末の「?」や「!」などの記号は「半角」にするのも楽で良い方法です。このとき、書体は日本語の書体を使ってください。半角だからといって欧文書体にすると、別の問題が生じてしまいます。WordやPowerPointだと、自動的に英文書体に変更されてしまうかもしれませんが、いちいち日本語フォントに直しましょう。

明朝でも「!」や「?」は半角。下の例のようにゴシック体でも同じです。

 

 

記号は字間を詰めたほうが良い

記号は、文字に比べてスペースが大きいので、タイトルや文中に記号が含まれると、字間が不自然に空いているように見えます。下の例は、「タブルクォーテーション」を使った例です。一目見て明らかですが、記号の前後に不要なスペースが生じてしまいます。この場合は、字間を調節するか半角の記号を使うことでこのスペースをなくすと、一塊の文としてすんなり読めるようになります。タイトルなどでは、記号により生じる読みにくさを解消すべきです。

Illustratorの場合は、<文字間のカーニングの設定>で「自動」か「オプティマ」を選択し、<アキを挿入>で左右ともに「ベタ」を選択すれば、自動的に記号の前後のスペースがほぼ改善されます。なお、本気で字間を調整する場合には、手動で調整しなければいけませんが、研究発表でそこまでする必要はないと思います。

2

次の例は、「 」を使ったタイトルの例です。この場合も、「 」の前後に余計なスペースが生じています。余計なスペースは可読性を下げる(かつ、美しくない)ので、字間を詰めるのがベターです。なお、太いカギ括弧は幾分ダサいので、この部分だけで細いフォントにしてみました。こっちのほうがスマートですね。

1

 

ナカグロ「・」も同様です。下の例のように、ナカグロの前後には大きなスペースが生じてしまいます。このようなスペースは可読性を下げますし、見栄えも良くありません。タイトルなどの大きな文字でナカグロを使う場合には、このスペースが目立たなくなるように字間を調整するのがベターです。

はる

 

もう少し身近な例を挙げれば、演題の次に比較的大きな文字で書かれる「著者名リスト」があります。ここには、カッコやカンマ、ナカグロが多用されます。このような場合にも、字間を調整したほうが可読性や見栄えが向上します。ちょっとマニアック過ぎますが、「塵も積もれば山となる」です。時間に余裕があればトライしてみてください。

1

 

 

文字は歪めないのが基本!

シンプルではっきりとした書体を使ったとしても、文字を横に伸ばしたり、縦に伸ばしたりして、文字の縦横比を変えると、読みにくくなり、読み間違いをしやすくなります。下の例であれば、文字を歪めていない一番上と一番下の行が明らかに読みやすいです。

yuga

 

 

合字を使ってさらに読みやすく、さらに美しく

最後に、マニアックなおまけを1つ。

英文を書いていると、下の緑の丸で示した部分で、文字と文字がぶつかってしまうという問題が生じることがあります。これは、すこし不格好で、かつ、読みにくくなります。小さい文字や長い文章ならば、全く気にすることはありませんが、タイトルや大きな文字の場合は対処しましょう。対処法が、「合字を使う」です。合字とは、並ぶとぶつかってしまう「fとl」や「fとi」、「tとi」が並んだときに使う「2つで一文字」の特殊な文字のことです。合字を使えば、可読性もカッコよさも高まります。IllustratorやPowerPointならば、このような文字が並んだとき、自動的に合字が使われます。Word(少なくとも2007 for Win, 2008 for Mac 以降)の場合は、下の例のように、フォント設定のダイアログボックスの<詳細設定>の<文章内のすべての合字を有効にする>というチェックボックスをONにすることで、合字が使えるようになります。ただし、合字に対応していないフォントもあるので注意してください。

 

●Wordの場合

wdrei

 

inserted by FC2 system