Cocoda!でデザイン4大原則の1つ、近接を学ぶ
こんにちは！WebデザイナーのShimaDです！
仕事柄Webサイトをみる機会が多いのですが、素晴らしいデザイン、とりわけマイクロインタラクションを見るうちに心を奪われてしまい、気づいたらデザインを勉強し始めていました。
まずは自分の作ったWebデザインで人様に喜んでもらえるよう、価値を提供できるよう日々勉強します。
このnoteにはデザインについて勉強した内容を書きとめていきます。学んだことを書き残すことで復習とし、自分よりもあとからWebデザイナーになろうとした後輩への足跡として、そしてこれを見た先輩デザイナーに指摘、アドバイスいただくための叩きとして記事を更新しています。
現在はデザイナーになりたい人のためのコミュニティサービスCocoda!を使い、デザインの基本原則を実際にお題をこなしながら身につけています。
今回Cocoda!ではAdobe XDを使いながらデザイン4原則の一つ目、近接(Proximity)について勉強しました。
近接とは、情報を分かりやすく見せるためにグルーピングして配置するデザイン手法です。情報のまとまりを明確にすることで、ひと目で意図が伝わりやすいデザインを作ることができます。 By Cocoda!
逆に近接をうまく使えないと、どの情報と情報が正しい組み合わせなのかが伝わりづらいどころか、ユーザーに誤認を与える可能性もあるでしょう。
例えば、下の図はCocoda!内で使われている図なのですが、「イマイチ」の例では値段と上下の画像の間にマージン（余白）がなく、同じ距離感にあります。
この場合、文脈をよく見ないとどの値段がどの洋服のものかがわかりづらいですし、人によってはあまり画面をよく見ずパッパッと画面を颯爽と駆け抜けていくため、間違った値段の認識のまま進めてしまうでしょう。
という具合に、Cocoda!上でイマイチな例を見てカイゼンすべき点を自分で見つけ出す課題が出されたので、下記のように挙げてみました。
イマイチな例とグッドな例を見比べて気づいたカイゼンポイント
【考察１】値段が上下の画像どちらとも等間隔に配置されているので、上下どちらの商品の値段を指しているのかわかりづらい。ので、近接の法則を使いカイゼン！
【考察２】商品名、メーカー名はグループ化できているものの、画像、値段との間に余白がありすぎて一つの商品の情報に見えない。ので、近接の法則を使いカイゼン！
【考察３】画像が小さいため、洋服を選ぶ際に重要な要素の一つであるデザインが見づらい。ので、強調の法則を使いカイゼン！(あとで習う法則ですが、すでに4原則すべて見てしまった)
グッドな例にはなかったけど、その他こうしても良いんじゃないかと思ったカイゼンポイント
【考察４】グッドな例の商品もクリッカブル(押せそう)であることがわかりづらいので、背景とカード化でカイゼン！(している？)
Tシャツの画像と値段がたくさん並んでいるということは、このサイトはECサイトであり、商品をクリックすると詳細画面に飛ぶだろうと予測できます。ただ、グッドの例でさえもクリッカブルである事がわかりづらい・・・。おそらくデザイン初心者のためになるべくシンプルにし、デザインする負担を軽減させ、近接の法則を学ぶことに集中して欲しいというCocoda!さんの優しさだと思います。ただ、自分の頭でより良いデザインをロジカルに考えられるように練習するため、グッドな例になかったカイゼンにも挑戦してみます。
対策：商品と背景の境界線をはっきりする。
クリッカブルに見えにくい原因は、背景と、商品の名前や値段が記載されている箇所が同じ白色であり、境界線がわかりづらいからかなと。なので、背景に色を少し足し、商品をカード(一つのボタン)のように見せ、さらに影を加えること立体感が増し、結果クリッカブルに見えるようにできるのではと考えました。
【考察５】アクセントカラーがないので注目すべきポイントがわかりづらい。
グッドな例もそのデザインだけを取り出して見ると色味がほぼなく、Tシャツの画像以外で目に行きやすいところがないと感じました。
上記画像の外側の背景には淡いオレンジ色？が使われており、スマイルの絵文字などが賑わしてくれているため、一見すると色味がないことに気づきにくいかもしれません。
ですがこうやって画面デザインにだけ注目してみると全く色が使われていないことに気がつき易いでしょう。
もちろんシンプルisベストだし、色の使い過ぎはユーザーの注意力を散漫にしてしまう。ただ、目指すべきは「色を使う箇所を少なくすることで、色を使った時のインパクトを高め、ユーザーに意図した行動をとってもらいやすくする。」であり、「単純に色が少なければ少ないほどOK。」ではない。
とはいえ、色を使おうにもこれはデザイン練習のお題のために作られたものなので、テーマカラーなどない。そこで、結果を出している先例の叡智にあやかる(パクっている訳ではない)ため、日本人の生活を支えている国内外のECサイトではどの要素にどんな色が使われているを参考に見てみることにしました。
まず参考にするはアマゾ◯ン。このサイトでは購入を決める人が最低限知りたい情報であろう「値段」、アマゾンが購入を後押しするために導入しているレビューシステム「星」、そして実際に購入するアクションに必要不可欠な「カートに入れる」ボタンにアマゾンオレンジ(と勝手に命名)や赤などが使われていました。
次に、楽天◯では「値段」のみに楽天レッド(と勝手に命名2)が使われていました。
ここで共通しているのは、値段には警告色である赤を使い、必ず目立つようにしている点。(2つのサイトだけ見ても根拠としては弱いけど、)そうとわかれば自分のデザインにも取り入れるのみ！
今回は背景色にアマゾングレーを、
値段にアマゾンプライスレッドを使用することに。
そして、デザインへ。
すでに長文になっているので、デザイン工程の解説は飛ばして考察1 - 5 を反映したデザイン後の画面を貼り付けます。
うん、背景色があることで背景と商品の境界線がわかりやすくなり、どこを押すとどの商品をクリックできそうか、だいぶわかりやすくなったと思います。
でもここで違和感が・・・
立体的に見せるためにカードに付けた影が濃すぎ・・・？
押せそうを通り越して全部浮いているように見える・・・？
ということで影の値(赤枠内の数値)を調整して見比べた結果、X軸:0、Y軸:1 、B:3がバランス良さそうに見えたのでこれに設定。
なんとなく影が前よりはいい感じになったようには見えるものの、直感に頼っているのでよくないなと思い直し、ロジカルな影の数値の決め方を調べてみることに。
ただ、具体的な「こんなサイズ、こんなボタンやデザインの影の大きさは◯◯にすると良い」というのは見つからなかった。(知っている人がいましたら教えていただけると助かります。。)
そこで、Googleが提供するMaterial designを実践するためのXDファイルを持っていることを思い出し、またまた先例にあやかることに。
出典: フリー百科事典『ウィキペディア（Wikipedia）』
スマートフォンやタブレットなど様々なデバイスにおいて、マテリアルデザインによる統一感のあるデザインを取り入れることにより、操作するデバイスが変わっても操作感に統一性を期待できることで、ユーザーはストレスを感じずに様々なデバイスを操作することができる。
実際にXDファイルを見てみる。するとなんの奇跡か、僕が心地いいと感じた影と同じ数値が使われていた・・・！僕のセンスはGoogleと一緒だった？←
おそらくGoogleのサービスを使い慣れ過ぎて無意識に影の形が近づけただけなので、浮かれた自分を無視する。
そんなこんなで下記が最終版となり、デザイン4大原則の1つ、近接の勉強は終了！
Cocoda!でデザインを勉強してみて
今回初めてCocoda!を使ってみて素晴らしいなと思った点が2つあります。
１つは、「自分で考えさせる」と「導く」のバランスが絶妙であること。
実はレッスンが始まる前に近接についてごく短く、しかし十分に近接について解説がありました。確かに本などでも近接について十二分に教えてくれますが、「知識を載せる」に特化しています。その点、Cocoda!は必要十分な知識を提示した後は、実際に良い例と悪い例を見比べながら「自分で違いに気づく」仕掛けを施すことによって、初心者に大切な「観察力」を身につける練習の機会を与えてくれています。
２つは、自分が習得すべき課題にフォーカスできること。
勘の良い方はこのタイトルで僕の言いたいことに気づいたかもしれませんが、僕はよりよいデザインを作りたいがために背景色を足したり、カード化させたりしました。他にも勉強したばかりのXDの機能であるRepeat gridを取り入れたところ微調整が効かず逆に時間がかかったり（最終的には解決）、影を入れようとすることで余計な時間がかかったりと、だいぶ寄り道しました。
本来お題に集中すればこれらはかからなかった時間であるため、Cocosa!さんはそういった寄り道を事前になるべく除き、近接の勉強に集中できるお題を出してくれています。
以上、初めてのデザイン＆初めてのnote投稿(約4000字・・・)でした！
僕のTwitterでは勉強したデザインについてつぶやていますので、よかったら友達になってください！初心者ですがデザインの機会があればなんでもやりますのでお声がけください :)
この記事が気に入ったらサポートをしてみませんか？