カスタムアイコンを作成するとしたら、平均してどのくらいの時間を費やすでしょう。
数分？10分？それとももっと長いでしょうか？もし10分以内に10個のカスタムアイコンを作成できるとしたらどうでしょう。
図解（英: Iconography）は、ブランドのビジュアル言語に追加されるコミュニケーションツールのひとつなので、アイコンをカスタマイズすることは、シンプルで一般的なアイコンセットよりも意味があり、魅力的と言えるでしょう。
今回は、10分もかからずに基本的なアイコン10個を作成できる、とてもシンプルで簡単な作り方ガイドをご紹介します。
カスタムアイコンを作成することができれば、プロジェクトに応じた複雑な図形の作成を行うことができ、デザイナーとして他の人と差別化できる競争力を発揮してくれるでしょう。
今回紹介するカスタムアイコン作成ガイドは、もともと Allan Knutson が投稿した数秒で位置情報サービスアイコンを作成するGIF動画で、いかに簡単にカスタムアイコンを作成できるのか知ったことにはじまります。
実際にアイコンは四角形や三角形、円形などの基本図形を組み合わせることで作成する幾何学的な形状となっています。ロゴやアイコンデザインを作成する鉄板ルールはシンプルにすることです。
この記事における目標は、簡単な図形のみを利用して、10個のアイコンをそれぞれ10秒以内に作成することです。
目玉アイコン
上図のように、それぞれ色の異なる大小4つの円を中央揃えに整列させましょう。もっとも大きな円に向かって、左から右に円を重ねていきます。最後に、一番内側にあるもっとも小さな円をずらすことで、眼球の虹彩エフェクトを作成します。
ポイント: 白い円を使う代わりに、それぞれの下の円から2つの円をパスファインダーを使用して削除しましょう。こうすることで、背景をバックによりくっきりとしたアイコンを作成できます。
矢印アイコン
正方形に四ヶ所のポイントを追加し、ダイレクト選択ツールで移動させるだけで完成するカスタムアイコンです。ポイント: 代わりとして、単純に矢印のような細いラインを描くことでも表現できます。
バッテリーアイコン
アウトライン付きの正方形ひとつと塗りつぶしたバージョン２つを用意しましょう。アウトライン付きの正方形の比率を変えながら、塗りつぶした正方形の１つのみを含むようにし、もうひとつの正方形はバッテリーの先端として利用しましょう。
ポイント: 視覚的なバランスを保つために、アウトライン線の太さやパディングを調整すると良いでしょう。
リスト式アイコン
まずはシンプルな正方形を用意しましょう。それを複製して右側に配置し、長方形になるように大きさを調整しましょう。どちらも選択したら、間隔を維持した状態で２回複製したら完成です。
ポイント: 四角形を円に置き換えることで、よりソフトで柔らかい印象に仕上げることもできます。
クラウドアイコン
大きさが異なる3つのサイズの円を描くことで作成します。小さな２つの円をベースとして、その間にもっとも大きな円を高い位置に配置します。最後に小さな円の１つを変形させれば、雲のベース部分の完成です。
ポイント: 異なる円のサイズを利用することで、よりオーガニックな見た目のクラウド型アイコンを作成することもできます。
早送りアイコン
まずは縦長の長方形を描きましょう。次に右辺の中央にポイントを追加し、上下のポイントを削除することで三角形が出来あがります。あとは複製して、右側に配置したら完成です。
ポイント: より素早く作成するために、代わりに三角形から作りはじめてみましょう。
再生/停止アイコン
細長い３つの長方形を描くところからはじめましょう。もっとも幅の広い長方形の右辺の中央にポイントを追加し、三角形にしたら完成です。
ポイント: 別の方法として、単純に三角形をまず描き、高さを合わせた２つの長方形を作成しても良いでしょう。
現在地: 矢印アイコン
この作り方は、Morgan のGIF動画をリミックスしたバージョンとなります。まずシンプルな正方形を描き、左下のポイントを右上のポイントに向かって斜め方向にドラッグし、反対の点を通過するまで移動させれば完成です。
ポイント: Illustrator では、Shiftキーを押しながらポイントをドラッグすることで、斜めの角度を保ちながら引き伸ばすことができます。
現在地: ピン型アイコン
まず大小異なる２つの円を描き、大きな円に重ねるように小さな円を配置し、パスファインダー機能を利用して切り抜きましょう。一番下にあるポイントを下方向にまっすぐドラッグし、ペンツール（P）に切り替え Shift キーを押しながらポイントクリックし、変更した角度をよりシャープにしたら完成です。
ポイント: ポイントが選択されている間に、「変形」オプションパネルの中にある「コーナー半径」の値を調整することで、丸みのあるコーナー部分をよりソフトな印象に仕上げることもできます。
サウンドアイコン
まず長方形を描き、上下の辺の中央にポイントを追加しましょう。あとは右辺を垂直方向に引き伸ばしたら完成です。
ポイント: 大きさの同じ正方形を２つ並べ、右側の正方形の右辺を垂直方向に引き伸ばしても、同様の仕上がりを実現できます。
波ウェーブ型アイコン
直線を描き、長さに対して等しい距離でポイントを5つ追加します。変更ポイントをドラッグしギザギザにしたら、すべてのコーナー部分を丸め、滑らかになるようにしたら完成です。
ポイント: 直線の端部分を丸くすることで、より滑らかでソフトな印象に仕上げることもできます。
「百聞は一見にしかず（An Image is worth a thousand words.）」ということわざがあるように、長い文章や言葉の代わりに、視覚的なスペースやユーザビリティを実現するデザイン性の高いアイコン作成にも当てはまるでしょう。またシンプルで効果的なアイコンの作り方を知ることで、応用を利かすこともできるでしょう。基本的な図形シェイプを使うだけで、手軽にそして素早くアイコンを作成できるか知ることができました。
まとめとして、アイコン作成における１０個のポイントを以下にまとめています。
- 象徴となるシンボルとして、意味をもったデザインを作成しよう。
- シンプルさを保ち、読みやすさを損なうスタイルは避けましょう。
- 作成する前にデザインのコンセプトをじっくり考え、意図的にしよう。
- 異なるサイズでもどう見えるのか確認しておきましょう。
- アイコンデザインの一貫性を念頭において作成しましょう。
- ベクターで作成するようにしましょう。
- 本当に必要なときだけ色を追加するようにし、慎重に行いましょう。
- 幾何学の基本を知ることができます。
- 設計されたアイコンが全体のデザインとマッチしているか確認しましょう。「アフォーダンス」な考え方が重要です。
- アイコンデザインは、言語に関係なく誰にでも分かることが大切。
- ボーナス: アルファベットは26個から成るアイコンセット。
サムネイル@ : Big Pack of Flat Line Illustrations by Bloomicon – CreativeMarket
