{{illustrator-features}}
アイディア溢れる質の高いアイコンを作りましょう
記憶に残るおしゃれなアイコンで、グラフィックデザインを引き立てましょう。スケッチから適用の段階まで、人にアピールするベクター画像を、アイコン、web、ロゴのデザイン用にどのように作成するか探ってみましょう。
![Collection of line art sketches](./media_129913be9aa1d42916c447f560455238f8a8b123b.jpeg?width=750&format=jpeg&optimize=medium)
アイコンデザインを輝かせるために必要なこと
Web用のアイコンをどのように作成し、微調整していくかを学びましょう。Adobe Illustratorの豊富な機能を活用すれば、アイコンデザイナーとしてのスキルを簡単にレベルアップできます。
![Artists sketch with analog and digital tools](./media_12f361b745498d7d6cfecda3eb7136c7c88f58119.jpeg?width=750&format=jpeg&optimize=medium)
スケッチから始める
ラフなアイデアを紙にスケッチしてから、Adobe Illustratorにスキャンします。またはスマートフォンかiPadでスケッチして、それを取り込みましょう。
ベクターを作成する
楕円ツールや長方形ツールで、汎用性の高いベクターシェイプを作成します。スマートガイドをオンにしてシェイプをアレンジしたり、ペンツールを使って、フリーハンドで描いた絵をスムーズにしましょう。
![Vector sketch collection](./media_1c3cc4e60704f699f0d65d7141faa24d3cecbed03.jpeg?width=750&format=jpeg&optimize=medium)
![Material design icons](./media_1ffb40705db06bcced94524b203ee71a0a9bf1f31.jpeg?width=750&format=jpeg&optimize=medium)
デザインを微調整する
ベクターシェイプを重ねて組み合わせるだけで、フラットなアイコンを簡単に作成できます。Shaperツールで全体の形を仕上げ、コーナーウィジェットをドラッグしてシャープなエッジを丸めます。
色と奥行きを加える
自分だけのアイコンスタイルを作りましょう。「塗りつぶし」を使って色を加え、ストロークを使って視覚的なバランスを調整し、不透明度を変えて最高のアイコンに仕上げましょう。
![Colored icons on a black background](./media_1cd8b42f4c1b4aadae2d4c5e9b7afb5fd19ad6817.jpeg?width=750&format=jpeg&optimize=medium)
「色相/彩度」の調整レイヤーを使う方法
好きなアイコンを描き、それをデバイスに合わせて書き出しましょう。
- 手描きのラフを取り込む:
紙ナプキンやモバイルデバイスにスケッチした絵をスキャン、または取り込んで、最初のレイヤーにしてください。 - 作成する:
新規のレイヤーにベクターシェイプを加えるか、またはスマートガイドのペンツールを使って、スケッチの上をトレースします。 - 微調整する:
コーナーウィジェットをドラッグして、シャープなエッジを丸めます。 - 最適化する:
ファイルを終了したら、ファイル/書き出し/スクリーン用に書き出しを選択します。 - 書き出す:
プロジェクトに最適な画面設定を選択して、「書き出し」をクリックします。
チュートリアルを使ってアイコンのデザインを始める
プロフェッショナルなアイコンを作るには、まず基本的なシェイプから始めましょう。プロが伝えるヒントとチュートリアルには、役立つ情報が豊富にあります。
![Camera icon on a social media profile and a digital resume](./media_113d7cf1869cd3daca979809a7ba3150039e24bb4.jpeg?width=750&format=jpeg&optimize=medium)
![Set of cute digital icons](./media_1bdfaf97226f91e2aae0b4cfc285febe30290c213.jpeg?width=750&format=jpeg&optimize=medium)
![Icons being used in a presentation](./media_17f1102fc1853ef35e6ec7d06902847c036a451a3.jpeg?width=750&format=jpeg&optimize=medium)
プレゼンテーションに新しいアイコンを加える
独自のタッチを加えてアイコンをデザインしましょう。そして、それをプレゼンテーションのスライドに加え、さらに強いインパクトで自分の意図を伝えましょう。
![Example of an icon at different sizes and colors](./media_1b63e59c2ca89269540747a99e3a4c657da30ebc9.jpeg?width=750&format=jpeg&optimize=medium)
無料のアイコンテンプレートをチェック
Illustratorのためのテンプレートを使って、ユニークなパーソナライズしたアイコンをデザインしましょう。
![Icon design template for Adobe Illustrator featuring a compass drawing tool](./media_160ababdcce207c3be21d8ed4bb78fa6cfd37f6a7.png?width=750&format=png&optimize=medium)
![Collage of various icon design templates for Adobe Illustrator](./media_1e81da15d5de896775da463142c5a2b50889c3736.png?width=750&format=png&optimize=medium)