【Illustrator】ファビコンの作り方をデザインパターン別に徹底解説forイラレ初心者【ノンデザイナー歓迎！】

Webデザイナー、UI/UXデザイナーの@sdesignlaboです。

Illustrator（イラストレーター）でファビコンを作る方法をパターン別に解説します。

サイト制作に必要な素材の一つであるファビコンをイラレで自作し、よりオリジナリティの高いコンテンツ作りをしてみませんか？

ノンデザイナーの方でもゼロからファビコンが作れるよう、詳しく解説いたします！

この記事の目次

どんなファビコンを作るの？

Illustratorを使って作るファビコンのサンプルです。
どれもイラレがあれば簡単に作成できます。

なお、ファビコンに必要なサイズ一覧はコチラの記事で詳しく解説しています。

作成するファビコンのサイズについて

ファビコンのドキュメント設定は下記です。
幅：512
高さ：512
単位：ピクセル
カラーモード：RGB

512pxをベースに、他サイズを量産します。

ファビコン① 文字ベース

まずは文字ベースのファビコンの作り方を解説します。
最も簡単かつ短時間で作れるファビコン制作方法ですよ。

Illustratorを導入しましょう

当記事の内容を実践するにはIllustratorが必須です。
未導入の方はIllustrator公式サイトからダウンロードしておきましょう。（7日間の無料体験が可能）
なお、AdobeCCのプランはコチラの記事で徹底解説しています。

STEP.1

文字を入力する

[ 文字ツール(T) ] を使ってロゴにしたい文字を入力します。

文字ツールの使い方はコチラで解説しています。

STEP.2

フォントを変える

文字サイズやフォント、色を変えたりしてデザインをしてみましょう。サンプルのフォントは [ GAU_font_cube_B ] を使用しています。

文字オブジェクトを移動させるには [ 選択ツール(V) ] で選択後にドラッグします。

FINISH

色や背景を追加して完成

文字ベースのファビコンの完成です。

背景は [ 長方形ツール(M) ] でベタ塗りにしています。

アウトライン化を行うと細かい編集が可能

アウトライン化を適用すると文字をアンカーポイント単位で細かく編集できます。既存フォントをベースにオリジナルロゴが簡単に作れますよ。
[ ペンツール(P) ] を使ってアンカーポイントの追加・削除を行えます。

なお、アウトライン化はコチラで詳しく解説しています。

ファビコン② 基本図形ベース

基本図形を使ったファビコンの例です。
ファビコンに適した幾何学模様の作り方を解説します。

長方形ツールや楕円形ツールを活用

[ 長方形ツール(M) ] や [ 楕円形ツール(L) ] 、[ 多角形ツール ] や [ スターツール ] を使った基本図形です。
特に何の変哲も無い図形が作成できます。

パスファインダーを活用

例えば正円をスターツールで型抜きしてみるとファビコンに使えるアイコンが簡単に作れます。
便利なパスファインダーの使い方はコチラで解説しています。

回転ツールを使ったファビコン作成

「ポン」と基本図形を置くだけでは面白くないですよね。
単なる基本図形でも配置を工夫するだけでロゴに変身します。

STEP.1

元オブジェクトを作成

Illustratorは導入されていますか？
まだの方はAdobe公式サイトから入手できます。

例えば [ 長方形ツール(M) ] で [ Shift ] を押しながらドラッグし、正方形を作成します。
[ 回転ツール(R) ] で45°回転させます。

STEP.2

回転ツールでコピー

引き続き [ 回転ツール(R) ] で正方形を回転コピーさせます。

円周上に5つコピーしたい場合は [ 360/5 ]
6つなら [ 360/6 ] と入力し、[ コピー ] をクリックします。

STEP.3

変形の繰り返しを適用

コピー直後に [ Ctrl + D ] (Mac：⌘ + D) を押します。
[ 変形の繰り返し ] という機能です。

[ Ctrl + D ] を押すたびに回転コピーが繰り返されます。

※回転コピーの詳しい方法はコチラで解説しています。

STEP.4

完成

色を変えたら完成です。

四角形や円形といった単純な形状でも、回転コピーを使うとファビコンに使える幾何学模様に大変身。

商用可能な高品質ロゴテンプレート

【商用可】高品質なロゴのテンプレート50選【Illustrator・Photoshop】

商用利用可能な高品質ロゴを活用して制作を加速させてみませんか？
素材を活用すればノンデザイナーの方でも一瞬でプロの品質が出せますよ。

拡大・縮小ツールを使ったファビコン作成

STEP.1

ひし形を作成

45°回転させた正方形を作成します。

STEP.2

拡大・縮小の設定

[ 選択ツール(V) ] で選択後、ツールバーの [ 拡大・縮小ツール ] をダブルクリックします。
拡大・縮小のダイアログ画面が開くので下記設定を入力します。

縦横比を固定：65%
線幅と効果を拡大・縮小

最後に [ コピー ] をクリックします。

STEP.3

変形の繰り返し

[ Ctrl + D ] (Mac：⌘ + D) で変形の繰り返しを行います。

FINISH

完成

色を変更し、一番小さいひし形に塗りの設定を追加して完成です。線を太めにしておくとファビコンにしても視認性が担保されますよ。

拡大・縮小ツールの詳しい使い方はコチラで解説しています。

ファビコン③ ぜロベース

ゼロベースで作成するには [ ペンツール ] で自由に線を描いて作成しましょう。

ペンツールを使ったファビコン作成

STEP.1

ラフ画を準備

左図のような落書きを元にファビコンを作成する方法です。
基本図形で描けないような線は [ ペンツール ] を使って描きます。

STEP.2

ペンツールでトレース

ラフとは別のレイヤーを作成し、ペンツールを使ってトレースします。

※ペンツールの使い方はコチラで徹底解説しています。

FINISH

完成

線の太さや色を変更したら完成！

ペンツールを使えば手描き感のあるファビコンが簡単に作れます。

ペンツールを使ったキャラクターの作成方法

【Illustrator】ペンツールを使ったトレースのテクニックforイラレ初心者

ラフ画を元にペンツールを使ってトレースし、完成イラストを作る方法を徹底解説しています。
ペンツール初心者の方にも安心して進められる内容です。

左右対称のファビコン作成

STEP.1

ファビコンの半分を作成

ネコの半分をペンツール等を使って作成します。

STEP.2

反転軸の上でリフレクトツール

選択ツールでパーツを選択し、[ リフレクトツール(O) ] に切り替えます。
反転したい軸の上で [ Alt ] (Mac：Option) を押しながらクリックします。

STEP.3

リフレクトツールでコピーを適用

リフレクトのダイアログ画面が開きます。

リフレクトの軸：垂直

最後に [ コピー ] をクリックします。

STEP.4

連結して完成

左右のオブジェクトを [ Ctrl + J ] (Mac：⌘ + J) で連結させ、色の設定を行ったら完成です。

Illustratorを使えばこういった左右対称のファビコンをキレイ＆楽に作れますよ。
未導入の方はAdobe公式サイトから入手できます。

リフレクトツールと連結の方法を徹底解説

【Illustrator】リフレクトツールを使った反転と反転コピーの方法【脱イラレ初心者】

イラレで反転コピーと連結はよく使います。
基礎操作から応用まで徹底解説しておりますので、併せてチェックされてみませんか？

商用利用可能な高品質ロゴ素材

商用利用可能でそのまま使える超高品質なロゴ素材です。
全てIllustratorで編集可能なベクター画像なので汎用性バツグン！
ファビコンをはじめとしたロゴ素材として最適ですよ。

#01 Modern Minimal Vector Logo for banner

企業のロゴとしてそのまま使えるクオリティのロゴセットです。ベクター画像なので拡縮しても劣化無し！

ダウンロードする

#02 Abstract business logo set.

汎用的で高品質ななアブストラクト系のロゴセットです。
イメージが無いから何にしようか悩む…そんな方はこういった抽象的なロゴがオススメです。

ダウンロードする

#03 Abstract logos mega collection with letters.

無加工でそのまま使えるレベルのロゴセットです。

ダウンロードする

#04 Big Set of various vector highlight covers.

丸型のカワイイロゴセットです。女性的なイメージの表現に適しています。

ダウンロードする

#05 Creative, digital abstract colorful icons

ポリゴン（三角形）で構成された図形のアイコンです。ビビッドカラーで小さなファビコンに適したグラフィックです。

ダウンロードする

#06 Set of vector logo design template. Black monogram. Hexagon icons

シンプルな形状ですが、キッチリ作るには様々なイラレテクニック（主に回転ツール）が必要な図形です。
「ちゃんと使える人」で無いと作れないですよ。
小さなファビコンでも視認性抜群！

色替えは誰でも数クリックで可能です。

ダウンロードする

#07 The image of a cougar or panther.

カッコいいヒョウの横顔がモチーフのアイコンです。
サイトのファビコンだけでなく、名刺に載せてもカッコいいですね。

ダウンロードする

#08 Brain, Creative mind, learning and design icons, logos. Man head, people symbols - stock vector

人の頭や目、心などをアイコン化したグラフィックです。
形状だけでなく色使いも非常にハイレベルで高品質な仕上がりです。

ダウンロードする

#09 Mega Set and Big Group, Real Estate, Building and Construction Logo Vector Design Eps 10

企業のロゴとしてそのまま使えるレベルのアイコン210個セットです。
どれを選んでも形になります。

ダウンロードする

#10 Green tree logo original design set of vector Illustrations in green colors

木がモチーフのアイコンセットです。
木は何かと汎用性が高いモチーフなので、迷ったらコレを選択するのもアリですね。

ダウンロードする

高品質なテンプレート素材を活用しよう

他にも制作を劇的に効率化できる素材を紹介しております！

【商用可】高品質なロゴのテンプレート50選【Illustrator・Photoshop】

クリエイティブ業務で使える優良素材まとめ

ワンランク上のテンプレート素材

Illustratorのスキルアップをする上で、プロが作成した生データを研究する事は重要です。

下記記事でプロが作成した高品質で汎用性の高いテンプレート素材を紹介しています。
全て商用利用可能、テキストや画像を変えるだけでプロの品質が出せます。

制作の手間を劇的に軽減するだけでなく、スキルアップの教材としても活用できますよ！

AI形式で作られた高品質なフライヤーのテンプレート50選です。画像と文字を差し替えるだけ、超短時間でハイクオリティなフライヤーが作成可能！
様々なフライヤーのテンプレート50選

デザイン制作を学ぶ導入編としてオススメの名刺デザイン。
想像だけで作るとイマイチになりがちですが、良質なテンプレートを元に作るだけで吸収できる情報の質が段違い！
相手に舐められない名刺テンプレート50選

例えばクリエイターの就職や転職に必須のポートフォリオ。
プロのテンプレートでレイアウトや余白、文字サイズを簡単に研究可能。内定獲得の可能性が格段にアップします！
厳選！ポートフォリオ用テンプレート40選

ロゴ作成とIllustratorの相性は抜群！
ロゴ制作の効率化だけでなく、アイディアやデータの作り方を学習・研究するための良質な教材だらけですよ。
ハイクオリティなロゴテンプレート50選

単なる白黒のテキストを高品質なロゴのようなグラフィックにできるエフェクトです。
ロゴ・見出しなどキャッチなオリジナルタイトルを一瞬で作成できる優秀な素材ばかり！
商用利用が可能で高品質なテキストエフェクト50選

継ぎ目が無い高品質な背景素材50選です。
全て商用利用OK！作品の密度を一気に高める事ができる汎用性の高い素材ばかりです。
商用利用できる高品質なシームレス背景パターン58選

良質な素材をもっと見る

上記で紹介しているテンプレートはごく一部。
下記記事で良質な素材を紹介しております。併せてチェックしてください！

クリエイティブ業務で使える優良素材まとめ

【最強素材サイト】Adobe Stockのテンプレートがチート級に便利な件について

おわりに

以上、Illustrator（イラストレーター）を使ったファビコン制作パターンについてでした。

大きく分けて文字ベースや基本図形ベース、そして完全オリジナルのパターンがあります。
サクッと既存フォントを使って作ってしまう方法が一番手っ取り早いです。
デザインにこだわりたい方はペンツールを使ってオリジナルのファビコンを作ってみましょう！

ではまた！

InDesignは活用されていますか？

Illustratorだけでなく、InDesign（インデザイン）も活用されているでしょうか？
ポートフォリオ制作はイラレよりInDesignの方が効率的に作成できます。
まだInDesignを導入されていない方はAdobe公式サイトから入手できます。
高品質で商用利用可能なポートフォリオテンプレート40選はコチラ！

Illustratorの操作方法

イラレ基本操作