この記事はFUN Advent Calendar 2017 3日目の記事です。
今年はお陰様で早い段階でカレンダーが埋まりましたね。とてもありがたい限りです。
もし記事を書きたい方がいらっしゃいましたらPart2もございますので、奮って登録お願い致します。
私は一応デザインコースの人間なので、今年はデザイナーじゃなくても、そこそこ綺麗な物を作れるようになる為のUIデザインのポイントをご紹介したいと思います。
わたしについて
- 学年：B3
- コース：情報デザインコース (一応)
- 好き：アイドル・ご飯
今も昔もフロントエンドの住人で、大学に入ってから元々興味があったデザインの勉強を始めました。
将来はパン屋さんになりたいと考えています。
デザインとセンスの関係
私はよく、周囲の学生がこのような発言をするのを耳にします。
- 「自分はセンスがないからデザインができない」
- 「◯◯はデザインの才能があっていいよなぁ」
この発言の裏には、多くの方はデザインという行為をセンスや才能を用いて行うものと捉えている背景があるように思います。
然しながら決してそんなことはなく、デザイナーはセンスでデザインをしているのではなくて知識と経験を駆使してデザインをしています。
(もちろん、ほんの一握りですが生まれながらの才能やセンスでデザインをしている人間もこの世界にはいると考えています)
なので別にセンスがなくても、デザインはできるということを理解していただきたいです。
デザイン畑の人間から「君はデザインの本質を一切理解していない云々」等のマサカリを振りかざされるのが怖いので予防線を張っておきますが、ここでのデザインとは、そこそこ小綺麗なUIを作る行為を指します。
この記事では下記のデザインのポイントについての説明をしたいと思います。
- 配色
- 余白
配色の整え方
ノンデザイナーが作るデザインにおける問題点の多くは配色だと考えています。
みなさんはUIを作成する際、どのように配色を決めているでしょうか？
多くの方はカラーホイールとにらめっこをしながらマウスをカチカチしていい感じに調和する色を探していることかと思います。
本来は
- シュブルールの調和論
- オストワルトの調和論
- ムーン＆スペンサーの調和論
- ヨハネス・イッテンの調和論
- ジャッドの調和論
などの色彩調和論や色相関係やトーンの関係について学んで、ようやく配色ができるようになるのですが、今回はそれらの知識は隅の方に置いておきましょう。
やることは、先人の努力に感謝しながら、
ツールを使っていい感じに決めた配色を、いい感じに配分するだけです。
いい感じに配色するためのツールは次項でご紹介します。
いい感じに配分するための割合は下記の通りです。
- ベースカラー: 70%
- メインカラー: 20%
- アクセントカラー: 10%
ベース : メイン: アクセント = 7 : 2 : 1というポイントさえ覚えていれば大丈夫です。
Adobe Color CC
自分の勘で配色をしていた人は今すぐにAdobe Color CCを使いましょう。 使い方は簡単で、下記の3ステップのみです。
- 基準点となる色を選択
- カラーコードを編集して任意の色を設定
- 任意のカラールールを選択
あとはこれらの中から基準点の色以外に2色を選び、メインカラー、ベースカラー、アクセントカラーとして活用するだけです。
基準点の色はその辺にあるいい感じの色を見つけて写真を撮った上でカラーピッカーで採取したり、制作するプロダクトから連想される色を選んだりしましょう。
基準点さえ決まればあとはAdobe Color CCで決めるだけです。
Adobe Color CC上に任意の画像をドラッグするとその画像から最適な色を採取することもできます。
ColorSpace
Adobe Color CCさえ使う時間がない程忙しい人はColor Spaceを使いましょう。
基準となる色を元に、20以上のカラーパターンを提案してくれます。
これで配色はバッチリ決めれますね。もう旧石器時代さながらの配色からは卒業しましょう。あとは決めた色を7 : 2: 1の割合でUIデザインの際に使うだけです。
ね、簡単でしょ？
余白の取り方
デザインにおいて、私が一番大切だと考えているポイントが余白です。
ノンデザイナーの場合、一般的にはマージンはノリと勘でを取る物なのかな？と思います。私も以前はそうでした。
そもそも俺達は雰囲気でフロントエンドをやっているので、マージンも雰囲気で取って当然なのかもしれません。
私の場合、本当の最初はpxを目視しながら目分量で余白の管理をしていました。3pxを取ることもあれば5pxを取ることもある、そんな世界でした。
余白のデザインを少しだけ意識し始めた頃は5の倍数を意識して余白を取っていました。
ただ、それが段々と辛くなって行きました。5pxと10pxのどちらかを瞬時に選ばなければいけなかったり、5px単位よりも細かい単位で余白を取りたい時は半分の2.5pxしか選択肢がないけど、小数点が入ってしまったり...
そんな時に出会ったのが8pxルールでした。8pxルールと出会ってから私の人生は一転しました。
8pxルール
8pxルールとは、その名前の通り、8の倍数でレイアウトを構成する手法です。
8の倍数を用いる理由としては下記の点が大きく挙げられます。
- 多くのディスプレイの解像度が8の倍数単位で構成されている
- 1から100までの数の中に5の倍数よりも8の倍数が少ない
- 8を2で割っても自然数(4)が出るため
2点目の、1から100までの数の中に5の倍数よりも8の倍数が少ないについてですが、図を用いて説明するとこのようになります。
5の倍数は20個、8の倍数は12個であるため、8の倍数を基準にした方が余白を設計する際の迷いが減ります。
5の倍数基準の場合に20pxか25pxかで迷っていても、8の倍数基準でデザインをすれば24pxと瞬時に判断することができます。
また、5の倍数基準で作成したデザインに比べてゆったりとした余白を取ることができるのも一つの特徴です。
こちらは講義内の課題で作成したワイヤーフレームです。これも8pxルールを元に作成しました。
長さや余白を可視化するとこんな感じ。
(測り忘れている所もあるけど、例外を除いて全部8の倍数で構成されている所を示したかった)
ちなみに、こちらはフォントサイズやラインハイトも8の倍数で作成しています。
こんな感じで8pxルールを用いると、ゆったりとしているけどそこそこ綺麗な整頓されたUIを作成することができます。
5の倍数でデザインをしていた人は凄く楽に、いい意味で手を抜けるようになると思います。
8pxルールについての詳細は下記のページをご覧頂ければと
直ぐに実践することは難しいかもしれませんが、
少しずつ、小さなコンポーネントを作成する場からでも始めてみてもらえたら嬉しいです。
おわりに
これらのツールやルールを用いてUIを作成することで、整然としたプロダクトへグッと近づくことができるようになります。
どれでもいいですし、ミニマルでいいので、是非実践した上で綺麗なデザインを作れた実感を味わって欲しいです。
補足をすると、ご紹介したのはあくまでも整然としたプロダクトを作れるようになるだけの手法であって、
その先の最高でハイパーなUXを提供する、スーパーグラフィカルで綺麗でお洒落なプロダクトを作るためには更に多くの知識や経験が必要になります。
また、どんなに色や余白をツールやルールを用いて揃えても、本当に良いデザインを作るには、最後の最後にそれを変える勇気と自分の感性での微修正が必要になると考えています。
私は整然としたデザインと最高のデザインの間の壁を小綺麗の壁と呼んでいるのですが、この壁を越えるのはめちゃくちゃしんどいです。
まだまだ越えれそうにないです。
どなたでもいいので、是非一緒に越える為に勉強をしませんか。
拝読ありがとうございました。
(本当は実例を交えたり、バーティカルリズムやアイコンフォント、シャドウについても紹介したかった...)
明日は@mizukmbさんの投稿です。
忘れていた。
12月3日は私の誕生日です。一応干し芋のリストを掲載致します。
どうぞよろしくお願いします。
Amazon 欲しいものリスト
