CSS Niteとは、CSSを中心にWeb標準を取り巻く状況にスポットを当てるマンスリーイベント。毎月第3木曜日にアップルストア銀座で行われている。こちらとは別に、兼ねてからの来場者の要望を反映して、早く行かなくても座れるCSS Niteとして、企画されたのが「CSS Nite LP」。

合計5つのセッションから、このレポートでは第5部の矢野りん氏の講演を取り上げる。文字と配色はデザインの根幹となる重要な要素であるのに、専門教育や知識修得を経ずに「デザイナー」となっている人がWeb業界の人や業界を目指す人には多い。テザインをコントロールするための知識として改めて確認しておきたい。

Webにはゴシックが最適…なのかな？

2大要素の一つめは「文字」。我々はWindowsユーザーであればMSゴシック、Macユーザーならヒラギノ系ゴシックで無意識のうちにそれをスタンダードとしてWebサイトを見ている。セリフ体や明朝体のような「ヒゲのあるフォント」は一般にディスプレイでは読みにくいとされているからだ。

「でもそれは絶対じゃないですよ」と矢野氏。元々日本人は単語が集まった図像として文字を認識するので、明朝体の方が頭に入りやすいのだ。漢字とかなの区別がしっかりしているからである。一方、ゴシック体は漢字もかなもウェイトが均一なために記号として見えてしまう性向を持つ。

フォントの特性を理解して使い分けを意識しよう

矢野氏は「文字」要素のまとめとして、次のように整理している。

• 明朝体に適した内容＝理解重視
  まとまった文字数による見出し／サイズの大きい本文やリード
• ゴシック体に適した内容＝視認性・可読性重視
  短いフレーズによるナビゲーション／キャプション／サイズの小さい本文やリード

もちろんWindowsのシステムフォントがビットマップフォントである限り、本文に明朝系のフォントを適用するのは現実的ではないかもしれない。でも次期Windowsではフォント環境が改善されるだろうし、PC以外のデバイスでは紹介があった「モリサワ教科書体」の採用例（らくらくホン：富士通）のような例もある。

グラフィックデザイナーやエディトリアルデザイナーはそのようなフォントの歴史やセオリーも踏まえてデザインをしている。Webデザインにおいても、画像として文字を扱う際や、Flashでデバイスフォントを使わない場合は、フォントの使い分けを意識できるはず。ぜひ実践していただきたいと思う。

まずは色を扱う3つの原則

後半はもう一つの要素「色」について。まずは3つの属性「色相」「彩度」「明度」から、調和する色を探すための三つの原則が紹介された。

• 色相環で隣接する色相から色を選ぶ
• 同一の色相で彩度や明度が違う色を選ぶ
• 有彩色と無彩色を合わせる

これはいわばセオリーだが、ぶれない色をつくるためには、色相をロックして明度と彩度を変えて色をつくり、合わせにくい場合は白・黒・グレーといった無彩色を合わせるのが配色に慣れるコツだという。

配色を議論する際は、どうしても好みや主観が入りがちだ。このようなセオリーを覚えておくだけで提案の説得力や深みが増すのではないだろうか。

大事なのは色のコントロール

ただセオリーを理解しただけではデザイナーとして色をコントロールできることにはならない、と矢野氏は言う。「重さ」「奥行き」「目の錯覚」といった色の性質と色の3属性の関係を見極めてデザイン上でコントロールすることで、初めて一歩進んだ配色が可能になるというのだ。

その具体例として…

• 全体の調和
  同一色相のトーン違いでコントラストで重要度を示す
• 部分の差別化
  ある色相から同じ距離（等色相差）の配色を追加し部分を差別化
• 部分の調和
  パーツの中で同一色相のグラデーションをかけるなどしてなじませる

などが実例を交えて紹介された。withDでもパーツに微妙なグラデーションが施されているが、恥ずかしながら初めてデザイナーの意図を再認識した次第である。

いかがだっただろうか。仕事がらWebクリエイターのトレーニング成果物を見る機会も多いのだが、グラフィックデザイン経験者のWebデザインは実装は拙くともパーツの完成度や全体のデザインの調和に驚かされることが多い。デザイナーの基礎体力の向上につながる実に見応えのあるセッションだった。

CSS Nite レポート　バックナンバー
ものづくりにっぽん（矢野りん氏のブログ）
ITpro selectの連載「Webデザイン入門」
MdN Interactiveの連載「CSSによる美しいWebレイアウト」
デザインする技術 ～よりよいデザインのための基礎知識（Amazon）

当日のスライド
我的春秋
モリサワ 教科書体アウトラインフォントを携帯電話に搭載
らくらくホン
CSS Nite
CSS Nite LP, Disk 2