プロのUIデザイナーに学ぶ、既存のデザインのクオリティを高めるデザイン知識とテクニックのまとめ
Post on:2020年4月16日
sponsors
既存のUIデザインをどのような手順で改善すればよいのか、UIのクオリティを高め、ビジュアルをよくするためのデザイン知識とテクニックを紹介します。
Cleaning up form UI
by Nikita Прокопов
下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。
はじめに
下記は、IntelliJ Idea 2020.1 EAPを起動して最初に表示されるダイアログです。
このデザインをあなたはどう思いますか？
IntelliJ Ideaのダイアログ
ぱっと見、清潔感がある普通のUIに見えますが、細かいところをよく見るとおかしいのが分かります。このフォームのUIのほとんどに改善する余地があります！
このフォームのルックアンドフィールを大幅に改善しながら、UIをよくするためのデザインテクニックを紹介します。
ロジックは変えずに、ビジュアルを磨きます。
グリッドを定義する
最初のステップは、簡単です。
グリッドを決めて、そのグリッドの上にすべての要素を配置します。グリッドは大きすぎてはダメです。大きすぎると、細かいディテールを合わせることができなくなります。また、小さすぎてもダメです。小さすぎると、どこにでも何でも配置することができ、グリッドを使用するメリットが失われます。
ここではいくつかの要素がすでに整列しており、上下のスペース、ボタンの高さ、16x16のアイコンなど（現在の配置では見づらいかもしれません）に合わせて、8pxのグリッドを使用します。
8pxのグリッドを定義
スペースの正規化
最終的に、UIを美しく見せるためには、一貫したルールを適用する必要があります。UIにリズムと一貫性を与えるために、すべて同じ高さのブロックを使用したいと考えています。これが目指している目的です。
すべて同じ高さのブロックを使用して、UIにリズムと一貫性を与える
スペースはすべて8pxまたは16pxで、要素の高さはすべて24pxなので、すべての要素が8pxのグリッドに整列します。
元のUIには多くの不整合があります。
上部のスペースは他の3つより小さく、下部の？ボタンとProject SDKのドロップダウンは端に揃っていません。
修正前のUI
これを下記のように修正します。
修正後のUI
水平と垂直のスプリッタの幅が異なっています。Project SDKとAdditional Libariesのラベルが左端に揃っていません。
修正前のUI
これを下記のように修正します。
修正後のUI
要素間の水平方向のスペースに一貫性がありません。関連する要素（ラベルとドロップダウン、アイコンとテキストなど）間は8pxのスペースで、同じ列に並んでいる要素（PreviousとNextボタンなど）間は16pxのスペースで、2種類あります。
修正前のUI
これを下記のように修正します。
修正後のUI
ほとんどのコンポーネント（リスト、ボタン、ドロップダウン）の高さが24pxであることを考慮すると、テキストラベルが同じ量のスペースを占めるのは理にかなっています。また、Project SDKとAdditional librariesの間には16pxのスペースがありますが、Additional librariesとその下のリストはラベルとコンテンツの関係にあるので、8pxのスペースしかありません。
下部パネルのエラーメッセージも同様で、ドロップダウンに関係しているので、8pxのスペースで分離されています。
せっかくなので、Project SDKラベルとその横のドロップダウンをベースラインに沿って整列させます。これがすべてのラベルを整列させるための方法です。
修正前のUI
これを下記のように修正します。
修正後のUI
今度は、パネル内のスペースについて見てましょう。
リストには左右にスペースがあります（上下のスペースは要素内部で処理されます）。下部のパネルには、上下左右に4つのスペースがあります。
水平と垂直方向のスペースは必ずしも同じである必要はありませんが、簡単にするために同じであると仮定します。
16pxで試してみます。
修正前のUI
これを下記のように修正します。
修正後のUI
特に問題はありませんが、少し広すぎる気がします。
スペースを8pxにして試してみます。
修正前のUI
これを下記のように修正します。
修正後のUI
8pxがいい感じですね！
ピクセル単位のずれ
コンテナ内と最初の要素の間に1pxの隙間があることに、イラッとします。
1pxの隙間が謎
このタイプの隙間は、通常は間違いです。もし隙間が必要な場合は間違いのように見せるのではなく、意図的であるように見せます。
隙間は意図的であるように見せる
また、左パネル内のデリミタ（区切りを表す記号）は何の役にも立っていないので削除します。区切って違いを出すには小さすぎます。さらに悪いことに、この区切りは5つのグループのうち3つは要素が1つだけです。単一要素のグループが複数ある場合は、グループ化が間違っていることを意味します。
必要のないデリミタは削除
アイコンのすべてが完璧に配置されているわけではありません。そのことに気づくには、16x16pxの正方形を配置し、正方形にテキストを揃えてから、その正方形内にアイコンを配置して確認します。
修正前のUI
これを下記のように修正します。
修正後のUI
ボタン
いくつかのボタンを修正する時がきました。不思議なことに元のUIでは、すべてのコントロールのスペースに一貫性がありません。修正方法は非常にシンプルです。ドロップダウン内のスペースを8pxに、ボタン内のスペースを16pxに統一します。
修正前のUI
これを下記のように修正します。
修正後のUI
これでコントロール周りは、すべて正常に見えます。ただし、すべてのボタンを同じ幅にしたことにより、フッタをさらに改善できます。そうすることで、より一貫性のある外観になります。
その方法は以下の通りです。一番大きいボタン（Previous）に16pxの左右のスペースを与え、その結果の幅を8の倍数になるように配置して、グリッドに整列させます。次に、他のボタンをその幅に合わせて伸ばします。CSSでこのアルゴリズムを実装できるといいですね。
修正前のUI
これを下記のように修正します。
修正後のUI
ボタンの最後に、左の？ボタンに注目してください。元のサイズは22x22pxで、他のボタンの高さ（24px）より2px小さくなっています。
？ボタンが2px小さい
この問題は、丸い形の見た目は、同じ大きさの四角よりも小さく見えることです。数学的なサイズではなく、視覚的なサイズでデザインします。そのため、ボタンをより小さくするのではなく、より大きくする必要があります。他のボタンが24pxなので、？ボタンは26pxにします。
丸と四角の形の見た目は、同じサイズでも違って見える
ちなみに同じ理由で、ドロップダウン内の三角形の矢印は他と同じように8pxではなく、ボーダーから7pxになっており、視覚的なウェイトを補っています。
カラーコントラスト
無効化されたドロップダウンのテキストのカラーがブラックになっています、これはおそらく間違いで、正しくはグレーでなければなりません。その下のエラーメッセージは正しくグレーですが、色合いが違います。2つの異なるグレーを使用する理由はありません。
修正前のUI
これを下記のように修正します。
修正後のUI
最後に、選択状態のアイコンを見てみましょう。視認性が悪いですね。
選択状態のアイコンが見にくい
選択状態のアイコンをなぜか半透明にしているので、選択色がにじみ、さらに見にくくなっています。適切な解決策は、暗い背景用の別バージョンのアイコンを用意することです。
暗い背景用のアイコンを用意する
UIがダークモード・ライトモードをサポートしている場合は、2種類のアイコンを用意しておくとよいでしょう。
それぞれのアイコンを二度作成したくない場合は、1pxのホワイトのアウトラインを与えるという簡単な方法もあります。ライトモードの明るい背景ではそのアウトラインは見えませんが、ダークモードの暗い背景ではアイコンを見やすくします。
1pxのホワイトのアウトラインを与える
タイポグラフィ
ユーザーインターフェイスのタイポグラフィは、特にエンターテインメント以外のプロフェッショナルなUIでは、シンプルします。正当な理由がない限り、フォントは1種類、サイズも1種類に固執します。今回のケースでは、エラーメッセージが他のテキストよりも小さいサイズになっています。
修正前のUI
これを下記のように修正します。
修正後のUI
続いてエラーメッセージで気になるのは、メッセージの場所です。この場所ではエラーがどこを差しているのか分かりません。
エラーメッセージの場所がよくない
コントロールの値が正しくない場合は、コントロールのすぐ隣にエラーメッセージを表示すべきです。
すぐ隣にエラーメッセージを表示する
最後に、大文字表記です。すべてのラベルやコントロールの最初の文字は大文字にする必要があります。Error: の後の最初の文字は、新しい文が始まるときに大文字にします。
しかし、すべてのラベルのすべての単語を大文字にする必要はありません。それらは本のタイトルとはないのですから。
修正前のUI
これを下記のように修正します。
修正後のUI
完成！修正したUI
まずは、元のUIを確認してください。
修正前: 元のUI
ここで紹介した17個の修正を適用したUIです。
修正後: 改善したUI
ぱっと見ほとんど同じに見えるかもしれませんが、ディテールに注目するとより一貫性があり、正確にデザインされているのが分かると思います。
最終的なフォームがグリッドにどのように配置されるかを確認してください。
修正後にグリッドを適用
これらのヒントがあなたのインターフェースをさらに良くするのに役立つことを願っています！
sponsors
