最近のWebサイトで使われてる、UI要素をデザインするテクニックのまとめ -Little UI Details by Steve Schoger

ぱっと見ただけではなかなか気がつかないような、ディテールにこだわった素晴らしいデザインのアイデアとテクニックを使ったUI要素を紹介します。

最近のWebサイトで見かけるUI要素がたくさんあり、すぐに次のプロジェクトに役立つと思います。

Little UI Details by Steve Schoger

Little UI Details by Steve Schoger

下記は@steveschoger氏の各ツイートを意訳したものです。
※当ブログでの翻訳記事は、著者様にライセンスを得て翻訳しています。

テキストを読みやすく

サイトのキャプチャ

@steveschoger

明るいカラーの背景にホワイトのテキストを配置した時、テキストに少しシャドウを加えることで、読みやすくなります。

グラデーションを鮮やかにする

サイトのキャプチャ

@steveschoger

例えば、ボタンにグラデーションを使用するときは、ボタンをより鮮明に見せるために色相を変更させます。

ホバーのエフェクト

サイトのキャプチャ

@steveschoger

ボタンのホバーエフェクトにドロップシャドウの増加に加えて、1px上に移動させると、持ち上がってるように見えます。

カード型コンポーネントのシャドウ

サイトのキャプチャ

@steveschoger

カードやボックスのシャドウにわずかな垂直オフセットを与えると、より自然に見えるようになります。

コンテンツの整列

サイトのキャプチャ

@steveschoger

アイコンを使用したリストは、アイコンとテキストで揃えるのではなく、テキストで揃えることで読みやすくなります。

グレーのテキスト

サイトのキャプチャ

@steveschoger

グレーのテキストは、色のついた背景では常に「オフ」に見えてしまいます。テキストを背景と同じ色相にするか、rgbaで不透明度を下げることで、テキストはよりはっきり見えます。

アイコンのカラー

サイトのキャプチャ

@steveschoger

ラベルの横にアイコンがある場合、アイコンのカラーをラベルより少し軽くすることで、最も重要な情報(ラベル)の視認性が高くなります。

箇条書き

サイトのキャプチャ

@steveschoger

箇条書きはデフォルトではなく、矢印やチェックマークのような一般的なアイコンを使用すると、視覚的な興味を持たせることができます。

ヘッダの上

サイトのキャプチャ

@steveschoger

ヘッダの一番上にカラーのヒント(4〜6px)を加えると、Webサイトのデザインにアクセントカラーを補完できます。

モーダルやパネルのデザイン

サイトのキャプチャ

@steveschoger

このテクニックは、モーダルやパネルに効果的です。上記の「ヘッダの上」と同様に、2色のグラデーションを使用して、より見栄えを向上させることができます。

隣接する2つのボックス

サイトのキャプチャ

@steveschoger

隣接する2つのボックスの境界にラインを使用するのではなく、わずかにコントラストのある2つのカラーを使用することで、よりすっきり美しく見えます。

テキストの階層

サイトのキャプチャ

@steveschoger

テキストの階層をつくる時はサイズとウェイトに加えて、カラーとコントラストを使用することで、その階層がより分かりやすくなります。

本文の行間

サイトのキャプチャ

@steveschoger

本文の行間に迷った時は、サイズを16pxに、line-heightを1.5にするのが安全です。また、ブラックの代わりに濃いグレーを使用すると、コントラストの高いブラックとホワイトを使用するより、ユーザーは読みやすくなります。

全部大文字の時

サイトのキャプチャ

@steveschoger

全部大文字にすると、読みにくい時があります。その場合は、文字間隔を広くすることを検討してください

角丸の作り方

サイトのキャプチャ

@steveschoger

私は通常、Sketchの角丸に頼るのではなく、グリッド上に円を描いてデザインします。

かっこいい地図の簡単な作り方

サイトのキャプチャ

@steveschoger

デザインのスキルがなくても、かっこいい地図のデザインを作成することができます。

コンテンツをグループ化するライン

サイトのキャプチャ

@steveschoger

ラインは、コンテンツを分割するだけでなく、切断されたコンテンツを繋げることもできます。コンテンツをグループ化すると、ユーザーが理解しやすくなります。

縦方向のリズム

サイトのキャプチャ

@steveschoger

倍数を使用してスペースを定義することは、縦方向のリズムを得るための優れた方法で、数式を利用するとよいでしょう。

画像が背景の時

サイトのキャプチャ

@steveschoger

写真画像が背景でテキストとのコントラストを高めたい時は、彩度の低い写真と「blend-mode: multiply;」と目立つカラー(ここではホワイト)組み合わせると、素晴らしいコントラストが得られます。

スクロールを促す

サイトのキャプチャ

@steveschoger

ページ上の要素の重なりは奥行きを作りだし、ユーザーにスクロールを促す素晴らしいテクニックです。

メインアクションでない場合

サイトのキャプチャ

@steveschoger

ボタンはすべてをデザイン的に目立たせる必要はありません。メインとなるアクションはデザイン的に目立たせる必要はありますが、ネガティブなアクションは控えめにすることでより機能します。

ボタンの階層

サイトのキャプチャ

@steveschoger

ボタンにも階層が必要な場合があります。クリックしてほしいボタンは目立たせて、そうでないものは目立たせないようにデザインします。

重大度の高いアクション

サイトのキャプチャ

@steveschoger

重大度の高いアクションを確認する場合は、プライマリアクションに危険色(レッドなど)を使用することがあります。

ボタンのボーダー

サイトのキャプチャ

@steveschoger

私は、セカンダリボタンのアウトラインでこのテクニックを使用します。ボタンのテキストが少し目立つようになります。

多すぎるボーダー

サイトのキャプチャ

@steveschoger

区切るためにボーダーが多すぎると、UIのデザインが煩雑に見えてしまい、ユーザーがコンテンツを見る際に邪魔になります。ボーダーを使用しないで、解消するアイデアがいくつかあります。

2カラムのフォーム

サイトのキャプチャ

@steveschoger

2カラムでレイアウトされたフォームは、長いフォームを整理したり、フォームフィールドを使用せずに広いスクリーンを満たすのに最適です。

デザインのテクニックをHTMLとCSSで確認

Little UI detailsは有志により、HTMLとCSSでも確認できます。

サイトのキャプチャ

Little UI details from @steveschoger, in HTML and CSS

top of page

©2017 coliss