Adobe Illustratorのシェイプツールを使用してベクターシェイプを巧みに組み合わせ、デジタルプロジェクトで使用可能な印象的なアイコンをデザインしましょう。
このサンプルプロジェクトでは、ソーシャルメディアのプロフィール画像に使用するカメラのアイコンをデザインします。電子履歴書のポートフォリオにリンクするボタンとしても使用します。
プロジェクトの設定
Illustratorを起動し、「新規作成」をクリックするか、Ctrl+Nキー（Windows）またはCommand+Nキー（macOS）を押します。「Web」タブを選択し、右側にサイズを入力します。ここでは、「幅」と「高さ」を400 pxに設定しました。ヒント：アイコンをデザインする際は、正方形で作成すると便利です。
「作成」をクリックします。
基本的なシェイプの描画
まず、カメラの本体を描きます。
ツールパネルで長方形ツールを選択します。アートボード上でクリック＆ドラッグし、長方形を作成します。
図のように、長方形の上に重なるように、2つ目の小さい長方形を描きます。
スマートガイドを参考にすると、2つの長方形の中央を揃えることができます。大きい長方形と小さい長方形の中心を結ぶマゼンタ色のガイドが縦に表示されるまで、小さい長方形の中心点ウィジェット（中心のドット）をドラッグします。
次に、フラッシュを描きます。
長方形ツールを長押しすると他のツールが表示されるので、その中から楕円形ツールを選択します。ドラッグして、内側に十字線ガイドが表示されたところが正円です。ちょうどよい大きさのところでマウスボタンを離します。
ヒント：円の縦横比を保持したままサイズを変更するには、Shiftキーを押しながらコーナーハンドルをドラッグします。
必要に応じて中心点ウィジェットをドラッグして、円の位置を調整します。
次に、レンズのシェイプを作成します。
楕円形ツールを選択して、マウスポインターを大きい長方形の中央に置くと、画面上に「中心 」と表示されます。Alt（Windows）またはOption（macOS）キーを押しながらドラッグして、中央から円を作成します。十字線ガイドが表示され、ちょうどよい大きさになったところでマウスボタンを離します。
画面の端で小さい円を作成します。小さい円の中心点をクリックして、大きい円の中にドラッグし、「交差」または「中心」と表示されたら、マウスボタンを離します。
シェイプを結合
長方形のシェイプどうしを結合します。
Vキーを押すと、選択ツールに切り替わります。大きい長方形をクリックし、Shiftキーを押しながら小さい長方形をクリックして、両方とも選択します。シェイプ形成ツールを選択して、図のように2つの長方形をまたぐようにドラッグします。
カラーを追加
シェイプに塗りのカラーと様々な線の属性を適用します。
Vキーを押して選択ツールに切り替えます。カメラの本体を選択して、プロパティパネルのアピアランスにある、「塗り」のカラースウォッチをクリックします。右上の「スウォッチ」のオプションを選択し、スウォッチパネル内のカラーをクリックします。次に、「線」のカラースウォッチをクリックして「なし」を選択し、線を消します。
フラッシュの円も同様に、塗りを白、線をなしにします。
レンズでは、まず外側の円を選択し、Shiftキーを押しながら内側の円も選択します。塗りはなし、線は白に設定します。線幅を5 ptにします。
最後の仕上げ
シェイプの角を丸くすると、洗練された印象になります。
カメラの本体を選択します。Aキーを押してダイレクト選択ツールに切り替え、ライブコーナーウィジェットをドラッグして、すべての角を一括して丸めます。
web用の形式で保存
アートボードに合わせてアイコンのサイズを変更するには、「選択／すべてを選択」を選択し、アイコン全体を選択します。Vキーを押して選択ツールに切り替えます。Alt+Shiftキー（Windows）またはOption+Shiftキー（macOS）を押しながらコーナーハンドルをドラッグし、円の縦横比を保持したまま中心点を基準にしてサイズを変更します。最後にアイコンの中心点をドラッグして位置を変更します。
「ファイル／保存」を選択します。名前を指定し、Adobe Illustrator（ai）形式で保存します。このファイルはIllustratorでいつでも編集できます。
オンラインに投稿できる最終版を保存するには、「ファイル／書き出し／スクリーン用に書き出し」を選択します。「書き出し先」を指定し、「形式」に「PNG」を選択します。
ヒント：書き出しをする前にアートボードのサイズを変更できます。「拡大・縮小」のドロップダウンメニューで「幅」または「高さ」を選択し、新たにサイズを入力します。
歯車アイコンをクリックし、「アンチエイリアス」のドロップダウンメニューで「アートに最適（スーパーサンプリング）」を選択します。「設定を保存」をクリックしてから、「アートボードを書き出し」をクリックします。
お楽しみいただけましたか。Web用にアートワークを保存する方法についてさらに詳しくは、Web・アプリデザイン用アセットの書き出しをご覧ください。
