イントロ
皆さんこんにちは。デザインチームの和田です。
アプリでもサービスでもいい感じのデザインにしていくって、とても難しいですよね。
いろんな人の意見を取り入れたら迷走したり、修正加えたら前の方が良かったと言われたり...
デザインは料理と一緒で「事前の下ごしらえ」を挟むだけで作成・修正スピードが大幅にアップする話をしたいと思います。
今回は以下の架空のモバイル求人サイトのデザインを修正していきながら解説していきたいと思います。
下ごしらえ3ステップ
修正していくにあたり、「色がない」「配置を直さなきゃ」など、いろんな改善点が頭に思い浮かぶと思いますが、慌てて修正に走ってはいけません。順番に下ごしらえしていきましょう。
下ごしらえ その1
まずは最小文字の大きさを決めて、全てのテキストをそのフォントサイズのregularにします。
今回は最小のテキストサイズを12pxと決めて設定してみます。
下ごしらえ その2
コンテンツエリアの左右のマージンを決め、全てのコンテンツを範囲内に収めます。
今回は左右に24pxマージンを確保します。
下ごしらえ その3
行間と文字サイズを調整し、それぞれの箇所で見やすい「ハコ」を作ります。
下ごしらえはこれで完了です。
ここで一息ついて、テキストは読みやすいか、意図通りのグルーピングになっているかざっと確認しましょう。
この段階では「作業途中」ではあるものの、決して「イマイチなデザイン」にはなっていないはずです。逆にこの時点で違和感を感じる場合は最小のテキストサイズ、左右のマージン設定をもう一度見直しましょう。それでもダメなら、情報の構造まで立ち戻って見直してみましょう。
下ごしらえからの修正プロセス
修正プロセスその１
下ごしらえが完了していれば、残りの作業はとても楽になります。
まずは強調したい箇所のフォントサイズを大きくしていきます。
修正プロセスその2
各パーツに色やあしらいをつけていきます。
テキストの色調整は、こちらの記事 にも書いていますので、合わせてご覧ください。
修正プロセスその3
最後に、上下のマージン間を整え、ボタンの大きさを調整して完成です。
※細かい近接のテクニックに関しては こちらの記事 にも書いていますので、合わせてご覧ください。
作業を通しての改善をもう一度見てみましょう。
なぜ下ごしらえが大事なのか？
デザインは、「レイアウトの自由度が低い」部分と「レイアウトの自由度が高い」部分が混在しています。デザインにあまり自信が無い持てない方は「レイアウトの自由度が低い」部分から直していった方が考えることが少なくなり、早く確実にデザインをブラッシュアップできます。
一方で「レイアウトの自由度が高い」部分は個人の好みが大きく分かれる所で、意見が割れやすい部分でもあります。仮にFBで色々言われても、下ごしらえの部分がしっかりしていれば修正箇所は大幅に減らせます。
おわりに
下ごしらえ3ステップ+修正3ステップとありますが、実際にやってみると闇雲に修正するよりもはるかに迷いが少なく、確実にデザインが良くなっている感覚を得ながら改善が行えると思います！
今回の例はモバイルサイトでしたが、さまざまなデザインに応用できるやり方なので、ぜひ試してみてください！
Discussion