開発中のアプリを、きれいにデザインしたいと思ったことありませんか? 社内にデザイナーがいれば頼めるものの、うちは開発者だけの集団。予算があれば外注も考えられますが、今回は予算がない。そんなとき、どうすればデザイナーに頼んだようなデザインになるUIを仕上げることができるでしょうか。

デザイナーが知っているデザインの法則を知る

デザイナーは、一見感性で仕事をしているように思いますが、思いのほか論理的です。デザインには法則があり、その法則にしたがってレイアウトしています。法則を知れば、論理に強いエンジニアにもできそうです。そこでその法則のいくつかをご紹介しましょう。

そえるところはそえる

ボタンや、ウイジットの類い、それが同じグループであれば、縦横どちらかをそろえてください。大きさもそろえてください。こうやって、それらが同じ機能グループであることを視覚的に伝えるわけです。

離すところは離す

逆に、異なる機能の要素は、大胆に離してください。大胆にです。逆を返せば、同じ機能の要素は、大胆に近づけることになります。

同じ表現をくり返す

同じ機能のUIが、複数ある場合、同じ表現を適度な距離でくり返して並べてください。そうすることで、それらが同じ機能で、内容違いであることが視覚的に伝わります。

色をイロイロ使わない

使っていい色数は3色までです。基本色、その色と相性の良い補助色、基本色の反対色の3つでデザインするのが基本の形です。反対色は、警告や注意といった場合に使います。彩度の高い色ばかり使うのではなく、少しグレーがかったトーンの色を使うとデザインがしっくりします。

Bootstrapのようなフレームワークや、マテリアルデザインのようなガイドラインの登場で、エンジニアがデザイナーに頼らずとも、美しく使いやすいUIを作り上げられるようになりました。これらのフレームワークやガイドラインも、基本はデザインの法則にしたがって作られた物です。少し心がけだけでも、UXへの貢献は大きいと思います。次の開発時にはぜひ思い出してみてください。

(担当:小山智久)

※キゴウラボでは、アプリやウェブのUIデザインをお受けしています。予算にあわせて部分だけでも全体からでも対応可能です。ぜひご相談ください。