Figmaでロゴ作れるらしいけど、難しそうだな・・・。
と思っていたのですが、超簡単に作れました。
ノンデザイナーがFigmaでファビコンを作る方法を説明して行きます。
今回は、画像を型取って作成していきます。
準備するもの
- Figmaのアカウント（登録方法は割愛させていただきます）
- 画像（加工しても良いフリー画像など）
- 画像透過できるツールなど
完成形
完成形はこちらになります。
作成してみよう
アイコンの元となる画像を探そう
今回は「いらすとや」から画像を取ってきました。
既に背景透過されている画像か、シルエットの型取りやすい画像を探してきます。
織田信長様をベースにしたファビコンを作成して行きます。
※画像を取り扱う際は利用規約を確認して使用するようにしましょう。
画像を透過する
背景透過されていない画像を選んだ場合は、背景透過させましょう。
背景透過のサービス（removebgなど）を利用するか、Illustratorなどのアプリを使いましょう。
Macであればデフォルトで入っているプレビューで背景透過ができます。
下記に詳しく掲載されているので参考にしてみて下さい。
Figmaで作ってみよう
基本操作については割愛させていただきます。
「New design file」から新規で始めていきましょう。
Frameを選択します（左上の#のようなマーク）
右の選択欄から「Social media」→「Instagram post」（1080×1080）を選択します。
するとフレームができます。このフレーム上で作業して行きましょう。
まず、ベースとなる円を作成します。
左上の四角をクリック→円形のものを選択し、フレーム上に配置します。
右のデザインタブでサイズを調整します。（W: 1000 Y: 1000）
中央に配置すると縦横に赤いラインが現れるので、それに合わせます。
作成した円をコピー&ペーストして3つに複製します。
先ほど選択した左上の四角（円のマークに変わっていると思います）をクリックします。
「Place image」を選択し、アイコンの元画像を選択します。
そして円を選択します。画像が反映されました。
画像を２番目に持ってきます。左の画像アイコンをドラック&ドロップで移動できます。
画像と、一番上の円を選択し、右クリック「Use as Mask」を選択します。
何も変わっていないように見えますが、「Mask Group」に2つ入っているのを確認します。
「Mask Group」内にある一番上の円を選択し、右の「Design」→「Fill」からカラーを変更します。白くしたいので、「FFF」と入れてみましょう。
すると、織田信長様が浮かび上がって来ました。
後は、好きな色を選択して完成です。今回は赤を選んでみます。
一番下の円を選択し、「Design」→「Fill」からカラーを変更します。
完成しました。エクスポートしていきます。
左上の「Instagram post – 1」を選択し、右下の「Export」→PNGを選択→「Export Instagram post – 1」をクリックします。エクスポート完了です。
画像を透過すると同じようにエクスポートした画像を透過していきます。
画像をファビコン化する
ファビコンを作れるサイト（ファビコン favicon.icoを作ろう!）などで画像を「favicon.ico」にしていきます。
状況によっては変更しなくて良い場合もあります。
ファビコンの完成です！！！
