Collection of line art sketches

Illustrator FEATURES

アイディア溢れる質の高いアイコンを作りましょう

何か重要なことを伝えるのであれば、長い文で説明するよりも、アイコンで示したほうが一目瞭然ですぐに相手に伝わります。

 

Adobe Illustratorなら、ロゴデザインはもちろん、Webサイト、アプリ、グラフィックといった様々な用途に向けたアイコンを作れます。

素敵なアイコンセットをデザインするには

Adobe Illustratorの豊富な機能を活用すれば、素敵なアイコンをデザインできます。同時に複数のアイコンを作って、オリジナルのアイコンセットを作っても良いでしょう。

Artists sketch with analog and digital tools

アイコンのアイディアスケッチから始める

まずはラフなアイデアを紙にスケッチしてから、スキャンしてAdobe Illustratorに「配置」で取り込みます。

また、スマートフォンやiPadでスケッチしてから取り込むのもよいでしょう。

Vector sketch collection

アイコンのスケッチをもとにベクターを描く

Adobe Illustratorの「楕円形」ツールや「長方形」ツールを使って、基本的な形からアイコンを作っていきます。

スマートガイドをオンにすると、余白や位置などの目安になるので、より正確な描写を効率よくおこなう助けになります。

Material design icons

アイコンのデザインを調整する

アイコンのセットには統一感が大切です。角の丸みの数値は「コーナーウィジェット」を使って統一していきましょう。ほかにもサイズを「変形」パネル、線の幅を「線」パネルで同じ数値に調整すると、統一感のあるアイコンセットになります。

Colored icons on a black background

色や奥行き感を追加

「塗り」を設定してアイコンに色をつけるとさらにバラエティーに富んだ仕上がりになります。グラデーションや透明、描画モードを調整して奥行き感を演出すれば、オリジナリティーのある自分だけのアイコンが出来上がります。

アイデアスケッチを元にアイコンをデザインする

アイコンが完成したら「配置」や「書き出し」で活用しましょう。


1. 手描きのラフを取り込む

スケッチブックやスマートフォンで描いたアイデアスケッチを取り込んで、最初のレイヤーに「配置」します。


2. デザインを作成する

新しいレイヤーを追加して、「楕円形」「長方形」ツールや「ペン」ツールを使ってスケッチをなぞっていきます。


3. 細部を統一する

角の大きさ、オブジェクトの大きさや余白の関係など、アイコンとしてのルールづけが統一できているかを確認しながら調整していきます。


4. 色や線をつける

色や線をつけることで、さまざまな印象が生まれます。グラデーションや透明効果なども効果的な演出のひとつになります。


5. Webや印刷向けにデータを用意する

印刷で使用する場合は、別の印刷向けデザインのドキュメントに配置してアイコンを活用します。Webの場合は「アセットの書き出し」などを使ってデータをSVGやPNGで書き出します。


Adobe Illustrator

Adobe Illustratorで思い通りのデザインを

次のチュートリアルを参考にして、アイコンのデザインを始めましょう

プロフェッショナルなアイコンを作るには、まず基本的なシェイプから始めましょう。プロが伝えるヒントとチュートリアルには、役立つ情報が豊富にあります。

Camera icon on a social media profile and a digital resume

簡単なアイコンからスタート

SNSのプロフィール画像や、デジタル履歴書のポートフォリオにリンクするボタンとして使用するカメラアイコンを作成します。

Set of cute digital icons

自分だけのカスタムアイコンのセットを作る

アイコンデザインのプロセスを理解して、デジタルプロジェクトで使用する一貫したシンプルなアイコンセットを作成します。

Icons being used in a presentation

プレゼンテーションに新しいアイコンを加える

自分独特のタッチを加えてアイコンをデザインしましょう。そして、それをプレゼンテーションのスライドに加え、さらに強いインパクトで自分の意図を伝えましょう。

Example of an icon at different sizes and colors

さまざまなフォーマットへの書き出し

さまざまなサイズやフォーマットのアプリアイコンなどを、1ステップで書き出す方法について説明します。

無料テンプレートを活用

Illustratorのためのテンプレートを使って、ユニークなパーソナライズしたアイコンをデザインしましょう。

 Icon design template for Adobe Illustrator featuring a compass drawing tool
 Collage of various icon design templates for Adobe Illustrator