【個人開発】AffinityでSNSアイコン・faviconを自作する方法
概要
こんにちは、Tea☕️ です。
サービスを個人開発するときの大きな悩みの1つは、デザイナー不在なことだと思います。
最近Webサービスを個人開発をしていて、サービスを宣伝するための SNSアカウントを作りました。
運用を始めるにあたりアイコンが必要なのですが、画力もデザイン力もないので悩んでいました。
ただ、依頼をする資金力もないので、無料化で話題になった Affinity が気になっていたので、試しに使ってみました。
2時間かけて完成したのがこちら。意外と良い雰囲気になりました。
今回は、デザインができず諦めかけている方に向けて、上記のような、文字と背景で簡単なアイコンを作る方法をご紹介します。
前提
- M1 Mac Sonoma 14.4
- Affinity: v3.0.2
- Next.js v15
SNSアイコン・favicon作成のステップ
下記の流れで説明します。
- アイコンのテイストを決める
- Affinity のインストール
- 簡単な使い方・設定
- Affinity でのアイコン作成 Tips
- PNG出力したあと、favicon に変換する方法
- Next.js での設定方法
0. アイコンのテイストを決める
すでに決まっている方は飛ばしてください。
アプリのアイコンは、大まかに2種類に分けられます。
- イラスト主体
- 例：Chrome, Slack, Discord, Docker など
- 文字主体
- Netflix, Notion, LINE, Affinity
イラスト主体は、画力がないエンジニアには目指せませんが、文字主体なら結構シンプルでもサマになります。
その前提で、自分のスマホでアプリ一覧を眺めて、下記を決めると進めやすいと思います。
- メインの色
- 手本にしたいアイコン
1. Affinity のインストール
Affinity は、Canva が提供する Webデザイン・画像編集ツールです。
Affinity の公式にアクセスし、ダウンロードします。
サインアップが求められますが、現時点では無料で使えるので、登録しましょう。
インストールして Affinity を開き、動画を見れば使い始められます。
下記の画面で、右上から新規作成をします。用紙サイズを聞かれますが、適当でOK。
開くと、下記のエディタが開きます。これがメインの作業画面です。
左上にある通り、Affinity には 3つのツールがあります。
- ベクター：Webデザインツール。ロゴや雑誌の表示など
- ピクセル：写真編集ツール。写真のレタッチや加工など
- レイアウト：複数ページあるようなデザインを作るツール
今回は、ベクターだけを使います。
2. 簡単な使い方
まずは画面の説明をします。
今回使う範囲は、大まかに4つです。
- ツール切り替え
- ベクター/ピクセル/レイアウト の切り替え
- オブジェクト追加
- 図形や文字、グラデーションなど、オブジェクトの追加
- 色・影・装飾
- 色の変更・エフェクト・サイズや座標の調整など
- オブジェクトが表示される場所
- オブジェクトの選択や削除、表示の確認
Affinity でのアイコン作成は、下記の流れで作業をしていきます。
- ツール切り替えで、ベクターを選択
- オブジェクトから、アートボードを追加
- オブジェクトから、文字や図形を追加し、アートボード内に配置
- 色や影をつけて装飾
- PNGでエクスポート
アートボードとは
アートボードとは、デザイン1つの領域の単位です。（多分）
文字や図形は、アートボードに紐づけて（上に載せて）配置していきます。
例えば、アスペクト比 1：1の正方形でアイコンを作るなら、1：1のサイズでアートボードを作ります。
アートボード単位でエクスポートできるので、基本はアートボード1つがそのまま完成形になるようデザインしていきます。
やり方は簡単で、左のサイドバーの上から2つ目で、アートボードを選び、ドラッグアンドドロップするだけです。
アスペクト比を固定したい場合は、アートボードを選択して、左下から数値を直接指定できます。
W → 横幅、H → 縦幅です。
単位はエクスポート時にピクセル数を指定できるので、あまり気にせず、1：1になればOK
透過設定
円形のアイコンにしたい場合、背景は透過させる必要があるので、先に設定をします。
上部の Mac のメニューバーから、ドキュメント > 設定 > 背景を透過 にチェックをつけます。
これで、アートボードの背景が透明になりました。
作業の保存
Affinity は、.af 形式で編集状態を保存できます。
command + s で保存できるので、こまめに保存することをおすすめします。
使い方・設定は以上です。
ここからは、具体的な作成方法を紹介していきます。
3. Affinity でのアイコン作成 Tips
それっぽいアイコンを作るために、下記のステップで進めていきます。
- 背景を円形にする
- 背景色にグラデーションをつける
- 文字の追加・フォント変更
- 文字を光らせる・影をつける
- 図形を挿入する
背景を円形にする
最初の設定の際に、四角のアートボードを作ったはずです。現在は透過された背景になっていると思います。
このアートボード上に、オブジェクトを追加します。
左のサイドバーから、「長方形ツール」 を押下し、丸のオブジェクトを選択
そして、アートボード同様に、ドラッグしてアートボード上に円形で作成
次に、左下で座標とサイズ調整をします。
W,H をアートボードと同じサイズにして、X,Y（座標） を 0 にすれば、アートボードと同じ幅の円が作成できます。
次に、背景色をつけてみます。
丸のオブジェクトを選択して、右側の「カラー」を開くと、カラーパレットが出てきます。
ここで、色を変更できます。今回は青系にしました。
これで円形の背景は完成です。
背景色にグラデーションをつける
背景が単色だと味気ないので、グラデーションをつけてみます。
ベクターでのグラデーションは、範囲を決める直線を引いて、その範囲で設定した色のグラデーションをつける、というやり方を取ります。
まずは、左のサイドバーから、「塗りつぶしツール」を選択します。
直線が引けるようになるので、ドラッグで、グラデーションの始点→終点まで線を引きます。今回は、円の左上→右下に引いてみました。
これで、グラデーションがつくのがわかると思います。
線の真ん中にカーソルを合わせて動かすと、グラデーションの形を調整できます。
色を変えたい場合は、「レイアウト」の下あたりのカラーパレットを押すと、細かく編集ができます。
文字の追加・フォント変更
続いて、文字を追加します。今回は、「X」1文字のロゴを作っていきます。
まずは、左のサイドバーから「テキストツール」を選択し、アーティスティックテキストツールを、ドラッグで追加します。
その後、テキストを入力して、拡大・縮小でフォントサイズを調整します。
アートボード同様、色は右のカラーから編集できます。
フォントを変えたい場合は、右上からプリセットのフォントを自由に選ぶことができます。
文字を光らせる・影をつける
次は、文字をリッチにするため、エフェクトをつけていきます。
簡単に光らせたり、影をつけるには、クイックエフェクトが便利です。
右のサイドバーから、「クイックエフェクト」を開きます。
光らせたい場合は、「外側の光彩」 にチェックをつけます。
半径を大きくして、カラーを変えると、文字の周囲が光ります。
影をつけたい場合は、「外側のシャドウ」 にチェックをつけます。
半径を大きくして、オフセットを大きくしてずらすと、影がつきます。
（影が綺麗に見えなかったので、フォントを変えています。）
他にも、アウトラインで縁をつけたり色々できるので、気になる方は試してみてください。
図形を挿入する
文字だけだと寂しいので、何か図形で装飾をしてみます。
最初に丸を追加したときと同じように、長方形ツールから追加します。
今回はなんとなく、丸を3つ、Xの右下に繋げてみました。
長方形オブジェクトも、文字と同様、クイックエフェクトが使えます。
デザイン力がある方は、色々カスタマイズしてみてください。
最後に、エクスポートする
完成したら、エクスポートしてみましょう。
デジタルデータだけの場合や、透過したい場合は、PNG が適しています。
右上の「PNGをエクスポート」の右の「▼」を押すと、設定が変更できます。
画像サイズは、Twitter用アイコンなら、400×400px が推奨されています。
favicon用なら、600pxなど少し大きめに書き出すと、粗くなりづらいと思います。
任意の px数を指定して、「書き出す」を押すとエクスポートできます。
エクスポート結果がこちら。
これで、アイコン作成は完了です！🎉
あとは、SNS等でアイコンに設定すれば完成です。
最後に、favicon の作り方をご紹介します。
4. PNG出力したあと、favicon に変換する方法
favicon は主に、.ico 形式です。
推奨サイズがブラウザによって変わりますが、一気に色んなサイズに変換して出力してくれる便利なサイトがあります。
筆者は、無料の Favicon.io で変換しました。
使い方は簡単で、サイトにアクセスして、エクスポートしたPNGを置いて、出力された zip をダウンロードするだけです。
あとは、Next.js なら、既存の favicon.ico を変更すれば完了です。
RGBA 方式ではない、とエラーになる場合
色形式は色々ありますが、RGB と RGBA は別の形式です。
A は不透明度を表し、透過などに必要です。
favicon に設定する元の PNG が RGBA 形式でないとエラーになる場合があります。
Affinity では、エクスポート時に RGBA を選択する方法は見当たりませんでした。
ただ、透過の設定をONにしていれば、自動で RGBA になるので、できない場合は設定を見直してみてください。
まとめ＆宣伝
最後まで読んでいただき、ありがとうございました。
Affinity を使った、SNSアイコンや favicon 作成のご参考になれば幸いです。
今回紹介したアイコンは、下記のTwitterアカウントでサービスの宣伝に使っています。
2026年1月1日リリース予定なので、気になる方はよければフォローをお願いします。
普段は、下記のアカウントで、日々学びを投稿しています。こちらもよければぜひ。
Affinity は現時点では無料で使えて、少し触る程度ならオーバースペックすぎるほどいろんなことができそうです。
今後も、SEO用のOGPや、宣伝用画像を作って活用していこうと思います。
ありがとうございました。
Discussion