デザインに自信のないエンジニアが、UIデザインするときに気をつけていること

Webの（特にサーバーサイドの）エンジニアは、デザインが絡む作業が苦手な傾向があります。 私はデザイン的なことをやるのは好きですが、今ひとつパッとしないデザインになってしまうことがよくあります。 そこで、ノンデザイナーでもそれなりに整ったデザインにするためのノウハウを書き残します。

使う色は、2色もしくは3色にします。 これはデザインの配色の原則に基づきます。ベースカラー、メインカラー、アクセントカラーです。 2色の場合はアクセントカラーは不要です。それぞれのカラーの明度を変えたカラーは使っても大丈夫です。 また、画像やイラストに用いられる色は例外です。 色数が多くなりすぎると雑多な印象になってしまいます。

ベースカラーは背景などページの広範囲にわたって使われる色なので、あまり目立たない色を使い、 モノクロ色やメインカラーを薄くした色にします。

メインカラーはページのヘッダーなどの目立つ部分に随所に用いられ、そのページを象徴する比較的鮮やかな色を選びます。

アクセントカラーは、ユーザーに注目させたい箇所に使い、ベースとメインとは異なる目立つ色で少量使用します。

ベース、メイン、アクセントの順にページあたりの面積を少なくすることで、バランスの取れた印象を持たせることができます。

余白はコンテンツの内容ではないので、適当に設定してしまいがちです。 そこで、いくつかのパターンを決めておき（例えば.5rem, 1rem, 2rem, 4remから指定するなど）、その中からだけ使うようにすることで 統一感のあるデザインができやすくなります。

これは直接見た目とは関係ありませんが、CSSプロパティはそのジャンルごとに順番に指定するように決めておくことで、 メンテナンスが少し楽になります。
私の場合、おおむね以下の順番でCSSを指定しています。

• position系
• display系（flex）
• 余白系（margin, padding）
• サイズ系（width, height）
• border系
• background系
• font,text系
• 装飾系（text-decoration等）

マウスでブラウザのリンクの上を通過させると色が変わります。これによってユーザーはそこが押せそうだということがわかります。 リンクに限らず、ボタンやフォームの入力パーツなどには、ユーザーがそこで何をできるのかがわかるようなヒントを出すべきです。

例えば、押すとなんらかのアクションが起こる要素には、次のようなスタイルを施します。

• 色を変化させる（opacityなど）
• 影をつける（box-shadow）
• ポインターをつける (cursor)

さりげない変化をつけることで、ユーザーに関心をもたせることができます。