詩と創作・思索のひろば

ドキドキギュンギュンダイアリーです!!!

Fork me on GitHub

デザイン4+1の基本ルール: 『The Non-Designers Design Book』を読んだ

なんかで Kindle の洋書が安かったときに何となく買っていた『The Non-Designers Design Book』を読み終えた。素人のための……というよりは新人デザイナーのための本のようなのだけど、エンジニアの自分が読んでも面白かったので書いとく。日本語版もある。

4つのルール

曰わく、デザインには基本的な4つのルールがある。それぞれの頭文字を取ると "CRAP" ……となるのだけれど、これは上品な単語ではないのでそう示唆されるだけではっきりとは書かれない。ともかく、各々に対応する原則は以下のとおり。

  • Contrast(コントラスト)
  • Repetition(反復)
  • Alignment(整列)
  • Proximity(近接)

これらにどういう意味があり、どう活用すべきであるか。本で紹介される順に書いていく。

Proximity

意味的に関連する要素どうしを近くに置いてグルーピングする。逆に直接関係のない要素どうしは離して配置する。そうすることで、ページ内の情報を組織化できる。

Alignment

ページ上の要素どうしを視覚的に関連づける。たとえ二つの要素が離れていても、同じように整列されていればそれらは関連しているように感じられる。安易に中央揃えしない! 右でも左でも、一方に要素を揃えることでより強く関連づけられる。組織化と統一が目的。

Repetition

色やフォントなどの視覚的な要素を繰り返し、一貫性を持たせる。これは1ページ内のことに限らなくて、例えば数ページに渡る文書でも、見出しや罫線といった部分の体裁を同じに整える。ここでは統一と視覚的に関心を持たせることが目的。

Contrast

2つの要素の違いを際立たせる。要素どうしがなんか違うという状況では単に間違えてるだけに見えてしまう。ここで違いというのは色とかフォントとか文字サイズだけじゃなくて、横長の罫線に対して縦長のカラムを置くとか、そういうことでもいいらしい。目的はページに関心を持たせること。

至上のルール

以上4つの法則に加えて、何度も何度も繰り返されるいちばん基本的なルールは、"Don't be a wimp"。怖気付くな! コントラストを作るなら中途半端じゃなく思いっきりやる、空白を怖がらない。等々。ホントに何十回と言われるのでよっぽど大事なことなんだろう。

タイプについて

それからタイプ(書体?)についての話も面白かった。CSS だけからなるこれまでの経験で、フォントの違いには serif、sans-serif と等幅とあと装飾的なの、くらいしか区別できていなかったけれど、本当はもっといろいろある。特にこれまで serif だと認識していた中にも Oldstyle, Modern, Slab serif なんてカテゴリがあるんだそうだ。この章を読み始めたときはそんなの気にするのアルファベットを日常的に使ってる人間だけで日本語ユーザの自分には関係ないだろう、と斜に構えていたのだけど、読んでみて、実際に試してみると、確かに……と思えてしまったので面白かった。これらの違いを理解して、うまくコントラストを作ってやることが大事。

まとめ

4つのルールなどといっても、聞いてみればそりゃそうだろうという気もするかもしれない(自分はちょっとした)。けど本当に大事なのは、こういったルールに名前をつけて、自覚的になることだ。自分がデザインしたページに違和感があるときに、その原因は何なのか名前を上げることができるようになることが重要である。そうすれば、何となく今ひとつに感じてしまうデザインを確実によりよくできるはずだ。……とまあ実際に実現可能かどうかは別として、これまでは結局センスの産物なんだろうと思っていたデザインを、新たな視点で見られるようになったと思う。

Kindle 版の場合はカラーで(タブレットやスマートフォンで)読むのがオススメ。

The Non-Designer's Design Book (3rd Edition) (Non Designer's Design Book)

The Non-Designer's Design Book (3rd Edition) (Non Designer's Design Book)

ノンデザイナーズ・デザインブック [フルカラー新装増補版]

ノンデザイナーズ・デザインブック [フルカラー新装増補版]

  • 作者: Robin Williams,吉川典秀
  • 出版社/メーカー: 毎日コミュニケーションズ
  • 発売日: 2008/11/19
  • メディア: 単行本(ソフトカバー)
  • 購入: 58人 クリック: 1,019回
  • この商品を含むブログ (105件) を見る

4つの原則の日本語訳はこのスライドを参考にした。とても分かりやすいし、本の内容がかなり補強されると思う。

はてなで一緒に働きませんか?