アイコンの作成手順を解説！デザインのコツやおすすめツールも紹介
webサイトやアプリケーション、SNSなど、幅広いシーンで利用されている「アイコン」。
情報を直感的に伝えるために、重要な役割をもっています。
しかし、いざアイコンを作ろうと思っても「どのようにデザインすればよいかわからない」と感じる方も多いでしょう。
そこで本記事では、アイコンの基礎知識からデザインのコツ、さらには「Adobe Illustrator」を使った作成手順まで、ポイントを絞ってわかりやすく解説します。
企業やブランド、個人のイメージアイコンだけでなく、ひと目で情報が伝わるナビゲーションアイコンの作成に役立つノウハウもご紹介しているので、ぜひ参考にしてください
なお、Illustratorは7日間の無料体験も可能です。
今すぐデザインを始めたい方は、以下のボタンからお申込みください
アイコンの役割と利用シーン
アイコンとは、対象物の内容や機能をひと目で認識できるように、図や記号、シンプルなイラストなどで示したマークのことです。
また、SNSやブログなどのプロフィール画像もアイコンと呼ばれています。
まずは、アイコンの役割と実際に利用されるシーンについて、詳しく見ていきましょう。
アイコンの役割
アイコンは、企業やブランド、個人を象徴するシンボルとしての役割があります。
繰り返し目にしてもらうことで、「どこの」「誰の」「何の」アイコンなのかを思い浮かべてもらえるようになります。
デザインの雰囲気や色使いなどで個性を表現することで、ユーザーの印象に残りやすくなり、競合との差別化にもつながるでしょう。
また、シンプルで洗練されたアイコンは、企業や個人に対する信頼感を高め、コミュニケーションの活性化やフォロワー増加といった効果も期待できます。
さらに、webサイトやアプリケーション内では、ナビゲーションの一部としても使用されます。テキストよりもすばやく直感的に操作方法や情報を伝えられるメリットがあります。
アイコンの利用シーン
アイコンは、あらゆる場面で使用されています。
アイコンの主な利用シーンについて、以下にまとめました。
このように、様々なものを示すアイコンは、わかりやすくデザインする必要があります。
次の章では、アイコン作成時のデザインのコツについて解説します。
アイコンをデザインするときのコツ
アイコンをデザインする際は、利用シーンに適したデザインに仕上げることが大切です。
ここでは、用途別にアイコンデザインのコツを見ていきましょう。
webサイトやアプリで使用する場合
まずは、webサイトやアプリで使用する場合のコツを確認していきましょう。
【コツ1】わかりやすさを重視する
webサイトやアプリ内では、様々な箇所にアイコンを使用します。
そのため、瞬時に機能や意味を伝えられるデザインであることが欠かせません。デザインから伝わる意図が散漫にならないよう、なるべく情報を詰め込みすぎず、何を表しているかがひと目でわかるデザインを心がけましょう。
また、複雑な表現は避けたり、視認性に配慮したりすることも大切です。シルエットを強調することで、小さなサイズでも判別しやすくなります。
【コツ2】企業やブランドのイメージに合う色を使う
企業やブランドのイメージカラーを取り入れることで、webサイトやアプリのデザインに一貫性が生まれます。また、イメージカラーを統一して使用すれば、ユーザーは無意識に企業やブランドと結び付けて記憶しやすくなり、認知や想起の向上につながります。
【コツ3】すべてのアイコンに統一感をもたせる
複数のアイコンをセットで作成する場合は、色や線の太さ、角の丸み、カンバスサイズなど、デザインのルールを決めておきましょう。
例えば、「線の太さは2px」「角の丸みは3px」と定めておくことで、並べて使用したときに違和感がなく、デザイン全体のトーン＆マナーを揃えられます。
SNSで使用する場合
次に、SNSで使用するアイコンのデザインのコツを3つご紹介します。
【コツ1】適切なサイズで作成する
SNSのプロフィールや投稿用にアイコンを作成する場合は、各プラットフォームの推奨サイズをあらかじめ確認しておきましょう。
規定の縦横ピクセル数に則って作成しないと、ぼやけたり、不自然にトリミングされたりと、本来意図したデザインが表示されない恐れがあるためです。
最適なサイズで作成することで、正しく鮮明に表示されるようになり、アイコンを効果的に活用できます。
プラットフォームごとの推奨サイズは以下のとおりです。
どのSNSも、推奨サイズ以上の大きさのアイコンを用意しておくと、キレイに表示されます。 1,000 × 1,000px程度で作成しておけば、概ねどのサービスにも対応可能です。
【コツ2】丸くトリミングされることを想定する
多くのSNSでは、アイコンは円形にトリミングされて表示されます。
そのため、重要な要素が画面中央に配置されるように調整して、魅力を伝えられるレイアウト・構図になるよう工夫しましょう。
見せたいイラストやテキストを端に配置すると、見切れてしまう場合があるので注意が必要です。
【コツ3】投稿内容と関連性がある写真を使う
アイコンに写真を使用する場合は、アカウントの投稿内容と関連がある写真を使いましょう。
例えば、カフェのSNSアカウントのアイコンなら、コーヒーやお店の外観などの写真を使うとカフェであることを想起しやすくなります。
このとき、アイコンが小さくても何の写真なのかを識別できるかどうか、実際にアイコンを設定する際に確認しておきましょう。
以上のコツを押さえたところで、さっそくアイコンを作成してみましょう。
今回は、アイコン作成にオススメのデザインソフト「Adobe Illustrator」を使って解説します。「操作が難しそう……」と思われるかもしれませんが、基本操作を覚えればカンタンに扱えます。
扱えるようになるとデザインの幅がグッと広がるので、ぜひ試してみてください。
Adobe Illustratorでアイコンを作る方法
Illustratorなら、拡大・縮小しても画質が劣化しない「ベクター形式」でアイコンを作成できます。
特にアイコンは用途に応じてサイズを変えて使うことが多いため、画質が変わらない点は大きなメリットです。
また、Illustratorには多彩なツールが揃っており、文字のデザインやイラスト、図形の作成が得意なため、アイコン作成をスムーズに進められます。細かな調整や修正がしやすく、細部までこだわったオリジナルデザインを実現できるのも魅力です。
それでは、Illustratorの基本操作と実際にアイコンをデザインする方法を解説します。
今すぐアイコンを作りたい方は、以下のボタンからIllustratorを始めましょう。
Illustratorの基本操作
まずはIllustratorの基本操作を5つご紹介します。
Illustratorの操作方法を把握している人は、このあとに解説する「webサイト・アプリ用アイコンの作り方」や「写真・イラストを使ったSNSアイコンの作り方」を参考にしてください。
【基本操作1】アートボードの作成
Illustratorでデザインを作成する際には、基本的にアートボートの作成から始めます。
アートボードとは、デザインやイラストを作成するための白紙のカンバスです。
まずはIllustratorを起動し、左上の「新規ファイル」ボタンをクリックします。
ポップアップウィンドウが表示されるので、タブを選択し、「幅」と「高さ」を指定してください。
今回は「Web」タブを選択しました。
ちなみに「幅」と「高さ」は、あとからサイズ変更ができるため、お好みのサイズを指定して問題ありません。
ただし、アイコンは縦横比を正方形に設定することが多いため、正方形になるサイズで指定するとよいでしょう。
そのほか、カラーモードは画面の光を利用した色彩表現を前提としている「RGBカラー」を選ぶのをオススメします。なお、アートボード作成時に「Web」タブを選択すると、カラーモードはデフォルトで「RGBカラー」に設定されます。
もし、紙に印刷することがある場合には、印刷に使われる「CMYKカラー」の形式を選択しましょう。
最後に「作成」ボタンをクリックすれば、アートボードを作成できます。
【基本操作2】レイヤーの調整
Illustratorでは、複数のオブジェクト（図形やテキスト、画像など）を重ね合わせてデザインを作成します。
そして、各オブジェクトが重なる順序は、「レイヤー」という階層で管理されており、レイヤーパネルから調整できます。
例えば、以下のように、赤い長方形が上に重なっている場合は、「レイヤーパネル」のレイヤーの重ね順も長方形のレイヤーが上に配置されています。
この重なりの順番を入れ替えたい場合は、対象のレイヤーをドラッグし、上下の順序を入れ替えましょう。
このように、青い丸のレイヤーを上部に動かすと、青い丸が赤い長方形の上に重なって表示されます。
【基本操作3】テキストの配置とフォント・サイズ・カラーの変更
レイヤーの考え方を押さえたうえで、次にテキストの扱い方もご紹介します。
ツールバーにある「文字」ツール（Tのアイコン）をクリックし、文字を入力してみましょう。
文字のフォントやサイズ、カラーは「コンテキストタスクバー」や「文字ウィンドウ」、「プロパティ」から変更できます。
なお、コンテキストタスクバーとは、ユーザーが現在行っている作業内容に応じて、関連するツールやオプションを自動的に表示してくれる機能です。
「コンテキストタスクバー」が非表示になっている場合は、「ウィンドウ」＞「コンテキストタスクバー」で表示できます。
また「文字ウィンドウ」が非表示になっている場合は、「ウィンドウ」＞「書式」＞「文字」で表示させましょう。
文字の位置は、ツールバーの「選択」ツールをクリックした状態で文字を選択すれば動かせます。
以下の記事では、フォントの種類や選び方を解説しているので、フォント選びに迷ったときには、ぜひ参考にしてみてください。
【基本操作4】図形の作成
続いては図形の作り方を解説します。
1．長方形の作り方
ツールバーの「長方形」ツールを選択すれば、任意の大きさの長方形を描けます。
正方形を作成したい場合は、Shiftキーを押しながらドラッグしてください。
もしくは、「長方形」ツールを選択した状態でワークスペース内をクリックし、ポップアップウィンドウを開いて数値を指定することで正方形を描くこともできます。
図形の大きさや色は、プロパティで調整できます。
ちなみに、図形の角をドラッグすることでも、大きさの調整は可能です。
また、Shiftキーを押しながら図形の角をドラッグすると、縦横比を維持したまま拡大・縮小できます。
2．円の作り方
ツールバーの「楕円形」ツールを選択すれば、任意の大きさの楕円を描けます。
正円を作成したい場合は、Shiftキーを押しながらドラッグしてください。
もしくは、「楕円形」ツールを選択した状態でワークスペース内をクリックし、ポップアップウィンドウを開いて数値を指定することで正円を描くこともできます。
3．多角形の作り方
ツールバーの「多角形」ツールを選択し、ワークスペース内をクリックします。
ポップアップウィンドウが表示されるので、辺の数を指定すれば三角形や五角形などの多角形を描けます。
なお、「多角形」ツールが表示されていない場合は、「長方形」ツールを長押しすればドロップダウンメニューが表示されて「多角形」ツールに切り替えられます。
複数の図形を組み合わせることで、様々なアイコンを表現できますので、ぜひ試してみてください。
【基本操作5】アウトライン化（パス化）
アウトライン化（パス化）とは、テキストや線などを図形データに変換することです。
文字や線をアウトライン化すると、図形として扱えるようになり、自由に変形させられます。
例えば、アンカーポイントを移動させて文字の形を変えたり、一部を切り取って独自のアイコンデザインを作ったりと、より自由な表現が可能です。
ただし、アウトライン化するとテキストの内容やフォントの種類の変更といった「文字情報としての編集」ができなくなるため、作業前に元のテキストをバックアップ用レイヤーに残しておきましょう。
複製しておけば、後に修正や再編集が必要になっても安心です。
アウトライン化するには、まず選択ツールで対象のオブジェクトを選択します。
次に、右クリックで表示されるメニューから「アウトラインを作成」をクリックすれば完了です。
もしくは「コンテキストタスクバー」の「T」マークでもアウトライン化は可能です。
ただし、テキストを一つひとつ選択してアウトライン化していくと、見落としてしまうことも少なくありません。
そのため、以下の手順で一括設定すると安心です。
- 「オブジェクト」＞「すべてをロック解除」の順にクリックし、ロックされているオブジェクトを解除する
- 「選択」＞「すべてを選択」でオブジェクトを全選択する
- 「書式」＞「アウトラインを作成」をクリックすれば、一括でアウトライン化できる
なお、アウトライン化ができているかどうかは、「表示」＞「アウトライン」で確認できます。
以下のように、文字が縁取られたように表示されれば、正しくアウトライン化ができています。
以上が、Illustratorの基本操作でした。
続いて、これらの基本操作をもとに、「webサイト・アプリ用アイコン」と「写真・イラストを使ったSNSアイコン」の作成手順を解説します。
webサイト・アプリ用アイコンの作り方
今回は、以下のカメラマークのアイコンを作成します。
【手順1】基本となる図形を配置
まずはカメラの基本となるパーツを、図形を使って描きます。
ツールバーの「長方形」ツールを選択し、2つの長方形を作成しましょう。
次に、長方形の角の丸みを調整します。
「ダイレクト選択」ツールを選択し、調整したい角の「アンカー」をクリックすると、丸い「コーナーウィジェット」が表示されます。
このコーナーウィジェットを動かすことで、角の丸み調整が可能です。
上下4つの角をすべて同じサイズの丸みを付けたい場合は、Shiftキーを押しながら該当の角のアンカーをクリックしてください。
すると、4つの角のアンカーが選択された状態で4つのコーナーウィジェットが表示されます。
この状態で、いずれかのコーナーウィジェットを動かすと、同じサイズの丸みを付けられます。
次に、カメラのパーツを配置していきます。
「楕円ツール」や「長方形ツール」を使い、このように配置しました。
【手順2】色を調整する
基本となる図形を配置したら、色を調整しましょう。
「選択」ツールで色を変更したい図形を選択し、「プロパティ」から変更できます。
各パーツの色を調整したものがこちらです。
レンズ部分は、塗りを「無し」にし、線に色を付けて表現しました。
【手順3】大きさや背景、配置を整える
最後に、大きさや背景を整え、アートボードの真ん中に配置します。
今回は、背景に円形を置き、丸いアイコンにしました。
他にも同じサイズで複数のアイコンを作成する場合は、アートボードのサイズに合わせて背景の丸を設置するのがオススメです。
また、使用時に丸くトリミングされる場合は、切り抜きの境目に白い箇所が見えないよう、背景全体を塗りつぶすのもよいでしょう。
【手順4】保存＆書き出し
すべての作業が完了したら「ファイル」＞「保存」を選択し、データを保存します。
また、使用シーンに合わせて、データの書き出しを行いましょう。
「ファイル」＞「書き出し」を選択し、「書き出し形式」をクリックすると、PNGやJPGなどファイルの種類を選択できます。
これで、webサイト・アプリ用のアイコン作成が完了です。
複数の図形を組み合わせて、様々なアイコンを作ってみてください。
続いて、写真やイラストを使ったSNSアイコンの作り方を解説します。
写真・イラストを使ったSNSアイコンの作り方
今回は、SNSに使うアイコンを例に、制作手順をご紹介します。
【手順1】使用する画像を配置する
まずはIllustrator上に、使用する画像を配置しましょう。
PCに保存されている画像を、Illustratorにドラッグ＆ドロップすれば、画像が配置できます。
なお、画像の配置方法は「リンク配置」と「埋め込み配置」の2つの方法があります。
「リンク配置」とは、Illustratorファイルに画像データを取り込まず、外部の画像ファイルにリンクさせて表示する方法です。Illustratorファイルのサイズを小さく保てるため、編集効率を高められます。
ただし、画像ファイルを削除したり、画像を格納しているフォルダーの場所を変更したりすると、リンクが切れを起こしてデザインが崩れてしまうデメリットがあります。
対して「埋め込み配置」とは、Illustratorファイルに画像データを直接取り込んで表示させる方法で、リンク切れの心配はありません。
今回ご紹介したドラッグ＆ドロップで画像を配置すると、「リンク配置」として認識されるため、埋め込み配置に変更しておくと安心です。
埋め込み配置への変更は「リンクパネル」から行えます。
「ウィンドウ」＞「リンク」をクリックして「リンクパネル」を表示し、埋め込みたい画像を選択し「画像の埋め込み」をクリックすれば完了です。
【手順2】画像を切り抜く
次に、画像を切り抜いていきます。
ツールバーの「長方形」ツールや「楕円形」ツールなどを用いて、まずは切り抜きたい範囲を示す図形を作成してみましょう。
図形ができたら、画像の切り抜きたい位置やサイズに調整して重ね合わせます。
ここで重ね合わせた範囲や位置に応じて、画像が切り抜かれるため、図形の透明度を50％程度にしておくと範囲や位置を調整しやすくなります。
なお、このとき図形のレイヤーは、画像よりも上に配置しておきましょう。
次にクリッピングマスクを作成します。
「クリッピングマスク」とは、上にある図形の形状に沿って、下にあるレイヤー（画像や図形）を切り抜いたように見せる機能のことです。
画像と図形の両方を選択（1つのオブジェクトを選んだ状態でShiftキーを押しながら、もう1つのオブジェクトをクリック）し、右クリックで表示されるメニューから「クリッピングマスクを作成」を選択します。
すると、指定した形に画像を切り抜けました。
今回は円形に切り抜きましたが、同じ手順で四角形や三角形など、様々な形にも切り抜けます。
【手順3】画像に縁どり（フレーム）を付ける
SNSアカウントで画像が円形に設定されることを想定して、続いては円に縁取り（フレーム）を追加してみます。
切り抜いた画像を選択した状態で、「プロパティ」の「線」からカラーや太さを調整できます。
今回は、カラーパレット内にあるグラデーションを指定してみました。
グラデーションの色味は、グラデーションアイコンをクリックし、「グラデーションスライダー」から変更できます。
【手順4】文字を追加する
アイコンに自分の名前やメッセージなどの文字を追加する場合は、ツールバーにある「文字」ツール（Tのアイコン）をクリックし、入力してください。
今回は、円形のアイコンに沿って文字をアーチ状に変形させてみます。
まずは該当のレイヤーの「目のアイコン」の右側にあるボックスをクリックし、アイコン画像のレイヤーが動かないように固定しましょう。
固定されると鍵アイコンが表示されるので、一眼でわかります。固定を解除する際は、再度鍵アイコンをクリックしてください。
次に「曲線」ツールを選択し、文字を配置したい部分に曲線を描きます。
このとき、曲線の塗りを「無し」の状態にし、線の色を付けておくと、曲線の形状がわかりやすくなります。
続いて、文字を入力します。
「文字」ツール（Tのアイコン）を長押しし、「パス上文字ツール」を選択します。
先ほど描いた曲線を選択し、任意の文字を入力すると、曲線の形に沿って文字が配置されます。
最後に文字の位置やフォント、カラーを調整すれば完了です。
【手順5】保存＆書き出し
すべての作業が完了したら「ファイル」＞「保存」を選択し、データを保存します。
データの書き出しは、「ファイル」＞「書き出し」を選択し、「書き出し形式」をクリックすると、PNGやJPGなどファイルの種類を選択できます。
これで、写真・イラストを使ったSNSアイコン作成が完了です。
ここまでの手順を押さえつつ、図形の組み合わせや文字の配置を工夫することで、オリジナリティーのあるアイコンが作成できるので、ぜひ試してみてください。
Adobe Illustratorで魅力的なアイコンを作ろう
Adobe Illustratorは、アイコンやロゴ、ポスター、チラシなどあらゆるデザイン制作を強力にサポートするベクター編集アプリです。
多彩なツールを使って高品質なアイコンを効率的に作成できるのはもちろん、ロゴやイラストのデザインなども思いのままに実現でき、プロのデザイナーから趣味のクリエイターに至るまで幅広く支持されています。
ここからは、そんなIllustratorの魅力をいくつかご紹介します。
文字や図形を自由に配置できる
何といっても、自由度高くデザインできることがIllustratorの魅力。
文字や図形を思いのままにカンバスに配置して、デザインを細かく調整できます。
https://www.adobe.com/creativecloud/media_1d6af12ae98d0a67ec1a1fa9a50dec4a9940fc665.mp4#_autoplay
図やイラストが描きやすい
ペンや筆で描くのが苦手な方にも、Illustratorはオススメです。
図形を組み合わせたり、「パス」と呼ばれる線を描く機能を使ったりして、地図やグラフ、イラストなどを作成できます。
https://www.adobe.com/creativecloud/media_11e90fa2883a826e2c96de6b17e6933875e9e944f.mp4#_autoplay
思いどおりのベクターグラフィックを作成できる
Illustratorは、線や色などが数式で表現されるベクター形式の画像を基本としています。
例えば、作成したアイコンやロゴを大きなサイズに引き伸ばしても輪郭がボヤけることはありません。また、元のサイズより縮小してもつぶれず、くっきりした見栄えのまま利用できます。
拡大・縮小してもボヤけない
Illustratorは、線や色などが数式で表現されるベクター形式の画像を基本としています。
例えば、名刺用に作ったロゴをポスターや看板などの大きなサイズに引き伸ばしても輪郭がボヤけることはありません。
また、元のサイズより縮小してもつぶれず、くっきりした見栄えのまま利用できます。
このように、Illustratorがあればデザインの可能性が大きく広がります。
最新機能を活かして、企業や個人の魅力が高まるアイコンを作成してみませんか。
今なら無料でお試しいただけますので、この機会にぜひIllustratorのパワーを体感してください。
手軽にデザイン作成できる「Adobe Express」
https://www.youtube.com/embed/pyUXwLJYZ1g?si=vZsSmL0hU73KT3fM
Adobe Expressは、直感的な操作で誰でもカンタンに使える無料のデザインツールです。
アイコンやロゴはもちろん、豊富なデザインテンプレートを使って、名刺やバナー画像も作成できます。
さらに、SNSに投稿する画像の加工やショート動画の作成など、様々なものが作れます。
最後に、Adobe Expressの特長をいくつかご紹介します。
デザインテンプレートが使える
豊富なテンプレートを使って、カンタンに画像を作成できるのがAdobe Expressの魅力。
「おしゃれにデザインできるか不安……」という方でも、好みのテンプレートを探してテキストや画像を差し替えるだけで、魅力的な画像を作成できます。
デザイン素材を組み合わせて手軽にアイコン作成
Adobe Expressでは、テンプレートだけでなく、無料で使えるデザイン素材も豊富です。
素材やモチーフを検索し、作成したい画像のイメージに合う素材を探してみてください。
SNS投稿に便利な予約投稿機能
SNSの予約投稿機能を使えば、InstagramやX（旧Twitter）などへの投稿をまとめて予約することができます。
Adobe ExpressでSNS投稿の作成からプレビュー確認、予約設定までを効率化しましょう。
Illustratorで作成したデザインを連携できる
Illustratorで作成したデザインデータは、Adoobe Expressと連携できます。
連携後は、Illustratorで編集した内容が自動的にAdobe Expressに反映されるため、チーム内での共有や修正作業がスムーズに。Expressのサイズ調整機能やSNS投稿機能などと組み合わせれば、Illustratorで作成したデザインを各種媒体にあわせて自動投稿することも可能です。Adobe製品を組み合わせて、ワークフローをさらに効率化してみましょう。
Adobe Expressは以下のボタンから無料で始められます。
また、Adobe Expressとillustrator・Photoshopの詳しい連携手順は、以下のページで解説しています。あわせてご確認ください。
Adobe ExpressでPhotoshopとIllustratorのファイルを使用する方法
IllustratorとExpress、それぞれの機能を活かすことで、デザインの幅が大きく広がります。
細かくデザイン調整したいときはIllustrator、手軽に画像作成したいときはExpressなど、使用シーンに合わせて使い分けるのもよいでしょう。
自由自在にアイデアを形にし、ぜひ様々なデザインを作成してみてください。
Illustratorを7日間無料で試してみる
関連記事
ロゴの作り方を徹底解説！デザインの考え方や作成手順も紹介
ロゴの基礎知識や作り方を解説。ロゴ作成の流れやデザインのコツ、Adobe Illustratorを使った実践的なテクニックも紹介します。
無料で簡単にアイコン作成！おしゃれな素材とデザインのコツ
無料のデザインツール「Adobe Express」を使い、アカウントを印象付けるおしゃれなアイコンを簡単に作成しましょう。アイコン作成の手順とデザインのコツを紹介します。
おしゃれなインスタアイコンは簡単に作れる！撮影方法や加工方法のコツ
インスタのアイコンを今っぽくおしゃれにする方法を解説します。印象に残るアイコンの特徴や写真撮影のコツのほか、無料のデザインツールを使ったアイコンの作り方もご紹介します。