愛される学校づくり研究会

分かりやすい学校サイト・デザイン講座


★このコラムは、「愛される学校づくり研究会」にて発表された、「わかりやすい学校サイト・ポイント講座」を元に、具体例を追加しながら、デザインにつてい解説していくシリーズです。

【第6回】書体で伝える

前回、分かりやすいタイトルという話をしましたが、読ませる・伝えるというときに意味だけでなくイメージも伝えたい。そんな時に書体(フォント)を選ぶ事で、イメージを明確に伝えられるようになります。

■書体/フォントの歴史

30年以上前の活版印刷時代、まだ書籍の印刷が活字で出来ていた頃は、書体は明朝体やゴシック体といった限られた種類しかありませんでした。活字以外の文字は印刷に必要な文字のデザインを職人さん(レタリング技術者)が作っていました。
 当時の新聞の見出しも、映画のタイトルもクレジットも、ポスター文字もほとんどがレタリングデザイナー(職人)の文字でした。その後、写植、電算写植時代を経て、デジタル文字の時代になりました。
 最近のコンピュータでは、OSにもともと入っている書体以外にもたくさんの書体を使う事ができるようになり、一般の人にとっても、文字による表現の幅が広がってきました。いわゆるデスクトップパブリッシング(DTP)の普及で、職人の技を使えるようになったわけです。

■文字を作る

看板やポスター、書籍や映画のタイトルなどの文字をデザインする事をロゴデザインとかレタリングといいます。 また文字の書体や大きさ、太さ、間隔、配置など(レイアウト)を考慮して見やすくする作業のことを、専門用語ではタイポグラフィ・デザインといいます。
 レイアウトまで含めてしまうと、広範囲になってしまうので、今回は書体についての話です。
 お店の看板を例にとってみましょう。
 店のロゴをデザインする時には、お店のイメージを伝え、覚えてもらいやすいデザインにしますよね。本格インドカレーのお店と蕎麦屋の看板に使われる文字の形は同じではなく、それぞれのイメージにふさわしい形に造形するはずです。
 また、高速道路の標識では、一瞬にして判別できる文字の形に工夫されています。

■書体の種類と構成

文字は和文、欧文、ともにそれぞれ書体があります。
 英文の書体は大きく分けて、セリフ/サンセリフ/スクリプティング(手書き)という書体に分けられます。セリフとは、文字の淵につく飾りのことですが、ローマ数字のような飾りの(明朝体の肩みたいな部分)ことです。 サンセリフはセリフが無い(サンは仏語で〜の無い)文字のことです。初期のコンピュータディスプレイでは、8X8ドットや16X16ドットで文字を表示するような解像度の低いハードのためにセリフ部分を表現できるパソコンはありませんでした。

No6_fig04.jpg

しかし、パソコンハードや多くの書体を扱えるOS、そしてDTPソフトの発達によって、本当にたくさんの書体が使えるようになりました。

 和文の書体も欧文同様に、大きくは明朝体、ゴシック体、毛筆体・手書きに分かれます。
 書体には、線の太さのや斜体(イタリック)といったバリエーションを加えたファミリーというグループがあります。太い文字の場合でも、単に線の太さが違うだけでなく、読みやすいように線の縦横の太さや、空きの間隔を調整されていますので、機械的に生成されるものではありません(フォントデザイナーが微妙な調整をしています)

No6_fig03.jpg

文書中の書体を選ぶ時には、
タイトル>見出し>段落 といった構造の違いで書体を変えるのが一般的です。
段落の中で、強調・注目させたい言葉など、書体をかえるほどでは無いときに同じファミリーの中で変化を付けるくらいにしておくと、読みやすいと言われています。

ちなみに字体と書体は図のようにちがいます。

No6_fig02.jpg


■書体と感情表現

目的に応じた書体を選ぶには、書体を構造的にとらえて整理しておくと選びやすいです。例えば、図のような整理の方法がひとつ考えられます。

No6_fig01.jpg


明朝体やゴシック体や丸ゴシック体をいわゆる標準書体として分布させてみました。この分類は絶対的なものではありませんが、書体選びの目安にはなります。
 これにファミリー軸(文字の太さ)を第3元の軸として書体の立体が作られます。

■文字間隔

文字の形以外にも、読みやすさに関わっているのが、文字間隔です。ワープロでの文字間隔、行間隔という設定はありますが、もう少し細かな1文字1文字の字詰めです。 文字同士の形によって、文字の隣との間隔が整ってないとすごく読みにくくなります。同じ幅ではいけません。字詰めが調整されたフォントはPフォント(プロポーショナルフォント)といわれますが、等幅の文字と美しく字詰めされた文字のちがいを見て下さい。本来は、Pフォントに任せるような機械的な文字詰めでは不可能なくらい、読みやすさと、文字詰めは深い関係があるものです。
上から、等幅、プロポーショナル、さらに手で調整したものです。
 特にポスター等、大きめに文字を扱う時には、一文字毎に字詰めを調整しないとバランスの悪いポスターになってしまいます。これだけは未だに自動化できないので、デザイナーが感覚的に決めています。


No6_fig06.jpg


■サイト上でのこだわりは

ブラウザー上でみると、WEBシステムでは、フォントについてはきつい縛りがありません。送り手が意図するフォントが受け手(読者)にも同じに見えるという保証がないからです。
どうしてもこの書体で表現したいというときには、JPGやGIFやPNG等の画像として作成し、配置することになります。これは、文書構造を表わすことを基本に開発された言語HTMLの特徴でもあるわけです。(SGMLもしかり。HTMLのお手本はマニュアルや論文を記述するために開発されたSGMLとされる。)

 -- SGML:Standard Generalized Markup Language
 -- HTML:HyperText Markup Language

■手に入る書体は?

デジタル書体の時代になって、日本ではフォントメーカーといえば、モリサワが有名です。
 私が学生時代(当時は印画紙に文字を焼く写植時代)では写研という会社の書体がグラフィック・出版業界では主流でしたが、デジタル化に出遅れました。現状では、グラフィックデザイナーは必ずといっていいほどモリサワのフォントを使っているようです。
ただし、写研の丸ゴシック(ナールD)などは一部で根強い人気があり、私も未だに、社名書体には平成丸ゴシックを使っています。
その他のデジタル書体メーカーでいうと、リョービやニイスといった老舗や、安価なフォントを提供しているダイナフォント等、様々な書体メーカーがあります。MSゴシック、MS明朝はWINDOWSに搭載された書体ですが、リコーでつくられてるのは有名です。
 上にあげた商用フォントはプロダクトであり著作物ですので、これらの書体を使うには、販売上の契約ルールに従わねばなりません。
 無料で使えるものとしてはオープンフォントやフリーフォントがネット上で公開されていますので、利用してみてはいかがでしょうか。

■やりすぎないこと

さて、書体の話をしてきましたが、サイトのみならず、文書上での使い方(書体設定)についてのアドバイスを一つ。それは、色彩設計の時にも言ったように、使いすぎないことと、見せる優先度を決めること。
 例えば、こんな感じです。

  1. 書体は1文書(1コーナー)で3種類程度まで。
  2. 大きなタイトルで太めの毛筆体。見出しでゴシック体、段落では明朝体などのように意味や役割で書体を変える。
  3. 強調する時や、特に重要な文字は同じファミリーの太文字(ボールド)や斜体

あとは、読みやすさに注意しながら、書体のイメージや表現の面白さを楽しんで、サイトに活かしていただければとおもいます。

 次回は、「CMから学ぶ、サイトの広報戦略」を予定しています。

【コラム】

書体の例でつかった書体を書き出しておきます。

No6_fig05.jpg

書体の使われ方の特異な例として、マンガの吹き出しで使われている書体があります。
ひらがなが毛筆風、漢字がゴシックという組み合わせです。ボリョーム感がそろって読みやすいということで工夫されたそうです。現代では特に奇異に感じることは無いと思いますが、分類上から言うと面白い組み合わせの工夫ですね。
現在では、このマンガ書体はアンチックAN書体(モリサワ)としてファミリーが揃っています。

(2011年10月10日)

ahotta.jpg

●堀田敦士
(ほった あつし)
教育+ネットワーク+ゲームを3本柱に開発するデザイン会社勤務。若くて元気な頃は、シミュレーションゲーム「TheTower」「シーマン」などのアートディレクターとして徹夜の連続。現在はWEBサイトデザインやCMS開発で主に学校を対象にした広報支援のためのお手伝い。お手伝いがエスカレートして、息子の高校PTAのICT委員会顧問に抜擢され、ICT教育の準備で徹夜の連続。