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

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

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

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

いきなりですが僕は、デザインはコミュニケーションの手段だと思っています(デザインとは?的な話は正解がないのでこれ以上はパスで)。

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

サトゥー

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

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

デザインの 4 原則

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

近接 : Proximity

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

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

近接は、情報の組織化に役立ち、混乱を減らし、明確な構造を読者に提示します。

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

整列 : Alignment

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

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

整列は、すっきりと洗練された見え方を生み出します。

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

反復 : Repetition

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

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

反復は、組織化を促進し、一体性を強調します。

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

コントラスト : Contrast

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

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

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

コントラストは、ページ上で視覚を引きつける最も重要な要因になることがよくあります。つまり、読者をまず読む気にさせるという働きをするのです。

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

余白を恐れてはいけない

これはデザイン初心者あるあるなのですが、余白を恐れてしまうあまり、なにか要素を飾りとしておいてしまう人が多い気がします。

余白を恐れてしまうあまり、例えば下の画像(極端な例を作りました)のようなものを作ってしまう人は要注意。

がんばってつくりました。読む気失せますね

余白は怖いものではなく、メッセージを引き立たせるために重要な要素であるという意識を持つだけで、きっとデザインのクオリティはぐっと上がります。

余白を使ったほうがメッセージが引き立つと思いませんか?

もちろん、余白を崇拝するあまりメッセージが強調されなくなってしまってはいけません。先程の原則の中のコントラストを意識しつつ、余白と仲良しになってみると良いです。

これはやりすぎな気がします

巨人の肩の上に立っていけ

巨人の肩の上に立つというのはアカデミックの世界で有名な言葉ですが、デザインの世界でもこれは同じです。他の事例を研究し、よいものは積極的に真似する。
既存事例をたくさん見て、何が良くて何が悪いかを見極める審美眼を養うことで、良いデザインは自然に実践できるようになります。

Google Scholar という論文検索サイトにも載っている有名なフレーズです。大好きです

Pinterest や Instagram で良いと思うデザインをたくさん見たり、美術館に行ってみたり、散歩しながら日常のあらゆる「デザインされたもの」を見て、考えることが大事です。

目を凝らしてみると、良いデザインが世の中にあふれていることがわかります

最初に書きましたが、本質はコミュニケーションだと思っています。つまり「誰に何を伝えて、どうなって欲しいか?
デザインをみながらこれを考えるだけで、自然と良いデザインができるようになると思います。

自分的 Web デザインルール・カラー編 自分的 Web デザインルール・レイアウト編

追記: こちらの映像が非常にわかりやすかった。↑の原則がめちゃくちゃ伝わってくると思います。

コメントを残す

メールアドレスが公開されることはありません。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)