アイコンデザインについて知っておくべきことすべて

公開: 2020-08-27

アイコンデザインについて知っておくべきことすべて

アイコンは小さいですが強力です。そのため、アイコンのデザインを慎重に検討することが重要です。どこのデザイナーも、優れたアイコンを作成するための創造性と努力の量を目撃するでしょう。それは表現力があり、同時にシンプルでなければならないからです。

アイコンの背景

アイコンのデザインは、実際にはオブジェクトまたはプログラムのいずれかを表す小さな画像です。それらは、強力なメッセージを伝える本当にシンプルな画像です。アイコンは通常非常に覚えやすく、ほとんどすべてのグラフィカルインターフェイスの主な機能でもあります。

おもしろ情報：アイコンという言葉の由来は、イメージを意味するギリシャ語の作品「エイコナ」に由来しています。 MacintoshやMicrosoftなどの最初のGUIオペレーティングシステムが登場したとき、デジタルアイコンが登場し始めました。

アイコンの種類は何ですか？

知っておくべきアイコンには主に3つのタイプがあります。ここでは、それぞれについての洞察と、それらがユーザーエクスペリエンスにもたらす影響の種類について説明します。

ユニバーサルアイコン

これらは広く認識されているアイコンです。たとえば、検索、印刷、ホーム、またはショッピングカートのアイコンはそのようなアイコンです。しかし、小さな問題が1つだけあります。ユニバーサルアイコンはかなりまれです。まれなことを意味する場合、ここに示す例を除いて、ほとんどのアイコンはあいまいであり、インターフェイスに基づいて意味が異なる可能性があることを意味します。

異なる意味を持つアイコン

名前が示すように、これらのアイコンには複数の意味があり、矛盾したり矛盾したりする可能性があります。たとえば、ハートとスターのアイコンが競合しています。これら2つのアイコンの機能はアプリごとに異なり、場合によっては互いに競合することもあります。そのため、これらのアイコンを正確に解釈するのはかなり難しくなります。アプリ内であっても、ユーザーが1つの特定の結果を期待してそれらをクリックし、代わりに別のシンボルを取得すると、これらのシンボルは混乱する可能性があります。

ユニークなアイコン

アイコンを使用して、一意のオブジェクトまたはアクションをどのように説明できますか？ユニークなアイコンデザインを使用。しかし、これが失敗した例はたくさんあることに注意することが重要です。たとえば、Appleが色付きの円の束でゲームセンターを表すことを決定したとき、意味は失われました。これらのサークルは何を意味し、ゲームセンターとどのように関連していますか？

どのアイコン形式を使用できますか？

アイコンのデザインを依頼するときに知っておくべきアイコンの形式にはいくつかの種類があります。

SVG –これらはScalable Vector Graphicsであり、完璧な基本フォーマットを提供します。スケーラブルであるため、基本的に、品質を損なうことなくアイコンのサイズを変更できることを意味します。
PNG –完全な互換性が必要な場合は、ポータブルネットワークグラフィック形式を使用できます。これはラスター形式です。つまり、ピクセルに基づいており、品質に影響を与えずにアップスケールすることはできません。 PNGは、Word、PowerPoint、および電子メールで機能します。編集せずに、色付きの背景の上に追加できます。
ICO – Microsoft Windowsアイコン形式は、任意のWindowsアプリケーションにアイコンを使用したい場合、または独自のWebサイトのファビコンとして使用したい場合に最適です。
ICNS –この形式は非常に特定の目的に使用されます。これは、アプリだけでなくMacOSXドキュメントでも使用できるApple固有の形式です。

キンプのヒント：アイコンのデザインはできるだけシンプルにしてください。意図した意味を明確に表す実際のアイテムをデザインに使用してみてください。たとえば、棒グラフを使用して財務を示すことができます。あなたはビジネスを意味するためにワークバッグを使うことができます。デザイナーが適切なアイコンを思い付くのを助けるために、できるだけ多くのコンテキストをそれらに与えてください。アイコンがどのように使用されるかを正確に知らせてください。

アイコンを有効または無効にする理由は何ですか？

アイコンの形式と種類について理解できたので、効果的または非効果的なアイコンの理由についても見ていきましょう。このようにして、デザイナーと協力するときに、これらのプロパティを探すことができます。

明瞭さ

アイコンのデザインは、メッセージが表示されたらすぐに伝える必要があります。アイコンで使用している比喩が不明またはあいまいな場合、人々はそれが何を意味するのか混乱します。たとえば、ホームに使用されるアイコンは誰にでも知られています。つまり、わかりやすくなっています。ここで、ホームのアイコンが中央にドットが付いた円として描かれた場合はどうなるか想像してみてください。それはそれを混乱させるでしょう？紛らわしいアイコンは効果がありません。

読みやすさ

透明度係数を並べ替えたら、アイコンが読みやすいことを確認する必要があります。以下の例を見ると、最初のアイコンはディテールが細かすぎてぼやけているため、理解しにくいです。正しく行われた小さなアイコンの良い例は、優れた読みやすさがあるGoogleマップ上のアイコンです。細いストロークを使用し、十分なスペースを残さず、小さなアイコンに詳細を追加しすぎると、読みやすさが失われるため、効果がなくなります。

アイコンの配置

アイコンのデザインにはバランス感覚が必要です。これは、すべての要素を光学的に位置合わせすることで実現できます。これは、視聴者が要素をどのように知覚するかに応じてデザインを調整する必要があることを意味します。

アイコンの簡潔さ

アイコンの簡潔さは、追加した詳細の量に基づいて決定されます。アイコンはできるだけシンプルに保ち、不必要な線画や詳細を追加して判読できなくなったりぼやけたりしないようにしてください。

一貫性

アプリまたは特定のインターフェースのアイコンの設計を行う場合は、すべてのアイコンが同じ一貫性を維持していることを確認してください。一部のアイコンが他のアイコンよりも詳細または鮮明に見える場合、一貫性が失われます。これにより、ユーザーエクスペリエンスの面でインターフェイスが損なわれます。

デザインの個性

繰り返しになりますが、デザインするインターフェースまたはアプリでは、各アイコンがブランドの個性を体現していることを確認する必要があります。あなたが持っているブランドスタイルと声の種類に基づいて、プロから楽しくプレッピーに行くことができます。これは、アイコンをデザインするときにデザイナーに提供する必要があるブリーフィングの非常に重要な部分です。

アイコンは使いやすいものにする必要があります

't'まで描画した後でも、アイコンは完成にはほど遠いです。デザイナーが作成したアイコンは、クライアントに使用させる前にテストと準備が必要になります。このテストと準備により、アイコンが使いやすいことが保証されます。使いやすいアイコンの兆候は、次のとおりです。

よく整理されている–ここでは、必要に応じて後で参照できるように、デザイナーがデザインのマスターファイルを整理された方法で配置していることを確認する必要があります。必要なときに簡単に見つけられるように、アルファベット順またはその他の順序で並べるように依頼できます。
十分に文書化されている–アイコンファミリの主要な原則を伝え、技術的なルールをレイアウトするように設計者に依頼してください。また、完成したらこのドキュメントを公開して、必要に応じて参照できるようにすることもできます。
テスト済み–デザイナーと一緒にこれを実行することを確認してください。設計されたすべてのアイコンを並べて配置するように指示します。これにより、アイコンの一貫性と関連性を確認できます。
アイコンマネージャなどのカスタムツールでサポートされています。アイコンの使用に役立つカスタムツールを提供できる場合は、それらにアクセスできるようにする必要があります。

アイコンデザインの概要には何を含める必要がありますか？

すべてのユースケースを検討する

アイコンが使用される場所と、アイコンが何を表す必要があるかを把握します。また、メタファーが必要なアイコンと、実際のオブジェクトに基づいて実行されるアイコンを区別する必要があります。これらの要素を明確にしたら、ブリーフを通じてこれを設計者に伝えることができます。

ブレーンストーミングの概念と比喩

まず、アイコンをできるだけよく説明するために使用できるすべての描写のリストを作成します。単語セットや辞書などのリソースは、キーワード、類似した単語、アイコンを通じて伝えようとしている概念の定義などを見つけるのに役立ちます。次に、これらのアイデアを単純化して、アイコン（抽象的で単純である必要があります）がメッセージを明確かつ効果的に送信できるようにします。できるだけ多くの調査とブレーンストーミングを自分でやり遂げてから、残りはデザイナーのサポートを求めてください。

役立つ参考資料を探す

質の高い参考資料を見つけるために、常に調査に投資してください。おそらくどこかで、誰かがあなたがデザインしようとしているアイコンの素晴らしいバージョンをすでに作成している可能性があります。これらを見つけることができれば、あなたのインスピレーションも見つけることができます。あなたがあなたのデザイナーにこれらの参照を提供するとき、彼/彼女はあなたの視点を理解するのがより簡単であるとわかります。

アイコンのスタイルを選択してください

人気のあるスタイルのいくつかは、グリフ、フラット、輪郭、素材、手描きです。スタイルを完成させるときは、2つの重要な要素について考える必要があります。 1つは、これらが表示されるUIインターフェイスとそのスタイルです。 2つ目は、マテリアルかiOSかなど、そのインターフェイスの要件です。

デザイナーと詳細に話し合う

デザイナーが、デザインしたすべてのアイコンの一貫性を維持していることを確認してください。物事をより明確にするために、実行するすべてのアイコンの完全なスケッチを彼らに行わせる。

アイコンのコンセプトスケッチを承認した後、ベクトル化されたバージョンをリクエストする必要があります。最後に、アイコンのモックアップをいくつか入手して、さまざまなユースケースに適しているかどうかを確認します。

これで、アイコンをシャープに見せるためにブリーフィングに含めるべき内容について説明しました。次に、デザインするアイコンに具体化する必要のある主なものを見ていきましょう。そうすれば、最終的な結果がすぐにわかります。これらについては、必ずデザイナーと話し合ってください。

新しいアイコンを作成するためのチェックリスト

以下に説明する手順は、アイコンデザインを作成するためにデザイナーが実行します。

ぼやけたアイコンは避けてください

アイコンをシャープ、スピック、スパンで表示するには、アイコンをピクセル上に配置する必要があります。これにより、ぼやけた問題が解消されます。

寸法と重量を確認してください

斜視テストを使用して、すべてのアイコンの重みと寸法が同じであることを確認することをお勧めします。基本的には目を細めて、アイコンが相互にどのように表示されるかを見てみましょう。調整が必要な場合は、必ずデザイナーの助けを借りてください。ここでの1つのヒントは、完全な円と正方形を使用して、アイコンのセット全体で重みが同じであることを確認することです。

幾何学的形状の使用

デザイナーに、アイコンを描くためにシンプルでしっかりした幾何学的形状を使用してもらいます。これにより、アイコンが明確になり、見た目にも美しくなります。

過度の詳細化は避けてください

デザイナーと一緒にアイコンを実行するときに、アイコンが忙しくて重く見えるような詳細をすべて削除します。代わりに、基本的で単純な詳細のみを維持してください。これにより、アイコンがすっきりと鮮明に見えます。アイコンは小さく、詳細が多すぎるブロブに変わる可能性があります。

スペースを確保する

アイコン内の細部はすべて、呼吸スペースが必要です。それらがすべて密着しすぎると、デザイン全体が濁ってしまいます。アイコンを見るときは、詳細が明確になるようにすべてのアイコンに十分なスペースがあるかどうか、およびアイコンの意味がすぐに明確になるかどうかを確認してください。

アイコンのコントラスト

アイコンに十分な色のコントラストがあることを確認してください。黒と白のバランスはちょうどいいはずです。十分なコントラストがない場合、アイコンは不明瞭に見えます。

視覚的な統一を見てください

あなたが調べなければならないもう一つの要因は、アイコンの視覚的統一と呼ばれています。これが基本的に意味するのは、線の太さ、コーナーのサイズ、使用されているカラーパレット、含まれている詳細のレベル、およびデザインの要素が、アイコンの完全なセットを通じて一貫していることです。追跡することがたくさんあるので、これについては必ずデザイナーとチャットしてください。

アイコンのデザインは楽しいですが、正しく理解するのは難しいです

アイコンのデザインを始めることができるように、たくさんの情報を紹介しました。理解して理解することはたくさんあるので、アイコンを正しくするために、優れたデザイナーと協力するようにしてください。また、アイコンがどのように使用され、誰がアイコンを表示するかを理解するために必要なすべての詳細を提供します。そしてすぐに、強力で明確で使いやすいデザインの優れたアイコンのセットができあがります。