超簡単!自分でファビコンを作ってみよう!

ファビコン作成記事 サムネイル

『ファビコン』は、そのサイトのシンボルマークです。

Webページを開いたときに、ファビコンがあるとわかりやすくなります。
また、ブランディングにも効果的なファビコンは、設定しておいた方がいいと言われています。

しかし、ファビコンの作り方がわからないと思った方は多いのではないでしょうか。

今回は、誰でも簡単に作れるアイビスペイントを使ったファビコンの作成方法と、また、WordPressに設定する方法もあわせて解説します。

パソコンが苦手な方はもちろん、イラスト作成が苦手な方でも大丈夫です。

ぜひ参考にしてください。

それではさっそくはじめましょう!

もくじ

『ファビコン』とは?

ファビコンとは、ブラウザーのタブに表示されるアイコンのことをいいます。

ファイビコン解説画像

ファビコンの役割とは?

Webページを何枚も開くと、どのページだったかわからなくなるときがあります。

そんなときに役立つのが「ファビコン」です。

タブに、文字よりもわかりやすい絵がついていると、ページに迷うことがありません。
また、お気に入りに登録したときも、サイトが見つけやすくなります。

つまり、「ユーザーのことを考えたやさしいサービス」といったところでしょう。

ファビコンを作る前の準備

ファビコンは簡単に作れます。

今回は、誰でも使えるペイントソフト「アイビスペイント」と「iPad」を使って、
作り方をご紹介します。

アイビスペイントは無料で使えるペイントソフトなので、まだもっていない方は、ダウンロードするといいでしょう。

また、別のペイントソフトでも、基本的なやり方は同じなので、参考にしてくださいね。

ファビコンの作成のポイント

ファビコン作成のポイントは、「シンプルで目立つデザイン」にすることです。

それでは、ポイントを参考にファビコンを作ってみましょう。

今回はこんな感じのファビコンを作ってみます。

512×512ファビコン参考画像

ファビコンの作り方

それでは、実際に作ってみましょう。

STEP
アイビスペイントを起動し、画面右上の「+」マークを押して新規作成画面を出します。
STEP
サイズを「512×512」に設定してください。
STEP
「OK」ボタンを押します。
アイビスペイント 新規作成
STEP
④好きな色を選択します。
アイビスペイント カラーパレット
STEP
⑤好みのブラシを選択し、ブラシを太く設定し、不透明度は100%にしてます。
アイビスペイント ブラシ設定
STEP
ペンでキャンバスを押すと、絵が入ります。画面下の「移動拡大縮小」で形を整えてください。
アイビスペイント 移動拡大縮小
STEP
絵の角度をかえたいときは、画面右下の「回転した矢印マーク」を押します。
アイビスペイント 画像回転
STEP
色の調整などは、画面左側の「フィルター」を使います。
今回は参考として、色のバランスを整える「カラーバランス」をしてみます。
アイビスペイント フィルター
STEP
カラーバランスを選択後、右側に表示されるメニューを使って、好みの色に調整してください。
アイビスペイント カラーバランス
STEP
文字を入れたい場合は、左側のメニューから、「文字入れ」を選択します。
画面中央に「文字追加」の枠がでるので、そこを押して文字を入力してください。
文字を入れな方は、この作業はスキップしてください。
アイビスペイント 文字入れ
STEP
好きなフォントを選んで、文字を入力します。
アイビスペイント フォント選択と詳細設定

アイビスペイントのフォントは、以下の設定ができます。

・サイズ=大きさいの変更

・スタイル=文字の色、ふちどりの追加や変更

・背景=文字の背景の大きさ

・文字間隔=余暇幅の間隔変更

STEP
背景を入れたい場合は画面右上のアイコンから「素材」を選択し、好みの背景を入れてください。
※素材を入れる場合は、レイヤを新規追加しなくても自動でレイヤごと追加されます。
背景を入れない方は、この作業はスキップしてください。
アイビスペイント 背景選択
STEP
統合して保存すると、元に戻せなくなるため、統合前に予備を複製します。
画面右下の「←」を押して、保存を押さずに、「マイギャラリーに戻る」を選択します。
アイビスペイント 複製方法1
STEP
⑭画面右上の「・・・」から、「作品を複製」を押してください。
その後、左上の「戻る」を押して、ギャラリーを確認します。
アイビスペイント 複製方法2
STEP
ギャラリーに同じ絵が複製した分あれば、OKです。
それでは、作業を再開するため、 編集する絵を押して、画面が切り替わったら、右上の「編集」を押してください。
アイビスペイント ギャラリー画面
STEP
レイヤを統合します。
表示されているレイヤ右横の「↓」を押すごとに、上から順番に統合されていきます。
レイヤが1枚の場合はこの作業は必要ありません。
間違った場合は、戻るボタンを押せばもとに戻せます。
アイビスペイント 統合
STEP
背景がなく、ロゴだけで保存したい場合は、透過PNG保存を選択、背景がある場合は「PNG」保存を選択します。
今回は、背景があるので、「PNG保存」を選択しました。
保存ができたら、「マイギャラリーに戻る」を選択します。
アイビスペイント 保存方法
STEP
書き出す保存形式を選択します。今回は「画像(PNG)」を選択します。
アイビスペイント 書き出し先選択方法
STEP
保存先を選択して完成です。
アイビスペイント 保存先選択画面

WordPressにファビコンの設定をする

今回は、WordPressに設定する方法をご紹介します。

WordPressダッシュボードを開き、左側のメニューから、「外観」→「カスタマイズ」の順で選択します。

WordPress 外観とカスタマイズ

画面が切り替わったら、「サイト基本情報」を選択します。

WordPress サイト基本情報

「サイトアイコンを選択」を押してください。

ファビコンに使いたい画像をアップロードします。

WordPress 画像選択画面

代替えテキストを入力して、右下の「選択」を押します。

WordPressファビコン設定画面

「公開」を押したら設定完了です。
自分のサイトのタブにファビコンが表示されているか、確認してください。

WordPress サイトフのァビコン 公開

まとめ

今回は、ファビコンの作り方とWordPressに設定する方法をご紹介しました。

応用として、スマホで撮った写真をそのまま画像として挿入するだけでも、簡単にファビコンは作れます。

重要なのは、あまり凝ったデザインにしないことです。

シンプルでわかりやすいデザインをポイントにして、ぜひ、オリジナルのファビコンを作ってくださいね。

それでは、今回はこのへんで!

ご覧いただきありがとうございました。


人気ブログランキング
ファビコン作成記事 サムネイル

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

コメントは日本語で入力してください。(スパム対策)

CAPTCHA

もくじ