自分的 Web デザインルール・原則編

更新日 2021-11-26
投稿日 2019-12-09
著者サトゥー
カテゴリー design

これから数回に分けて、自分の中である程度ルール化されたWebデザインのルーティンを言語化してお伝えしてみようかと思います。

まずは初回ということで、基本的なデザインについての話をまとめてみます。

そもそも、なんでデザインが必要か

いきなりですが僕は、デザインはコミュニケーションの手段だと思っています（デザインとは？的な話は正解がないのでこれ以上は語りません）。つまり、なにか伝えたいメッセージがあって、それを伝えたい相手がいて、伝わった結果期待する変化があるわけです。
「これらをより高い精度で実現するためにデザインは存在し、必要なんだ」という認識はいつでも持っておくと良い気がするんです。まずはこの前提を共有した上で、今後の話を聞いていただけると助かります。

サトゥー

そのデザインであなたは、どんな人に、何を伝えて、その結果どうなってほしいのでしょうか？

これは流行りの言葉でいうと UX = User eXperience なんて言われてるやつだったりします。

デザインの 4 原則

まずはいちばん有名な原則の話を。
デザインの世界ではよく 4 原則として 近接・整列・反復・コントラスト の4つが挙げられます。これを一つずつ簡単に説明してみます。

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

近接 : Proximity

関連性の高い情報は近く、そうでない情報は余白を作って距離をおいて配置することで、視覚的に要素の関連性が捉えやすくなり、情報を楽に認識できるようになります。

ポイントは 似た要素でカタマリをつくる イメージです。この情報のカタマリを意識するだけでも、デザインのクオリティはぐっと上がります。

近接は、情報の組織化に役立ち、混乱を減らし、明確な構造を読者に提示します。
ノンデザイナーズ・デザインブックより

整列 : Alignment

一定のルールに従って要素を揃えて配置することで、要素に一体感が生まれ、コンテンツ全体の訴求力が高まります。

上の画像の例だったら、丸画像 + キャプションのユニットを、グレー線のグリッドに揃えて配置しています。丸画像 + キャプションは中央揃えにしています。
また、「整列 Alignment」と「一定のルールに従って要素を揃える」の文も中央揃えにしています。

整列は、すっきりと洗練された見え方を生み出します。
ノンデザイナーズ・デザインブックより

反復 : Repetition

一定のルールに従って要素を繰り返すことで、デザインに一貫性が生まれます。

上の画像だと、「見出し + (画像 + キャプション) 反復」のセットが反復されています。(画像 + キャプション) の要素は、丸画像と下にキャプションを中央揃えでおくことがルールとされているようです。
（少々高度ですが）フォントも同じもの (Noto Sans CJK JP) が繰り返し使用されていることにも着目です。

反復は、組織化を促進し、一体性を強調します。
ノンデザイナーズ・デザインブックより

コントラスト : Contrast

なんでも反復すればよいというわけでもありません。反復を徹底しすぎると、要素にメリハリが失われ、本当に伝えたいメッセージを適切に届けることができなくなってしまう恐れがあります。そこで、あえて違いをつくってメリハリを生み出してみることも意識しましょう。

同じものを同じように見せたいのであればコントラストは用いるべきではありません。
しかし上の画像のように、例えば名前（ジェニファーさん）を重要な要素と考えるのであれば、画像上のカードのようにフォントサイズを同じにするのではなく、画像下のカードのようにフォントサイズ、太さ、色を変えて表示してみると全体が締まります。

近接・整列・反復までを実践できても、なんだかデザインがのっぺりしたような、垢抜けない感じになってしまうという方は、このコントラストを意識するだけでもクオリティがぐっと上がると思います。