アイコンフレーム作成

計算方法

要点：プロフィール画像（アイコン）にフレームを付けます。円に沿って文字が入る色付きリング、円の一部だけを覆うカーブ帯（「採用中」アイコンでおなじみのデザイン）、角を斜めに横切る帯（黒い喪章など）の3種類です。できあがるのは正方形のPNGで、各SNSが自動で丸く切り抜きます。

使い方

1. 写真をドラッグするか、選択するか、Ctrl + V で貼り付けます。最初は見本の写真で仕上がりを確認できます。
2. キャンペーンを選ぶ（文字・フレーム・色を自動設定）か、文字、リング・帯・角の帯、位置、配色、フォント、太さを自分で設定します。
3. マウスや指で位置を調整し、ズームで拡大します。
4. 「アイコンを保存」で1080・800・400ピクセルのPNG（周囲は透過）またはJPGに保存します。

なぜ正方形？サイズは？

WhatsApp、LinkedIn、Instagram、Facebook、TikTokは、プロフィール画像を正方形で保存して円形で表示します。そのためフレームは正方形に内接する円の中にぴったり収めています。はみ出た部分はどのみちSNS側で切り取られます。LinkedInは400×400ピクセル以上（最大8 MB）を求めており、1080ピクセルなら高解像度の画面でも安心です。

どんな背景でも読みやすく

文字色は、フレームの色に対してWCAG基準のコントラストが高くなる方（白またはほぼ黒）を自動で選びます。レインボーのように色の変化が大きく、どちらの色でも十分なコントラストが取れない場合は、細い縁取りも付けます。円に沿った文字は1文字ずつ配置し、長すぎるときは自動で小さくします。日本語の文字は端末のシステムフォントで表示されます。

できないこと

フレームは画像の一部です。LinkedInの転職活動中・採用中の公式機能とは連動しません。コメント欄のような小さな表示では長い文字は読みにくいので、2〜3語程度がおすすめです。丸く切り抜くだけなら画像を丸く切り抜きをご利用ください。

プライバシー

写真はブラウザ内だけで処理され、送信されません。記憶するのは文字と設定だけで、写真は保存しません。見本の写真はローカルで生成したもので、実在の人物ではありません。

ほかにも：四角い写真には画像に枠を追加、告知用の投稿にはインスタ投稿テンプレート。

よくある質問

出典・根拠

• LinkedInヘルプ – プロフィール写真：400 × 400〜7680 × 4320ピクセル、最大8 MB
• W3C – WCAG 2.2: 相対輝度とコントラスト比(文字色の選択)
• MDN – CanvasRenderingContext2D.createConicGradient() （リングに沿った色のグラデーション）
• SIL Open Font License 1.1 – グラフィックでのフォントの利用
• W3C – Pointer Events Level 3 (Ausschnitt verschieben per Maus, Stift, Finger)
• ITU-T T.81 / ISO/IEC 10918-1 – JPEG
• W3C – Portable Network Graphics (PNG) Specification
• Google for Developers – An image format for the Web (WebP)
• AOMedia – AV1 Image File Format (AVIF)
• MDN – Image file type and format guide
• MDN – HTMLCanvasElement.toBlob()

更新日：2026年10月1日 · 編集方針