「近接・整列・反復・コントラスト」エンジニアが気にすべきはどれ？ノンデザイナーズ・デザインブック感想文

全部大事！

フロントエンドエンジニアの茶木です。
すみません、いきなり100点の回答を書いてしまいました。

ノンデザイナーズ・デザインブック を読んでいます。

近接・整列・反復・コントラスト はデザインの原則の項目で述べられる 4つの基本原則なので、もちろん全部大事です。大事なのですが、エンジニア視点で、つい疎かになりがちな部分はどこか、どのように実務に取り込むか、に注目したいと思います。プラス、簡単に各項目をまとめます。

近接

近接の基本的な目的は、組織化です。 他の原則も組織化に貢献しますが、関連する要素を近づけてグループ化するだけで、自動的に組織構造ができあがります。 情報が組織化されていれば、読んでもらえる可能性が高くなり、覚えてもらえる可能性も高くなります。

ノンデザイナーズ・デザインブック[第4版] p32

関連性の強い要素は近くに寄せて置くと自動的に組織化される、ということです。

エンジニアが近接のために気をつけるのは
「関連しない要素を離して置く」こと

近接の理解は難しくありません。組織化がエンジニアのフィールドでもあるためです。コンポーネント化すれば大体組織化されますし。

しかし、関連要素は近くに置く以上にエンジニアが気にすべきは、関連しない要素を離して置くことです。

逆に言えば、近くに置くだけで自動的に組織化が起きちゃうので、スペースは無関係な要素同士が組織化しないように離す意図で入れられています。margin や padding は大切。

整列

整列の基本的な目的は、ページの一体化と組織化です。 ＜中略＞強い整列が、 もちろんふさわしい書体と組み合わされて、洗練された表現、フォーマルな表現、楽しい表現、真剣な表現を生み出す主役になることはよくあります。 

ノンデザイナーズ・デザインブック[第4版] p51

要素の先頭、末尾、あるいは中央が、他の要素と揃っているとき一体感を生みます。

エンジニアが整列のために気をつけるのは
「resizeと折返しなどの web特有の動作」

整列はデザインに素直に実装すれば、エンジニアの実装で悪くするような要素ではなさそうですが、実装時に意識しておくとプラスになりそうなことがあります。resize と折返しです。web特有の動作なので製作手順や経験によっては、フロントエンドエンジニアのほうが気が付きやすいかもしれません。

俗にいう なりゆき など、ページ端で要素が折り返すようなものは、ページ幅が十分でないケースでどのような見た目になるかは要検討です。

ありがちなのは、横並びのタブリストや、パンくずリストなどです。

1行想定デザインのタブリストが折り返す場合どうなるのが良いか？といった例です。

この例だと、折り返し時の区切り線は、次の行頭ではなく前の行末にすべきでしょう。単純に ”なりゆき” には任せられないものもあるもんですね。

反復

デザイン全体を通して視覚的要素を反復すると、孤立している部分が結びつき、作品が一体化されて強化されます。 ＜後略＞

ノンデザイナーズ・デザインブック[第4版] p68

同じ構造の繰り返しの実現は、コンポーネントが便利です。もちろんコンポーネントは反復と相性が良いです。

エンジニアが反復のために気をつけるのは
「反復のコアを見抜いて共通化する」こと

問題が起きうるのは WET（write everything twice） で実装し、意図せず反復を崩してしまうケースです。つまり、デザイン的には反復対象の構造だけど、コーディング上は別々のコンポーネントで作られたケースです。WETで書くのは

• 一見似ていないので、反復対象の構造だがエンジニアは気がついていないケース。
• 今後の拡張を見通して、あるいは見通せず、あえてWETで書いているケース。

反復のコアを見抜いて実装するのは、かなり難しいことだと思います。というのは、デザインの意図まで踏みこまないとどの部分が反復のコアなのかわからないし、それとは別にWETにすべきかのロジック上の判断があるからです。

とはいえ、デザイナーとエンジニアで 反復のコア が共有されれば大きな乖離はなくなるのではないでしょうか。

コントラスト

コントラストには、互いに密接に関係する二つの基本的な目的があります。一つは、ページに面白みを作り出すことです。＜中略＞もう一つは情報の組織化を支援することです。ある項目から次の項目への論理の流れが、つまり情報の組み立てが読者に一瞬で分かるようになっているべきです。コントラストをつけたせいで、読者を迷わせたり、焦点ではないものを焦点に見せてはいけません。

ノンデザイナーズ・デザインブック[第4版] p84

コントラストは色の話だけではなくて、文字サイズやフォント、フォントウェイトなどの差異を指し、この差異を明確にすることです。違うもの同士に明確な差異をつけ、同じもの同士の差異をなくすのが重要です。

エンジニアがコントラストのために気をつけるのは
「曖昧さが混じらないようにする」こと

違うもの同士に明確な差異をつけるのは主にデザイナーサイドの要件であり、エンジニアの出番は限定的です。しかしながら同じもの同士の差異をなくすことはエンジニアのフィールドです。

定数定義や命名規則、参照の方法などで、色や、フォントサイズ、アイコン、基本的なコンポーネントなど、曖昧なものがページに混じらないようにアシストができます。

おわりに

以下、ノンデザイナーズのコーディング中のおすすめの視点です。

• 近接：デザインにスペースがある理由を考える
• 整列：webページ特有の幅可変を想定する
• 反復：反復を壊さないために WET に書くか考える
• コントラスト：曖昧さが混じらないようにすること