# Twitterカード画像生成エージェントスキル

> 正しい2:1のアスペクト比とプラットフォーム固有の制約に対応した、最適化されたTwitterカード（X）リンクプレビュー画像を生成します。このスキルにより、ツイートのプレビューが完璧に見え、オーディエンスの注目を集め、エンゲージメントを高めることができます。

- Canonical: https://nanoskill.ai/ja/skills/twitter-card-image-generator
- Markdown: https://nanoskill.ai/ja/skills/twitter-card-image-generator.md
- Author: kostja94
- Published: 2026-06-09T06:00:00.000Z
- Updated: 2026-07-25T04:19:51.168Z
- Language: ja
- Source type: github
- Popularity signal: 244

## Sources

- https://github.com/kostja94/social-cards-skills

## Install

```shell
npx skills add https://github.com/kostja94/social-cards-skills/tree/main/twitter-card-image-generator
```

## About

このTwitterカード画像生成スキルにより、ユーザーはX（Twitter）リンクプレビュー用に完全に最適化された画像を作成でき、タイムラインでコンテンツが強い視覚的インパクトを与えることを保証します。一般的なOpen Graph画像とは異なり、このツールはTwitter独自の2:1のアスペクト比（1200x675px）とプラットフォーム固有のレンダリングの癖に特化して適応し、コンテンツクリエイター、マーケター、開発者がソーシャルメディアでの存在感を高め、エンゲージメントを促進するのを支援します。

6つの異なる生成アプローチと16の多目的なビジュアルスタイルを活用し、このスキルは画像作成の包括的なオプションを提供します。背景用のAI画像生成、コンテンツ認識ワークフロー、Satori/resvgパイプライン統合などの高度な機能を組み込んでいます。ダークモード互換性、モバイルタイムラインでの切り抜き、エッジマスキングなどの主要なデザイン考慮事項が組み込まれており、すべてのユーザーエクスペリエンスで画像が視覚的に魅力的で機能的になることを保証します。

標準的なリンクプレビューに加えて、このジェネレーターは動画や音声コンテンツに最適な、Twitter Player Cards用の魅力的なポスター画像の作成もサポートしています。統合されたYAMLチェックとよくある間違いに関するガイダンスにより、ユーザーは技術仕様を満たし、クリック率を最大化する高品質なTwitterカード画像を自信を持って作成でき、共有リンクをより効果的でプロフェッショナルなものにします。

## Key features

- **X（Twitter）リンクプレビューに最適化**: Twitterの2:1アスペクト比（1200x675px）と独自のレンダリング動作に特化して設計された画像を生成し、コンテンツがタイムラインで目立つようにします。
- **6つの生成アプローチと16のビジュアルスタイル**: AI画像生成やコンテンツ認識ワークフローを含む6つの異なる生成方法を、16のビジュアルスタイルにわたって利用し、多様で魅力的なTwitter Card画像を作成します。
- **ダークモードとモバイルクロッピング適応**: Twitterのダークモードで良好に機能し、モバイルタイムラインのクロッピングに耐える画像を設計し、重要なコンテンツを安全ゾーンに配置して最大の視認性を確保します。
- **プレイヤーカードポスター生成**: Twitterプレイヤーカード用の魅力的なポスター画像を作成し、再生ボタンのオーバーレイやビデオタイトルを完備して、ユーザーがマルチメディアコンテンツに関与するよう誘います。
- **包括的な検証チェック**: 画像寸法、カードタイプ、URL形式、タイムラインセーフゾーンやダークモード互換性などのデザイン上の考慮事項を検証する組み込みのYAMLチェックのメリットを享受できます。

## Use cases

- **ブログ投稿用のTwitter Card画像を生成**: 新しいブログ投稿用に、視覚的に魅力的な1200x675pxのTwitter Card画像を自動的に作成し、Xで共有されたときにプロフェッショナルで魅力的に見えるようにします。
- **動画用のプレイヤーカードポスターをデザイン**: Twitterで共有する動画コンテンツ用に最適化されたポスター画像を生成し、動画が再生される前から高いクリック率を促進します。
- **ソーシャルシェアのダークモード互換性を確保**: 既存のOpen Graph画像を適応させるか、ダークモードに適したデザインの新しい画像を生成し、表示設定に関係なくすべてのユーザーにとってTwitter Card画像が見栄えが良いことを保証します。

## Result preview

このスキルで生成されたパフォーマンスの高いTwitterカード画像をご覧ください。

![A dark-themed Twitter Card preview for FlowMind AI featuring the headline 'The Future of AI Agents' in large white and indigo typography. The design uses a futuristic navy-blue gradient background with subtle grid lines and connected-node graphics representing AI networks. A 'Read More' button appears below the headline alongside an estimated reading time, creating a clean, modern SaaS-style layout optimized for social media engagement.](https://file.nanoskill.ai/Twitter-card-outcome-1.png)

![A brand style guide page showcasing the FlowMind AI color palette and visual language. Large color swatches display indigo, cyan, emerald green, deep black, dark surface blue, and semi-transparent gray text colors, each labeled with HEX values and usage descriptions. Below, a section outlines design principles focused on dark-mode optimization, color hierarchy, typography consistency, and visual balance for Twitter-native experiences.](https://file.nanoskill.ai/Twitter-card-outcome-3.png)

![A strategic design briefing page divided into four dark-themed cards titled Objective, Target Audience, Visual Identity, and Format. The page summarizes campaign goals, audience segments including tech professionals and startup founders, brand colors and style direction, and technical specifications such as Twitter’s 1200×675 pixel format, mobile-safe composition, and dark-mode compatibility.](https://file.nanoskill.ai/Twitter-card-outcome-5.png)

![A realistic Twitter feed mockup displaying a post from FlowMind AI about the future of AI agents. The tweet includes descriptive promotional copy and an embedded Twitter Card preview featuring a futuristic AI-themed visual. Engagement metrics such as comments, reposts, likes, and shares appear beneath the post, while a note at the bottom highlights projected improvements in click-through rate and user engagement from using optimized visual cards.](https://file.nanoskill.ai/Twitter-card-outcome-6.png)

## Result walkthrough

### インストール

Twitterカード画像生成スキルをAIエージェントに追加します。

![A terminal-style screenshot showing the installation of the Twitter Card Image Generator skill. The console output displays the command 'npx skills add https://github.com/kostja94/social-cards-skills', followed by interactive prompts and confirmation messages indicating successful installation, universal agent setup, and symlinking for Hermes Agent access.](https://file.nanoskill.ai/Twitter-card-install.png)

### コンテンツを説明

コンテンツの詳細、ブランドアイデンティティ、希望するビジュアルの方向性を共有します。

![A screenshot of a terminal or interface asking the user to provide content details for generating a Twitter Card image. The prompt requests title/topic, key message, brand/account name, visual assets (logo, color palette, style), and call-to-action, showing how the skill gathers information before designing the card.](https://file.nanoskill.ai/describe-content.png)

### 成果物を生成

強力な視覚的階層とエンゲージメントに焦点を当てたデザイン改善を備えた、プラットフォームに最適化されたTwitterカード画像を作成します。

![A screenshot of a terminal or interface showing the generation step for the Twitter Card image. It highlights the user confirming inputs and the system preparing the final platform-optimized image, ready for export as a high-resolution, social-media-ready graphic. The screen emphasizes that the card will follow 1200×675px format, mobile-safe layout, dark-mode compatibility, and engagement-focused design principles.](https://file.nanoskill.ai/Generation.png)

## Skill definition

# Twitterカード画像ジェネレーター

X（旧Twitter）のリンクプレビュー（誰かがリンクを共有したときにタイムラインに表示されるカード）に最適化された画像を生成します。Twitterカードは標準のOpen Graphとは異なる固有の画像寸法とレンダリング動作を持ちます。このスキルは、Twitterの2:1アスペクト比とプラットフォーム固有の特性に適応した完全な生成パイプラインをカバーします。

**og-image-generator**の6つの生成アプローチと6つのビジュアルスタイルがすべてここで適用されます。唯一の違いは、出力サイズ（1200x675、1200x630ではなく）、X固有の設計適応、タイムラインセーフゾーニング、プレイヤーカードのサポートです。

## 使用する場面

- ユーザーがX/Twitterのリンクプレビュー、`summary_large_image`、またはプレイヤーカードのポスター用に**1200×675px（2:1）**の画像を必要とする場合
- ユーザーが`twitter:image`、Twitterカード、Xプレビュー画像、ツイートプレビュー、タイムラインカードのデザインについて言及する場合
- ユーザーがダークモード対応のレイアウト、上部60%のコンテンツゾーン、またはXの角丸クロップ用の20pxエッジマスクを必要とする場合
- ユーザーが既に**og-image-generator**を使用しており、同じスタイルとパイプラインのTwitter適応版を求める場合

## 使用しない場面

- **汎用OG画像（1200×630、1.91:1）**：Facebook、LinkedIn、Slackなど向け — 代わりに**og-image-generator**を使用
- **HTMLメタタグの設定のみ**（画像ファイルを作成しない） — marketing-skillsの**twitter-cards**を使用
- **SVG出力** — Twitterはカード画像にSVGをサポートしていません。PNGまたはJPGを使用してください
- **ノーコードビジュアルエディタまたはホスト型API** — エージェントパイプラインを実行する代わりに[Oginify](https://oginify.com)を使用

**呼び出し時**：**初回使用時**は、このスキルがカバーする内容とその重要性を1～2文で述べてからメインの出力を提供します。**２回目以降**またはユーザーがスキップを要求した場合は、直接メインの出力に進みます。

## 1. Twitterが画像を消費する方法

Twitterは以下の優先順位で画像を読み取ります：

1. `twitter:image` — 明示的に設定されている場合、それを直接使用
2. `og:image` — Twitterカードタグがない場合、OG画像にフォールバック
3. 画像なし — プレーンテキストのリンクプレビュー

**重要な洞察**：FacebookとLinkedInは`twitter:image`を読み取りません。TwitterだけがTwitterカードタグを読み取ります。つまり、実際のレンダリングパイプラインは共有できますが、メタデータには両方の画像パスが必要です。

## 2. Twitter画像仕様

| プロパティ | 仕様 |
|----------|--------------|
| **アスペクト比** | 2:1（公式）；実際にはTwitterは約1.91:1でレンダリング |
| **推奨** | 1200x675px（2:1）；1200x628px（OGとのクロスプラットフォーム） |
| **最小** | 300x157px |
| **最大** | 4096x4096px |
| **ファイルサイズ** | 5MB未満 |
| **形式** | JPG、PNG、WebP、GIF（最初のフレームのみ）；SVGは非サポート |

**カードタイプによる画像表示：**

| カードタイプ | 画像の動作 |
|-----------|---------------|
| `summary_large_image` | 全幅の目立つ画像（ほとんどのページで推奨） |
| `summary` | 小さなサムネイル（100x100pxの正方形） |
| `player` | ビデオ/オーディオ埋め込み；画像は再生前のポスターフレーム |
| `app` | アプリアイコン；画像はアプリアイコン＋プロモーション画像 |

ほとんどのユースケースでは、`summary_large_image`を1200x675pxでターゲットにします。

## 3. 6つの生成アプローチ（Twitter適応）

**og-image-generator** §1の6つのアプローチはすべてTwitter画像でも機能します。唯一の違いは出力サイズです。このセクションではTwitter固有の適応をカバーします。完全なレンダリングパイプラインのドキュメントについては**og-image-generator** §1を参照してください。

### 3.1 AI画像生成（コア#1）

OGと同じ3部構成のプロンプト戦略ですが、Twitter固有のフレーミングを追加：

```
パート1 — 視覚的説明：背景、構図、ムード
パート2 — テキスト指定：引用符で囲んだ正確なテキスト、サイズのヒント付き
パート3 — Twitter制約：「1200x675px、2:1アスペクト比、キーテキストは上部60%に、
         ダークモード用に暗い背景が望ましい」
```

**ハイブリッドアプローチ（推奨）**：AIが背景/雰囲気を生成し、Satoriがテキストをオーバーレイします。AIモデルがまだ苦手とする中国語テキストや、Twitterの約40%のダークモード使用率によりテキストの正確さがより重要になる場合に特に有効です。

完全なAIツール比較表（GPT Image 2.0、Flux、Nano Banana、DALL-E 3、Midjourney）については**og-image-generator** §1.1を参照してください。

### 3.2 エージェントネイティブのコンテンツ認識ワークフロー（コア#2）

OGと同じ6ステップのワークフロー（§1.2）：コンテンツの読み取り → スタイルのマッチング → 視覚要素の抽出 → 生成の選択 → 生成 → 検証。各ステップにTwitter固有の追加事項：

**ステップ2（スタイルのマッチング）** — Twitterのダークモードを考慮：暗い背景のスタイル（ターミナル/CLI、ミッドナイトインクマガジン、ブルータリストダークモード）またはX用のダークバリアントを持つスタイルを優先します。

**ステップ3（視覚要素の抽出）** — Twitterのモバイルでのタイムラインクロップが約1:1になるため、最も重要な視覚要素は正方形内で機能する必要があります。1200x675で機能する水平なデータリボンでも、正方形クロップでは見えなくなる可能性があります。1:1でもよく読める要素を少なくとも1つ抽出します。

**ステップ4（生成の選択）** — 同じ決定木。AI生成の場合：「テキストはTwitterのモバイルレンダリング幅約260pxに耐えられるか？」を追加。

**ステップ6（検証）** — OGチェックとTwitter固有のチェック（§8）の両方を実行します。

### 3.3 Satori + resvg（コードベース）

OGと同じパイプライン。高さを630から675に変更。完全な実装については**og-image-generator** §1.3を参照。

```tsx
// 共有エンドポイントがOGとTwitterの両方に対応：
export async function GET(req: Request) {
  const { searchParams } = new URL(req.url);
  const title = searchParams.get('title') ?? 'Default';
  const platform = searchParams.get('platform') ?? 'og'; // 'og' | 'twitter'

  const width = 1200;
  const height = platform === 'twitter' ? 675 : 630;

  return new ImageResponse(
    <OgTemplate title={title} height={height} />,
    { width, height },
  );
}
```

**次にページのメタデータで：**

```tsx
const ogUrl = `/og?title=${encodeURIComponent(title)}`;
const twitterUrl = `/og?title=${encodeURIComponent(title)}&platform=twitter`;

export const metadata: Metadata = {
  openGraph: {
    images: [{ url: ogUrl, width: 1200, height: 630 }],
  },
  twitter: {
    card: 'summary_large_image',
    images: [twitterUrl],  // Twitter固有の1200x675
  },
};
```

### 3.4 Puppeteer、マネージドサービス、JSON設定

OGと同じ — ビューポート/高さを630ではなく675に設定。**og-image-generator** §1.4–1.6を参照。v3ページ優先度システム（S/A/B/C）とパイプライン選択については、[content-strategy.md](../og-image-generator/references/content-strategy.md) と [pipeline-guide.md](../og-image-generator/references/pipeline-guide.md) を参照してください。

## 4. X固有のデザイン考慮事項

TwitterはFacebook/LinkedInとは異なる方法で画像をレンダリングします。以下の点を念頭にデザインしてください：

**ダークモード（約40%のユーザー）**：画像はフィード内にインラインで表示され、ツイートに囲まれます。暗い背景は自然に溶け込み、明るい背景は目立ちますがダークモードでは不快に見えることがあります。すべてのテンプレートにダークバリアントまたはダークフレンドリーなデフォルトが必要です。6つのスタイルのうち、ターミナル/CLI、ミッドナイトインクマガジン、ブルータリスト（黒背景）は自然とダークモードフレンドリーです。スイスミニマルと新聞はダークモード用の代替バージョンを用意すべきです。

**タイムラインクロップ（モバイル）**：モバイルでは、`summary_large_image`画像はツイートが展開されるまでタイムラインで約1:1にクロップされます。完全な2:1画像はタップしたときにのみ表示されます。最も重要なコンテンツ（タイトル、プライマリビジュアル）を画像の上部60%に配置します。つまり、クロップ後も残る中央の正方形領域です。決して重要なテキストを下部20%に置かないでください。

**小さなサイズでのテキストの可読性**：タイムライン画像はモバイルフィードで約260px幅で表示されます。テンプレートを1/4スケール（約300px幅）でテストし、テキストが読み取り可能であることを確認します。これはOGの約500pxのデスクトップフィードサイズよりも厳しい条件です。

**エッジマスク**：Twitterはカード画像に微妙な角丸マスクを適用します。エッジから20px以内に配置されたロゴや重要な要素は部分的にクリップされるリスクがあります。

**Twitter用の推奨テンプレート適応（スタイル別）：**

| OGテンプレート | Twitter適応 |
|-------------|-------------------|
| ターミナル/CLI | ウィンドウクロームを下げる（Twitterの角丸が左上のドットをクリップする）；アクセントカラーをダークモードのコントラストに使用 |
| マガジンエディトリアル | ミッドナイトインクプリセットを使用（X用に設計されたダークバリアント）；写真のウェルを高くする（下部ではなく上部50%に） |
| スイスミニマル | ダークモードバリアントを追加：背景`#0a0a0a`でアクセントはそのまま、白テキスト；データ行は1:1クロップでもよく残る |
| ピクセルレトロ | 自然に暗い背景 — NES/アーケード/CGAプリセットは既にX対応；HUD要素を10%縮小してエッジマスクをクリア |
| ブルータリスト | 黒背景バリアントは既にダークモードネイティブ；非対称タイトルブロックはデフォルトで上部60%ゾーンに留まる |
| 新聞 | 背景`#1a1a1a`のダークバリアントを追加；マルチセクションレイアウトは正方形クロップゾーン用に縦に積み重ねるべき |

## 5. プレイヤーカードのポスター

ビデオ/オーディオコンテンツの場合、`player`カードタイプはポスター画像が必要です：

```html
<meta name="twitter:card" content="player">
<meta name="twitter:player" content="https://example.com/player.html">
<meta name="twitter:player:width" content="480">
<meta name="twitter:player:height" content="480">
<meta name="twitter:image" content="https://example.com/poster.jpg">
```

ポスター画像はユーザーが再生をタップする前に表示されます。魅力的なサムネイルとしてデザインします — 再生ボタン（中央の三角形の円）、ビデオタイトル、コンテンツのフレームを含めます。同じ2:1比率の推奨が適用されます。再生ボタンは中央の正方形ゾーンで最大の要素であるべきです。

AI生成ポスターの場合：「中央に再生ボタン、上部3分の1にタイトルテキスト、暗い背景、1200x675pxのビデオサムネイル」とプロンプトします。

## 6. スタイルシステム（OGと共有 — 16スタイル）

Twitter画像は**og-image-generator** §3および[references/style-system-v3.md](../og-image-generator/references/style-system-v3.md)の16のビジュアルスタイルを使用します。すべてのテンプレートはTwitterで機能します — キャンバスの高さを675pxに変更するだけです。

| # | スタイル | ダークモード | X CTRの可能性 | テンプレート |
|---|-------|-----------|----------------|----------|
| 1 | ターミナル/CLI | 常にダーク | ★★★★★ | [terminal.tsx](../og-image-generator/templates/terminal.tsx) |
| 2 | マガジンエディトリアル | ミッドナイトインク | ★★★ | [magazine.tsx](../og-image-generator/templates/magazine.tsx) |
| 3 | スイスミニマル | バリアント必要 | ★★ | [swiss.tsx](../og-image-generator/templates/swiss.tsx) |
| 4 | ピクセルレトロ | すべてダーク | ★★★★ | [pixel.tsx](../og-image-generator/templates/pixel.tsx) |
| 5 | ブルータリスト | 黒背景 | ★★★★★ | [brutalist.tsx](../og-image-generator/templates/brutalist.tsx) |
| 6 | 新聞 | バリアント必要 | ★★★ | [newspaper.tsx](../og-image-generator/templates/newspaper.tsx) |
| 7 | ネオブルータリズム | あり | ★★★★★ | [neo-brutalism.tsx](../og-image-generator/templates/neo-brutalism.tsx) |
| 8 | ベントグリッド | ダークベース | ★★★★ | [bento-grid.tsx](../og-image-generator/templates/bento-grid.tsx) |
| 9 | ネオスイスグラデーション | ライト | ★★ | [neo-swiss-gradient.tsx](../og-image-generator/templates/neo-swiss-gradient.tsx) |
| 10 | ダークグラデーション+テクスチャ | 常にダーク | ★★★★★ | [dark-gradient-texture.tsx](../og-image-generator/templates/dark-gradient-texture.tsx) |
| 11 | テキストオーバーレイ | 背景による | ★★★★ | [text-overlay-hybrid.tsx](../og-image-generator/templates/text-overlay-hybrid.tsx) |
| 12 | シネマティック | ダークフレンドリー | ★★★ | [cinematic.tsx](../og-image-generator/templates/cinematic.tsx) |
| 13 | コラージュ | 様々 | ★★★★ | [collage.tsx](../og-image-generator/templates/collage.tsx) |
| 14 | リソグラフ | ペーパーベース | ★★★ | [risograph.tsx](../og-image-generator/templates/risograph.tsx) |
| 15 | ヴェイパーウェイヴ | ダークネオン | ★★★★★ | [vaporwave.tsx](../og-image-generator/templates/vaporwave.tsx) |
| 16 | グランジ | フェードダーク | ★★★★ | [grunge.tsx](../og-image-generator/templates/grunge.tsx) |

**Xトップパフォーマー**：ターミナル、ブルータリスト、ネオブルータリズム、ダークグラデーション、ヴェイパーウェイヴ — ハイコントラスト+暗背景がXタイムラインに最適です。**X回避**：ダークバリアントのない過度にコーポレートなブランドスタイル；ダークモードタイムラインでの真っ白な背景。

## 7. フォントとタイポグラフィ

OGと同じルール。**og-image-generator** [references/typography.md](../og-image-generator/references/typography.md)を参照。

Twitter固有の追加：タイムライン画像が約260px幅でレンダリングされるため（OGのデスクトップフィードでの約500pxと比較して）、最小フォントサイズを4px大きくし、24pxではなく28pxを最小にします。

## 8. エージェントYAMLチェック

```yaml
checks:
  # P0 — 必須
  - id: dimensions-twitter
    description: twitter:imageが1200x675px（2:1）または1200x628px（クロスプラットフォーム）
  - id: card-type-match
    description: 大きな画像を使用する場合、twitter:cardがsummary_large_image
  - id: absolute-url
    description: twitter:image URLが絶対URL（https://）で、公開アクセス可能
  - id: format
    description: 画像形式がPNG、JPG、またはWebP（SVGではない）

  # P1 — すべき
  - id: og-fallback
    description: og:imageも設定されている（twitter:imageを読み取らないプラットフォーム用のフォールバックとして）
  - id: timeline-safe-zone
    description: 重要なテキストと主要な視覚アンカーが上部60%内にある；下部20%に重要なものがない
  - id: square-crop-survival
    description: 最も重要な視覚要素が1:1の中央クロップで正しく読み取れる（モバイルタイムライン）
  - id: dark-mode
    description: テンプレートにダーク背景バリアントがあるか、ダークフレンドリーなデフォルトスタイルを使用している
  - id: edge-mask-clearance
    description: ロゴと重要な要素がすべてのエッジから20px以上離れている（Twitterの角丸マスク）

  # P2 — あれば良い
  - id: cross-platform-compatible
    description: 同じ画像（1200x628px）がOGとTwitterの両方で別々に生成せずに機能する
  - id: ai-text-validated
    description: AI生成の場合、すべてのテキストがソースと照合されており、幻覚や誤字がない
  - id: player-poster
    description: プレイヤーカードページに再生ボタン付きの専用ポスター画像がある
  - id: content-aware-twitter
    description: 画像がページ固有のコンテンツを反映しており、単なるTwitterサイズのテンプレートにタイトルだけではない
```

## 9. よくある間違い

1. **誤ったアスペクト比**：OGの1200x630（1.91:1）を調整せずに使用。Twitterは許容しますが、1200x675（2:1）の方がカードをより良く埋め、レターボックスを回避します。
2. **`twitter:image`タグの欠落**：OGフォールバックだけに依存 — 明示的な`twitter:image`がないと、Twitterがどの画像を選ぶかの制御を失います。
3. **下部20%のテキスト**：Twitterはモバイルで画像を約1:1にクロップします。下部近くの重要なテキストはタイムラインで切り取られます。
4. **ダークモードの考慮不足**：明るい背景の画像は、約40%のユーザーが有効にしているTwitterのダークモードタイムラインで不快に見えます。
5. **SVGの使用**：Twitterはカード画像にSVGをサポートしていません。常にPNGまたはJPGを出力してください。
6. **静止した最初のフレームがないGIF**：TwitterはGIFの最初のフレームのみを表示します。フレーム1が意味のある静止画像であることを確認してください。
7. **260pxビューでのAIテキストの幻覚**：フルサイズでは正しく見えるAI生成テキストでも、小さくレンダリングされると文字化けする可能性があります。1/4スケールで検証してください。
8. **エッジに接触するロゴ**：Twitterの角丸マスクがエッジから約10pxをクリップします。ロゴはエッジから20px以上離してください。

## 10. テスト

- **カードバリデーター**：https://cards-dev.twitter.com/validator — カードがどのようにレンダリングされるかを正確に表示します。任意のURLを貼り付けてプレビューします。
- **手動テスト**：テストアカウントからリンクをツイートし、タイムラインと展開ビューを確認します。
- **ダークモードテスト**：ライトモードとダークモードのTwitterクライアントでカードを確認します。
- **キャッシュバスト**：Twitterはカードデータを積極的にキャッシュします（最大7日間）。変更後は、カードバリデーターを使用して強制的に再スクレイプします。
- **モバイルクロップテスト**：1:1アスペクト比（中央675x675にクロップ）でカードのスクリーンショットを撮り、正方形クロップがページのコンテンツを伝えているか確認します。

## 11. 関連スキル

これらのスキルはオプションです — このスキルは単独で機能します。追加機能が必要な場合にインストールしてください：

**同じリポジトリ**（常に一緒にインストール）：
- **og-image-generator**：OG画像生成（1200x630、1.91:1） — 完全なレンダリングパイプライン、全6スタイル、シードテンプレート、タイポグラフィガイド、Satoriの制約。このTwitterカードジェネレーターはそのインフラ全体を再利用します。

**別のリポジトリ**（インストールされている場合とされていない場合がある）：
- **twitter-cards** (marketing-skills)：`twitter:card`、`twitter:site`、`twitter:creator`、検証のためのHTMLメタタグ設定。タグの設定方法を処理します。このスキルは画像の作成方法を処理します。
- **open-graph** (marketing-skills)：`og:title`、`og:image`、`og:url`、プラットフォームテストツールのHTMLメタタグ設定
- **social-share-generator** (marketing-skills)：ユーザーがXにリンクを共有する際にTwitterカードデータを消費する共有ボタンUI

## FAQ

### Twitter Card画像ジェネレーターとは何ですか？

Twitter Card画像ジェネレーターは、X（Twitter）のリンクプレビューに特化して最適化された画像を作成するツールまたはスキルです。これらの画像は、Twitter独自のアスペクト比（2:1、1200x675px）とデザイン上の考慮事項に準拠しており、プラットフォーム上でリンクが共有されたときに正しく魅力的に表示されるようにします。

### このジェネレーターは一般的なOpen Graph（OG）画像ジェネレーターとどう違いますか？

このスキルはOG画像ジェネレーターとインフラストラクチャを共有していますが、出力サイズをTwitterの1200x675px（2:1）アスペクト比に適応させ、X特有のデザイン適応を組み込み、タイムラインセーフゾーンを考慮し、プレイヤーカードの要件をサポートしています。一般的なOG画像は通常1200x630px（1.91:1）です。

### Twitter Card画像の推奨寸法は何ですか？

Twitter Card画像の推奨寸法は1200x675ピクセルで、2:1のアスペクト比を提供します。これにより、画像がカードを効果的に埋め、レターボックス化を回避します。

### Twitter CardsにSVG画像を使用できますか？

いいえ、Twitterはカード画像のSVGをサポートしていません。PNG、JPG、またはWebP形式を使用する必要があります。GIFを使用する場合、最初のフレームのみが表示されます。

### このジェネレーターはTwitter Card画像のダークモードをどのように処理しますか？

このジェネレーターは、ダークバックグラウンドスタイルを優先するか、テンプレートにダークモードバリアントを提供することで、Twitterのダークモード使用を考慮します。これにより、画像がダークモードのタイムラインに自然に溶け込み、約40%のTwitterユーザーにとって視覚的な魅力を維持します。

### 'タイムラインセーフゾーン'とは何ですか？なぜTwitter Card画像にとって重要なのですか？

'タイムラインセーフゾーン'とは、重要なコンテンツ（タイトル、主要なビジュアル）を配置すべき画像の上部60%を指します。これは、Twitterがツイートが展開されるまでモバイルタイムラインで画像を約1:1に切り取るため、下部20%のコンテンツが切り取られる可能性があるため重要です。