最近のWebサイトで使われてる、UI要素をデザインするテクニックのまとめ -Little UI Details by Steve Schoger
Post on:2017年9月14日
sponsors
ぱっと見ただけではなかなか気がつかないような、ディテールにこだわった素晴らしいデザインのアイデアとテクニックを使ったUI要素を紹介します。
最近のWebサイトで見かけるUI要素がたくさんあり、すぐに次のプロジェクトに役立つと思います。
Little UI Details by Steve Schoger
下記は@steveschoger氏の各ツイートを意訳したものです。
※当ブログでの翻訳記事は、著者様にライセンスを得て翻訳しています。
テキストを読みやすく
明るいカラーの背景にホワイトのテキストを配置した時、テキストに少しシャドウを加えることで、読みやすくなります。
グラデーションを鮮やかにする
例えば、ボタンにグラデーションを使用するときは、ボタンをより鮮明に見せるために色相を変更させます。
ホバーのエフェクト
ボタンのホバーエフェクトにドロップシャドウの増加に加えて、1px上に移動させると、持ち上がってるように見えます。
カード型コンポーネントのシャドウ
カードやボックスのシャドウにわずかな垂直オフセットを与えると、より自然に見えるようになります。
コンテンツの整列
アイコンを使用したリストは、アイコンとテキストで揃えるのではなく、テキストで揃えることで読みやすくなります。
グレーのテキスト
グレーのテキストは、色のついた背景では常に「オフ」に見えてしまいます。テキストを背景と同じ色相にするか、rgbaで不透明度を下げることで、テキストはよりはっきり見えます。
アイコンのカラー
ラベルの横にアイコンがある場合、アイコンのカラーをラベルより少し軽くすることで、最も重要な情報（ラベル）の視認性が高くなります。
箇条書き
箇条書きはデフォルトではなく、矢印やチェックマークのような一般的なアイコンを使用すると、視覚的な興味を持たせることができます。
ヘッダの上
ヘッダの一番上にカラーのヒント（4〜6px）を加えると、Webサイトのデザインにアクセントカラーを補完できます。
モーダルやパネルのデザイン
このテクニックは、モーダルやパネルに効果的です。上記の「ヘッダの上」と同様に、2色のグラデーションを使用して、より見栄えを向上させることができます。
隣接する2つのボックス
隣接する2つのボックスの境界にラインを使用するのではなく、わずかにコントラストのある2つのカラーを使用することで、よりすっきり美しく見えます。
テキストの階層
テキストの階層をつくる時はサイズとウェイトに加えて、カラーとコントラストを使用することで、その階層がより分かりやすくなります。
本文の行間
本文の行間に迷った時は、サイズを16pxに、line-heightを1.5にするのが安全です。また、ブラックの代わりに濃いグレーを使用すると、コントラストの高いブラックとホワイトを使用するより、ユーザーは読みやすくなります。
全部大文字の時
全部大文字にすると、読みにくい時があります。その場合は、文字間隔を広くすることを検討してください
角丸の作り方
私は通常、Sketchの角丸に頼るのではなく、グリッド上に円を描いてデザインします。
かっこいい地図の簡単な作り方
デザインのスキルがなくても、かっこいい地図のデザインを作成することができます。
コンテンツをグループ化するライン
ラインは、コンテンツを分割するだけでなく、切断されたコンテンツを繋げることもできます。コンテンツをグループ化すると、ユーザーが理解しやすくなります。
縦方向のリズム
倍数を使用してスペースを定義することは、縦方向のリズムを得るための優れた方法で、数式を利用するとよいでしょう。
画像が背景の時
写真画像が背景でテキストとのコントラストを高めたい時は、彩度の低い写真と「blend-mode: multiply;」と目立つカラー（ここではホワイト）組み合わせると、素晴らしいコントラストが得られます。
スクロールを促す
ページ上の要素の重なりは奥行きを作りだし、ユーザーにスクロールを促す素晴らしいテクニックです。
メインアクションでない場合
ボタンはすべてをデザイン的に目立たせる必要はありません。メインとなるアクションはデザイン的に目立たせる必要はありますが、ネガティブなアクションは控えめにすることでより機能します。
ボタンの階層
ボタンにも階層が必要な場合があります。クリックしてほしいボタンは目立たせて、そうでないものは目立たせないようにデザインします。
重大度の高いアクション
重大度の高いアクションを確認する場合は、プライマリアクションに危険色（レッドなど）を使用することがあります。
ボタンのボーダー
私は、セカンダリボタンのアウトラインでこのテクニックを使用します。ボタンのテキストが少し目立つようになります。
多すぎるボーダー
区切るためにボーダーが多すぎると、UIのデザインが煩雑に見えてしまい、ユーザーがコンテンツを見る際に邪魔になります。ボーダーを使用しないで、解消するアイデアがいくつかあります。
2カラムのフォーム
2カラムでレイアウトされたフォームは、長いフォームを整理したり、フォームフィールドを使用せずに広いスクリーンを満たすのに最適です。
デザインのテクニックをHTMLとCSSで確認
Little UI detailsは有志により、HTMLとCSSでも確認できます。
sponsors
