アイコンの効果的な使い方を実例から学ぶチュートリアル

アイコンの効果的な使い方を実例から学ぶチュートリアルをSmashing Magazineから紹介します。

How To Use Icons To Support Content In Web Design

How To Use Icons To Support Content In Web Design

下記は、その意訳です。

How To Use Icons To Support Content In Web Design

アイコンは、ユーザーをあなたのウェブサイトの内容に惹きこませるシンプルで、効果的な方法です。

アイコンを使用して、ウェブサイトのコンテンツをサポートする素晴らしいサンプルとベストプラクティスを紹介します。

1. How To Use Icons

アイコンを効果的に使用する方法

アイコンを使用する際のゴールの一つは、ユーザーに情報を素早く、そして効率的に伝えることです。

アイコンを効果的に使用すると、説明を必要とせずに、有効なコミュニケーションを可能にし、少ないコンテンツでも多くの内容をユーザーに伝えることができます。

サービス一覧をリストにすることは、非常に有益です。しかし、ただのリストでは面白みに欠け、つまらないものです。
サービスに関連したアイコンを使用することで、魅力的なリストにすることができます。

アイコンのキャプチャ

280 Slides

アイコンを使用すると、ユーザーに注目してもらいたい箇所に視線を集めることができます。

アイコンのキャプチャ

coda

プロダクトを連想するロゴをアイコンとして使用します。アイコンはシンプルだけど、ユニークなものにしてください。

アイコンのキャプチャ

Intridea

アイコンは内容にあった、シンプルなデザインのものを使用します。コンテンツのテーマは何ですか? カラーは何色ですか? コンテンツだけでなくサイト全体の統一感を考慮し、アイコンを使用します。

アイコンのキャプチャ

J. Alexander Woodworking

2. Purpose And Placement

アイコンの目的と配置

アイコンは、あなたのウェブサイトを使いやすくし、魅力的でプロフェッショナルなものにします。ヘッダ、タイトル、リスト、サイドバーなどにクリエイティブなアイコンを配置してください。

シンプルなアイコンでも、サイトの魅力とパーソナリティを伝えることができます。

アイコンのキャプチャ

Coffeenatic

パラグラフを要約したようなアイコンを使用すると、リーダビリティが高まります。

アイコンのキャプチャ

Rackspace

異なるセクションごとにアイコンを配置すると、視覚的なポイントになります。

アイコンのキャプチャ

Defined Clarity

アイコンの大きさは重要ではありません。小さいアイコンでもユーザーに大きな効果を与えます。
ただし、アイコンは視認性に優れたデザインで、内容に関連したものを使用してください。

アイコンのキャプチャ

Morgan Hayes

アイコンの配置にマンネリを感じていたら、右に配置することも検討してみてください。
視覚的な効果は充分あります。

アイコンのキャプチャ

South Creative

アイコンの大きさや配置を変え、よりいっそうダイナミックに見せることも面白いです。

アイコンのキャプチャ

Media Temple

3. Choose Your Style

サイトに合ったアイコンを

アイコンの効果を考えるなら、オリジナルのユニークなものがベストです。あなたのサイトの内容やデザインに合ったアイコンを使用してください。

下記は、明るいカラーと3Dのデザインを取り入れ、サイトのルック&フィールを補完しています。

アイコンのキャプチャ

GoodBarry

シンプルで、実用的なイメージを与えます。

アイコンのキャプチャ

CrowdSPRING

グランジ風のデザインもあります。

アイコンのキャプチャ

Take the Walk
※元では.comでしたが、.netの方に

ユニークな形状は、ダイナミックなイメージを与えます。

アイコンのキャプチャ

Squarespace

モノクロのアイコンはユーザーの気を散らせることなく、アクセントを与えます。

アイコンのキャプチャ

Studio 7 Designs

ヒントとなるもののスクリーンショットを使ったユニークなアイコンです。

アイコンのキャプチャ

Gist

4. Additional Examples

元エントリーでは、多数のアイコンを効果的に使用したサイトのギャラリーがあります。
How To Use Icons To Support Content In Web Design

sponsors

top of page

©2018 coliss