久しぶりに勉強会に参加したので、そのレポート。
「このサイトと同じデザインで」って言われれば同じのを作れるのだけど、やはり何か違う違和感というものをいつも感じてしまう。そんな折、面白そうな勉強会があったため、珍しく勉強会に参加することにした。
デザインの４原則
割と有名な話らしいんだけど、知らなかった。
- 近接・・関連する項目をまとめてグループ化する。スペースで分けるなど
- 反復・・同じ要素を繰り返し使い一貫性を持たせる。見出し->属性など。見出しに装飾など
- 整列・・ラインを作り、秩序をもたらす。左寄せとかでラインが揃ってるように見える
- 対比・・異なる項目に大胆な差をつけメリハリをつける。文字サイズなど
特に「整列」についてはこだわると今までの自分は意外とできていなかったことに気づいた。例えばヘッダのタイトルの縦と、ボディ部分のコンテンツの縦が一致していなかったり、そういった意味で統一感のないサイトを作っていたのかもな、と思った。ここをこだわると、より一貫性のあるサイトになるのだなぁと思った。
ターゲットによってデザインを変える
他のサイトをパクったとしても、ユーザーのターゲットが明確でないとデザインはうまくいかない。例えば記事主体のタイムラインなのか、友達の誰が書いたのかが主体のタイムラインなのかで目立たせるべき部分が変わる。そこを明確にしないとデザインは成り立たない。
サイトのターゲットによって何を目立たせる(形、色、グルーピングなど)を決めるということだ。
色の持つ意味を考える。
今回は、配色は Materialデザインの配色を使って選定した。そこでブランドカラーをはじめ、緑は成功、赤は失敗・注意、黄色は警告などよくある色の意味は確実に従うなど、そういったしきたり的なのもある程度知っておくと色で悩むことがなくなるだろう。
アイコンか、文字か
最後にデザインにおいてアイコンにすべきか文字にすべきか、その判断とかどのようにしているか、質問してみた。これは私たちでも度々議論になる項目だった。
もちろん最初はターゲットによって選定する、というのがあるのだけど、最終的には ABテストをしてください。とのことだった。まさにその通りだと思ったが、実際のところまだユーザー数が少ないのでユーザーが増えてきたらちゃんとABテストでそうしたアイコンか文字かの検証もどんどんやっていきたいと思った。
終わりに
実際のCSSテクニック的な話も結構多かったのだけど、それよりかは考え方とか概念について知れたのがよかったかな。
特にこの Introduction - Material design - Google design guidelines はかなり参考になりそうな気がした。読んでみたい気もするが、あまりにも多いので読める自信がないw 今度はこれをみんなで学ぼう的な勉強会があればいいな、と思った。
