皆さんこんにちは。どんぶラッコです。
今日は皆さんとデザインがイケてないときに思い出すべき四つのキーワードというテーマでお話します。
みなさん、デザインは得意ですか？
僕はデザインすごい苦手で結構です。変なデザインとか作っちゃったりとかします。そんなときに、この4つのキーワードがちゃんと僕は実施できてるのかを見直すことで、ある程度はデザインのレイアウトを整えることができます！
その4原則っていうのは一体何なのか、どういうことを気をつければいいのかっていうのを、皆さんと一緒に見ていきたいなというふうに思っています
1. 近接
じゃあ早速見ていきましょう。一つ目のキーワードが近接です。
具体的な例を見ていきましょう。
こんな感じでメニュー表を作らなきゃいけないとします。
例えば、ここの部分しか表示されてなかったとしたらどうでしょう？
◆の商品は商品Aなのか商品Cなのか、■の商品っていうのは賞金Bなのか商品Dなのかって、これだけだとちょっとわかりづらいですよね。
そういうときに使うテクニックが近接になります。
意味の塊ごとにグループ化する 、意味が一緒のものを近くに置いてあげるのが近接を使うときのポイントです。
今回の場合、商品の画像と商品名っていうのを一つの塊として、このように間隔をあけることで、どれが商品Aなのか商品Bなのかっていうのがわかりやすくなります。
意味ごとにまとまりを作ってあげるっていうのを一つ意識してあげると、デザインが整います。
2. 整列
続いてのキーワードは整列です。これも一緒に例を見ていきましょう。今回は名刺の例ですね。
自分の会社とか名前とか住所電話番号メールとかを列挙することあると思うんですけれども、これもちょっとわかりづらいですよね。
これを整列のテクニックを使って整理してみましょう。
まずは近接のテクニックを使って、上に役職名と名前、下に会社の情報をまとめます。
さらに整列のテクニックを使って、左揃えや右揃えにしてあげることで意味としてのまとまりを持たせ、デザインとしてすっきりします。
3.強弱
続いては、強弱です。
例えばよくある広告を想定してください。
”7日間で完結するプログラムです！今お申し込みいただく受講料20%オフなんですよ” みたいなWebチラシ、よくありますよね。
上記の画像でも一応情報は伝わってきますけれども、読み流しちゃうんじゃないでしょうか。
あとは、この文章の中でどれが一番重要な情報なのかっていうのがちょっとわかりづらいですよね。
さらに、”詳しく見る”がリンクで表示されてますが、本来は一番クリックしてもらいたい箇所ですよね。
ユーザが何をしてもらいたいのか、これだけだとちょっとわかりづらいですよね。
では、これもこのように直してみます。
7日間っていうところを強調してあげたり、受講料20パーOFFっていうところを強調してあげる。
強調の手段としては、文字を太くする、あとは文字色を変えてあげるなんかが有効ですね。
“詳しく見る”もリンクで表示ではなく、ボタンでここ押してくださいねとわかりやすく表示してあげます。
この作業してあげると、お客さんとかぱって見たときに、7日間の何かなんだな、20パーOFFされるんだなっていうのは一目でわかりますよね。
このように、どの情報が見てもらいたいかを優先順位づけした上で強調のテクニックを用いると、お客さんとか一目でぱっとわかりますよね。
4. 反復
最後の一つは、反復です。
これも例から見ていきます。
情報を列挙することってあると思うんです。これはサンプルの行1です、行2です….って感じですね。
ただこののリストの左側が、■や▲でバラバラだと同じ情報だってわかりづらいですよね。
ここの部分を、こんなふうにチェックマークとかで統一してあげると同じ情報なんだなっていうのがわかりやすくなるんです。
反復のテクニックはウェブページのトップページや会社情報とかお知らせページの色合いやロゴ統一されていたりしますよね。
そういうふうに同じロゴとか、同じカラーリングっていうのを使うことでこれっていうのは同じ情報グループであることをデザインで教えてあげるのが反復の例になります。
ちなみに、”強弱”の例も緑をベースの色にしていることで、同じ情報なんだなっていうのがわかりやすくしてあげています。
まとめ
- デザインがイケてるかは4つの切り口からチェックする
- 近接 … 情報ごとにまとまっているか？
- 整列 … 左揃え・右揃えしてますか？
- 強弱 … 情報の優先順位がついていますか？
- 反復 … 複数情報のグループ化ができていますか？
PowerPointやWebサイトを作ったときに、”上記の4つの原則っていうのが自分はできてるのかな”というのを考えるだけで、デザインの整理レベルはグッと上達します。
なので、こういったことを意識しながらデザインにチャレンジしてみましょう。皆さんもぜひ頭に叩き込んでチェックリストとして活用してください！
