ノンデザイナーズ・デザインブック

2024年3月24日

この記事をエンジニアリングにタグ付けすべきかは若干迷うところではあるが、エンジニアとしてデザインを学び、エンジニアリングにどう生かすかという目線で記録を残そうと思う。

そもそもデザインについて学ぼうと思ったのは、作ったWebページをデザイナーさんにチェックしてもらって指摘をもらったところで何が悪かったのかすら分からないことに危機感を覚えたから。

コンポーネントやモジュール単位をデザイン通りに作ることはできるが、原稿をみながらページとして組み立てようとするとなかなかうまくいかない。

ある情報を表す時に使うコンポーネントやモジュールが複数ある、つまりパーツの役割が重複しているという問題もある気はするが、大規模なサイトになってくると、それなりにパターンが必要になってくるのだと思う。

いくつかあるパターンの中から適切なものを選んでページを実装するとなると、やはりデザインについて少しでも知っておいた方がいいんだろうなぁと思った。

このメモは本に書いてあったことをそのまま書いているところもあれば、自分なりに咀嚼してまとめているところもある。

デザイン原則

本を読む前からなんとなく知ってはいたけど、それぞれの原則についてちゃんと学んでいなかったと実感した。

近接

近接の目的は情報の組織化。どこから見始めるか、どういう道筋をたどるか、どこで読み終わるのか、読み終わったあとどこに目がいくか、といったことを考える。

近接について勘違いしていたことは単純に距離を近づけるだけではなく、見え方も近づけるべきだと言うこと

行き場のない余白を減らすことで、目立たせたい情報の領域を確保することができたり、ほんとうに必要な余白を使う余地がでてくる。

余白は目を休めるためにつかう。必要な余白を確保するために、重複している情報を減らしたりすることも必要。

近接のコツ

• ページを俯瞰して眺めながら視線が止まった回数を数え、期待しているよりも多い場合は、要素を近づけるなどを検討する

整列

中央揃えについてここまで考えたことがなかった。中央揃えはあくまで中央で揃えているだけなので、左右両端のラインは揃わないから、左右揃えに比べると若干バラついている印象が出てきてしまう。

中央揃えにするなら、少なくとも中央揃えであることがはっきりわかるようにする必要がある。テキスト自体を中央揃えにしたからといって、テキストのブロック自体も中心に配置する必要はなく、ちょっと右にずらしてみるとかもできる。

整列のコツ

• できる限り複数種類の整列は使わない。使う場合も自分の中で明確なガイドをひいて情報をつなぐこと
• でこぼこのガイドとまっすぐなガイドが隣り合わせにならないように注意する

反復

視覚的に同じ性質をもつ要素を繰り返すことでグループ化させると同時に、反復から孤立した要素同士の結びつきを作り出す。

反復のコツ

• 反復は同じ色や同じ大きさ同じ形状だけでなく、同じフォント、同じ位置、同じ雰囲気なども対象になる
• 共通点に気づきにくいものは数を増やすことで反復していると気づきやすくなる
• インパクトの強い要素を反復させすぎない

コントラスト

コントラストは差を明確にする効果がある。情報の性質が異なるのであれば、見た目からも違うことがわかるように伝えることが目的。

たとえば罫線の太さが1pxなのか、2pxなのかのように、二つの要素の違いが小さい場合、それが意図的な差異なのか、間違いなのかが分からない時がある。

コントラストのコツ

• 書体、フォントサイズ、色、太さ、形状、配置、余白、などでコントラストをつける
• どこを抑えるか、どこを強調するかを考える
• 半端な強調はしない

書体の選び方

特徴的な書体を除くと大きく分けて以下の4つのカテゴリに分けられる。

• オールドスタイル
• モダン
• スラブセリフ
• サンセリフ

同一ページ内で、2種類の書体を使う場合は、カテゴリが異なるものを選ぶと、違いがはっきりするので、書体を変える効果が高まる。

オールドスタイルの特徴

先のとがったペンで書かれたような印象がある。

• ななめのセリフ
• 太さの推移はゆるやかであり、セリフが本体に接続する部分はカーブ（ブラケティング）になっている
• ストロークのもっとも細い部分を線で結ぶと斜めの線になる（斜めのストレス）

モダンの特徴

印刷技術が洗練されたことで、オールドスタイルよりも比較的メカニカルな特徴を持つ

• ほそくまっすぐなセリフ
• 太さの推移は急激で、セリフが本体に直角に接続している
• ストロークのもっとも細い部分を線で結ぶと直線になる（垂直なストレス）

スラブセリフの特徴

読みやすさにフォーカスして文字の形全体を太くさせた書体。

• 水平で太いセリフ
• 太さの推移はほとんどなく、ブラケティングも緩やか
• ストロークの細い部分を線で結ぶと直線になる（垂直のストレス）

サンセリフの特徴

「サン」はフランス語で「なし」を意味するらしい。セリフがない書体。

• セリフがない
• ほとんどの書体がモノウェイト（太さが一定）
• 太さが一定のため、ストレスもない

余白

行き場のない空白、という考え方が自分にとっては新鮮だった。とくに中央揃えにしてしまうとコンテンツの両端に空白ができてしまう（余白が分断される）。

目を休めるための余白、という考え方もこれまで持っていなかったので、余白の見方は結構変わるかもしれない。

けっこういろいろな気づきがあったけど、やはり良いデザインは見る（読む）側の認知負荷を減らすんだな、と思う。

とはいえ、こういう原則があると、そっちに引っ張られやすい自分もいるので、あくまで原則であることは忘れずに。