はじめに
こんにちは！ミツカリでジュニアエンジニアをしています。tt（髙橋）です。
この記事ではWebエンジニアなら抑えておきたい「デザインの4原則」とそれの活用事例を共有します。
私はWebディレクター歴がそこそこあり、ミツカリでもLPリニューアルなど大きい施策の時にはマーケティング業務に参加しています。
その掛け合わせのノウハウを今回はお伝えします。
30代半ばでジュニアエンジニア？と思われる方もいると思い、過去のブログで簡単に自己紹介させていただいています。
デザインとは？
まず、エンジニア業に携わる方があまり触れる機会がないと思いますので「デザイン」とは何なのかを説明しておきます。分かりやすいのは「デザイン」と「アート」を比較した時です。
デザインとアートの違いは、目的が異なる点です。
（※諸説あるかもしれませんが、一般的にはこの区別であると認識しています。）
- デザイン: 特定の目的（例えば、ウェブサイトの改善や製品の魅せ）を達成するために、機能や外観を設計するプロセス
- アート: 自己表現や感情伝達、メッセージ発信が目的
つまりデザインは「目的を達成するため」のものであり、アートは「発信自体が目的」です。SaaSの場合で言えば、デザインは「資料請求やお問い合わせの数を増やす」ためのものということですね。
デザインの4原則とは？
デザインが「目的を達成するため」のものだとした時、デザインの4原則は「目的を達成しやすくする一般的な原則」です。
適用することでWebサイトであれば「情報が伝わりやすく」なり、物理的な製品であれば「直感的に使いやすく」なります。
デザインの4原則は「近接」「整列」「反復」「対比（コントラスト）」の4つの考え方からなります。 それぞれ簡潔に説明すると以下のようになります。
- 近接: 関連性の高低に応じて要素間の距離を調整することで、要素間の関係を明確にする
- 整列: 要素を揃えることで統一感と秩序を出し、要素の所属や順序を分かりやすくする
- 反復: 同じデザインを繰り返すことで、デザインと要素がもつ情報の共通性を持たせて認知負荷を下げる
- 対比: 要素の強弱をつけることで、情報の重要性に階層を持たせる
具体例を見るのが一番分かりやすいでしょう。 例としてよく使われるメニュー表で見比べていきます。
まずはデザインの4原則に従ったメニュー表がこちらです。
そして4原則を意図的に無視したメニュー表がこちらです。
2つ目の方が分かりやすいという方はいないと思います。
これだけでは4つの原則について理解するのは難しいと思いますので、以下で原則の詳細について解説していきます。
デザインの4原則① 「近接」
近接は平たく言うと「距離が近い要素ほど関連性が高く、距離が遠い要素ほど関連性が低くあるべき」という原則です。 再度、具体例を使って確認していきましょう。
まず、デザインの4原則が4つとも適用されたものがこちらです。
そして、近接の原則のみを適用しなかったものがこちらです。
どうでしょうか。メニュー内容がどのカテゴリで分類されるのかが分かりづらいのではないでしょうか。
近接の原則が適用された場合、「Coffees」「Teas」「Others」の各カテゴリグループ間は広めの間隔を持っており、それぞれが独立したグループに見えると思います。
また「Coffees」など見出しと「ブレンドコーヒー」などの距離は各カテゴリグループより狭い間隔となっており、「ブレンドコーヒー」などが「Coffees」に所属するということが直感的に伝わりやすくなっています。
さらに「ブレンドコーヒー」「アメリカン」「カフェラテ」の距離は見出し「Coffees」と「ブレンドコーヒー」の距離よりも近くなっており、並列なメニューであることが伝わると思います。
「近接」を使った事例と注意点
それでは「近接」の具体的な事例を見ていきましょう。当社のLPのケースで説明をいたします。
画像にある通り、事例ブロックの中で見出しと事例／事例とボタンの間隔は60pxとなっています。
そして各事例は36px間隔となっています。
さらに次のブロックである「導入の流れ」までの間隔は120pxとなっています。
このように関連性の高低に伴って、要素間の距離が設計されています。
一定以上のデザイン知識を持つ人間がデザインしているのであれば、何気なく目にしているホームページであっても、原則は活用されているということが実感しやすいのではないでしょうか。
ここで注意点があります。違う原則の「反復」の内容にもかかってくるのですが、この近接の原則はWebサイトであればサイト全体で一貫することが重要です。
先ほどのLPの例で考えてみましょう。
まずユーザーはある程度コンテンツを読み進めて、120pxの間が空くとブロックの区切りだという感覚を持ちます。ここで急に60px間隔でブロックを配置してしまうと、ブロックの区切りだということを認識できず、地続きのコンテンツのように認識してしまうでしょう。
上記のようなケースを防ぐために、当社LPでは「60px間隔を使うのはこのケース」「120px間隔を使うのはこのケース」というように定義しています。
こうすることで、直感的にコンテンツの切れ間や意味合いの区切りをユーザーに伝えられるようにサイト全体を設計しています。（さらに言うと、あえてこの定石を外すことでユーザーの意識を誘導するという設計もしていますが、それは応用編に入るので割愛します。）
最後に
以上がデザインの4原則概要と「近接」の原則解説になります。
残りの3つの原則は次回以降の記事で解説させていただきます。
Webディレクター目線で言うと、4原則を踏まえた実装をしてくれるエンジニアの方はかなりありがたいです。
エンジニア的なありがたい度合いで言うと、大きめのプルリクエストでコード内コメントやプルリク上の補足コメントを丁寧につけてくれるくらいでしょうか。
4原則踏まえていないパターンはRequest Changesが必要ケースも多いので、それ以上に助かるかもしれないですね。
デザインの4原則は知っていれば取り入れやすい知識の一つだと思います。
この記事を読んでくださった方のよりよい実装の参考になればとても嬉しいです！
現在、ミツカリではITエンジニアを募集しています。興味のある方はぜひお気軽にご連絡ください！
