pixivのアイコンサイズはどのぐらいの大きさがいいの？
アイコンをキレイに見せたり調整する方法ってないのかな？
こう悩んでしまう人に向けて、アイコンの大きさや最適化についてなど、絵描き＋Webサイト制作者の観点から詳しく解説します。
これはpixivのみならず、X（ツイッター）やブルースカイ、インスタグラムなど、どこのSNSでも使える考えかた・やりかたであるため、この機会に覚えてもらえれば幸いです。
追 記
2017年に投稿した記事ですが、需要がある内容のため2025年に内容を革新しました。正確な情報を求む
誤りがあればご連絡ください
アイコンサイズはどのぐらいがいいのか
© 2007- pixiv
赤竹ただきち｜pixiv
前提知識としてアイコン画像は、想定よりも大きめ（縦横2倍）で用意してください。
これは2020年以降のスマホ・PCは解像度が非常に高精度になっていて、小さいサイズ・等倍の大きさだと画像が解像度と釣り合わずに劣化し、ボケボケの印象になってしまうからです。
- 【正方形推奨】1：1の正方形で用意。長方形だと意図どおりにならない可能性あり。
- 【2倍計算】250px × 250pxなら、500px × 500px 以上の画像を用意。
- 【高画質画像の使用】劣化していない高画質データにする。
- 【密度】可能なら密度がある画像で選定。シンプルだと処理で汚くなるリスクあり。
- 【塗り足しも考慮】枠線つきなら、表示領域を想定して塗り足すよう感じにする。
- 【著作権考慮】著作権フリーや自作、利用許可がされた公式画像を使うこと。
Macのパソコンでよく聞く「Retinaディスプレイ」とは｜PCホスピタル
各SNSのアイコンサイズ比較
大きさのサービス比較
2025年現在、有名SNSサービスのアイコンサイズは以下になります。
- 『pixiv』
→ PC版：約100px × 100px
→ スマホ（ブラウザ）版：約80px × 80px - 『X（ツイッター）』
→ PC版：約134px × 134px
→ スマホ（ブラウザ）版：約68px × 68px - 『ブルースカイ』
→ PC版：約90px × 90px
→ スマホ（ブラウザ）版：約90px × 90px - 『インスタグラム』
→ PC版：約150px × 150px
→ スマホ（ブラウザ）版：約77px × 77px
サービスのシステム処理で少なからず劣化する可能性もありますが、500px × 500pxで出しておけば、どこのSNSでも使えて安全でしょう。
汚く見える場合、劣化した画像を使っていないか、500px以下の画像ではないか要チェック。
プロフィールアイコンをFigmaで作る方法
ここからはブラウザでも使える無料デザインソフト『Figma』を使って、プロフィールアイコン画像を作成する手順を述べていきます。
細かくこだわらないですぐ作りたい、スマホでやる場合は、画像切り抜きアプリやジェネレーターサイトを使えばすぐ作成できるので、状況によって使い分けてもらえればと思います。
Figmaは2025年8月現在の画面、使用ブラウザはChrome138です。
スクエア画像 – 画像をスクエアに変換｜SQUARE PHOTO
インスタ用に画像を正方形に加工して保存｜yypark.com
1. Figmaでアカウント作成・もしくはログイン
Figma日本版公式サイト｜Figma
Figma公式サイト右上にあるアカウント登録、もしくはログインをおこなってください。
登録はGoogleアカウントを使えば簡単です。
2. 新規プロジェクトの作成
ログインできたら画面左の「すべてのプロジェクト」を選択し、青丸のボタンを押してください。
そのとき、もし「WebGLが有効になっていません」が出た場合はChrome設定で『グラフィック アクセラレーションが使用可能な場合は使用する』にチェックを入れましょう。
WebGLが使えない時の対処法｜esorabridge｜岐阜のデザイン事務所
3. 500px × 500pxの正方形を作成
画面下のツールバーから、ペンツールの左にある図形アイコンを選択して長方形を選び、作業画面内をクリックして長方形を作成してください。
長方形の大きさは長方形を選択した状態で画面右の「レイアウト」から選択できるので、
- W（横幅） → 500
- Y（縦幅） → 500
上記の数字を半角入力で設定しましょう。
4. 切り抜き確認用の円図形を作成
同じ要領で、次は「楕円」から円を作成します。
線だけにする場合は、画面右の「塗り」にある目アイコンを押して非表示にした後、「線」の「＋」を押すことで線だけの図形ができます。
色はわかりやすければ、なんでもOKです。
5. アイコンに使う画像を用意して正方形と重ねる
画面に使いたい画像をドラッグ＆ドロップすればFigmaに画像を配置できます。
「顔」などの部分パーツをアイコンにする場合、それだけ大きい画像を必ず用意してください。
たとえアイコンの大きさに問題がなくても、使う画像自体が小さければ意味がありません。
画像を動かし長方形と重ね、画像を右クリック（MacはCtrl+左クリックも可）して「最前面へ移動」で、長方形の上に画像を置いてください。
そこからShiftキー＋クリックか、画像と長方形があるエリアをドラッグで囲むことで2つが選択されるので、再度右クリックを押して「マスクとして使用」をクリックしましょう。
補足1：枠線つきアイコンにする場合
枠線つきのアイコン画像を作りたい場合はマスクをする前に、
- 枠線
- アイコンに使う画像
- 正方形（マスク）
このように上から順番に並べておきましょう。
補足2：マスク操作を変えたい場合
マスクに使う図形は画像の上のほうがいいんだけど。Figmaだと順番逆なのが気になる……
PhotoshopやIllusrtator、XDのようにマスクを一番上に配置したい場合は、有志の方がプラグインを用意されているので、そちらを使いましょう。
XD経験者がFigmaで戸惑いやすいポイントとその対処法｜Raccoon Tech Blog
upper-mask｜Figma
Figmaのプラグインのインストール方法と使い方｜wentz-design.com
6. 収まるように位置調整
マスク化が完了したら「4」で作成した円を最前面に配置し、画像をダブルクリックして位置や大きさを調整していきます。
補足：枠線つきアイコンの場合
枠線つきの場合、ガイド線で作った丸の内側・外側に枠線の塗りが重なるよう調整してください。
7. 完成・保存
調整が終わったら丸をどけてアイコン画像を選択し、画面右下の「エクスポート」から、
- 1x（等倍の大きさで書き出し）
- png（基本的にpngで問題なし）
上記を設定して、「〇〇をエクスポート」で保存すればアイコン画像の完成です。
最後に：アイコン画像は自分の顔
以上、pixivのみならず、プロフィールアイコンの大きさ目安や作成手順をご紹介しました。
絵の技量の目安か、万人ウケにするのか、好きな作品・キャラクターを使うか、ネタに走るのか……どんなアイコンにするかは個人の趣向・意図に左右されるものの、アイコンは自分の顔です。
ボケボケで崩れた画像より、整った画像のほうが印象いいですからね。履歴書の顔写真が丁寧で整った写真ほど好印象なのと似た理屈です。
たかがアイコンされどアイコンで、気にしない人はしない部分だから、こだわる価値があります。
「自分の分身」と言ってもいい。その人の人格・個性が出るからね。
