COLUMN コラム

DOLのWebデザイナーは皆、デザインとコーディングの両方を手掛けています。

これまで様々な業種のクライアントからサイト制作の依頼を受けてきましたが、デザインとコーディングいずれの作業においても、その進行にあたっては様々な課題に直面します。

コーディングの課題においては有用な書籍や解説サイトがたくさんありますし、スニペットや完成コードをコピーして解決できることもあります。経験を積んでノウハウを蓄えれば、解決のスピードはどんどん上がっていきます。

しかし、デザインに関してはそうはいきません。参考になるデザインを見た所でコピーできるものではありませんし（絶対にしてはいけません）、経験を積んだとしてもすぐに答えを導き出せるものではありません。

どのようなデザインにするかという課題はレイアウト、書体、配色、写真など一つ一つの要素に対して、答えを決めていく作業です。無数にある選択肢の中から答えを導き出すのは困難ですが、基本的な知識や考え方を知ることで、選択肢を減らすことができます。

今回はデザイナーが覚えておくべきデザインの基本ルールについて紹介いたします。

1. 解決する問題を意識する

そもそもデザインで迷う原因は何でしょうか？「デザイン」の定義について調べてみます。

Wikipediaでは以下のように記されています。

デザインとは具体的な問題を解き明かすために思考・概念の組み立てを行い、それを様々な媒体に応じて表現することと解される。

『デザイン – Wikipedia』より

また、グッドデザイン賞を運営する日本デザイン振興会では以下のように定義しています。

常にヒトを中心に考え、目的を見出し、その目的を達成する計画を行い実現化する。

『デザインとは? | 公益財団法人日本デザイン振興会』より

これらを読むと、デザインとは単純に「見た目」のことを指しているのではなく、「問題解決」や「設計」といった意味も含んでいることがわかります。つまり、デザインで「見た目」を考える際は「問題解決」に結びついているか、ということを常に意識しなければなりません。

デザインに迷いが生じているのは、単純に「見た目」だけを考えて「問題を解決する」視点が抜けているのかもしれません。デザイン作業で手を動かしていると、ビジュアルを作り込むことにこだわりがちですが、それがどのような問題解決に結びついているのかを忘れないようにしましょう。

2. ターゲットを決める

「誰に届けるのか」を考えることはデザインを作る上での原点です。

なるべく多くの人に届けようとすると、誰にも刺さらないデザインになります。デザインをする際は、届けたい相手が誰なのかを理解することが重要です。

デザインの方向性が定まらない、しっくりこない時は、ターゲットが見えていない、もしくは絞り込めていない可能性があります。デザイン作業では「誰に何を伝えたいのか」「どんな行動をさせたいのか」、ターゲットを常に意識するクセをつけましょう。

3. 情報を整理する

3-1. デザインの5W1H

「デザインの5W1H」とは「When（いつ）」「Where（どこで）」「Who（だれが、だれに）」「What（なにを）」「Why（なぜ）」「How（どのように）」と情報を分類、整理する手法です。

クライアントと打ち合わせをしたら、まずは「デザインの5W1H」に従って情報を整理しましょう。情報を整理することで、何を最優先に伝えるべきかを考えることができます。デザインに迷いがある時は、情報がきちんと整理されているか、優先順位を付けられているかを確認してみましょう。

3-2. 引き算で考える

情報を整理して優先順位を付けても、いざビジュアル制作に入るとあれもこれもと情報を足したくなります。しかし、人は一度に大量の情報を受け止めることはできません。また、情報を詰め込みすぎてしまうと、クライアントが本来一番伝えたかった内容がぼやけてしまいます。

デザイナーはクライアントが一番伝えたい情報が何なのかを理解して、受け止めることができる量に調整することが求められます。足し算ではなく、引き算で考えることを意識しましょう。

4. 基本原則を知る

デザインで考えるべきことはたくさんありますが、すべてを一から考えていたら大変です。デザインには基本的な原則や型が存在するので、今回はその一部を紹介します。まずは基本を理解して試行錯誤の回数を減らしましょう。

4-1. デザインの4原則

■ 近接
関連する情報をまとめてグループ化することです。バラバラに配置された情報は、一つ一つ読み解く必要がありますが、情報がグループ化されていると瞬時に理解することができます。

■ 整列
すべての要素を意識的に配置することです。整列されていれば要素と要素が離れていても、それを結び付ける透明な線が一体感を生み出します。空いたスペースに何となく置くのはやめましょう。

■ 反復
太字、色、罫線など同じデザイン要素を繰り返し使うことです。繰り返すことで一貫性が生まれます。Webサイトの場合、どのページに移動しても同じサイトと認識できるように反復を用います。

■ コントラスト
情報の優先度が異なる場合は、はっきり違わせるということです。色や太さだけでなく、背景や書体など大胆に変化を付けましょう。コントラストは面白みを作り出し、人を読ませる気にさせます。

4-2. 構図の基本

■ 孤立した構図
強調したい要素の周囲に余白を大きく設けることで目立たせる方法です。

■ 日の丸構図
中央に円を配置することで、メッセージを伝わりやすくする構図です。

■ 三角構図
三角の形に要素を配置して視線を誘導させます。三角は安定感と落ち着いた雰囲気を生み出します。

■ 2分割
左右または上下に2等分する構図です。安定感と適度な緊張感を生み出します。

■ シンメトリー
仮想の軸を置いて、そこを中心に要素を配置します。左右対称のレイアウトで安定感があります。

■ 反復
同じ要素を繰り返して配置します。商品を並べる一覧ページなどに効果的です。

4-3. 写真の使い方

■ 角版
写真を「四角形」の状態で使うことで、もっとも頻繁に用いられる方法です。四角自体がシンメトリーになっているので、安定感と落ち着きのある印象を与えることができます。

■ 切り抜き
被写体を輪郭に沿って切り抜く手法のことです。背景をなくすことで被写体を大きく配置することができます。切り抜かれた外形はそれぞれ異なるので、動きのあるポップな表現ができます。

■ 裁ち落とし
写真を大きくレイアウトし、余白をなくした使い方です。写真の魅力を最大限に引き出すレイアウトで、ダイナミックな印象を与えることができます。

おわりに

今回はデザイナーが覚えておくべきデザインの基本ルールについて紹介しました。

デザインにはコーディングのような明確な答えは存在しませんが、基本ルールを身に付けることで悩みの解決スピードを向上させることができます。今回紹介したもの以外にも様々なルールが存在しますが、それはまた別の機会に紹介したいと思います。この記事がデザイン作業で悩んでいる方にとって、解決の糸口になりましたら幸いです。

Webサイトの立ち上げや改修にあたって、デザインでお悩みの方はお気軽にご相談ください。