これだけは抑えたい！アイコンデザインでユーザーをキャッチするポイントまとめ

アプリやWebサイトののインターフェイスにおいて、アイコンは重要な要素です。明瞭で親切なアイコンはユーザーの負担を軽くするほか、トレンド感や世界観を伝える役割も果たしうるのです。

今回は、効果的なアイコンデザインの特徴、アイコンの役割、基本的なデザインガイドライン、アイコン集についての情報をまとめました。

ユーザーフレンドリーなアイコンデザインとは？

ユーザーからの好感を得るのに効果的なアイコンは、以下のような特徴をもちます。

不要なアイコンを作らない

グラフィックを使ったアイコンは、アイコンが何かを表象するシンボルです。デザイナーはアイコンをデザインする際に、サービス全体の中の要素としての役割を検討すべきです。

画面上に存在しているからは、明確な役割を与えるべきです。そうでなければ、アイコンは画面やWebページを複雑にする絵でしかありません。

くっきりとしたシェイプにする

アイコンを認識しやすいよう、そして何が描かれているのかわかりやすいよう、くっきりとした形状を心がけましょう。明瞭さに欠けるアイコンは意味が伝わらないので、もはやアイコンとして機能しません。インタラクションのプロセスを複雑にしてしまうのみです。

シンプルにする

アイコンのデザインは求められる役割、機能を果たせるだけの必要最低限なシンプルなものにすることを心がけましょう。筆者が所属する『Tubik Studio』デザイナーは、アイコンから無駄なビジュアル要素をできるだけ省くべきだと考えています。

しかしながら、同時にアプリやWebサイト全体のコンセプトを表現するビジュアル要素とアイコンとの兼ね合いを忘れないことも重要です。別の要素を考慮し、バランスをとることで効果的なアイコンを生み出せるのです。

 Arthur Avakyan / Valentine’s Day icon set

キャッチーなものにする

デザインに取り掛かる前に、ターゲットの好きな色やテイストをリサーチし、認識してもらいやすさを高めましょう。競合サービスのアイコンや、コンテストに出品されたアイコンを見て回るのも良いでしょう。この作業が、キャッチーなアイコンをデザインする基礎となります。

ここでいう「キャッチー」とは、けた外れにユニークなアイコンを作りましょうということではありません。ディティールにこだわり精度を高め、小さな変更でわずかなユニークさを付け足し、AppStoreやPlayMarketの他のどのサービズよりも目立つものにしましょう。

スタイリッシュにする

サービスのテーマによりますが、特にアプリのアイコンは、テクノロジカルな機能やスピード感を連想させるような、スタイリッシュなデザインが好ましいです。きっかけづくりとして視覚的なアピールを行いましょう。

特異なテクニックを使わずとも、配色や比率の原則など、グラフィックデザインの原点にたちかえれば間違いありません。

Arthur Avakyan / Saily ghost icon version

レスポンシブにする

デバイスが多様化するにつれ、アイコンもフレキシブルに対応できるものが求められるようになっています。iphoneの画面でも、タブレットの画面でも、見かけに大きな変化が生まれないよう作りましょう。

一貫性をもたせる

同一アプリ内のアイコンは、同じスタイル、コンセプトを保つべきです。デザイントーンが異なる要素は、意味を含んでしまいます。一貫性のない要素を取り除き調和を保ちましょう。

 Polina Makarevych / IT Office Icons Set

アイコンが果たす役割

情報やリンクの役割、機能を伝える

アイコンはテキストよりも目につきやすく、象徴的なモチーフによって機能や意味もすぐに伝わります。テキストに成り代ることで、他の要素を入れるための余白を生み出すこともできます。

さらに、アイコンは失読症など文章を読むのに問題を抱えている人が、文章を読まなくてもプロダクトを操作できるようにするといった役割も果たします。

Tamara / Passfold project

ターゲットの幅を広げる

アイコンのデザインがキャッチーでトレンディーであれば、それだけでアプリのダウンロード数は伸びます。アプリの名刺としての役割を果たすのです。

Arthur Avakyan / Easter and spring themed icons

トレンド感を与える

インスタグラムやiPhoneメールアイコンのデザインを比べてみると、歴然の差がありますね。最新バージョンではフラットデザインを起用していて、今っぽさを感じますね。

ユーザーは“マテリアルデザイン”や“スキュアモーフィズム”などのデザイン用語を知らないかもしれませんが、毎日スマートフォンのディスプレイを眺めているので、知らずのうちにトレンドを習得しているのです。

アプリアイコンのデザインガイドライン

Apple社が開発者向けに公表している、アプリアイコンのデザインガイドラインをご存知でしょうか。そこには、アイコンデザインを進める上で参考になる原則が詰め込まれています。

原文を抜粋・意訳しました。

シンプルに保つ

アプリの要素をリストアップし、なかでも最も重要な要素を決めてください。シンプルでユニークな形で表現する単一の要素を探します。詳細を慎重に追加してください。アイコンのコンテンツや図形があまりにも複雑な場合は、特に細かいサイズでは詳細を識別するのが難しい場合があります。

視線は１箇所に集める

アプリアイコンの小さい面積の中に、視線を奪われるポイントが複数あるのは避けましょう。中心に単一のポイント据え置くことで、アプリを明確に識別してもらえます。

背景はシンプルに

アイコン全体をコンテンツで埋める必要はありません。余白がないアイコンは周りのアイコンとの調和を乱します。また、背景を透明にするのはやめましょう。

言葉は最低限に

文字情報が不可欠な場合のみ使用してください。文字を含めなくても、ホームスクリーンのアイコンの下にアプリの名前が表示されます。

写真やスクリーンショットを含めない

写真の細部は、小さなサイズで見るのが非常に困難です。スクリーンショットはアプリのアイコンにとっては複雑すぎるため、アプリの目的を伝えるのには役立ちません。

Appleハードウェア製品を複製しない

Appleの製品やロゴは著作権で保護されています。アイコンや画像で再現することはできません。

さまざまな壁紙でアイコンをテストする

壁紙を変えて、どのように見えるかを確認します。明るい写真から複雑なグラッフィックまで、試して見てください。

アイコンコーナーは四角にする

アイコンコーナーを自動的に丸めるマスクが適用されます。角が取れてしまうことをお忘れずに。

便利なアイコン素材集5選

1. ICON FINDER

無料で使えるアイコン素材サイト。検索条件が詳細で、数も多く、おすすめです。

https://www.iconfinder.com/

2. ICOOON MONO

モノクロなアイコンの素材集。ブラウザ上で色を変更したのちダウンロードすることもできます。

http://icooon-mono.com/

3. Icons8

3万を超えるアイコン素材がダウンロードできます。レスポンシブデザインにも対応した素材もあるので、アプリのデザインに便利ですね。

https://ja.icons8.com/

4. FLAT ICON DESIGN

影の使い方が可愛いアイコン集。ダウンロード形式を５種類から選べます。

http://flat-icon-design.com/

5. 無料素材倶楽部

アイコンやイラスト素材などを手軽に探すならココ全ての素材が無料・商用利用可能です。

http://sozai.7gates.net/

もっと知りたい人はこちらもチェック！

無料で使えるボタン画像フリー素材集30選【商用利用可】

ファビコン(favicon)の基礎知識と作成ツール&フリー素材30選

（翻訳：Shinya Morimoto)