• BPnet
  • ビジネス
  • IT
  • テクノロジー
  • 医療
  • 建設・不動産
  • TRENDY
  • WOMAN
  • ショッピング
  • 転職
  • ナショジオ
  • 日経電子版
  • PR

  • PR

  • PR

  • PR

  • PR

ニュース

【CSS Nite LP】デザイン関連書籍で有名な矢野りん氏がWebサイトの文字と配色について指南

大森 敏行=日経ソフトウエア 2006/10/11 日経ソフトウエア
[画像のクリックで拡大表示]

 矢野りん氏は「デザインする技術 よりよいデザインのための基礎知識」や「Webレイアウト・セオリー・ブック Webデザインのためのレイアウト基礎講座」といったデザイン関連書籍の著者として知られており,ITproのWebデザイン倶楽部でも「Webデザイン入門」という連載を持つ。2006年10月10日に開催されたWebデザイン関連のイベント「CSS Nite LP, Disk 1」で,同氏は「サイトデザインの2大要素を徹底的にお勉強しよう」と題した講演を行い,「文字」と「配色」の二つの話題について解説した。同氏はあまり講演をしないため,話を聞こうと多くの聴衆が集まった。

 文字の話題では,まず字体(異なると意味が変わる)と字形(異なっても意味は変わらない)の違いについて説明。次いでWebサイトの書体(フォント)について取り上げた。書体には大きく明朝体とゴシックがあるが,Webサイトはゴシックを使っていることが多い。明朝体はディスプレイで読みにくいと一般に考えられているためだ。

 しかし矢野氏は「Webにはゴシックが最適という考え方は絶対ではない」と指摘する。日本人は単語が集まってできた図像として文字を認識する。このため「明朝体のほうが頭に入りやすいことがある」という。明朝体は漢字とかなの区別がしっかりしているので読みやすいのである。一方,「ゴシックは視認性はいいが,理解しやすいかどうかは考える余地がある。例えば,文庫本の小説がすべてゴシックで書いてあれば読みにくい」(同氏)。明朝体に適しているのは「まとまった文字数のある見出し」や「サイズの大きな本文やリード」。一方,ゴシックに適した内容は「ナビゲーション」「キャプション」「サイズの小さい本文やリード」だという。

 ただ,書体は明朝体とゴシックだけではない。これら以外の例として矢野氏は,富士通のらくらくホンが採用した「教科書体」を取り上げた。教科書でよく使われている楷書体である。手書きのフォルムが残っており,字形が正確で読みやすい。教科書体は現在のWebブラウザで表示できないが,未来はこうした書体を選べるようになるかもしれない。同氏は文字の話題を「読みやすさのセオリーはWeb制作者であっても知っていると便利。言葉の文化的な側面を知っていれば豊かなメディアを作れるようになる」と締めくくった。

 次が配色である。まず,色の基本である色相,彩度,明度について解説し,調和する色を探すための三つの原則(ツボ)を紹介した。

 最初は「色相環の中で隣接する色相から色を選ぶ」という原則。例えば,赤,オレンジ,黄色の3色を使うといった選び方だ。次が「同一の色相で明度や彩度が違う色を選ぶ」という原則。配色に慣れていないうちは,色相をロックして明度と彩度だけを変えて色を作っていくと,ぶれない配色ができるという。最後が「有彩色と無彩色を合わせる」という原則。キーカラーがほかの色と合わせにくいものだった場合でも,グレーや黒や白といった無彩色とは必ずマッチする。「自動的に」無彩色を選べばよいのである。この方法は「安全かつ成功率が高い」と矢野氏は語る。

 ただ,これらの原則に従うだけなら誰でもできる。それでは「色をコントロールすることにはならない」(矢野氏)。色をコントロールするには三つのことを理解する必要があるという。

 まず「色には重さがある」という点。人間は,色の明度が高いと軽く,低いと重く感じるという。次が「色には奥行きがある」。彩度が高いと手前に,低いと奥に見える。矢野氏は,奥行きの例としてモネの絵画を挙げた。遠くにあるものほど彩度を低く,手前のものほど色を濃くはっきり描いている。「空気遠近法」といわれる手法だ。三つ目が「目の錯覚」。色は条件によって見え方が変わる。矢野氏は,背景に影響されて本来の色相が異なって見える「色相対比」や本来の彩度が異なって見える「彩度対比」,同色相の背景より補色の背景のほうが中の色が明るく見える「補色対比」を紹介した。

 配色についての結論は以下の三つである。

  1. 色の3属性(色相,彩度,明度)を理解すること
  2. 重さや距離などの色の意味に敏感になること
  3. 色は条件で見え方が変わることを常に意識すること

あなたにお薦め

連載新着

連載目次を見る

今のおすすめ記事

ITpro SPECIALPR

What’s New!

経営

アプリケーション/DB/ミドルウエア

クラウド

運用管理

設計/開発

サーバー/ストレージ

ネットワーク/通信サービス

セキュリティ

もっと見る