目次
ECサイトに使えそうなeコマースアイコンをつくろう
今回はECサイトで使えそうなeコマースアイコンをつくろうと思います。視認性に優れたシンプルかつ鮮明な配色を意識しながら制作していきましょう。
※本チュートリアルはCC2015を使用しています。
「配送」を意味するトラックアイコンをつくる
まずはアイコンデザインを決めるため、ラフを描いていきましょう。【ブラシツール】や【鉛筆ツール】など、フリーハンドで描けるツールであればなんでもいいのですが、個人的には線などが自然な【ブラシツール】がオススメです。納得いくまで何度もラフを描いてデザインを決定していきましょう。
基本的には難しい曲線もないので、【ペンツール】や【長方形ツール】、【楕円形ツール】でカンタンに描けると思います。アイコンを描く時はオブジェクトの前後関係もあるので、塗りは「白」線は「黒」などで制作すると後の着色作業がラクになります。ちなみにオブジェクトの前後移動はメニュー【オブジェクト】→【重ね順】で前後移動可能で、ショートカットは以下の通りになります。
- 【Command/Ctrl】+【SHIFT】+]（最前面へ）
- 【Command/Ctrl】+]（前面へ）
- 【Command/Ctrl】+[（背面へ）
- 【Command/Ctrl】+【SHIFT】+[（最背面へ）
もちろんレイヤーで前後関係を調整してもいいのですが、シンプルなオブジェクトはレイヤーの管理の観点から1つのレイヤーで十分かと思います。
あとは制作したパーツを組み合わせてから、着色して完成です。着色も色を選択するのみですので、カンタンかと思います。
「配達」を意味する人物アイコンをつくる
これも先程と同様で、ラフを描いたあと、デザインを決定してトレースしていきます。
「配達」アイコンはペンツールを使用して顔の輪郭は【楕円形ツール】耳や髪の毛、帽子は【ペンツール】で描いていきます。体の部分は片方を描いて、【リフレクトツール】で反転させると作業がスムーズです。こういった左右対称のイラストは【リフレクトツール】を積極的に使用していきましょう。僕の場合はアクションに登録して1クリックで反転できるようにしています。
制作したパーツを組み合わせてから、着色して完成です。ダンボール部分と制服の色が同系色にならないよう、ハッキリとした配色にします。
「メール」を意味するメールアイコンをつくる
まぁ、これは説明不要かもしれませんが、一応ラフを描いてからトレースしていきます。
【長方形ツール】で四角を描いて、コナーウィジェット（四角の二重丸みたいなマーク）を内側にドラッグするとカンタンに角丸になります。さらに、メールの折り返し部分を
【ペンツール】で描いた後、パーツを組み合わせて完成です。とてもカンタンですね。
「梱包」を意味するダンボールアイコンをつくる
こちらもラフを描いてデザインを決めます。
こちらも先程と同様に、【リフレクトツール】を積極的に使用していきます。まず、三角形を描いて反転、その後四角形を反転、あとはラベル部分と箱の蓋を描けば感染ですね。
制作したパーツを組み合わせてから、着色。配色はダンボールの内側は暗いので、外側のよりトーンを落として、蓋の部分の影を描いたら完成です。
さらにアイコン追加してECサイトアイコンセット完成！
その他にもECサイトに必要そうなアイコンを追加で描いていき、複数アイコンのセットができあがりました。アイコンは形状が様々ですので、全体的に見たときにサイズ感が統一されている必要があるので、最後に必ずチェックしましょう。
今回はイラストレーターでアイコンの作成をしてみましたが、いかがでしたでしょうか？近年はアイコンフォントなどもありますが、サイトデザインに合わせたアイコンというのはまだまだ必要とされそうなので、ぜひ参考にしてみてください。
サンプルファイルダウンロード
※サンプルファイルは制作の参考としてのご利用のみでお願いいたします。
