デザインに自信はないけれど、
チャレンジしてみたい、またはチャレンジする必要があるという方。
このようなことで悩んだことはありませんか？
 
「伝えたい情報をどのようにみせればいいのかわからない…」
「ごちゃごちゃして見にくくなってしまう…」
「初心者丸出しのデザインになってしまう….」
 
そんなあなたにいい方法をご紹介します。
簡単でかつ効果的なたった４つの技術です。
 
これさえ押さえておけば、
「それっぽく」魅せることができます。
＝整っていて、見やすくて、大事な部分に目がいく
そんなデザインです。
 

 
今回はこれらの4つの技法を実際に実践しながら、
「名刺」「メニュー表」「webサイトのメインビュー」
以上のデザインを整えていこうと思います！
 

1.近接

近接の原則は
「関連する項目をまとめること」です。
 
まずは
関係のある内容のものは近づける
あまり関係のない内容のものは遠ざける
ことだけを意識します。
 

1-1.名刺

※

Aがデザインを適用する前のもの

Bがデザインを適用した後のもの

になります。

 
まず以下のように分類分けをしました。
①ロゴ　②人物情報　③会社情報
 
言いたいことはわかるようになりましたが、この時点ではまだ少し見づらいですね。
 

1-2.メニュー表

こちらもこのように分解して、グループ分けをすることができます。
①タイトル　②料理のジャンル　③料理名　④説明書き　⑤金額
 
それぞれの項目を段落で分けました。
Aのデザインよりまだ見やすくなったかと思います。
 

1-3.webサイト

Aの時点で、すでにグループ分けされているようにも思いますが、
よりわかりやすく工夫することができます。
距離を保ったり、配置やサイズを変更したりしてさらに個々を確立させます。
 
 

2.整列

整列の原則は
「ページ上の全てのものを意識的に配置すること」です。
 
ページ上の項目が整列しているときは、より強く団結したユニットが生まれます。
たとえ要素と要素が離れていても、
整列さえしていれば、それらを結びつける透明な線を私たちは確認することができるのです。
 

2-1.名刺

※

Aがデザインを適用する前のもの

Bがデザインを適用した後のもの

になります。

 
①ロゴ　を右揃えで配置しました。
②人物情報　③会社情報　を左揃えで配置しました。
 
かなりスッキリした見栄えになってきたかと思います。
 

2-2.メニュー表

①タイトル　②料理のジャンル　を中央揃え、
③料理名　④説明書き　を左揃え、
⑤金額　を右揃えで配置しました。
 
それぞれの意味するところがパッと見ただけでわかるようになってきたのではないでしょうか？
 

2-3.webサイト

メインビジュアル部分
タイトル、説明文、ダウンロードボタンを中央揃えで統一し、
それぞれのサイズを調整しました。
 
また本文の各ジャンルは縦並びの方がわかりやすく一般的です。
 
整列では、ようやく全体の骨組みが出来上がるといったイメージです。
 
 

3.反復

反復の原則は
「デザインの特徴を全体を通して繰り返すこと」です。
 
反復＝一貫性
と考えることができます。
それぞれの要素がページ上でどんな位置づけになっているのか、
一目でわかるようにすることができます。
 

3-1.名刺

※

Aがデザインを適用する前のもの

Bがデザインを適用した後のもの

になります。

 
反復とは、全体に散りばめられた同じ要素を視覚的にグループ化することです。
なので、同じ要素のない名刺の場合「反復」でできることはありません。
 
次の例を見ていきましょう。
 

3-2.メニュー表

②料理のジャンル　のカラーを他より濃いものに変更しました。
③料理名　の頭に「●」をつけることで料理名だけの共通デザインを設定しました。
 
カラーやサイズ感で、それぞれの要素の共通認識が簡単にできるようになりましたね。
 

3-3.webサイト

本文、コンテンツが反復される箇所に
フックとなるタイトルを設置しました。
 
このことで全体にメリハリが生まれ、
ユーザーからの視線を集めたい箇所も意図的に作り出すことができるようになりましたね。
 
 

4.コントラスト

コントラストの原則は、
「万人を惹きつけるために、要素にコントラストをつけること」です。
 
コントラストは、視覚的なおもしろさを加え、
ユーザーの興味の獲得の入り口になり得るものです。
 
またコントラストは目を引くために役立つだけではなく、
情報を組織化し、段階構造を明らかにする、ページ上の道案内役にもなります。
 

4-1.名刺

※

Aがデザインを適用する前のもの

Bがデザインを適用した後のもの

になります。

 
①ロゴ　のサイズを変更してより目立つようにしました。
②人物情報　③会社情報　のメインの部分を太字にすることでよりその箇所に視線が動くようになったのではないでしょうか？
 
また青い帯を差し色として挿入することで、
殺風景だったただの文字列が少し和らぎ、
全体的に見やすい印象になったのではないでしょうか。
 

4-2.メニュー表

 
①タイトル　が英語表記になり「オトナな」雰囲気が演出されました。
③料理名　④説明書き　の行間を一定間隔にすることユーザーに安心感を与えます。
 
こちらも差し色にページ全体とトーンのあった色を挿入しました。
統一感もでてより引き締まったように感じられると思います。
全体的に高級感のある印象を与えることができるのではないでしょうか。
 

4-3.webサイト

①メインビジュアルのタイトルに愉快なフォントを適用しました。
ゲームのワクワク感を連想させる材料になっています。
②端末の写真に白い影を付けて、インパクトのある見た目に変更しました。
③本文、アイコンを白い楕円形で囲みました。
それぞれの要素が独立したコンテンツであることをよりわかりやすくアピールしています。
④”詳細に飛ぶ”ボタンを同じく白い楕円形で囲み、シャドーを付けました。
シャドーを付けることで、「押すことができる」という事実を間接的に伝え、リンク先のページにわかりやすく誘導しています。
 
フォントや世界観をまとめることで全体に統一感がでます。
興味の惹かれる楽しそうな印象になったのではないでしょうか。
 
 

まとめ

以上になります。
簡単な４つのことを意識するだけで、
見違えるように変化したかと思います。
しかし今回の内容は基礎の部分の内容になります。
このことを知った上で発展させていくといいかもしれませんね。
ここまで読んでいただきありがとうございました。
 
今回参考にした資料はこちらです！
より詳しく書いてあるので今回の記事で気になっていただた方は、
是非こちらから。
[amazonjs asin=”4839955557″ locale=”JP” title=”ノンデザイナーズ・デザインブック 第4版”]