01 テキストデザインの基本構造

Ｗｅｂデザインの最も基礎的な要素

ホームページというメディアは端的にいうとテキスト(文字・文)主体のメディアといえます。なのでＷｅｂページのデザインにおいて、「文字」というのは最も基礎的で、かつ非常に重要な要素だといえます。
キーボードをたたくと簡単に入力できてしまう「文字」について日頃簡単に考えがちになってしまいますが、ここから見直すことがＷｅｂデザインの第１歩になると思います。
ということで、ここではまずテキストの基本から見ていきましょう。

可視性と可読性

文字が持つ性質のひとつに「可視性」と「可読性」というものがあります。文字にはこれら文章のように「読む」という役割だけではなく、道路標識などに使われる文字のように「見る」という役割も持っています。
このように、遠くから見ても認識しやすい文字を「可視性」の高い文字といい、文章として表示されたときに読みやすい文字を「可読性」の高い文字といいます。Ｗｅｂデザインではページタイトルや見出しには可視性の高い文字を、本文には可読性の高い文字を使用するとデザインと読みやすさ両方を持ったページをつくることができます。
それでは可視性、可読性を踏まえた上で文字の分類について紹介していきます。

セリフ体とサンセリフ体

	文字の構造上の分類のひとつにセリフの有無でわける方法があります。セリフというのは左図の部分をさし、セリフのある書体をセリフ体、ない書体をサンセリフ体呼びます。
一般的にセリフ体は形にメリハリがあり、可読性が高く書籍などの本文に使われやすく、サンセリフ体はシンプルな形をしていて可視性に優れ、タイトルや見出しに使われやすい傾向にあります。
	日本の書体にもセリフと同じ構造の「ウロコ」というものが存在します。ウロコの性質もセリフ同様可読性、可視性の有無をみるのに役立ちます。一般的にウロコのある書体を明朝体、ない書体をゴシック体と分類します。
セリフというのはもともとは筆やペンで書かれていた時代の文字を参考にデザインされたもので、そのときの筆やペンのあとが名残りとして書体に残ったものです。そのため、セリフ体は筆書体のころの優雅さや気品のあるイメージがあり、サンセリフ体は現代的でクールなイメージを持っています。

セリフ体は優雅で気品のあるイメージを持ち、サンセリフ体はクールな印象を与える
Ｗｅｂデザイン上の注意点一般的に可読性の高いセリフ体と可視性の高いサンセリフ体という性質を文字は持っていますが、Ｗｅｂデザイン上ではその性質が少し変わってきます。パソコンのディスプレイというのは小さなドットの集まりで文字を表現していますが、構造の簡単なサンセリフ体に比べて複雑な形をしているセリフ体を表現するのには小さな文字の場合にはドット数が足りずにきれいに表現されません。そのため、ＰＣディスプレイ上ではサンセリフ体のほうが可読性が高く、Ｗｅｂ上ではサンセリフ体が一般的に使われています。

>PAGE TOP

プロポーショナルフォントと等幅フォント

	可視性や可読性に影響を与える要素として文字の幅による分類方法があります。例えば英語などのアルファベットの場合、「a」や「s」に比べて「i」や「l」のほうが文字の幅が狭いデザインとなっています。
	このような文字による幅の違いをそのまま表した書体をプロポーショナルフォント、どの文字にも均等な幅をもたせた書体を等幅フォントを呼びます。(左図参照)
一般的にプロポーショナルフォントは可読性が高く、等幅フォントは可視性が高いといえます。
	ちなみに日本語の場合は少し特別で、文字は全て「仮想ボディ」と呼ばれる正方形の中に入った形のデザインとなっています。よって「っ」などの小文字や「。」などの句読点も普通の文字と同じ大きさとして扱われるため、日本語の書体はすべて等幅フォントとなっています。

>PAGE TOP

ファミリーによる書体の使い分け

フォントにはそれぞれの特徴があり、文字自体にデザイン性があるため、ひとつのページにたくさんのフォントを使用するとデザイン的にまとまりがなくなってしまいます。タイトルや見出しごとにたくさんのフォントを使うかたがほんとうに多く見受けられますが、ゴチャゴチャしたイメージでやはりオススメできません。
こういった場合、ファミリーによる書体の使い分けをするとデザイン的に統一感がとれてよいと思います。ファミリーというのは、デザイン的に同じ特徴を持ちながら文字の太さ(ウェイト)、文字の幅(ワイズ)、斜体(イタリック)などのバリエーションをもった書体群のことをいいます。タイトルにはウェイトの大きな文字、本文にはウェイトの小さな文字などデザイン的な統一感をくずさずに表現できるようになります。ファミリーの違う書体はアクセントとして１、２種類程度にとどめるのが良いと思います。

具体的にファミリーがどれになるかというと、フォント名に同じ名前が含まれていることが多いのですぐにわかると思います。
サンセリフ体でメジャーなHelveticaでも左のようなバリエーションがあります。同じフォントサイズでもウェイトを大きくするだけで可視性が非常に良くなります。

ファミリーとは多少意味が異なりますが、日本語のウェブページで最も頻繁に使われるゴシック体でも以下のようなバリエーションがあります。

ゴシック体のバリエーションＭＳゴシック	ゴシック体のバリエーションＭＳＰゴシック
ゴシック体のバリエーションＨＧＰゴシックＥ	ゴシック体のバリエーションＨＧＳゴシックＵＢ
ゴシック体のバリエーションＨＧＳゴシックＥ	ゴシック体のバリエーションＨＧＳゴシックＵＢ

ちなみに当ウェブサイトはキャプション(本文)にはワイズがあり可読性の高いＭＳゴシック、タイトルや見出しにはウェイトがあり可視性の高いＨＧＳゴシックＵＢを使用しています。
(ただし、クールさを出すアクセントとしてタイトルの数字とＰＡＧＥＴＯＰのリンクテキストだけはTahomaを使用しています。)

>PAGE TOP

行間による可読性の違い

可読性を向上させる要素として文字自体の性質のほかに行間によっても変化させることが出来ます。行間というのは左図のように行と行との間を指しますが、英語などのアルファベットの場合は大抵が行の高さの半分である小文字が文章を占めるためあまり気にせずにすみます。

しかし日本語の場合はそうはいかないので行間にある程度の幅を持たせることによって可読性を上昇させます。
ただしこの方法はＣＳＳと呼ばれる方法を用いることによって実現できます。ＣＳＳの知識がなくてもホームページビルダー９をお使いの方ならばスタイルシートマネージャー(「表示」→「スタイルシートマネージャー」で出ます)を使えば制御することが出来ます。「文字のレイアウト」タブにある「行間」のところを任意の数値に変えれば変更できます。
（ちなみに当サイトでは「文字の高さ」の１．７倍に設定しています。）

>PAGE TOP