文字と文字の間の幅は整えよう

現役Webディレクターによる「嫌われないウェブデザイン」秘密講座ブログ!

トップページ > ウェブデザインの基本マナー >

文字と文字の間の幅は整えよう

タイトルロゴやナビゲーションメニューなどの文字を画像で作る場合、文字の間隔を均等に調整(文字詰め)しないと、落ち着かない不安定感をユーザーに与えかねません。

文字間隔をそろえて細部にも統一感を!

例えば、当サイトのロゴ(↓)も文字間の幅を調整してあります。

当サイトのロゴ

↓悪い例: やや極端な例ですが、文字間隔がバラバラのままだと・・・

当サイトのロゴ - 悪い例

変に気持ち悪くないですか?(^ ^;
文字と文字の間の幅がマチマチだと、とにかく見ていて落ち着きませんね。

ひとつだけならまだしも、このように無秩序な文字画像が10も20も並んでいると、それこそ「なんだか落ち着かない」・・・ ユーザーは無意識のうちにストレスを感じてしまいます。
細かいことでも、積もり積もると心理的に不快になるんですね。

文字間隔は画像編集ソフトで調整

Macromedia FireworksAdobe Illustratorなどの画像編集アプリケーションには、文字間隔を調整する「カーニング」という機能が標準で実装されています。これを活用しない手はないですね!

Fireworksの文字編集画面

文字間の幅はサイト全体のイメージにも影響する!?

Webに限らず印刷分野(DTP)でも活躍する経験豊かなグラフィック・デザイナーは、文字間の余白にそれこそミリ単位のレベルで強くこだわります
イッセイ・ミヤケのロゴをデザインした松永真氏などは、まさしくそういった分野の超第一人者。

文字と文字の間の空白部分にはそれだけ重要な意味があるということです。
ただ、ここまでいくと職人芸の域なので、私たちが完璧に真似するのはどだいムリな話ですが・・・(^ ^;

しかし一流デザイナーのレベルまではいかなくても、文字間隔を調整することで、サイト全体にある程度一定の雰囲気を持たせることはできるのです。
例えば、文字間の幅を広く取ればユッタリと余裕のあるイメージが、逆に狭く詰めればビシッと張りつめた緊張感が演出できます。

参考サイト:
以下の2つのサイトは文字間の幅の取りかたが対照的ですが、どちらも一貫したポリシーでメニューなどの文字画像がデザインされています。ぜひ見くらべてみてください。

細部をおそろかにするべからず

正直に言ってしまえば、私自身も文字間隔の調整スキルはまだまだ甘いと思っています。
本当に細かい部分の話なので、ごまかそうと思えばいくらでもごまかせますし・・・。

ただ、こういった細部が積み重なってサイト全体のイメージを作り上げている。これは、私の少ない経験から見ても明らかです。
20世紀前半に活躍した建築家ミース・ファン・デル・ローエの言葉に「神は細部に宿る(God is in the details)」というものがあります。細部にまで気を配ることがいかに重要かを的確に表現していますね。私たちもこの言葉を忘れないようにしましょう!


このエントリーのトラックバックURL :


メルマガ「嫌われないWebデザイン」
さらに突っ込んだデザインノウハウは、メルマガでお届けします!メルマガ読者限定の、サイト無料診断企画もたまにやってます。
>>バックナンバーを見る

登録アドレス:
解除アドレス:
Powered by まぐまぐ