『ノンデザイナーズ・デザインブック[第4版]』を読んだメモと、デザイン時の個人的チェックリスト

「デザインのコモンセンスがない」と言われた

『ノンデザイナーズ・デザインブック』
言わずと知れた有名なデザインの名著です。
フロントエンドのデザインに関わる人なら一読を、とよく推奨されているのを見かけます。

読みかけとなっていたため、アドベントカレンダーのイベント駆動学習で読みます。
本記事ははじめてのひとりアドカレ2024 by hayami Advent Calendar 2024の6日目の記事です。

筆者は普段フロントエンドもバックエンドも実装を担当していますが、エンジニアになりたての頃、自分がいいだろうと思ったデザインをモック段階でレビュアーや見てもらった関係者から「デザインのコモンセンスがない」と言われ、激震が走った思い出があります。

あれから自分なりにマテリアルデザイン等キャッチアップを続けてきましたが、本記事はそんなあの頃の自分に半分思いを馳せつつ、要点をまとめつつ、デザイン時に具体的にどういった点に気を付けたらいいのかを個人的なチェックリストとしてまとめました。

4つの基本原則

『ノンデザイナーズ・デザインブック』より
これらの4つの基本原則に沿ってデザインを行うことで、よりよいデザインができると本書では述べられています。

• コントラスト(Contrast)
  • 要素が「同一」でないなら、はっきり異ならせる
  • ページにおもしろみを作りだす
  • 効果：読む気にさせる、情報を明確に伝える
• 反復(Repetition)
  • ＝一貫性のこと
  • だれかが責任をもって作ったという印象を与える
  • 効果：組織化を促進し、一体性を強化
• 整列(Alignment)
  • 効果：すっきりと洗練された見え方を生み出す
  • 実現方法：意識的に要素を配置する
• 近接(Proximity)
  • 効果：情報の組織化に役立つ、混乱を減らす、明確な構造を提示
  • 実現方法：目を細めて見た時に、視線が止まった回数が１ページあたり3～5回を超える場合、グループ化しよう

読みながら考えたことなど

• 最近は手軽で綺麗なフレームワークがたくさんあるが、デザインの基本原則を知っているに越したことはない
  • 特にフロントエンドの実装に関わるのなら
  • なぜならば、大枠はフレームワークで実装できたとしても、結局のところ微調整やカスタマイズは実装時に行わなければならないシーンが少なくないため

• Markdown記法は、それそのもののデザインがかなり原則に沿ったデザインとなるようになっている
  • タイトル・箇条書きによる整列、箇条書きによる反復、太字によるコントラストの提示
  • これらが、デザインに慣れていない人であっても少なくとも思考の中で構造化できていれば、それが画面に見やすい形で反映される仕様になっている
  • 記事を書く時に太字や斜体を使うことでコントラストを作り出すこともできる

• 使用するフォントの種類を１種類でなくいくつか増やす、というのも効果的みたいだ
  • たとえばある１種類のフォントに太字をかける時よりも、別の近似性のある書体で使い分けたほうが場合によってはデザイン的にメリハリが出る
    • ただし、フォントの種類を増やすことは目的でなく、よりよいデザインのための手段でなくてはならない

• 整列に関して、書道を思い出す
  • 整列に関して、本書では要素が特定の基準・見えない線にそって一直線に並べられていることが例に挙げられていて、これが「整列」であるというような説明がされていた
  • 私は書道経験者なのですが、書道をやっていた時、いつも中心線を強く意識して書いていた（師匠からとにかくそのように教わった）
  • 字の些末な歪みは問題でなく、何よりも一番守らなくてはならないことは、紙に書かれた字に一本の中心線が通っているかどうか
  • 逆にいえば、どんなに一文字一文字が綺麗であっても中心に線が通っていなければ「書き直してこい」と言われていたことを、ふと思い出す
  • Web画面は画面の比率によって構図が変わるため一概にどの画面サイズを基準とするかはわからないが、もっと意識的に、それこそ書道でいう中心線のような「見えない基準」を自分の中に強く定めるということが必要なのだろう
  • 要するに、デザインをする時に、デザインする側が意識的に要素を揃える線を宙に引く（そして、それは最終的に明示するものではないとしても、いつまでもデザインする側の意識の中には明示的に残り続けるものである）ということが大事なのではないか

• 文頭は揃えるのは当然だが、「余白」も当然そろえる
  • 余白を揃えるというのは、デザインする側が引いた線に沿ってオブジェクトを並べた時に、他に不均一な余白がないか、ということ

• p.158 ウェブ(申し込みフォーム)の整列の良い例のデザイン例が完全にReact Admin
  • 実務で実装していて、コーディングの慣れはともかくデザインにとにかくストレスがないな、と感じていたけれど、今考えてみればデザインの基本原則をすべて踏襲していたからなのか

• 大事なことは「意識的であること」

デザイン時の個人的チェックリスト

本書を読んだ上で、個人的にデザイン時に最低限チェックすべきことをリストにしました。

本書で述べられている4つの基本原則は細かいところまでこだわれば多岐にわたりますが、最低限下記の質問について自分が実装したデザインについて述べることができれば、ある程度デザインの原則に沿ったデザインができていると言ってよいのではないか、という視点から要点を抜粋しました。

デザイン時の個人的チェックリスト

• まず、目を細めた時に視線が意図した箇所にいくか
• デザインに要素を揃えるための明示的な線が存在するか
  • その明示的な線に沿って要素を揃えた時に、不自然な形の余白が存在しないか
• 意識しなくてもグループが見えてくるか
• 自分がなぜその要素をそこに配置したのか、理由が述べられるか
  • つまり、すべての要素に対して意識的に配置したといえるか

まとめ

積読となっていた『ノンデザイナーズ・デザインブック』を読了し、本書を踏襲して個人用のデザイン時のチェックリストを作成できました。
今思えば、新人の頃「デザインのコモンセンスがない」と言われたのは、デザインにおいて引っかかりを作る、ということがうまくできず、引っかかりという名のノイズを埋め込んでいたからな気がします。スムースで整頓された要素の中に、統一性を持たせながらも目を引く要素を仕込む難しさを感じます。

結局のところ大量のインプットと試行錯誤が質を生むのでしょうが、ご参考になりましたら幸いです。