アイコンの効果的な使い方を実例から学ぶチュートリアル
Post on:2009年3月5日
sponsors
アイコンの効果的な使い方を実例から学ぶチュートリアルをSmashing Magazineから紹介します。
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
アイコンを効果的に使用する方法
アイコンを使用する際のゴールの一つは、ユーザーに情報を素早く、そして効率的に伝えることです。
アイコンを効果的に使用すると、説明を必要とせずに、有効なコミュニケーションを可能にし、少ないコンテンツでも多くの内容をユーザーに伝えることができます。
サービス一覧をリストにすることは、非常に有益です。しかし、ただのリストでは面白みに欠け、つまらないものです。
サービスに関連したアイコンを使用することで、魅力的なリストにすることができます。
アイコンを使用すると、ユーザーに注目してもらいたい箇所に視線を集めることができます。
プロダクトを連想するロゴをアイコンとして使用します。アイコンはシンプルだけど、ユニークなものにしてください。
アイコンは内容にあった、シンプルなデザインのものを使用します。コンテンツのテーマは何ですか？ カラーは何色ですか？ コンテンツだけでなくサイト全体の統一感を考慮し、アイコンを使用します。
2. Purpose And Placement
アイコンの目的と配置
アイコンは、あなたのウェブサイトを使いやすくし、魅力的でプロフェッショナルなものにします。ヘッダ、タイトル、リスト、サイドバーなどにクリエイティブなアイコンを配置してください。
シンプルなアイコンでも、サイトの魅力とパーソナリティを伝えることができます。
パラグラフを要約したようなアイコンを使用すると、リーダビリティが高まります。
異なるセクションごとにアイコンを配置すると、視覚的なポイントになります。
アイコンの大きさは重要ではありません。小さいアイコンでもユーザーに大きな効果を与えます。
ただし、アイコンは視認性に優れたデザインで、内容に関連したものを使用してください。
アイコンの配置にマンネリを感じていたら、右に配置することも検討してみてください。
視覚的な効果は充分あります。
アイコンの大きさや配置を変え、よりいっそうダイナミックに見せることも面白いです。
3. Choose Your Style
サイトに合ったアイコンを
アイコンの効果を考えるなら、オリジナルのユニークなものがベストです。あなたのサイトの内容やデザインに合ったアイコンを使用してください。
下記は、明るいカラーと3Dのデザインを取り入れ、サイトのルック＆フィールを補完しています。
シンプルで、実用的なイメージを与えます。
グランジ風のデザインもあります。
Take the Walk
※元では.comでしたが、.netの方に
ユニークな形状は、ダイナミックなイメージを与えます。
モノクロのアイコンはユーザーの気を散らせることなく、アクセントを与えます。
ヒントとなるもののスクリーンショットを使ったユニークなアイコンです。
4. Additional Examples
元エントリーでは、多数のアイコンを効果的に使用したサイトのギャラリーがあります。
How To Use Icons To Support Content In Web Design
sponsors
