アイコンステップバイステップガイド

この記事は、 Scott Lewisによってsmashingmagazineで公開されました。



安価で高品質のアイコンとベクター画像を見つけることは難しくありません。だからこそ、Iconfinder（この記事の著者が働いている）のようなWebサイトがあります。 デザイナーは何千ものプレミアムクラスのアイコンを自由に使用でき、何百ものセットを無料でダウンロードできます。



この記事では、6つのステップを含むベクトルアイコンのデザインに関するガイドを提供します。 アイコンデザインを成功させるための基本原則を確認した後、これらの手順を確認します。 これらの原則はよく知られており、ジョンヒックスアイコンデザインガイドやシステムアイコンデザインのためのGoogleマテリアルデザインガイドなどで詳細に説明されています。 この記事で検討する6つのステップは、ドグマではなく推奨事項としてとるべきです。 ルールに従うべき場所を感じ、それを破るほうがよい場合、それはすべての優れたデザイナーが自分で開発する必要がある重要な品質です。



犬の画像でアイコンを修正する例によって、すべてのステージが分解されます（これはコーギーです）。 アイコンは悪くありませんでしたが、私たちの高い基準に達しませんでした。 私たちの専門家は作者にいくつかの簡単なヒントを与え、最終的に画像が承認されました。 以下は修正前と修正後のコーギーの画像です。 さらに記事では、この変換がどのように行われたかを詳細に分析します。





左側の画像は元のバージョンです。 右側の画像-記事に記載されている原則に従って修正した後のアイコン



インターネットのアイコンについて話しているという事実にもかかわらず、これらの推奨事項は印刷用のアイコンにも適用されることに注意してください。 印刷に使用される標準解像度は300 dpiです。したがって、印刷物の設計者であれば、ピクセルの操作について説明するセクションを省略してください。

効果的なアイコンデザインの3つのコンポーネント

品質の高いアイコンはすべて、効果的なデザインの3つの要素であるフォーム、美的整合性、認識の統一によって統合されています。 アイコンの新しいセットの設計を開始するとき、一般（フォーム）から特定（認識）に至る3つのコンポーネントすべてを考慮する必要があります。 1つのアイコンだけを開発した場合でも、これらの3つの不可欠な属性は引き続き適用可能です。



もちろん、効果的な設計はこれらの3つの概念に限定されるものではありませんが、開始するのに理想的であり、1つの記事の枠組みで記述されています。

形

フォームは、アイコンの設計に基づいた構造です。 詳細を省略し、アイコンを構成する主要な形状を丸で囲んだ場合、正方形、円、長方形、三角形、またはより滑らかな輪郭はどうなりますか？ 円、正方形、三角形などの基本的な幾何学的形状は、アイコンデザインの視覚的にバランスのとれた堅実なベースです。 この例では、犬の頭は2つの三角形と2つの楕円で構成されています。 ここで、描画と類似性を描くことができます-描画するとき、デザイナーは大きな基本的なフォームから始めて、彼がアイデアを伝えるのに必要かつ十分なだけ正確に追加して詳細を作成します。





赤い線は、アイコンの形状を形成する基本的な幾何学的形状を示しています。

美的完全性

美的整合性とは、同じセットのアイコン間で繰り返される一連の要素を指します。 これらは、角（丸みを帯びた角または四角）、およびサイズ（2ピクセル、4ピクセルなど）にすることができます。 線の太さ; （例：2ピクセル、4ピクセルなど）; スタイル（フラット、輪郭、塗りつぶし、グリフ）; カラーパレットなど。 アイコンセットの美的整合性は、すべてのアイコンを全体として知覚することを可能にするさまざまな要素と設計手法のよく追跡されたシーケンスです。 コーギー犬の例では、そのような要素の中で、同じ丸みの半径、同じサイズと形状の目、そしてハート型の鼻に名前を付けることができます。





これらの3つのアイコンは、同じ要素とテクニックを使用しているため、審美的に全体的と呼ぶことができます

認識

認識は、アイコンの意味の派生物であり、アイコンを一意にするものです。 アイコンが目的を果たしているかどうかは、このアイコンが示すオブジェクト、アイデア、またはアクションをユーザーがどれだけよく理解しているかに依存します。 認識は、指定された主題の特性を表示するか、コーギーの鼻などの独自の要素を使用することで実現できます。 認識とは、アイコンが表すオブジェクト、アイデア、またはアクションを理解することだけではありません。 これは、アイコンセットを強調表示するプロパティです。 この意味で、認識可能性と美的完全性の概念は交差しています。 下の写真では、品種の特徴のおかげで、犬のコーギーとハスキーを認識しています。また、デザインと使用された要素の類似性により、それらは1セットのアイコンの一部であることがわかります。





各犬の個々の資質は、それらのそれぞれを認識可能にしますが、同様のデザインと使用される要素は、それらが1つのセットの一部であることを示しています。



そのため、効果的なアイコンデザインの3つの主要コンポーネントを分解しました。 次に、これら3つのコンポーネントを6段階で実装する方法を詳細に検討します。

6段階

常にグリッドから始めます。

異なるサイズのグリッドの利点は、別の議論の問題です。 32x32ピクセルのグリッドを使用します。 グリッドには、各アイコンの基本的な形状を作成するのに役立つ補助線もあります。







したがって、2ピクセル幅の境界を持つ32ピクセルのグリッドがあり、空白のままにします。 このスペースをフリーゾーンと呼び、アイコンにスペースを与える役割を果たします。 絶対に避けられない場合を除き、このゾーン内に要素を配置しないでください。



アイコンの形状は、メインの形状と方向から始まります。 境界ボックスとしてアイコンの外側の境界に沿って線を引くと、正方形、円、三角形、または長方形の形になります。



円形のアイコンはグリッドの中央にあり、原則として、フリーゾーンに入らずに4つのエッジすべてに触れます。 フリーゾーンの整合性に違反する最も一般的な原因は、次の図に示すように、設計の整合性を維持するために必要な要素を円の外側に配置する必要があることです。





円形アイコンをグリッドとメインラインに揃えます



正方形のアイコンもグリッドの中央に配置されますが、原則として、作業領域の境界には到達しません。 丸形と三角形のアイコンで均一性を維持するために、ほとんどの長方形と正方形のアイコンは中央のメインライン（下の画像のオレンジ色の領域）に合わせて配置されます。 アイコンを配置するメインラインの決定は、その外観に基づいて行われ、プラクティスは、個々のケースで選択するサイズの感覚を開発します。 上記の3つの同心の正方形は、図に青、オレンジ、薄緑で示されています。





グリッドを基準とした円形および正方形のアイコンの配置とサイズの選択



32x32ピクセルグリッド内の次の図では、アイコンのデザインに応じて、水平または垂直に向けられたサイズが20x28ピクセルの長方形があります。





垂直および水平方向のアイコンの整列とサイズ設定



斜め方向のアイコンは、作業領域に内接する円に配置されます。 のこぎりの極端な点は、円周の周りの点にほぼ当たることに注意してください。 ここではこれ以上の精度は必要ありません。





対角線方向のアイコンの整列とサイズ設定



グリッド線と補助線を基準にして、説明されているアイコンの位置を厳密に観察する必要はないことに注意してください。 グリッドは単なる補助ツールです。 真に独創的なことをするか、ルール内にとどまるかを選択する場合、ルールは無視できます。 ただし、これは意図的な手順である必要があります。 ペンネーム・ダッチ・アイコンで知られるヘモ・デ・ジョンは次のように述べています。



「アイコンの個性は、アイコンの統一されたセットを維持する必要性よりも重要です。」

単純な幾何学的形状から始めます。

円、三角形、長方形を使用して、主な形状の大まかな輪郭でアイコンの設計を開始します。 滑らかで自然な形状のアイコンを作成する場合でも、Adobe Illustratorの形状ツールから始めます。 アイコンの設計に関しては、特に画面上に小さなサイズのアイコンを描画する場合、手動で描画すると、必然的に端に小さな不均衡が生じ、アイコンの外観が大きく失われます。 単純な幾何学的図形から始める場合、これは明確で同一のエッジ（特に曲率の場所）を取得するのに役立ち、また、さまざまな要素のサイズの選択と、グリッドおよび基本図形に対する向きを簡素化します。





Corgiアイコンの基本は、2つの三角形と2つの楕円の単純な幾何学図形です。

すべてが数字で固定されています：エッジ、ライン、コーナー、カーブ

エッジ、フィレット、コーナーを作成するときは、数学的な正確さを追求する必要がありますが、デザインが退屈で不必要に「機械的」に見えるほどではありません。 言い換えれば、目に頼らないでください。 これらの要素の不均一な実行はアイコンの品質に悪影響を及ぼすため、正確な寸法を維持してください。

角度

ほとんどの場合、45°の角度、またはこの値の倍数を使用することをお勧めします。 角度の特定の値での不規則性の平滑化は均一であり（アクティブなピクセルは互いに十分に隣接しています）、結果は明確で簡潔です。 さらに、45度は理想的な対角線であり、目に優しいです。 このような使い慣れた構成を一貫して使用すると、個々のアイコンとセット全体の全体像を把握できます。 設計でこの規則の違反が必要な場合は、2で割る（22.5°、11.25°など）か、15°の倍数の角度を使用することをお勧めします。 各状況は個別であり、同じ個別のアプローチが必要です。 45°の倍数である角度を使用する利点は、これらの値で、移行中の不規則性の最適な平滑化が得られることです。





45°の角度で輪郭を滑らかにするクローズアップ

曲線

アイコンの品質を大幅に低下させることができる最も印象的な要素の1つは、プロとアマチュアの違いを明確に示していますが、曲線です。 人間の目は形のわずかな食い違いをはっきりと捉えますが、私たちの調整では、手で描くときに同じ精度を達成することはできません。 したがって、曲線を作成するときは、自分の手に頼るのではなく、プログラムで定規とフォームツールを使用することをお勧めします。 手書き入力が済まない場合は、制約修飾子キー（たとえば、Adobe IllustratorのShift）を使用するか、さらに良いことには、Astute GraphicsのVectorScribeとInkScribeを使用します。これらのツールを使用すると、曲線を作成するときに最高の結果が得られます。





手描きの線は質が悪い



Corgiのオリジナルバージョンでは、手で作られた線の粗さがはっきりと見えます。 これはすぐに設計全体に悪影響を及ぼします。





これらの完璧な曲線は、ベジェ曲線ツールを使用してAdobe Illustratorで作成されます。

角度

角を丸くするための最も一般的なサイズは2ピクセルです。 アイコンのサイズが32x32ピクセルの場合、この半径の値は見やすい丸みを与え、角を「柔らかく」しません（「ぼやけた」外観になります）。 カーブの半径のサイズは、デザインに裏切りたいキャラクターによって異なります。 丸い角を使用するかどうかの決定は、セット全体の審美的な魅力の分析に基づいています。





角の細かい角



Kogriに戻ります。幾何学的に複雑な形状から始め、2ピクセルの曲率半径の値を使用して、形状ツールを使用して角を丸くすることに切り替えました。 外観が良くなりました。





コーギーリメイクの第一段階



新しいデザインの基本的な考え方はすでに見えています。丸い角と滑らかな曲線です。

ピクセル最適化

小さなアイコンを使用する場合、完璧なピクセル配置が特に重要です。 小さなアイコンのエッジを滑らかにすると、ぼやけが生じる可能性があります。 グリッドと整列していない線の間の場所は滑らかになり、ぼやけて見えます。 グリッドにアイコンを配置すると、直線上に明確に定義されたエッジが得られ、コーナーとカーブにシャープさが追加されます。



すでに述べたように、ピクセルは相互に厳密に対角線上に配置されているため、45°の角度が理想的です（もちろん、直線の後）。 角度と曲線についても同じことが言えます。それらが数学的に正確であればあるほど、スムージングの際に良くなります。 ここで注目すべき点は、ピクセルの最適化では、大きなサイズやRetinaなどの高解像度ディスプレイでは明確な結果が得られないことです。

線の太さ

線の太さについて言えば、理想値は2ピクセルですが、3ピクセルの方が良い場合もあります。 ここでの目標は、必要な一貫性と多様性を提供することですが、同時に、アイコンセットの整合性を侵害しないように気を取られないようにすることです。 線の太さが3ピクセルを超えると、セットの整合性が失われます。 2ピクセルと4ピクセルの太さの線を使用する利点は、簡単にスケーラブルで、ある線から別の線に移動できることです。 ほとんどの場合、特にグリフやフラットスタイルのアイコンでは、非常に細い線の使用を避ける必要があります。 一般に、輪郭スタイルでアイコンを作成することが意図されていない場合は、線ではなく、光と影に頼って形状を示す必要があります。





このiPhoneのアイコンは、線の太さの加重使用の例を示しています。

一貫して異なる要素を使用し、同じ一連のアイコン内でアクセントをシフトしない

Hemmo de Jong（Dutch Icon）はIcon Salon 2015でアイコンデザインのこの側面について語りました。Hemmoと彼のパートナーは2年前からデンマーク政府のバッジを開発しており、その商標はノッチマークの使用です。 スロットはすべてのアイコンに表示されるわけではありませんが、ほとんどのアイコンに表示されます。 シリーズ全体に適用される同様の強調は、アイコンを結び付け、他の何千もの人々の間での認識に貢献します。





共通の設計要素を使用する



犬の例では、ハートの形をした鼻の形の1つの文体要素を使用しました。 この要素は、すべてのアイコンを互いに接続するだけでなく、それらを特別なものにし、これらのかわいい生き物にさらなる同情を引き起こします。





犬のデザインアイコンに使用される一般的な要素。



多くの場合、シリーズ内のアイコンの外観が互いに非常に異なっていても、そのような要素は美的整合性を維持できます。 これは、下の画像ではっきりとわかります。同じグリフスタイルの犬のアイコンを作成しましたが、全体的で相互に関連しているように見えます。





同じ要素を異なるスタイルで使用する

部品の適度な使用と装飾

アイコンは、オブジェクト、アイデア、またはアクションの意味を明確に伝える必要があります。 細部が多すぎると、特に小さい場合にアイコンの情報が少なくなります。 個々のアイコンの小さなパーツの数も、シリーズ全体の美的整合性と認識に大きく影響します。 アイコンのパーツと要素の数を決定するための暗黙のルールは、意味を伝えるために必要な最小値を使用することです。





最小限の詳細で効果的に意味を伝えます



上の図のバージョンでは、すでに最終バージョンに近づいています。 耳の周りの黒い線はウールに変わり、コーギーの顔の円の線は消えましたが、白い斑点の上に2ピクセルの線の形でそれらのヒントがありました。 鼻がなめらかであるなど、古い要素がまだ残っていることに間違いなく気づいたでしょう。 次のステップでこれについて話しましょう。

アイコンをユニークにする

高品質のアイコンセットを作成する才能のあるデザイナーの数（およびそれらの多くは無料です）は常に成長しているようです。 残念ながら、それらの多くは、人気のデザイナーによって形成された既存のトレンドの信頼性に頼りすぎています。 創造的なアプローチをとるプロフェッショナルとして、新しいアイデアを求めて、建築、印刷、工業デザイン、自然などのコンピューターデザイン以外のソースに目を向ける必要があります。 多くのアイコンセットは互いに似ているため、デザインを一意にすることが非常に重要です。





コーギーのユニークさは彼の鼻の形にあります



コーギーに特別な魅力、斬新さ、軽さを与えた最後のタッチとして、私たちはハート型の鼻を使いました。



説明された手順は、必須要件ではなく推奨事項と見なされる必要があります。 アイコンのデザインを作成する真の方法はありません。 この記事では、著者は彼らのアプローチとテクニックを説明しましたが、他のデザイナーは間違いなく代替手段を持っている可能性があります。 スキルを向上させる最善の方法は、できるだけ多くの参考資料を知り、常にスケッチを作成し（どこに行ってもノートブックを持ち歩く）、練習、練習、練習を繰り返すことです。





左側の画像は元のバージョンです。 右側の画像-記事に記載されている原則に従って修正した後のアイコン

おわりに

高品質のアイコンを作成するための基本原則を説明しました。 これらの原則はスキルに他なりません。つまり、実践すれば誰もがそれらをマスターできます。 一般（フォーム）から始めて、特定（認識）に進むのが最善であることを忘れないでください。 同じアイコン内でも、シリーズ全体でも、整合性と均一性を観察する必要があることを忘れないでください。 技術的基礎を習得した後、すべてのエネルギーと能力を創造的なアプローチの開発と独自のソリューションの検索に向けることができます。