アイコンのデザインに悩まないための10のヒント

 アイコンのデザインに悩まないための10のヒント

John Morrison

アイコンのデザインに悩まないための10のヒント

最近、ほとんどのデザイナーがアプリのデザインを考えています。 アプリの最も小さな特徴のひとつは、モバイルデバイスの画面やアプリストアでアプリを表現するためのアイコンです。 優れたアイコンをデザインするには、単にロゴを箱に入れるだけではなく、他のアプリのアイコンの中で際立っている必要があります。

優れたアイコンは、アプリやソーシャルメディア、さらには小さな印刷物や名刺など、さまざまな方法で使用することができます。 そして必要なのは、ちょっとしたデザインと計画だけです。

デジタルアセットを探る

関連項目: 25+ Best Floral & Flower Background Textures 2023

1.読みやすくする

アイコンは読みやすくなければなりません(テキストのことではありません)。

アイコンは、ブランディングやわかりやすさから認知度の高いビジュアルを含むことが望ましい。 たとえば、パソコンのデスクトップ上のアイコンを考えてみてください。 ドキュメントはフォルダに、音楽は音符の形をしたボタンから、画像は見た目でどこに何があるかがわかるという、アイコンのシンプルな性質から、あなたは、その場所にあるものを知っています。ポラロイド写真のように

視覚的な読みやすさを追求する場合、ブランディングは重要な要素です。 大手のブランドは、ロゴの一部や象徴的なイメージをアイコンにすることが多く、小さなサイズでもすぐに認識される傾向があります。 新しいブランドや小さなブランド、アイコンのコンセプトは少し難しく、デザイナーは最適なインパクトを与えるために他の手法を選ぶことがあります。

2.イメージではなく、アイコンを考える

アイコンは、画像だけでなく、文字やロゴマーク、それらの組み合わせも含まれます。

多くのロゴは、実際の写真を使わず、よりグラフィックに近い形でアイデアを表現しています(この考え方は、ベクターベースのアイコンを作ることでより強調されます)。

また、画像は小さいと読みづらく、携帯電話などでは他のアイコンの中に紛れてしまうこともあります。 よりグラフィックな表現であれば、より視覚的な重みを感じることができます。

上のメイシーズ百貨店のモバイルアプリのアイコンはその好例です。 赤いボックスの中央に大きな白い星があり、一目でわかります。 このアイコンは、同社のシグネチャーアイコンの標準的な処理とは異なり、色を反転させてアイコンを強調しています。 様々なユーザーの壁紙に対して、白よりも赤い背景がより目立つでしょう。

3.単語を避ける

アイコンに文字が使われていないのは、読み解くのに十分なスペースがないためです。

テキストは、ロゴの一部でない限り、避けるのが原則です。 ロゴの一部であるテキストも、ロゴの主要なデザインに使用する前に、慎重に検討する必要があります。

また、アイコンは、実際にデバイスに表示された状態で使用されることが多いので、アイコンのブロックの下に説明文が表示されていることが多い。

例えば、デザインシャックのアイコンは、「d」の一文字を使い、色や文字の処理をウェブサイトと統一したものです。 この統一されたブランディングと読みやすい文字によって、言葉がなくても、視覚的な結びつきが生まれ、つながりを感じます。

4.鮮やかなカラーを使う

アイコンを目立たせたいなら、大胆に色を使いましょう。 鮮やかな色を選べば、さまざまな背景でアプリを目立たせることができ、ユーザーの目を引くことができます。

アイコンのデザインで一番避けたいのは、他の色と混ざってしまうことです。 そのため、ブルー(特にスカイとネイビー)は、他のアイコンが多く使用しているため、避けたい色と言えます。

ロゴマークやブランドカラーをブルーで統一する場合は、ライムグリーンなどの「ニューニュートラル」や、秋には鮮やかなオレンジ、春には鮮やかなピンクなど、季節感のある色と組み合わせて、インパクトを与えるようにしましょう。

5.シンボルマークやシンプルなロゴの開発

あなたのブランドにはロゴがあると思いますが、アイコンの場合はシンボルも重要です。 シンボルは、ロゴや画像をシンプルなグラフィックで表現したもの、またはその断片です。

より多くのブランドが、標準的なブランディングやロゴにアイコンを取り入れることで、小さなアイコンと大きなデザインプロジェクトとの間に完全なつながりを持たせています。

メッセージや写真を共有するアプリ「Snapchat」を考えてみましょう。 幽霊のマークは、ユーザーに親しまれているアイコンとして、他の配色や形、さらにはビルボードに単体で表示できるほど認知されています。 これは、機能するシンボルの代表例と言えるでしょう。

6.リメンバースケール

アイコンは、携帯電話やデスクトップパソコンにある小さなものというイメージが強いですが、アイコンは必ずしも小さいとは限りません。 大きさに関係なく使えるようにデザインする必要があるのです。

これは、常に変化するデジタル環境、より多くの網膜ディスプレイの出現、異なるプラットフォームやデバイスが異なるサイズでアイコンをレンダリングする可能性があるため、特に重要です。

関連項目: 60+ Best Website PSD Mockups & Tools 2023

大きく作ってから、スケールダウンする。

7.ベクターフォーマットで作成する

アイコンは、ベクターベースのデザインで作成される必要があるため、スケールやサイズだけでなく、フォーマットも重要な要素です。

ベクター画像であれば、たくさんの画像を作成することなく、さまざまなデバイス、サイズ、ビューポートに合わせてアイコンを変更したり保存したりすることができます。 なぜなら、現実には、さまざまなプロジェクトに対応するサイズのアイコンが複数バージョン必要になるからです。

ベクターの利点は柔軟性ですが、多くのアプリケーションやプラットフォームでは、アップロードのためにベクター以外のフォーマットでコピーを保存する必要がある可能性があります。

8.デザインの枠にとらわれない

ここ数ヶ月、単色の背景に白のアイコンやフラットデザイン、ロングシャドウを使ったアイコンが多くなっています。 これらのトレンドはとても楽しいのですが、デザインの枠にはまらないでください。 あなたのアイコンを何か違うものにしてみませんか?

みんなが四角いエッジを使っているなら、もっと丸みを帯びたものを。 背景にテクスチャーを加えて、フラットな色彩の中で目立たせる。 みんながやっていることを手本にしなければいけないと思わないでください」。

9.モノクロにする

デザイナーが小規模なデザインの効果を検証するために長年使ってきた楽しい小技があります。 色を使っても使わなくても同じメッセージが伝わるデザインなら、おそらくうまくいっています。 もし、色を使わないと読み取れないアイコンなら、修正作業を続けましょう。

個人的には、ほとんどのデザインプロジェクトはモノクロでスタートし、後から色をつけていきます。 コンピューターの中のスケッチという考え方です。 色をつける前に紙にスケッチしてうまくいけば、そのアイデアはしっかりとした骨格を持っていることになります。

10.シンクスクエア

アイコンや四角い枠の中のパーツも正方形に収まる必要があります。 デザインや画像が正方形である必要はありませんが、どのアイコンも縦横が同じであることが基本です。

そのため、縦長や横長のシンボルがある場合、そのシンボルが背景に埋もれてしまわないように、周りのスペースを埋める工夫が必要です。 ほぼ正方形になるスペースのかなりの部分を埋めるようなコンセプトを選びましょう(丸みのある円形のアイコンも縦横が同じになります)。

結論

陳腐に聞こえるかもしれませんが、優れたアイコンデザインの鍵は、...そう...アイコンであることです。 それはとてもシンプルなことなのです。

シンプルさ、色、視覚的な認識を意識してデザインする。 インターフェースや現在のトレンドについて考え、標準に合うようにデザインする。 (最近のiOSモバイルアプリでスキューモーフィックなアイコンをデザインすることはないでしょう?) そして、楽しく。アイコンは、ユーザーにとってデジタルインターフェースへの入り口なのですから。

画像出典:Ash Kid、Casey Fleser、Roland Tangalo、Gustavo da Cunha Pimenta とマイクロシエルボス・ギーク・クルー。

John Morrison

ジョン・モリソンは、デザイン業界で長年の経験を持つ熟練のデザイナーであり、多作な作家でもあります。知識を共有し、他の人から学ぶことに情熱を持っているジョンは、業界トップのデザイン ブロガーの 1 人としての評判を確立しました。彼は、仲間のデザイナーにインスピレーションを与え、教育することを目的として、最新のデザイン トレンド、テクニック、ツールに関する研究、実験、執筆に日々を費やしています。デザインの世界に夢中になっていないときは、ジョンはハイキング、読書、家族との時間を楽しんでいます。