kigoulab 開発中のアプリを、きれいにデザインしたいと思ったことありませんか？ 社内にデザイナーがいれば頼めるものの、うちは開発者だけの集団。予算があれば外注も考えられますが、今回は予算がない。そんなとき、どうすればデザイナーに頼んだようなデザインになるUIを仕上げることができるでしょうか。
デザイナーが知っているデザインの法則を知る
デザイナーは、一見感性で仕事をしているように思いますが、思いのほか論理的です。デザインには法則があり、その法則にしたがってレイアウトしています。法則を知れば、論理に強いエンジニアにもできそうです。そこでその法則のいくつかをご紹介しましょう。
そえるところはそえる
ボタンや、ウイジットの類い、それが同じグループであれば、縦横どちらかをそろえてください。大きさもそろえてください。こうやって、それらが同じ機能グループであることを視覚的に伝えるわけです。
離すところは離す
逆に、異なる機能の要素は、大胆に離してください。大胆にです。逆を返せば、同じ機能の要素は、大胆に近づけることになります。
同じ表現をくり返す
同じ機能のUIが、複数ある場合、同じ表現を適度な距離でくり返して並べてください。そうすることで、それらが同じ機能で、内容違いであることが視覚的に伝わります。
色をイロイロ使わない
使っていい色数は３色までです。基本色、その色と相性の良い補助色、基本色の反対色の３つでデザインするのが基本の形です。反対色は、警告や注意といった場合に使います。彩度の高い色ばかり使うのではなく、少しグレーがかったトーンの色を使うとデザインがしっくりします。
Bootstrapのようなフレームワークや、マテリアルデザインのようなガイドラインの登場で、エンジニアがデザイナーに頼らずとも、美しく使いやすいUIを作り上げられるようになりました。これらのフレームワークやガイドラインも、基本はデザインの法則にしたがって作られた物です。少し心がけだけでも、UXへの貢献は大きいと思います。次の開発時にはぜひ思い出してみてください。
(担当：小山智久)
※キゴウラボでは、アプリやウェブのUIデザインをお受けしています。予算にあわせて部分だけでも全体からでも対応可能です。ぜひご相談ください。