アイコンの作成手順を解説！デザインのコツやおすすめツールも紹介

このように、様々なものを示すアイコンは、わかりやすくデザインする必要があります。

次の章では、アイコン作成時のデザインのコツについて解説します。

【コツ1】わかりやすさを重視する

webサイトやアプリ内では、様々な箇所にアイコンを使用します。

そのため、瞬時に機能や意味を伝えられるデザインであることが欠かせません。デザインから伝わる意図が散漫にならないよう、なるべく情報を詰め込みすぎず、何を表しているかがひと目でわかるデザインを心がけましょう。

また、複雑な表現は避けたり、視認性に配慮したりすることも大切です。シルエットを強調することで、小さなサイズでも判別しやすくなります。

【コツ2】企業やブランドのイメージに合う色を使う

企業やブランドのイメージカラーを取り入れることで、webサイトやアプリのデザインに一貫性が生まれます。また、イメージカラーを統一して使用すれば、ユーザーは無意識に企業やブランドと結び付けて記憶しやすくなり、認知や想起の向上につながります。

【コツ3】すべてのアイコンに統一感をもたせる

複数のアイコンをセットで作成する場合は、色や線の太さ、角の丸み、カンバスサイズなど、デザインのルールを決めておきましょう。

例えば、「線の太さは2px」「角の丸みは3px」と定めておくことで、並べて使用したときに違和感がなく、デザイン全体のトーン＆マナーを揃えられます。

どのSNSも、推奨サイズ以上の大きさのアイコンを用意しておくと、キレイに表示されます。 1,000 × 1,000px程度で作成しておけば、概ねどのサービスにも対応可能です。

【コツ2】丸くトリミングされることを想定する

多くのSNSでは、アイコンは円形にトリミングされて表示されます。

そのため、重要な要素が画面中央に配置されるように調整して、魅力を伝えられるレイアウト・構図になるよう工夫しましょう。

見せたいイラストやテキストを端に配置すると、見切れてしまう場合があるので注意が必要です。

【コツ3】投稿内容と関連性がある写真を使う

アイコンに写真を使用する場合は、アカウントの投稿内容と関連がある写真を使いましょう。

例えば、カフェのSNSアカウントのアイコンなら、コーヒーやお店の外観などの写真を使うとカフェであることを想起しやすくなります。

このとき、アイコンが小さくても何の写真なのかを識別できるかどうか、実際にアイコンを設定する際に確認しておきましょう。

以上のコツを押さえたところで、さっそくアイコンを作成してみましょう。

今回は、アイコン作成にオススメのデザインソフト「Adobe Illustrator」を使って解説します。「操作が難しそう……」と思われるかもしれませんが、基本操作を覚えればカンタンに扱えます。

扱えるようになるとデザインの幅がグッと広がるので、ぜひ試してみてください。

【基本操作1】アートボードの作成

Illustratorでデザインを作成する際には、基本的にアートボートの作成から始めます。

アートボードとは、デザインやイラストを作成するための白紙のカンバスです。

まずはIllustratorを起動し、左上の「新規ファイル」ボタンをクリックします。

ポップアップウィンドウが表示されるので、タブを選択し、「幅」と「高さ」を指定してください。

今回は「Web」タブを選択しました。

ちなみに「幅」と「高さ」は、あとからサイズ変更ができるため、お好みのサイズを指定して問題ありません。

ただし、アイコンは縦横比を正方形に設定することが多いため、正方形になるサイズで指定するとよいでしょう。

そのほか、カラーモードは画面の光を利用した色彩表現を前提としている「RGBカラー」を選ぶのをオススメします。なお、アートボード作成時に「Web」タブを選択すると、カラーモードはデフォルトで「RGBカラー」に設定されます。

もし、紙に印刷することがある場合には、印刷に使われる「CMYKカラー」の形式を選択しましょう。

最後に「作成」ボタンをクリックすれば、アートボードを作成できます。

【基本操作2】レイヤーの調整

Illustratorでは、複数のオブジェクト（図形やテキスト、画像など）を重ね合わせてデザインを作成します。

そして、各オブジェクトが重なる順序は、「レイヤー」という階層で管理されており、レイヤーパネルから調整できます。

例えば、以下のように、赤い長方形が上に重なっている場合は、「レイヤーパネル」のレイヤーの重ね順も長方形のレイヤーが上に配置されています。

この重なりの順番を入れ替えたい場合は、対象のレイヤーをドラッグし、上下の順序を入れ替えましょう。

このように、青い丸のレイヤーを上部に動かすと、青い丸が赤い長方形の上に重なって表示されます。

【基本操作3】テキストの配置とフォント・サイズ・カラーの変更

レイヤーの考え方を押さえたうえで、次にテキストの扱い方もご紹介します。

ツールバーにある「文字」ツール（Tのアイコン）をクリックし、文字を入力してみましょう。

文字のフォントやサイズ、カラーは「コンテキストタスクバー」や「文字ウィンドウ」、「プロパティ」から変更できます。

なお、コンテキストタスクバーとは、ユーザーが現在行っている作業内容に応じて、関連するツールやオプションを自動的に表示してくれる機能です。

「コンテキストタスクバー」が非表示になっている場合は、「ウィンドウ」＞「コンテキストタスクバー」で表示できます。

また「文字ウィンドウ」が非表示になっている場合は、「ウィンドウ」＞「書式」＞「文字」で表示させましょう。

文字の位置は、ツールバーの「選択」ツールをクリックした状態で文字を選択すれば動かせます。

以下の記事では、フォントの種類や選び方を解説しているので、フォント選びに迷ったときには、ぜひ参考にしてみてください。

フォント（日本語・英語）の種類・選び方と定番フォントを紹介

【基本操作4】図形の作成

続いては図形の作り方を解説します。


1．長方形の作り方

ツールバーの「長方形」ツールを選択すれば、任意の大きさの長方形を描けます。

正方形を作成したい場合は、Shiftキーを押しながらドラッグしてください。

もしくは、「長方形」ツールを選択した状態でワークスペース内をクリックし、ポップアップウィンドウを開いて数値を指定することで正方形を描くこともできます。

図形の大きさや色は、プロパティで調整できます。

ちなみに、図形の角をドラッグすることでも、大きさの調整は可能です。

また、Shiftキーを押しながら図形の角をドラッグすると、縦横比を維持したまま拡大・縮小できます。


2．円の作り方

ツールバーの「楕円形」ツールを選択すれば、任意の大きさの楕円を描けます。

正円を作成したい場合は、Shiftキーを押しながらドラッグしてください。

もしくは、「楕円形」ツールを選択した状態でワークスペース内をクリックし、ポップアップウィンドウを開いて数値を指定することで正円を描くこともできます。

3．多角形の作り方

ツールバーの「多角形」ツールを選択し、ワークスペース内をクリックします。

ポップアップウィンドウが表示されるので、辺の数を指定すれば三角形や五角形などの多角形を描けます。

なお、「多角形」ツールが表示されていない場合は、「長方形」ツールを長押しすればドロップダウンメニューが表示されて「多角形」ツールに切り替えられます。

複数の図形を組み合わせることで、様々なアイコンを表現できますので、ぜひ試してみてください。

なお、アウトライン化ができているかどうかは、「表示」＞「アウトライン」で確認できます。

以下のように、文字が縁取られたように表示されれば、正しくアウトライン化ができています。

以上が、Illustratorの基本操作でした。

続いて、これらの基本操作をもとに、「webサイト・アプリ用アイコン」と「写真・イラストを使ったSNSアイコン」の作成手順を解説します。

【手順1】基本となる図形を配置

まずはカメラの基本となるパーツを、図形を使って描きます。

ツールバーの「長方形」ツールを選択し、2つの長方形を作成しましょう。

次に、長方形の角の丸みを調整します。

「ダイレクト選択」ツールを選択し、調整したい角の「アンカー」をクリックすると、丸い「コーナーウィジェット」が表示されます。

このコーナーウィジェットを動かすことで、角の丸み調整が可能です。

上下4つの角をすべて同じサイズの丸みを付けたい場合は、Shiftキーを押しながら該当の角のアンカーをクリックしてください。

すると、4つの角のアンカーが選択された状態で4つのコーナーウィジェットが表示されます。

この状態で、いずれかのコーナーウィジェットを動かすと、同じサイズの丸みを付けられます。

次に、カメラのパーツを配置していきます。

「楕円ツール」や「長方形ツール」を使い、このように配置しました。

【手順2】色を調整する

基本となる図形を配置したら、色を調整しましょう。

「選択」ツールで色を変更したい図形を選択し、「プロパティ」から変更できます。

各パーツの色を調整したものがこちらです。

レンズ部分は、塗りを「無し」にし、線に色を付けて表現しました。

【手順3】大きさや背景、配置を整える

最後に、大きさや背景を整え、アートボードの真ん中に配置します。

今回は、背景に円形を置き、丸いアイコンにしました。

他にも同じサイズで複数のアイコンを作成する場合は、アートボードのサイズに合わせて背景の丸を設置するのがオススメです。

また、使用時に丸くトリミングされる場合は、切り抜きの境目に白い箇所が見えないよう、背景全体を塗りつぶすのもよいでしょう。

【手順4】保存＆書き出し

すべての作業が完了したら「ファイル」＞「保存」を選択し、データを保存します。

また、使用シーンに合わせて、データの書き出しを行いましょう。

「ファイル」＞「書き出し」を選択し、「書き出し形式」をクリックすると、PNGやJPGなどファイルの種類を選択できます。

これで、webサイト・アプリ用のアイコン作成が完了です。

複数の図形を組み合わせて、様々なアイコンを作ってみてください。

続いて、写真やイラストを使ったSNSアイコンの作り方を解説します。

【手順1】使用する画像を配置する

まずはIllustrator上に、使用する画像を配置しましょう。

PCに保存されている画像を、Illustratorにドラッグ＆ドロップすれば、画像が配置できます。

なお、画像の配置方法は「リンク配置」と「埋め込み配置」の2つの方法があります。

「リンク配置」とは、Illustratorファイルに画像データを取り込まず、外部の画像ファイルにリンクさせて表示する方法です。Illustratorファイルのサイズを小さく保てるため、編集効率を高められます。

ただし、画像ファイルを削除したり、画像を格納しているフォルダーの場所を変更したりすると、リンクが切れを起こしてデザインが崩れてしまうデメリットがあります。

対して「埋め込み配置」とは、Illustratorファイルに画像データを直接取り込んで表示させる方法で、リンク切れの心配はありません。

今回ご紹介したドラッグ＆ドロップで画像を配置すると、「リンク配置」として認識されるため、埋め込み配置に変更しておくと安心です。

埋め込み配置への変更は「リンクパネル」から行えます。

「ウィンドウ」＞「リンク」をクリックして「リンクパネル」を表示し、埋め込みたい画像を選択し「画像の埋め込み」をクリックすれば完了です。

【手順2】画像を切り抜く

次に、画像を切り抜いていきます。

ツールバーの「長方形」ツールや「楕円形」ツールなどを用いて、まずは切り抜きたい範囲を示す図形を作成してみましょう。

図形ができたら、画像の切り抜きたい位置やサイズに調整して重ね合わせます。

ここで重ね合わせた範囲や位置に応じて、画像が切り抜かれるため、図形の透明度を50％程度にしておくと範囲や位置を調整しやすくなります。

なお、このとき図形のレイヤーは、画像よりも上に配置しておきましょう。

次にクリッピングマスクを作成します。

「クリッピングマスク」とは、上にある図形の形状に沿って、下にあるレイヤー（画像や図形）を切り抜いたように見せる機能のことです。

画像と図形の両方を選択（1つのオブジェクトを選んだ状態でShiftキーを押しながら、もう1つのオブジェクトをクリック）し、右クリックで表示されるメニューから「クリッピングマスクを作成」を選択します。

すると、指定した形に画像を切り抜けました。

今回は円形に切り抜きましたが、同じ手順で四角形や三角形など、様々な形にも切り抜けます。

【手順3】画像に縁どり（フレーム）を付ける

SNSアカウントで画像が円形に設定されることを想定して、続いては円に縁取り（フレーム）を追加してみます。

切り抜いた画像を選択した状態で、「プロパティ」の「線」からカラーや太さを調整できます。

今回は、カラーパレット内にあるグラデーションを指定してみました。

グラデーションの色味は、グラデーションアイコンをクリックし、「グラデーションスライダー」から変更できます。

【手順4】文字を追加する

アイコンに自分の名前やメッセージなどの文字を追加する場合は、ツールバーにある「文字」ツール（Tのアイコン）をクリックし、入力してください。

今回は、円形のアイコンに沿って文字をアーチ状に変形させてみます。

まずは該当のレイヤーの「目のアイコン」の右側にあるボックスをクリックし、アイコン画像のレイヤーが動かないように固定しましょう。

固定されると鍵アイコンが表示されるので、一眼でわかります。固定を解除する際は、再度鍵アイコンをクリックしてください。

次に「曲線」ツールを選択し、文字を配置したい部分に曲線を描きます。

このとき、曲線の塗りを「無し」の状態にし、線の色を付けておくと、曲線の形状がわかりやすくなります。

続いて、文字を入力します。

「文字」ツール（Tのアイコン）を長押しし、「パス上文字ツール」を選択します。

先ほど描いた曲線を選択し、任意の文字を入力すると、曲線の形に沿って文字が配置されます。

最後に文字の位置やフォント、カラーを調整すれば完了です。

【手順5】保存＆書き出し

すべての作業が完了したら「ファイル」＞「保存」を選択し、データを保存します。

データの書き出しは、「ファイル」＞「書き出し」を選択し、「書き出し形式」をクリックすると、PNGやJPGなどファイルの種類を選択できます。

これで、写真・イラストを使ったSNSアイコン作成が完了です。

ここまでの手順を押さえつつ、図形の組み合わせや文字の配置を工夫することで、オリジナリティーのあるアイコンが作成できるので、ぜひ試してみてください。