これぞプロのデザインテクニック！簡単なのにすごい、アイコンを作るテクニックのまとめ

オリジナルのアイコンを作るシンプルで簡単なデザインテクニックを紹介します。
円や矩形などの基本的な形を組み合わせたり、変形させたりして、さまざまなアイコンを作成します。

作業に慣れてしまえば、どれも1分もかからずにアイコンを作成できます。

The Super Simple Guide to Iconography

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

• 目のアイコンの作り方
• 矢印のアイコンの作り方
• バッテリーのアイコンの作り方
• 箇条書きリストのアイコンの作り方
• クラウドのアイコンの作り方
• 次に進むのアイコンの作り方
• ファンネルのアイコンの作り方
• プレイ・ポーズのアイコンの作り方
• 位置矢印のアイコンの作り方
• 位置ピンのアイコンの作り方
• サウンドのアイコンの作り方
• ウェーブのアイコンの作り方
• Toptalのアイコンの作り方

アイコンは、Illustratorで作成されています。
しかし、SketchやFigmaなど、他のツールで作成しても問題ありません。

目のアイコンの作り方

1. 小さい円から大きい円まで、カラーを変えた4つの円を用意します。
2. 各円の中心を一列に並べ、最も大きい円に順番に重ねます。
3. 最小の円をエッジの端に移動して、瞳の虹彩に照明効果を与えます。
4. 最後に、最大の円の左右を広げ、目の形を作成します。

Tip

ホワイトの円を使う代わりに、パスファインダーを使用でそれぞれの下の円から引き算で作成することもできます。そうすることで、背景でよりクリーンな結果を与えます。

矢印のアイコンの作り方

1. 正方形を用意します。
2. 矢印の形は、引き算するためのポイントをどこに与えるかで決まります。

Tip

他の選択肢として、単に矢印のような細いラインを描くこともできます。

バッテリーのアイコンの作り方

1. ストロークの正方形を1つと塗りつぶした正方形を2つを用意します。
2. ストロークの正方形を変形して、塗りつぶした正方形を1つ囲み、バッテリーの形を作成します。
3. もう一つの塗りつぶした正方形は縮めて、バッテリーの先端にします。

Tip

ストロークの太さと空白スペースで、視覚的なバランスを保ちます。

箇条書きリストのアイコンの作り方

1. シンプルな正方形を用意します。
2. 正方形を右側に複製し、長方形を作成します。
3. 正方形と長方形を選択し、正方形分のスペースを維持しながら2回複製します。

Tip

正方形を円にすると、よりソフトな見た目の箇条書きリストを作成します。

クラウドのアイコンの作り方

1. 最初に、3つの異なる大きさの円を描きます。
2. 配置は、両端の2つの小さな円は底で揃え、中央の大きな円はそれらよりも高い位置に配置します。
3. 小さな円のうちの1つを変形させて、雲の底を作成します。

Tip

さまざまな円のサイズを使用することで、より有機的に見えるクラウドを作成できます。

次に進むのアイコンの作り方

1. 矩形を描きます。
2. 右端の中心にポイントを加え、右側の上端と下端のポイントを削除します。
3. これで三角形が完成したので、右に複製してアイコンを完成させます。

Tip

さらに素早く作業するためには、矩形ではなく三角形で始めるだけです。

ファンネルのアイコンの作り方

1. 縦長の矩形を用意します。
2. 左端と右端の中心にポイントを加えます。
3. あとは上端を水平に伸ばすだけで、完了です。

Tip

2つの矩形を端から端まで配置し、上端を水平に伸ばします。

プレイ・ポーズのアイコンの作り方

1. 3つの縦長の矩形を用意します。
2. 左端の最も広い矩形を三角形に変形します。

Tip

他の選択肢として、1つの三角形を描き、続いて2つの平行な四角形を描画します。

位置矢印のアイコンの作り方

1. 正方形を描きます。
2. 左下のポイントを右斜め上に伸ばし、正方形を通過するまで右上に移動します。

Tip

Illustratorでは、shiftキーを押しながらポイントをドラッグすると、対角線の角度を維持できます。

位置ピンのアイコンの作り方

1. パスファインダーパネルを使用して、小さな円を大きな円に引き算で重ねます。
2. 大きな円の下のポイントを伸ばします。
3. 形成された角度をシャープにするには「ペンツール（P）」に切り替え、「shift」キーを押しながらポイントをクリックします。

Tip

角を丸くするには、ポイントが選択されている間に、「変形」オプションパネルの「コーナー半径」の値を調整します。

サウンドのアイコンの作り方

1. 作り方はファンネルと同じで、90度回転させるだけです。

Tip

ファンネルのアイコンをコピーして、時計回りに回転させると簡単です。

ウェーブのアイコンの作り方

1. 直線を描きます。
2. 直線上に等間隔でポイントを加えます。
3. ポイントをドラッグし、すべてのコーナーを丸くして、滑らかなウェーブ状にします。

Tip

ラインの先端を丸くすると、より滑らかな見た目になります。

Toptalのアイコンの作り方

ボーナスとして、Toptalのアイコンの作り方も紹介します。

1. 太めのストロークで正方形を描きます。
2. はさみツールを使用して、右上と左下のポイントを切り取ります。これにより、2つに分割されます。
3. 下半分を上に移動し、全体を反時計回りに45度回転させます。

Tip

ポイントはストロークの太さです、これによりロゴの内側に空白スペースが構成されます。