はじめてのデザイン 〜デザインの基本・考え方〜

6-2. アイコンを活用する

  • アイコン
  • デザインの考え方

このレッスンでは、イラストレーションの一部であるアイコンとは何か、どのように活用するのかを解説します。

公開日:2020/04/03最終更新日:2021/01/28

1.アイコンとは

アイコンとは物事を記号化したものです。

アイコンはコンピューター上の表示物であり、アイコンを押したりタップすることでコンピューターやスマートフォンのアプリケーション起動やアプリケーション内の機能が実行されます。

2.アイコンの目的

アイコンの目的は主に
・プログラムや機能の役割をすぐ把握できる
・アプリケーションやサービスのブランドを認知させる

この2点です。

プログラムや機能の役割をすぐ把握できる

アイコンは物事を記号化したものであることから、その物事を連想させるようなデザインであることが求められます。そのために「メタファー」と呼ばれる現実世界にある物事を用いてアイコン化することがあります。

例えば、メールのアプリケーションアイコンですと、封筒を簡略化したデザインが多様されています。また、電話のアプリケーションアイコンですと受話器など、普段生活している上で親しみのあるものがそのままアイコンとして使われています。

このように身近なもので例えることで、アイコンの持つ意味や役割をすぐ把握することができます。

例:iOSでの電話とメールアイコン

アプリケーションやサービスのブランドを認知させる

アプリケーションやそのアプリケーションが提供するサービスをアイコンで表現することにより、アプリケーションやサービスのブランドを認知させることができます。企業ロゴやサービスロゴを使用したり、アプリケーションの名称をシンプルにデザインしたものを使用することでブランドをより強く認知させることができます。

例:twitterとLINEのアプリアイコン

3.アイコンの活用する際のポイント

アイコンを活用するためには以下のポイントをおさえると良いでしょう。
・シンプルなアイコンにする
・ブランドイメージとの統一感を出す
・アイコン同士のイメージを保つ
・使用する環境・文化を把握する
・ラベルを活用する

シンプルなアイコンにする

シンプルなアイコンであることは、見やすさや覚えやすさに繋がります。シンプルなアイコンであることは、小さいサイズでアイコンを表示したときの認識のしやすさにも繋がります。

ブランドイメージとの統一感を出す

色や形など、ブランドが持つイメージは様々あります。そのブランドイメージを守るためアイコンのデザインには気をつける必要があります。統一感を出すことでブランドイメージはより強固なものとなり、見た人にブランドの価値を伝えることができます。

アイコン同士のイメージを保つ

線の太さや色、サイズなど統一することでアイコンたちに統一感が生まれます。統一感を出すためにも、ルール(トンマナ)を定めて制作すると良いでしょう。

使用する環境・文化を把握する

プラットフォームによって、アイコンに関するルールが設けられていることがあります。
iPhoneなどのiOSでは、ヒューマンインターフェースガイドラインという文書でアイコンデザインに関するルールが載っています。
参考:iOSにおけるアプリアイコンのガイドライン ※英語

プラットフォームごとに定められているルールを把握しておくと良いでしょう。

また、国内だけでなく世界で使われることを想定したアプリケーションの場合、日本ではアイコンの意味が通じるが海外では通じない、ということも出てくる可能性があります。その場合、文化の違いを把握し、正確なアイコンの意味を伝えるよう注意しなければなりません。

ラベルを活用する

アイコンだけではそのアイコンが持つ機能や意味を理解することが難しい場合があります。そのような時はアイコンに隣接する形でテキストラベルを表示させ、アイコンに対する理解を補助します。iPhoneなどのアプリで見られるタブバーが良い例かと思います。ただし、見た人を惑わせないよう文言の選定には注意が必要です。

例:Apple Storeアプリのタブバー  

4.まとめ

アイコンの目的から活用するポイントまで説明しました。試しにアイコン作りにチャレンジしてみてはいかがでしょうか。既存のアプリケーションのアイコンをトレースするだけでも、そのアイコンのメタファーやルールなど、アイコンの理解を深めることができるかと思います。

次のレッスンではイラストレーションの一つである図解について説明します。

理解度チェック





はじめてのデザイン 〜デザインの基本・考え方〜

1. デザインを考える前に

2. デザインの4つの基本原則

3. 色と配色の基本

4. タイポグラフィ

5. 写真や画像を効果的に使う

6. イラストレーションを効果的に使う

7. デザインしてみよう



このレッスンの著者