アプリケーションとデザインの原則

クラウド事業部のたまです。

現在、開発中のWebアプリケーション画面デザインを担当しています。
機能的な事はもちろん大切ですが、より使いやすいアプリケーションをと心がけていると、デザインの原則の大切さを改めて感じます。
実は昔デザイン系の学校に行っていたこともあり、私にとってはなじみ深いのですが、同僚と話をしていると意外と知らないのかも？
ということで、今回はアプリケーションの画面デザインでも使えるデザインの原則についてご紹介いたします。

デザインの４大原則

近接

関係のある項目は近くにまとめます。

人は近くにあるものを関連のあるものだと認識するので、視覚的にわかりやすいレイアウトになります。
枠で囲わなくても、十分な空間が空いていればグループとして認識できるので、余白も意識すると良いでしょう。
情報をまとめることは、項目の見落としを防いだり入力ミスを防いだりするためにも大切です。

整列

左揃え、中央揃えなど揃え方は色々ありますが、要素をそろえてあげるだけで、スッキリしたレイアウトになります。
入力欄などデータの文字数にあわせるためバラバラしがちな箇所は特に、端をそろえて配置するだけでも見やすさが格段に変わります。

対比

項目のフォントの色やサイズが全てそろっていると、単調になり、大切な情報を見落としてしまう場合があります。
情報の重要度が高いものや目立たせたい要素は色のコントラストを強くしたり、サイズを大きくすることで対比を作りましょう。
処理の流れの中で良く押すボタンは大きく押しやすく、削除などの間違えて押すと困るボタンはサイズを少し小さくするという対比も良く使いますね。

反復

ページごとにデザインがバラバラだと、ユーザーはページごとに情報の読み取り方から確認しなければいけません。
見出しや項目、ボタンの用語は反復が大切。
見た目を統一することで、ユーザーの迷いを減らすことができます。

すでに一般的に認知されている表現、たとえばポップアップ画面が出てきたら右上の「×」を消せばポップアップが消えるといったものは、どうしても変更しなければならない理由がない限りは見た目や動きを変えない方が良いでしょう。
これもある意味、ユーザーの経験を生かした反復ですね。

アプリケーションの画面デザインをする際には他にも、気を付けるべきことはたくさんあります。

アクセスの多い情報や、重要度の高い情報をどの位置に配置するか。PCで使うのかタブレットやスマホで使うのかによって押しやすいボタンの位置やサイズを変えたり、入力しやすいフォームのサイズ感の考慮など。

でも、一番大切なのは普段使っているアプリケーションの「これはスムーズに使える」「なんだかイライラするな」といった印象を大切にして、なぜそう思うのかを考えてみることなのではないかと思っています。
理由を考えてみると、押しやすい位置にボタンがある、欲しい情報がまとまっていて見やすい、押し間違いがしにくいといったデザイン上の工夫が発見できますよ。

デザインの４大原則は、資料を作る際にも意識すると見た目のクオリティーが上がるのでおすすめです。