efecto-social-media

Efecto — ソーシャルメディアデザインガイド

Efecto デザインツールを使って、Instagram、YouTube、TikTok、Twitter/X、LinkedIn、Pinterest、Facebook 向けのソーシャルメディア素材をデザインします。適切なサイズ、大胆なタイポグラフィ、各プラットフォームに特化したベストプラクティスを紹介します。

---

セットアップ

このスキルにはEfecto MCP serverが必要です。ツールリストに create_session、add_section、get_document などのツールがあるか確認してください。

Efecto のツールが利用できない場合は、MCP サーバーをインストールしてください。

Claude Code

claude mcp add efecto -- npx -y @efectoapp/mcp

Cursor

.cursor/mcp.json に追加します：

{
  "mcpServers": {
    "efecto": {
      "command": "npx",
      "args": ["-y", "@efectoapp/mcp"]
    }
  }
}

Windsurf / VS Code / Other MCP Clients

{
  "mcpServers": {
    "efecto": {
      "command": "npx",
      "args": ["-y", "@efectoapp/mcp"]
    }
  }
}

インストールすると、画像検索やネイティブアニメーションの作成を含む68個の MCP ツールを利用できるようになります。MCP サーバーは、エージェントを efecto.app の Efecto デザインキャンバスに接続します。

仕組み

1. エージェントが MCP 経由で Efecto セッションを作成します（create_session）。
2. 返されたデザイン URL をブラウザーで開きます。
3. エージェントがデザインコマンドを送信し、変更をリアルタイムで確認できます。
4. デザインが完成するまで、自然言語で調整を繰り返します。

---

Efecto ツールの使い方 — クイックリファレンス

セッションのワークフロー

すべてのデザインはセッションから始まります：

create_session  label: "Instagram Carousel"

{ sessionId, documentId, designUrl } が返されます。ユーザーに URL を開くよう伝えてから、wait_for_connection を呼び出します（接続が確立するまで待機します）。ユーザーがすでに ?session=... を含む Efecto URL を持っている場合は、セッションを重複作成する代わりに、その URL を指定して attach_session を呼び出します。「再接続」のために create_session を2回呼び出してはいけません。ペアリング済みのセッションは、force: true を指定しない限り上書きを拒否します。ルーティングを確認するには session_status を使います（セッション一覧全体を表示するには { all: true } を指定します）。

ソーシャルメディアデザインの作成

基本のワークフローは、アートボードの作成 → JSX でセクションを追加 → 更新して調整です。

# 1. Create an artboard (Instagram post example)
create_artboard  name: "Slide 1"  width: 1080  height: 1080  backgroundColor: "#111827"  className: "flex flex-col"

# 2. Add content with JSX
add_section  parentId: "<artboard-id>"  jsx: '<section name="Carousel Hook" className="flex flex-col items-center justify-center gap-8 p-16 w-full h-full">
  <h1 name="Hook Headline" className="text-7xl font-extrabold text-white text-center leading-none">Stop designing like it&apos;s 2020</h1>
  <p name="Swipe Prompt" className="text-xl text-gray-400 font-medium">Swipe for 5 rules -></p>
</section>'

# 3. Duplicate artboard for carousel slides
duplicate_artboard  artboardId: "<artboard-id>"  newName: "Slide 2"

# 4. Read state and batch-update the duplicate
get_document
batch_update  updates: [
  { nodeId: "abc", textContent: "01" },
  { nodeId: "def", textContent: "White space is not wasted space" }
]

68個の全ツール

カテゴリ	ツール
セッション	create_session、attach_session、wait_for_connection、session_status、close_session
読み取り	get_document、get_selection、get_node_tree、list_artboards、find_nodes
作成	create_artboard、add_section、add_node
変更	update_node、update_class、update_artboard、batch_update、replace_section
アニメーション	list_animation_presets、apply_animation_plan、clear_animations
整理	move_node、duplicate_node、duplicate_artboard、group_nodes、ungroup_node、reorder_node
選択	select_nodes、deselect_all、set_visibility、delete_nodes、delete_artboard
配置	align_nodes、distribute_nodes
塗りつぶしとエクスポート	set_fill、export_image
ビューポート	zoom_to_artboard、zoom_to_fit、set_viewport、move_artboard
ドキュメント	rename_document、new_document
履歴	undo、redo
テーマ	get_theme、set_theme、set_theme_mode、reset_theme
品質	audit_design、repair_design

スコープを指定した読み取り（大きなドキュメント向け）。 デフォルトでは get_document はツリー全体を返すため、複数のアートボードを含むカルーセルでは、ツール結果のトークン上限を超えることがあります。スコープを指定したモードの使用をおすすめします。outline: true（最上位の子要素ごとに1行の概要を表示）、artboardId: "..."（単一スライド）、maxDepth: N（階層の深さを制限。0 = アートボードのヘッダーのみ、1 = 最上位の子要素）。応答には概算トークン数が含まれるため、取得範囲を広げるかどうかを判断できます。その後、get_node_tree でサブツリーを詳しく確認します。

ルーティングの確認。 デフォルトでは、session_status は従来の単一セッション形式（sessionId、paired、browserConnected、knownSessions）を返します。セッション一覧形式（この MCP プロセス内のすべてのセッションと isActive/paired フラグ）を取得するには { all: true } を渡します。この MCP プロセスが再起動された場合は、現在のブラウザー URL を指定して attach_session を呼び出すと、そのセッションが再びアクティブになります。

add_section の JSX 形式

標準的な HTML タグに Tailwind の className を指定します。タグによってノードの種類が決まります：

<div>/<section>/<nav>  → frame       <img>     → image
<h1>-<h6>/<p>/<span>   → text        <button>  → button
<a>                    → link        <svg>     → icon
<input>                → input       <video>   → video

アイコン：<svg icon="arrow-right" className="w-5 h-5 text-gray-600" />

重要な注意点

• アートボードの className には flex flex-col を含める必要があります — これがないと、子要素が (0,0) で重なります
• アートボードの backgroundColor はプロパティであり、className ではありません — className: "bg-gray-900" ではなく、backgroundColor: "#111827" を使用してください
• className で任意の HEX 値を使用しないでください — bg-[#f9f9f9] は警告なしに機能しません。名前付きカラー（bg-gray-50）またはインラインの style を使用してください
• flex-1 の代わりに grow を使用してください — Efecto では flex-1 は機能しません
• ボタンは子要素を無視します — 代わりに、<span> と <svg> を使ったフレックスコンテナーを使用してください
• アートボードの直接の子要素には、必ず w-full を追加してください
• カルーセルの場合：duplicate_artboard を使ってスライドを作成し、その後 batch_update を使って各スライドのコンテンツを変更してください

必須の構造と品質ゲート

• レイヤーに意味のある名前を付けてください。 各セクション、レイアウトグループ、カード、テキストブロック、コントロール、画像、アイコンに、簡潔で意味を表す name 属性を付けてください（例：<section name="Carousel Hook">、<div name="Slide Copy">、<h1 name="Hook Headline">）。純粋な装飾目的のリーフ要素を除き、Frame、Text、Icon のような汎用的な名前は使用しないでください。
• ネストされたレイアウトを明示してください。 子要素が2つ以上ある各フレームでは、ネストされたラッパーも含め、className に flex または grid を明示的に含める必要があります。方向、配置、間隔、折り返しに対応するクラスを追加し、暗黙のブロックフローに頼らないでください。
• WCAG AA のコントラスト比を満たしてください。 通常のテキストは4.5:1以上、大きなテキストは3:1以上にする必要があります。テキストは、実際に描画される背景とのコントラストを評価してください。テキスト自身に背景がある場合はそれを使い、ない場合は不透明度やアルファ合成も考慮して、祖先フレームからアートボードまでたどってください。コントラストを判定する前に、現在のモードにおけるセマンティックなテーマトークンの値を解決してください。
• 問題がなくなるまで監査してください。 作成または編集後に audit_design を呼び出してください。batch_update または replace_section を使って、contrast-ratio、implicit-block-container、generic-layer-name の指摘をすべて修正し、その後もう一度 audit_design を呼び出してください。repair_design を使用した場合は、その変更内容を確認し、再監査してください。3種類すべての指摘がゼロになるまで完了とせず、get_document を使って、意味のあるレイヤーにセマンティックな名前が保持されていることを確認してください。

---

画像 — プレースホルダーではなく実際の写真を使用する

search_images を使って、Lummi の無料で高品質なストック写真を検索してください。セッションは不要です — いつでも呼び出せます。

search_images
  query: "team celebration"
  orientation: "square"
  luminance: "bright"
  limit: 4

続いて、デザインに画像を適用します。

• 画像ノード：type: "image"、src: "<url>"、alt: "..."、className: "w-full h-full object-cover" を指定して add_node を呼び出します
• 背景塗りつぶし：fill: { type: "image", url: "<url>", size: "cover" } を指定して set_fill を呼び出します
• JSX 内：<img src="<url>" alt="..." className="w-full h-full object-cover" />

ソーシャルメディア向けのヒント：プラットフォームのフォーマットに合わせて orientation を指定してください。Instagram／LinkedIn の投稿には square、ストーリーズ／リール／TikTok には vertical、YouTube のサムネイル／Twitter には horizontal を使用します。印象的なソーシャルコンテンツには luminance: "dark" を使用してください。実際の写真を使うと、ソーシャルメディアのコンテンツに本物らしさが生まれます。空のプレースホルダーボックスは避けてください。

---

シェーダーノードと視覚効果

シェーダーノードを使って、ソーシャルメディアのコンテンツを目立たせましょう。type: "shader" を指定して add_node を使用してください。

生成背景

画像を使わずに目を引く背景を作成できます。引用カード、カルーセル、ストーリーのスライドに最適です。

add_node
  parentId: "<artboard-id>"
  type: "shader"
  shaderType: "meshGradient"
  className: "w-full h-full"

シェーダーの種類：meshGradient（有機的）、liquidMetal（高級感）、chrome（大胆）、pulsar（エネルギー）、particles（アンビエント）、fireworks（祝賀）。

写真へのエフェクト適用

ASCII、ディザ、ハーフトーン、グリッチのエフェクトで画像を加工し、スクロール中に目を留めてもらえるビジュアルにします。

search_images  query: "team photo"  orientation: "square"  limit: 1
add_node
  parentId: "<artboard-id>"
  type: "shader"
  inputType: "image"
  mediaInput: { mediaUrl: "<url>", mediaType: "image", objectFit: "cover" }
  effectId: "ascii-standard"
  effectEnabled: true
  className: "w-full h-full"

ソーシャルメディア向けのおすすめエフェクト：ascii-standard（テクノロジー／開発コンテンツ）、dither-atkinson（レトロ）、halftone-mono（印刷物／ジン）、glitch-vhs（ノスタルジック）、art-kuwahara（絵画風）、glitch-digital（エッジの効いた表現）。

ポストプロセス

フィルムグレイン、ビネット、走査線を加えて質感を出します。

postProcesses: [
  { type: "grain", enabled: true, settings: { intensity: 0.3 } },
  { type: "scanlines", enabled: true, settings: { intensity: 0.2 } }
]

---

ネイティブアニメーション

ソーシャル投稿、ストーリー、リール、カルーセルのスライドでは、ネイティブの Efecto レイヤーアニメーションを使用できます。Tailwind の animate-*、transition-*、duration-* クラスは使用しないでください。

ワークフロー：選択したアートボードまたはノードを確認し、list_animation_presets を呼び出してから、apply_animation_plan を使用します。まずフックをアニメーションさせます。背景／写真、メインの見出し、補足の一文、スワイプの案内または CTA、最後に装飾の細部の順です。カルーセルやストーリーの動きでは、ユーザーからアウトロや動画風のシーケンスを求められた場合に限り、退出アニメーションを追加します。

おすすめの初期設定：見出しやメイン画像には 0.35～0.6 秒、バッジ／アイコン／細部には 0.18～0.35 秒、スタッガーには 0.04～0.1 秒を使用します。ブランドに目を引く勢いが必要な場合は、pop-spark、bounce-in、mask-in、fade-mask-in、slide-mask-in、または scale-mask-in を使用し、maskStyle を linear、diagonal、iris に設定します。表示に意図を持たせたい場合は、maskDirection／maskOrigin を使用します。それ以外の場合は、fade-in、slide-in、scale-in にとどめます。

---

マインドセット：ウェブサイトではなくポスターとして考える

ウェブサイトのデザインでは、スクロールを止めて読んでくれる人に向けて書きます。ソーシャルメディアでは、通り過ぎられる前の 1～2 秒でメッセージを伝える必要があります。これですべてが変わります。

• 文字は大きく。 キャンバスの幅は 1080px でも、スマートフォンの画面では約 375px で表示されます。ウェブサイトなら読みやすい text-base の段落も、Instagram のカードにぎゅっと詰めると読めなくなります。通常なら text-base を使うところでも、text-xl または text-2xl を基本にします。
• 文章は短く。 スライドに短い行が 2～3 行以上あるなら、テキストが多すぎます。思い切って削りましょう。1 枚のスライドにつき 1 つのアイデアです。
• 看板のように考える。 高速道路の看板に段落を載せますか？ いいえ。同じ感覚です。

---

ソーシャルメディア向けタイポグラフィ

決まった数式ではなく、役割に応じてフォントサイズを選びます。キャンバスは大きく（1080px 以上）ても、コンテンツは小さく表示されます。そのため、サイズはゆとりを持たせる必要があります。

役割	サイズ	ウェイト	例
メイン／インパクト	text-7xl～text-8xl	font-extrabold または font-black	印象に残る短いメッセージ
スライドの見出し	text-4xl～text-5xl	font-bold または font-extrabold	各スライドの要点
補足テキスト	text-2xl～text-3xl	font-medium または font-normal	背景を伝える一文
ラベル／タグ	text-lg～text-xl	font-semibold	カテゴリーラベル、@ハンドル
許容される最小サイズ	text-lg	任意	これより小さいサイズは使いません。絶対に。

重要なポイント： ウェブサイトで text-base を使うところでは、ソーシャルメディアでは text-xl を使います。ウェブの見出しで text-2xl を使うところでは、ソーシャルメディアでは text-4xl～text-5xl を使います。これは単なる拡大ではありません。デザイン時の解像度の 1/3 で表示されるメディアに適したサイズを選ぶということです。

---

コピーライティング：Z 世代デザイナーのエネルギー

ソーシャルメディアのコピーは、ウェブサイト向けのコピーとは違います。SaaS のマーケティングチームではなく、ストリートウェアブランドのクリエイティブディレクターのように書きましょう。

ルール：

• 見出しは最大 6～8 語。 「もっと速く出荷。何も壊さない。」のように書き、「当社のプラットフォームを利用すれば、品質を維持しながらエンジニアリングチームがより速くコードを出荷できます。」のようには書きません。
• 1 枚のスライドにつき 1 つのアイデア。 カンマが必要なら、スライドを 2 枚に分けたほうがよいでしょう。
• 余計な言葉を削る。 「that」、「just」、「really」、「very」、「in order to」、「leverage」、「utilize」は使いません。
• 文の断片を使う。 「ひと味違う。」「ゼロからローンチへ。」「次の大きな挑戦。」完全文でなくてもかまいません。
• 能動態、現在形を使う。 「Building」ではなく「Build」。「Shipping」ではなく「Ship」。
• 段落は使わない。 ソーシャルメディアのスライドでテキストが 2 行を超えて折り返すなら、もっと短く書き直します。
• CTA は 2～3 語。 「もっと見るにはフォロー」／「保存する」／「リンクはプロフィールから」／「無料で試す」

悪い例（ウェブサイト的な考え方）：

「当社の包括的なプラットフォームは、チームが最新のウェブアプリケーションを効率よく設計、構築、デプロイするために必要なものをすべて提供します。」

良い例（ソーシャルメディア的な考え方）：

「デザイン。構築。出荷。」

---

Instagram

アートボードのサイズ

形式	幅	高さ	用途
投稿（正方形）	1080	1080	フィード投稿、単一画像
縦長投稿	1080	1350	フィード投稿（画面をより広く活用）
ストーリー／リール	1080	1920	ストーリー、リール、縦型動画のカバー
カルーセルスライド	1080	1080	カルーセルの各スライド
カルーセル（縦長）	1080	1350	縦長形式のカルーセル

カルーセルのベストプラクティス

1. スライド1＝心をつかむ要素です。 大胆で目を引く見出しにし、テキストは最小限にします。フィードで目に留まるサムネイルであり、スクロールを止めてもらえるかどうかを左右します。
2. 一貫したデザインシステムにします。 すべてのスライドで背景、文字のスタイル、レイアウトを統一します。変えるのはコンテンツだけです。
3. 1スライドにつき1つのポイントにします。 3つではありません。2つでもありません。1つです。
4. ポイントに番号を付けます。 大きく太字の番号（01、02、03）を各スライドに配置して、流れを作ります。
5. 最後のスライド＝CTAです。 「フォローして最新情報をチェック」／「後で見返せるように保存」／「プロフィールのリンクへ」。
6. スライド1にスワイプの案内を入れます。 矢印、ドット、「スワイプ ->」などを使って、続きがあることを伝えます。
7. コントラストを高くします。 微妙な色の違いは、JPEG 圧縮や小さな画面でつぶれてしまいます。

カルーセルテンプレート

// Slide 1 — Hook (bold, minimal, scroll-stopping)
<section className="flex flex-col items-center justify-center gap-8 p-16 bg-gray-900 w-full h-full">
  <h1 className="text-7xl font-extrabold text-white text-center leading-none tracking-tight">Stop designing like it's 2020</h1>
  <p className="text-xl text-gray-400 font-medium">Swipe for 5 rules -></p>
</section>

// Slide 2-N — Content (one idea, big number, short text)
<section className="flex flex-col justify-center gap-8 p-16 bg-gray-900 w-full h-full">
  <span className="text-8xl font-black text-blue-400">01</span>
  <h2 className="text-4xl font-bold text-white leading-snug">White space is not wasted space</h2>
  <p className="text-2xl text-gray-400 leading-relaxed">Let your design breathe. Cramped layouts feel amateur.</p>
</section>

// Last Slide — CTA (simple, direct)
<section className="flex flex-col items-center justify-center gap-6 p-16 bg-gray-900 w-full h-full">
  <h2 className="text-5xl font-extrabold text-white text-center">Found this useful?</h2>
  <p className="text-3xl text-blue-400 font-bold text-center">Save it. Share it.</p>
  <p className="text-xl text-gray-500 font-medium">@yourbrand</p>
</section>

ストーリーテンプレート

<section className="flex flex-col items-center justify-center gap-10 px-12 py-24 bg-gray-900 w-full h-full">
  <span className="text-xl font-semibold text-blue-400 uppercase tracking-widest">New drop</span>
  <h1 className="text-5xl font-extrabold text-white text-center leading-tight">Your bold statement here</h1>
  <p className="text-2xl text-gray-400 text-center leading-relaxed max-w-[900px]">One short sentence of context.</p>
  <button className="px-10 py-5 text-xl font-bold text-gray-900 bg-white rounded-2xl">See more</button>
</section>

---

YouTube

アートボードのサイズ

形式	幅	高さ	用途
サムネイル	1280	720	動画のサムネイル（16:9）
チャンネルバナー	2560	1440	チャンネルアート（セーフエリア：中央の 1546x423）
終了画面	1280	720	終了画面のオーバーレイ
コミュニティ投稿	1080	1080	コミュニティタブの画像

サムネイルのベストプラクティス

YouTube のサムネイルは、インターネット上で最も競争の激しいビジュアル形式です。サイドバーのおすすめでは幅約200px、検索結果では約360pxで表示されます。

1. 顔＋感情が効果的です。 該当する場合は、誇張した表情の人の顔が何よりも効果を発揮します。写真には画像を大きく使います。
2. 単語数は最大3～5語です。 説明はタイトルが担い、サムネイルは興味を引きます。「これをやってはいけない」は、「開発者がデプロイ時によく犯す5つのミス」より効果的です。
3. テキストは大きくします。 見出しには text-6xl から text-8xl の font-black を使います。幅200pxで読めなければ、小さすぎます。
4. コントラストの高いアウトラインを使います。 どのような背景でもテキストが際立つようにします。対照的な色を使うか、明るいテキストの背後に暗いコンテナを追加します。
5. 画面を分割して構成します。 左半分にテキストやグラフィック、右半分に顔や被写体を配置します。または、その逆にします。すべてを中央に配置しないでください。
6. 色は最大2～3色にします。 色が多すぎるサムネイルは、小さいサイズでは雑然として見えます。大胆なアクセントカラーを1色選びます。
7. 細いフォントは使いません。 すべて font-bold 以上にします。細い文字は見えなくなります。

サムネイルテンプレート

<section className="flex items-center gap-8 p-12 bg-blue-600 w-full h-full">
  <div className="flex flex-col gap-4 grow">
    <h1 className="text-7xl font-black text-white leading-none uppercase">Stop doing this</h1>
    <p className="text-3xl font-bold text-blue-200">5 design mistakes</p>
  </div>
  <div className="w-[400px] h-[400px] bg-blue-800 rounded-3xl"></div>
</section>

チャンネルバナーテンプレート

// Safe area is center 1546x423 — keep all important content there
<section className="flex flex-col items-center justify-center gap-4 p-16 bg-gray-900 w-full h-full">
  <h1 className="text-6xl font-extrabold text-white tracking-tight">Your Channel Name</h1>
  <p className="text-2xl text-gray-400 font-medium">Design tips every week</p>
</section>

---

TikTok

アートボードのサイズ

形式	幅	高さ	用途
動画カバー	1080	1920	動画のサムネイル／カバー画像
プロフィール写真	200	200	アカウントのアバター

TikTok のヒント

• 縦型を優先します。すべて 9:16 です
• セーフゾーンが重要です。 下部20％はキャプションやUIで隠れます。上部15％にはユーザー名やフォローボタンが表示されます。重要なコンテンツは中央の65％に収めます。
• Instagram よりさらに大胆にします。TikTok は展開が速いためです
• 動画のフレーム上でもテキストが読めるようにします。テキストの背後に単色のブロックや暗いオーバーレイを使います
• 見出しには text-5xl から text-7xl を使い、text-xl より小さいサイズは使いません

TikTok カバーテンプレート

<section className="flex flex-col items-center justify-center gap-8 px-12 py-48 bg-gray-900 w-full h-full">
  <span className="px-6 py-2 text-lg font-bold text-white bg-red-500 rounded-full uppercase">Part 3</span>
  <h1 className="text-5xl font-extrabold text-white text-center leading-tight">The trick nobody talks about</h1>
  <p className="text-2xl text-gray-400 text-center">Watch till the end</p>
</section>

---

Pinterest

アートボードのサイズ

形式	幅	高さ	用途
標準ピン	1000	1500	標準ピン（比率 2:3）
縦長ピン	1000	2100	インフォグラフィック／縦長ピン
正方形ピン	1000	1000	正方形形式
ボードカバー	600	600	ボードのサムネイル

Pinterest のヒント

• Pinterest は検索エンジンであり、フィードではありません。ピンはフォロワーではなく、キーワードを通じて見つけられます。
• 縦長のピンが効果的です。 2:3 の比率は、石積み状のグリッドでより多くの画面スペースを占めます。インフォグラフィックや手順を追ったコンテンツには、長いピン（1000x2100）を使います。
• テキストのオーバーレイは欠かせません。 Pinterest のユーザーは、クリックするものを決めるためにサムネイルをざっと見ます。ピンが写真だけだと、そのままスクロールされてしまいます。
• テキストは上部 60% に収めます。グリッド表示では下部が切り取られます。
• Pinterest では、暖色系で明るい色が暗いデザインより効果的です（Instagram／YouTube とは逆です）。
• わかりやすい CTA を含めます：「続きを読む」、「無料ガイドを入手」、「今すぐ購入」。

ピンのテンプレート

<section className="flex flex-col items-center justify-between gap-8 px-12 py-16 bg-amber-50 w-full h-full">
  <div className="flex flex-col items-center gap-6">
    <span className="text-lg font-bold text-amber-700 uppercase tracking-widest">Free Guide</span>
    <h1 className="text-5xl font-extrabold text-gray-900 text-center leading-tight">10 Design Rules Every Beginner Needs</h1>
    <p className="text-2xl text-gray-600 text-center">Save this pin for later</p>
  </div>
  <div className="w-full h-[500px] bg-amber-100 rounded-3xl"></div>
  <p className="text-xl font-semibold text-amber-700">yourdomain.com</p>
</section>

---

Facebook

アートボードのサイズ

形式	幅	高さ	使用例
投稿画像	1200	630	シェア画像／リンクプレビュー
カバー写真	1640	856	ページカバー（セーフエリア：中央の 820x312）
イベントカバー	1920	1005	イベントバナー
ストーリー	1080	1920	Facebook ストーリー
広告（正方形）	1080	1080	フィード広告
広告（横長）	1200	628	フィード広告、横長

Facebook のヒント

• Facebook は画像を強く圧縮するため、微妙なグラデーションより単色を使います。
• リンクプレビュー画像（1200x630）は最も一般的な形式で、URL をシェアしたときに表示されます。
• カバー写真はモバイルとデスクトップで異なる切り抜かれ方をします。重要なコンテンツは中央の 820x312 のセーフエリア内に配置します。
• テキストが多い画像は広告配信で不利になるため、広告ではテキストを画像面積の 20% 未満に抑えます。
• フィードには横長の比率（1200x630）、ストーリーには縦長（1080x1920）を使います。

投稿テンプレート

<section className="flex items-center gap-12 p-16 bg-white w-full h-full">
  <div className="flex flex-col gap-4 grow">
    <span className="text-xl font-semibold text-blue-600 uppercase tracking-wide">Announcement</span>
    <h1 className="text-5xl font-extrabold text-gray-900 leading-tight">We just launched something big</h1>
    <p className="text-2xl text-gray-500">Link in comments</p>
  </div>
  <div className="w-[350px] h-[350px] bg-blue-100 rounded-3xl"></div>
</section>

---

Twitter / X

アートボードのサイズ

形式	幅	高さ	使用例
画像付き投稿	1200	675	標準的なツイート画像（16:9）
カード画像	1200	628	リンクプレビューカード
バナー	1500	500	プロフィールバナー
画像 2 枚の投稿	700	800	画像 2 枚付きツイートの各画像
スレッド用グラフィック	1200	675	スレッド全体で統一感のあるビジュアル

Twitter のヒント

• Instagram よりさらに流れが速く、タイムラインは情報量が多く、進むのも速いです。
• 見出し：text-5xl から text-7xl の font-extrabold
• 本文：最大 text-2xl から text-3xl
• ひと目で1 文が見えるようにします。
• 高いコントラストと大胆な色のブロックが効果的です。
• スレッド用グラフィック：すべての画像で統一したテンプレートを使い、連番（1/7、2/7 など）を付けます。

ツイート画像のテンプレート

<section className="flex flex-col items-center justify-center gap-6 p-16 bg-gray-900 w-full h-full">
  <h1 className="text-6xl font-extrabold text-white text-center leading-tight">Hot take incoming</h1>
  <p className="text-2xl text-gray-400 text-center">Your bold opinion in one sentence.</p>
  <p className="text-xl text-blue-400 font-semibold">@yourhandle</p>
</section>

---

LinkedIn

アートボードのサイズ

形式	幅	高さ	使用例
投稿	1200	1200	正方形のフィード投稿
縦長投稿	1080	1350	フィード上でより多くのスペースを占める
カルーセルスライド	1080	1080	ドキュメントカルーセル
バナー	1584	396	プロフィール／会社のバナー
記事カバー	1200	644	ニュースレターのヘッダー

LinkedIn のヒント

• Instagram より少し洗練された見た目にしますが、文字サイズのルールは同じです。
• カルーセルスライド：各スライドに 1 つずつ、番号付きのインサイトを掲載します。
• ブランドを認識してもらうため、すべてのスライドに名前／ロゴを含めます。
• プロフェッショナルなデザインは退屈という意味ではありません。太字の書体と強いコントラストも引き続き使いましょう。
• LinkedIn のカルーセルは PDF としてアップロードされ、各アートボードが 1 ページになります。

LinkedIn カルーセルのテンプレート

// Cover slide
<section className="flex flex-col items-center justify-center gap-8 p-16 bg-white w-full h-full border-2 border-gray-100">
  <span className="text-xl font-semibold text-blue-600">Your Name | Topic</span>
  <h1 className="text-5xl font-extrabold text-gray-900 text-center leading-tight">7 lessons from building a design system</h1>
  <p className="text-2xl text-gray-500 text-center">A thread. Slide -></p>
</section>

// Content slide
<section className="flex flex-col justify-center gap-8 p-16 bg-white w-full h-full border-2 border-gray-100">
  <span className="text-7xl font-black text-blue-600">01</span>
  <h2 className="text-4xl font-bold text-gray-900 leading-snug">Start with your constraints, not your aspirations</h2>
  <p className="text-2xl text-gray-500 leading-relaxed">A design system for 3 engineers looks nothing like one for 300.</p>
  <p className="text-lg text-gray-400 font-medium">Your Name</p>
</section>

---

一般的なデザインルール

レイアウト

• ほとんどのコンテンツは中央揃えにします（ソーシャルではウェブの標準である左揃えにはしません）。
• 余白を十分に取ります：最低でも p-12 から p-16 とし、端に詰め込みすぎないようにします。
• 垂直方向も中央揃えにします：スライドでは justify-center を使います。コンテンツは上から垂らさず、中央に配置します。
• 最上位のセクションに w-full h-full を指定し、アートボード全体を隙間なく埋めます。

色とコントラスト

• コントラスト比は最低 4.5:1 にします。フィード画像は JPEG 圧縮されるため、コントラストが低いと見えなくなります。
• テキストの読みやすさでは、グラデーションより単色の背景が効果的です。
• ダークモードのデザイン（暗い背景に白文字）は、フィード上でより目立つ傾向があります。
• パステルカラー同士を組み合わせるのは避けます。サムネイルサイズでは色あせて見えます。

複数スライド間の一貫性

• すべてのスライドで背景色を統一します
• 見出しの位置を統一します（スライド間で同じ Y 座標に配置します）
• 同じ役割のテキストはフォントサイズを統一します（すべての見出し、すべての本文テキストで統一します）
• ブランド要素（@handle またはロゴ）をすべてのスライドで同じ位置に配置します

プラットフォーム早見表

プラットフォーム	最適な形式	テキストスタイル	雰囲気
Instagram	縦型 1080x1350	太字、中央揃え	ビジュアル重視、洗練された雰囲気
YouTube	サムネイル 1280x720	特大、高コントラスト	クリックを誘う雰囲気、顔
TikTok	縦型 1080x1920	セーフゾーンに配慮した太字	テンポが速く、インパクトがあり、トレンド感のある雰囲気
Pinterest	縦長 1000x1500	温かみのある、明瞭なオーバーレイ	憧れを誘う、検索主導
Facebook	横型 1200x630	すっきりとして読みやすい	幅広い層向け、共有しやすい
Twitter/X	横型 1200x675	短い一文、太字	主張が明確、ミニマル
LinkedIn	正方形 1080x1080	プロフェッショナルで力強い	思想的リーダーシップ、すっきりとした雰囲気