素敵なインターフェースを心がけ、ユーザーエクスペリエンスを格段に改善することができる、UIデザインの重要ポイントを具体的なHTML/CSSのサンプル例と一緒にご紹介します。これらの各ポイントは、もともと@steveschogerがTwitterでツイートした内容となります。
1. アイコンはラベルよりも少しだけ明るくしよう。
文字ラベルの横にアイコンを配置するときは、少しだけ色を明るくしてみましょう。こうすることで、もっとも重要な情報（文字ラベル）をうまく強調することができます。
See the Pen Little UI Details : 小技テクニック01 by PhotoshopVIP (@vipcrew) on CodePen.
2. 明るい背景色では、白文字に少しだけ影を追加しよう。
背景色が明るく、白文字を利用するときは、文字に少しだけ素敵な影を加えることで、より読みやすくなります。
See the Pen Little UI Details: 小技テクニック02 by PhotoshopVIP (@vipcrew) on CodePen.
3. 明るさの代わりに色相を変更して、グラデーションをより鮮やかにしよう。
たとえば、ボタンにグラデーションを利用するときは、色相を変更してより鮮やかな見た目に仕上げるようにしましょう。
See the Pen Little UI Details: 小技テクニック03 by PhotoshopVIP (@vipcrew) on CodePen.
4. ホバーエフェクトとして、1／2px上下に動かしてみよう。
このエフェクトの追記として、影のサイズを増やすことで、「持ち上がった」ような効果を実現できます。
See the Pen Little UI Details: 小技テクニック04 by PhotoshopVIP (@vipcrew) on CodePen.
5. box-shadow を垂直方向に少しだけずらそう。
このテクニックによって、カード型レイアウトやボックスなどのデザイン要素を、エフェクトなしの状態よりもナチュラルな見た目に仕上げることができます。
See the Pen Little UI Details: 小技テクニック05 by PhotoshopVIP (@vipcrew) on CodePen.
6. 文字テキストをきちんと整列させて、コンテンツをよりスキャンしやすくしよう。
たとえばアイコンや画像などと同じラインに文字テキストを整列することで、ユーザーにとってより読みやすくなるでしょう。
See the Pen Little UI Details: 小技テクニック06 by PhotoshopVIP (@vipcrew) on CodePen.
7. 色付きの背景には、いつも灰色が最適です。
背景と同じ色の色相の彩度を下げるか、RBGAを利用して透明度を下げることで、うまく文字テキストを合わせることができます。
See the Pen Little UI Details: 小技テクニック07 by PhotoshopVIP (@vipcrew) on CodePen.
8. リスト表示ではブレットの代わりにアイコンを利用しよう。
矢印やチェックマークなどのアイコンを利用することで、通常のリスト表示に比べて魅力的に仕上げることができます。
See the Pen Little UI Details: 小技テクニック08 by PhotoshopVIP (@vipcrew) on CodePen.
9. トップページ上部にアクセントカラーを利用しよう。
ウェブサイトのアクセントカラーを適用することで、デザイン性をグッと上げることができるテクニックのひとつ。
See the Pen Little UI Details: 小技テクニック09 by PhotoshopVIP (@vipcrew) on CodePen.
10. モーダルウィンドウやパネルにグラデーション・ボーダーを追加しよう。
ひとつ前の小技に似ていますが、このテクニックは特にモーダルウィンドウやパネル型レイアウトに最適です。2色のグラデーションカラーを利用し、見た目をより魅力的にすることも可能です。
See the Pen Little UI Details: 小技テクニック10 by PhotoshopVIP (@vipcrew) on CodePen.
11. 隣り合うボックスレイアウトでは、ラインの代わりにコントラストを利用しよう。
ライン線の代わりに、コントラストの少しだけ異なる配色を利用することで、より目に優しくクリーンな見た目を実現できます。
See the Pen Little UI Details: 小技テクニック11 by PhotoshopVIP (@vipcrew) on CodePen.
12. 色やフォントウエイトを利用して、文字の階層を作成しよう。
見出しと本文など文字テキストの階層を定義するときは、太さの異なるフォント用ウェイト以外にも、色も利用することでうまく作成することができます。
See the Pen Little UI Details: 小技テクニック12 by PhotoshopVIP (@vipcrew) on CodePen.
13. 本文コンテンツのフォントサイズに迷ったら、16pxにline-height:1.5 を指定しよう。
同時に、黒（#000000）の代わりに、濃い灰色を利用することで、ユーザーの可読性をアップすることもできます。
See the Pen Little UI Details: 小技テクニック13 by PhotoshopVIP (@vipcrew) on CodePen.
14. 英語の大文字ではフォントスペースを広くとろう
文字テキスト間にゆったりとしたスペースを確保することで、ユーザーにとって文字が読みやすくなるテクニック。
See the Pen Little UI Details: 小技テクニック14 by PhotoshopVIP (@vipcrew) on CodePen.
15. キーラインを使って、似たコンテンツをまとめよう。
表示されているコンテンツのつながりを作り、ユーザーにとってより分かりやすくするテクニック。
See the Pen Little UI Details: 小技テクニック15 by PhotoshopVIP (@vipcrew) on CodePen.
16. blend-mode: multiplyを使って、素敵なヒーローイメージを作成しよう。
白黒に彩度を落とした写真にブレンドモードを利用することで、白文字とのコントラストをうまく表現できる、絶妙な背景色に仕上げます。
See the Pen Little UI Details: 小技テクニック16 by PhotoshopVIP (@vipcrew) on CodePen.
17. 要素を重ねて奥行き感を演出しよう。
このテクニックによって、ユーザーへのスクロールを促すこともでき、残りのコンテンツも閲覧してもらうことができるでしょう。
See the Pen Little UI Details: 小技テクニック17 by PhotoshopVIP (@vipcrew) on CodePen.
18. 主要なアクションでないときは、ネガティブなアクションには控えめな色使いをしよう。
ユーザーを混乱させてしまう恐れがあるので、ライトグレーなど明るい色を利用すると良いでしょう。
See the Pen Little UI Details: 小技テクニック18 by PhotoshopVIP (@vipcrew) on CodePen.
19. ボタンにも階層を作成しよう。
メインとなるボタンが、警告や二次ボタンなどに比べ、もっとも目立つように重要度に応じて階層を作成しましょう。
See the Pen Little UI Details: 小技テクニック19 by PhotoshopVIP (@vipcrew) on CodePen.
20. しかし、重要なアクションを促すときは、赤色を利用しましょう。
「削除」など重要なアクションに赤色を利用しなければ、ユーザーは心配の恐れがないと考えてしまうでしょう。
See the Pen Little UI Details: 小技テクニック20 by PhotoshopVIP (@vipcrew) on CodePen.
21. ボタンのボーダー線は、文字テキストよりも明るくしよう。
こうすることで、よりボタンを強調することができる小技テクニックのひとつ。
See the Pen Little UI Details: 小技テクニック21 by PhotoshopVIP (@vipcrew) on CodePen.
22. ボーダー線を利用せずに、背景色を活用しよう
ボーダー線がたくさんありすぎると、UIデザインがごちゃごちゃした印象に鳴りがちです。ユーザーの目的（コンテンツを探すなど）を妨げる原因となるかもしれません。
See the Pen Little UI Details: 小技テクニック22 by PhotoshopVIP (@vipcrew) on CodePen.
参照元リンク : Little UI details from @steveschoger, in HTML and CSS – Codepen
参照元リンク : Little UI details from @steveschoger, in HTML and CSS（日本語訳） – Codepen
