visual-content

コンテンツ：ビジュアルコンテンツ

ウェブサイト、ソーシャルメディア、メール、その他のチャネルにおけるビジュアルコンテンツの企画と制作を支援します。画像が必要なのはウェブサイトだけではありません。ソーシャル投稿、インフォグラフィック、再利用するコンテンツにも、すべてビジュアルが必要です。コンテンツカレンダーでビジュアルを優先して計画するとエンゲージメントが高まり、複数チャネルでの一貫性と再利用によってROIを最大化できます。

呼び出し時：初回利用時は、役立つ場合、まずこのスキルの対象範囲と重要性を1～2文で説明してから、主な出力を提示してください。2回目以降の利用時、またはユーザーから省略するよう求められた場合は、最初から主な出力を提示してください。

範囲

• 画像を使う場面：コンテンツの種類と形式に応じた使い分け
• 用途別の仕様：ウェブサイト、ソーシャル、メール
• プラットフォーム別の画像仕様：X、LinkedIn、Pinterest、Instagram、Facebook、YouTube
• 再利用：1つのビジュアルを複数の形式やチャネルで活用
• ビジュアル優先の計画：画像の計画を含むコンテンツカレンダー

初期評価

プロジェクトのコンテキスト： contextus.md がルートにある場合は読み込み、このタスクに関連するモジュールのみを読み込んでください。Contextus がない場合は、利用可能なプロジェクト資料やユーザーから提供された情報を使い、不足している情報を尋ねてください。別のコンテキスト管理システムを作成しないでください。

以下を特定します。

1. コンテキスト：記事、ソーシャル投稿、インフォグラフィック、メール、ランディングページ
2. チャネル：このビジュアルを使用するプラットフォーム
3. 再利用：このビジュアルを他の形式に合わせて調整するか

---

1. 画像を使う場面

コンテンツの種類	ビジュアルの必要性	備考
記事／ブログ	ヒーロー画像、記事内画像、スクリーンショット	ウェブ向けの最適化（alt、WebP、LCP）については image-optimization を参照
ソーシャル投稿	単一画像、カルーセル、リンクプレビュー	プラットフォーム固有の仕様は以下を参照
インフォグラフィック	主な形式。データの可視化	ソーシャル向けに再利用（トリミング）、ブログ向けに再利用（全体）
ケーススタディ	顧客の写真、成果グラフ、ロゴ	LinkedIn のカルーセルやブログ向けに再利用
製品アップデート	スクリーンショット、機能紹介用画像	変更履歴、メール、ソーシャル
メール	ヘッダー画像、インライン画像	軽量に保ちます。多くのクライアントで画像がブロックされます
ランディングページ	ヒーロー画像、信頼バッジ、スクリーンショット	hero-generator、image-optimization を参照

---

2. ウェブサイト、ソーシャル、メールの比較

コンテキスト	優先事項	スキル
ウェブサイト	alt テキスト、WebP、LCP、レスポンシブ対応、遅延読み込み	image-optimization
ソーシャル投稿	プラットフォームごとの寸法、アスペクト比、ファイルサイズ	プラットフォーム別スキル（X、LinkedIn、Pinterest など）
OG／Twitter Cards	1200×630、リンクプレビュー用の 1200×675	open-graph、twitter-cards
メール	インライン表示に対応。容量の大きい画像は避け、ブロック時に備えて alt を設定	email-marketing

---

3. プラットフォーム別の画像仕様（ソーシャル）

プラットフォーム	投稿画像	ストーリーズ／リール	プロフィール	備考
X (Twitter)	1200×675（16:9）、800×800	—	400×400	twitter-x-posts を参照
LinkedIn	1200×627、1200×1200。カルーセルは最大20枚	—	400×400	linkedin-posts を参照。モバイルでは縦長が推奨
Pinterest	1000×1500（2:3）	—	165×165	alt テキストでインプレッションが約25％増加。pinterest-posts を参照
Instagram	1080×1350（4:5）、1080×1080	1080×1920（9:16）	320×320	フィードでは4:5が正方形を上回ります
Facebook	1200×630、1080×1080	1080×1920	320×320
YouTube	サムネイル 1280×720	—	800×800

一般事項：幅1080pxであれば、ほとんどのプラットフォームで使用できます。モバイル中心のフィードでは、正方形より縦長（4:5、9:16）のほうが効果的です。重要な要素（ロゴ、テキスト）は安全な中央の範囲に配置してください。プラットフォームによってはトリミングされる場合があります。

---

4. ビジュアルの転用

原則：1つの基本ビジュアル → 複数のトリミング／フォーマット → 複数のチャネル。

基本ビジュアル	調整方法	チャネル
インフォグラフィック	全体版（ブログ）、切り抜いたセクション（Instagram、LinkedInのカルーセル）、正方形（X）	ブログ、LinkedIn、Instagram、X
事例紹介用グラフィック	ヒーロー画像（ブログ）、1枚のスライド（LinkedIn）、ストーリー（Instagram）	ブログ、LinkedIn、Instagram
製品のスクリーンショット	ヒーロー画像（ランディングページ）、投稿（X、LinkedIn）、メールヘッダー	ウェブサイト、ソーシャルメディア、メール
引用グラフィック	正方形（X、LinkedIn）、4:5（Instagram）	X、LinkedIn、Instagram

ワークフロー：必要な最大サイズでデザインし、各プラットフォームに合わせてトリミングして書き出します。色、フォント、ロゴの配置に一貫性を持たせます（brand-visual-generatorを参照）。

---

5. ビジュアルを重視したコンテンツ計画

• コンテンツカレンダーに画像を計画する：ビジュアルを後付けにせず、エンゲージメントを促す要素として計画します
• テーマごとにまとめて作成する：一貫性を保つため、トピッククラスターやキャンペーンのビジュアルをまとめて作成します
• 転用欄：カレンダーに、どの基本コンテンツをどのチャネル向けにどのビジュアル形式にするかを記録します
• アセットライブラリ：キャンペーン／テーマごとに整理し、再利用できるようタグを付けます

---

6. フォーマット別の注意事項

インフォグラフィック

• 寸法：幅800～1200px。高さはコンテンツに応じて調整します
• 書き出し形式：ウェブ用にはPNG、ダウンロード用にはPDF
• 転用：LinkedInのカルーセル用に3～5枚のスライドに分割し、X／Instagram用に統計を1つだけ抜き出します

ソーシャルメディア投稿用画像

• テキストの重ね合わせ：最小限にします。多くのプラットフォームで、テキストの多い画像は推奨されなくなっています
• ブランディング：隅にロゴを配置し、brand-visual-generatorとの一貫性を保ちます
• 代替テキスト：LinkedIn、Pinterest、Xでは、アクセシビリティとPinterestのSEOのために追加します。代替テキストのベストプラクティスについてはimage-optimizationを参照してください

記事／ブログ画像

• ヒーロー画像：LCPの候補となることが多いため、image-optimizationに従って最適化します
• 記事内画像：ストーリー展開を支えるために使用し、代替テキストとキャプションはimage-optimizationに従って設定します
• スクリーンショット：役立つ場合は注釈を付け、ファイルサイズを小さく保ちます

---

出力形式

• ビジュアル計画（どのコンテンツにどの画像を使うか）
• 仕様（コンテキストに応じたプラットフォームの寸法、フォーマット）
• 転用マップ（1つのビジュアル → 複数の出力）
• プラットフォームスキルとimage-optimizationへの参照

関連スキル

コンテンツと戦略

• content-marketing：コンテンツの種類、フォーマット、転用。ビジュアルコンテンツはコンテンツ構成の一部です
• content-strategy：SEOトピッククラスター、記事のビジュアル
• copywriting：コピーとビジュアルの組み合わせ、画像投稿向けの見出し

プラットフォーム（画像仕様）

• twitter-x-posts：X投稿の画像仕様
• linkedin-posts：LinkedIn画像の仕様
• pinterest-posts：Pinterestピンの寸法、代替テキスト
• reddit-posts：Redditでの画像投稿のコンテキスト

ウェブサイトとSEO

• image-optimization：ウェブ画像（代替テキスト、キャプション、WebP、LCP、レスポンシブ対応）。画像SEOの中心となるスキルです
• open-graph, twitter-cards：リンクのプレビュー画像
• hero-generator：ヒーローセクションのビジュアル

その他

• brand-visual-generator：タイポグラフィ、色、画像のトーン。ビジュアルの一貫性
• video-marketing：動画のサムネイル、ビジュアル形式としての動画
• video-optimization：動画SEO、VideoObject、動画サイトマップ、YouTubeの優先順位付け