たった4つの意識でデザインを洗練させる方法

HOME>Journal>たった4つの意識でデザインを洗練させる方法


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

 
今回はこれらの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サイト


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

まとめ

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

Feature

Latest

Category

Archives

Please feel free to contact us