おれんじりりぃぶろぐ

きっと何者にもなれないエンジニアのブログ

『ノンデザイナーズ・デザインブック』を読んでの感想

ノンデザイナーズ・デザインブックを読んだ読書感想文。

概要 ~Hello Design World~

本書はタイトル通りデザイナーではないが洒落乙なプレゼンテーションやwebページをなどを作成したい人向けの本です。私がコードだけで全てを語ることができるハイパーエンジニアならばよいのですが、残念ながらそうではありません。自分の行った成果を人に正しく伝える手段を身につけなければいけません。この本は情報をデザインし、相手に伝わるアウトプットに昇華させるテクニックを紹介してくれています。

大きくは前後半の2部構成になっています。前半はデザインの4つの大原則「近接」「整列」「コントラスト」「反復」と「色」についての知識紹介です。さらに、前半最後では4つの原則を豊富なサンプルを交えてトレーニングしてくれます。

以下に紹介されている4つの原則について簡単にまとめてみました。

  • 「近接」とは、関連ある要素を近くに配置しまとめ、逆に関連しない項目同士を離すことで情報を組織化することです。

  • 「整列」とは、デザインの組織化に加え一体感を演出し情報を整理する効果があります。もう1つの目的としてユーザの視点を誘導し情報の組織化を行います。安定感を求め何も考えずに中央揃えにしてしまうことがあるがこれは良くありません。中央揃えは角張った静粛な場面など目的のある場合を除いて使わないようにすべきです。左揃えや右揃えを使用したほうが洗練したデザインをつくり上げることが可能です。また、基本的には1ページには1種類の方向へ揃えるべきです(例えば、右揃えと中央揃えを併用してはいけない)。

  • 「反復」とは、デザインにリズムを生み出し、そのコンテンツに一貫性を与えてくれます。小見出しなど既に反復している要素を目立たせることで情報に一体感を演出してくれます。

  • コントラスト」とは、実現方法はフォントの選択、色、形、サイズ、空白などあらゆる方法があります。大事なことは2つの要素の違いをはっきりくっきりさせるさせることで、微妙な違いは意味がありません。決して、臆病になってはいけないのです。

後半は「フォント」の重要性と使い方にページを割いています。残念なのは欧文フォント向けに書かれており、日本語フォントにはそのまま当てはめれない部分があることです。別に、日本語フォントの知識について資料を読む必要性がありそうです。

実践 ~ただの履歴書には興味ありません~

「ただの履歴書には興味ありません。この中に優秀なエンジニアがいたら弊社のところに来なさい。以上」

将来、人材エージェント、ジョン・スミスさんからこのような転職の誘いを受けるかもしれません。今回、そんな来る日に備え自分の履歴書を作成してみました。

before

(注意:この履歴書の内容はフィクションです)

希望職種はエンジニアなので、これで十分でしょうか(?_?)う〜ん、どうも私の優秀さが伝わっているとは思えません。ひと目にも触れることはないでしょう(´・_・`)
このことから履歴書においても最低限の身だしなみは大切なことがよく分かります。それでは、この『ノンデザイナーズ・デザインブック』に紹介されているテクニックを実際に使ってみましょう。

after

主な変更点

  • 中央揃え → 右揃えにする
  • 「学歴」や「志望動機」などの小見出しは左揃えにすることによってコントラストを出した
  • オレンジの水平線を小見出しの下に挿れることによって反復とグループ化を図った
  • afterの左側には大きく名前バーを設置しアピール
  • 「履歴書」や「名前」など書かなくても分かる情報をafterでは削除
  • フォントの種類を1種類から2種類へ
  • フォントを「MSP ゴシック」から「ヒラギノ角ゴ Pro」「ヒラギノ明朝 Pro」へ変更
  • afterでは小見出しや左側の名前バーにはサンセリフな「ヒラギノ角ゴ Pro」を、本文にはセリフ体である「ヒラギノ明朝 Pro」を使用しコントラストを出した
  • afterの名前バーと小見出しには同じフォント使用しているが、それぞれw6, w3を使用しwightを変えている
  • afterの左側の茶畑の緑と水平線のオレンジ色は補色関係である

なんということでしょう。素人目にもだいぶデザインが改善されたことを感じることができます。これならばジョン・スミスさんもひと目見る気になるかもしれません。今の私は中身が伴っていないので落とされるでしょうが、見てもらえるだけでも一歩前進です。

もちろん、まだまだこの履歴書には改善や工夫の余地は残されていると思います。しかし、私はエンジニアだからデザインなんか関係ないというダメ意識は少なくとも改革することができました。

まとめ ~さよなら絶望デザイン~

この本の冒頭にジョシアツリーの話が出てきます。確かにそこに存在はしていたがまったく意識することがなかったので認識出来なかったジョシアの木を図鑑を見て名前を認識することによってはじめて見えるようになったというお話です。「知識」が足されることで新たな世界を見ることが出来るようになったのです。このように、この本ではデザインに対してまったく知識のなかった私に新たな視点を与え新たな世界を見せてくれました。

私はデザイナーとは、無数のフォントや色を巧みに駆使し素敵なイラストやキャラクターを散りばめ、私が作った糞ダサなwebページも一瞬にして絶対アクセスしたくなるようになる、そんなことができる人のことだと思っていました。まるで魔法使いです。人は自分の領分以外の理解が及ばない分野になると魔法のような感覚に陥ることがあるかもしれません。しかし、その正体は魔法なのではなく小さな知識やテクニックを駆使した努力の結晶だったです。

今回、この本を読みデザインの世界を少しだけですが覗くことによって魔法などではない努力の積み重ねを理解することができ、少しだけですが真似ごとができるようになりました。