efecto-graphic-design

Efecto — グラフィックデザインガイド

Efecto デザインツールを使って、プレゼンテーション、ピッチデッキ、イベントポスター、メールヘッダー、ブログ画像、OG カード、名刺、履歴書、メニュー、インフォグラフィック、招待状、ニュースレター、ドキュメントなどのグラフィック素材をデザインします。

---

セットアップ

このスキルには Efecto MCP サーバーが必要です。ツール一覧に 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: "Pitch Deck"

{ 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
create_artboard  name: "Slide 1"  width: 1920  height: 1080  backgroundColor: "#1a1a1a"  className: "flex flex-col"

# 2. Add content with JSX (most efficient way to build)
add_section  parentId: "<artboard-id>"  jsx: '<section name="Title Slide" className="flex flex-col items-center justify-center gap-6 p-24 w-full h-full">
  <h1 name="Presentation Title" className="text-7xl font-extrabold text-white text-center">Your Title Here</h1>
  <p name="Presentation Subtitle" className="text-2xl text-gray-400">Subtitle text</p>
</section>'

# 3. Read current state to get node IDs
get_document

# 4. Fine-tune with batch updates
batch_update  updates: [
  { nodeId: "abc", className: "text-8xl font-black text-white" },
  { nodeId: "def", textContent: "New text" }
]

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（スライドの speakerNotes とアニメーションの timelineDuration を受け付けます）、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）を返します。一覧形式を取得するには { all: true } を指定します。MCP プロセス内のすべてのセッションが、isActive/paired フラグとともに返されます。この MCP プロセスが再起動された場合は、現在のブラウザー URL を指定して attach_session を呼び出すと、そのセッションが再びアクティブになります。

add_section の JSX 形式

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

<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: "#1a1a1a" を使用します
• className に任意の16進カラーコードを使わないでください — bg-[#f9f9f9] はエラーにならずに機能しません。名前付きカラー（bg-gray-50）またはインラインの style を使用します
• flex-1 の代わりに grow を使用します — Efecto では flex-1 は機能しません
• ボタンは子要素を無視します — 代わりに <span> と <svg> を含むフレックスコンテナを使用します
• アートボードの直接の子要素には必ず w-full を追加します

必須の構造と品質基準

• 意味のあるレイヤー名を付けます。 各セクション、レイアウトグループ、カード、テキストブロック、コントロール、画像、アイコンに、簡潔で意味の分かる name 属性を付けます（例：<section name="Title Slide">、<div name="Metric Group">、<h1 name="Presentation Title">）。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: "conference stage audience"
  orientation: "horizontal"
  luminance: "dark"
  limit: 4

次に、デザインに画像を適用します。

• 画像ノード：type: "image"、src: "<url>"、alt: "..."、className: "w-full h-[400px] object-cover rounded-2xl" を指定して add_node を使用します
• 背景の塗りつぶし：fill: { type: "image", url: "<url>", size: "cover" } を指定して set_fill を使用します
• JSX 内：<img src="<url>" alt="..." className="w-full h-[400px] object-cover rounded-2xl" />

グラフィックデザインのヒント：アートボードに合わせて orientation を指定します（ポスター／ストーリーには縦、バナー／プレゼンテーションには横、SNS カードには正方形）。ダークテーマのデザインには luminance: "dark" を使用します。デザインを始める前に検索し、空のグレーのボックスではなく、実際の画像を中心にレイアウトを構築します。

---

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

シェーダーノードを使って、グラフィックデザインに視覚効果を加えます。type: "shader" を指定して add_node を使用します。

生成背景

画像を使わずに目を引く背景を作成します。

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

シェーダーの種類：meshGradient（有機的なブレンド）、dotGrid（テクノロジー／データ）、voronoi（有機的なセル）、liquidMetal（高級感）、chrome（反射）、pulsar（エネルギー）、blackHole（ドラマチック）、glass（すりガラス）、spiral（遊び心）、particles（雰囲気）、fireworks（祝祭感）。

画像にエフェクトを適用する

写真に ASCII、ディザ、ハーフトーン、グリッチ、アートのエフェクトを適用します：

search_images  query: "portrait"  orientation: "vertical"  limit: 1
add_node
  parentId: "<artboard-id>"
  type: "shader"
  inputType: "image"
  mediaInput: { mediaUrl: "<url>", mediaType: "image", objectFit: "cover" }
  effectId: "halftone-mono"
  effectEnabled: true
  className: "w-full h-full"

エフェクトのカテゴリ：ASCII（ascii-standard、ascii-dense、ascii-minimal、ascii-blocks）、ディザ（dither-floyd-steinberg、dither-atkinson）、ハーフトーン（halftone-mono、halftone-cmyk）、グリッチ（glitch-vhs、glitch-digital）、アート（art-kuwahara、art-crosshatch、art-lineart、art-engraving、art-stipple）。

後処理

追加のエフェクトを重ねます：grain、vignette、bloom、scanlines、noise、pixelate、sepia、color-tint。

add_node
  parentId: "<id>"
  type: "shader"
  shaderType: "meshGradient"
  postProcesses: [
    { type: "grain", enabled: true, settings: { intensity: 0.3 } },
    { type: "vignette", enabled: true, settings: { intensity: 0.5 } }
  ]
  className: "w-full h-full"

最適な用途：プレゼンテーションの背景、ポスターのビジュアル、イベント用グラフィック、ブログのヒーロー画像、特徴的なビジュアル処理を施した OG カード。

---

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

ユーザーがモーション、スライド、リール、プレゼンテーションの再生を求めた場合、グラフィックアセットでは Efecto のネイティブなレイヤーアニメーションを使用できます。Tailwind の animate-*、transition-*、duration-* クラスは使用しないでください。

ワークフロー：対象を確認し、list_animation_presets を呼び出してから、簡潔なプランを apply_animation_plan で適用します。まず階層に沿ってアニメーションを付けます：背景またはヒーロービジュアル、見出し、補足情報、CTA またはイベントの詳細、次に副次的な装飾です。モーションに意図的な終わりが必要な場合は、timelineDuration を指定して update_artboard を使用します。

適切なデフォルト値：ヒーロー／タイトルのモーションは 0.35〜0.6 秒、小さなディテールは 0.18〜0.35 秒、スタッガーは 0.04〜0.12 秒、表示時は ease-out、退出時は ease-in です。タイトルテキストでは appearBy: "word" または "line" を使用し、"char" は動きのあるポスター向けに限ります。ポスター、スライド、フレームの表示には、明示的なマスクプリセット（mask-in、fade-mask-in、slide-mask-in、scale-mask-in）を優先し、表示形状が重要な場合は maskStyle、maskDirection、または maskOrigin を設定します。

---

考え方：コンテキストに合わせてデザインする

グラフィックにはそれぞれ、守るべきルールを定めるコンテキストがあります：

• プレゼンテーションスライドは投影または画面共有されます。大きなテキスト、シンプルなレイアウト、1 枚につき 1 つのアイデアにします
• イベントポスターはすばやく目を通されます。力強い見出し、必須情報（日付、場所、CTA）、強いビジュアルアイデンティティが必要です
• メールヘッダーは幅 600px で、ほかの多数のメールと競合します。印象的で、ブランドを反映し、行動を促すものにします
• ブログのヒーロー画像は記事のトーンを決めます。雰囲気、タイポグラフィ、またはイラストを活かします
• OG／共有カードはリンクの第一印象です。サムネイルサイズでもフルサイズでも機能する必要があります

共通するポイントは、少ないほど豊かであるということです。すべての要素に、そこにある理由が必要です。

---

プレゼンテーションとピッチデック

アートボードのサイズ

形式	幅	高さ	用途
標準（16:9）	1920	1080	プレゼンテーション、画面共有
ワイドスクリーン（16:10）	1920	1200	Mac ネイティブのプレゼンテーション
クラシック（4:3）	1440	1080	従来型のスライド、プロジェクター

スライドデザインのルール

1. 1 枚につき 1 つのアイデア。 箇条書きが必要なら、各項目をそれぞれ 1 枚のスライドにします。
2. 30pt ルール。 幅 1920px の場合、text-3xl（30px）未満の文字サイズは使いません。投影する場合は、最低でも text-4xl を使います。
3. 1 行 6 語、最大 6 行。 少ないほどよいです。段落があるなら、それはスライドではなく文書です。
4. 全面にビジュアルを配置。 画像を使う場合は、スライド全体に広げます。テキストは暗い単色ブロックに重ねます（グラデーションではなく、単色を使います）。
5. 一貫したグリッド。 レイアウトシステムを決め、すべてのスライドで統一します。タイトルは常に同じ位置に置きます。
6. スライド番号。 目立たせすぎず、しかし表示します。Q&A 中の移動に役立ちます。

スライドの種類

タイトルスライド

<section className="flex flex-col items-center justify-center gap-6 p-24 bg-gray-900 w-full h-full">
  <span className="text-xl font-semibold text-blue-400 uppercase tracking-widest">Q4 2026 Update</span>
  <h1 className="text-7xl font-extrabold text-white text-center leading-none tracking-tight">Building the Future of Design</h1>
  <p className="text-2xl text-gray-400 font-medium">Acme Inc. / October 2026</p>
</section>

セクション区切り

<section className="flex flex-col items-start justify-center gap-4 px-24 py-16 bg-blue-600 w-full h-full">
  <span className="text-xl font-bold text-blue-200 uppercase tracking-widest">Part 02</span>
  <h2 className="text-6xl font-extrabold text-white leading-tight">Product Strategy</h2>
</section>

コンテンツスライド（テキスト＋ビジュアル）

<section className="flex items-center gap-16 px-24 py-16 bg-white w-full h-full">
  <div className="flex flex-col gap-6 grow">
    <h2 className="text-4xl font-bold text-gray-900 leading-snug">Revenue grew 3x in 12 months</h2>
    <p className="text-2xl text-gray-500 leading-relaxed">We hit $10M ARR ahead of schedule, driven by enterprise adoption and a 95% retention rate.</p>
  </div>
  <div className="w-[600px] h-[500px] bg-gray-100 rounded-3xl"></div>
</section>

大きな数字／統計スライド

<section className="flex flex-col items-center justify-center gap-6 p-24 bg-gray-900 w-full h-full">
  <span className="text-9xl font-black text-blue-400">3x</span>
  <h2 className="text-4xl font-bold text-white text-center">Revenue growth in 12 months</h2>
  <p className="text-xl text-gray-500">$3.2M to $10M ARR</p>
</section>

引用スライド

<section className="flex flex-col items-center justify-center gap-8 px-32 py-24 bg-gray-50 w-full h-full">
  <p className="text-4xl text-gray-700 text-center leading-relaxed italic">"The best tool we've adopted this year. Our design velocity doubled."</p>
  <div className="flex items-center gap-4">
    <div className="w-16 h-16 bg-gray-300 rounded-full"></div>
    <div className="flex flex-col">
      <span className="text-xl font-semibold text-gray-900">Jamie Rivera</span>
      <span className="text-lg text-gray-500">Head of Design, Linear</span>
    </div>
  </div>
</section>

クロージング／CTA スライド

<section className="flex flex-col items-center justify-center gap-8 p-24 bg-gray-900 w-full h-full">
  <h2 className="text-6xl font-extrabold text-white text-center">Let's build together</h2>
  <p className="text-2xl text-gray-400 text-center">[email protected]</p>
  <div className="flex items-center gap-2">
    <div className="w-10 h-10 bg-blue-600 rounded-lg"></div>
    <span className="text-xl font-bold text-gray-400">Acme Inc.</span>
  </div>
</section>

ピッチデッキの構成（10枚）

1. タイトル — 会社名、タグライン、日付
2. 課題 — どのような課題があるか（統計または引用を1つ）
3. ソリューション — 提供するもの（1文＋ビジュアル）
4. デモ／製品 — スクリーンショットまたはモックアップ（全面表示）
5. 市場 — TAM/SAM/SOM または市場規模を示す統計
6. トラクション — 主要指標（大きな数字）
7. ビジネスモデル — 収益の仕組み（シンプルな図）
8. チーム — 創業者＋主要な採用メンバー（写真＋1行の経歴）
9. 要望 — 必要なもの（資金調達額、パートナーシップ）
10. 締めくくり — 連絡先、お礼

発表者ノート

各スライドのアートボードには speakerNotes フィールドがあります。Efecto の Present + Control モードで発表者に表示されるプレーンテキストです。スライドを作成するときは、必ず設定してください。

• create_artboard と update_artboard に speakerNotes を渡します。
• 既存のノートは list_artboards（結果にフィールドが表示されます）または get_document（Artboard タグの speakerNotes="..." 属性としてレンダリングされます）で読み取れます。
• スライドの内容ではなく、発表者の台本を書きます。スライドは見出しであり、ノートは実際に口頭で伝える内容です。
• 各スライドにつき2～4文にします。要点を押さえ、次のスライドへの移行につなげます。
• スライドだけで内容が明らかな場合（タイトルカード、1語だけのステートメントスライド）は空欄にします。

create_artboard:
  name: "03 — Traction"
  width: 1920
  height: 1080
  backgroundColor: "#0a0a0a"
  className: "flex flex-col"
  speakerNotes: "Walk through the 3x ARR growth. Highlight that 80% came from enterprise upgrades, not net-new logos. Set up the next slide on retention by saying 'and the reason this is durable is...'."

プレゼンテーションの再生

エンドユーザーは Efecto の Play ドロップダウンからデッキを起動します。選択肢は Prototype（アプリ内エミュレーター）、Present（単一ウィンドウの全画面表示）、Present + Control（観客用ウィンドウ＋現在のスライド、次のスライド、ノート、タイマーを表示する発表者用コントローラー）です。スライドの順序はデフォルトでレイヤーパネルの順序に従います。コントローラーには、空間的に配置されたデッキ用の視覚的な（y, x）切り替え機能があります。担当するのはスライドとノートの作成です。再生モードはユーザーが選択します。

---

イベントポスターとチラシ

アートボードのサイズ

形式	幅	高さ	用途
デジタルポスター	1080	1350	オンラインイベント、共有
A4 縦	794	1123	印刷用ポスター（96dpi、210x297mm）
レター縦	816	1056	米国レターサイズの印刷物（96dpi、8.5x11in）
ワイドバナー	1920	600	ウェブサイトのイベントバナー
正方形	1080	1080	多目的、調整可能

イベントポスターの優先順位

すべてのイベントポスターには、優先順位の高い順に次の4つの要素が必要です。

1. 内容 — イベント名（最も大きな文字で、ビジュアルの中心となるもの）
2. 日時 — 日付と時刻（2番目に大きく、ひと目で読めること）
3. 場所 — 場所または「オンライン」（明確で目立つこと）
4. CTA — 「今すぐ登録」／「チケットを入手」／「出欠を返信」（ボタンまたは強調表示したテキスト）

それ以外（登壇者、スポンサー、説明文）は二次的な要素です。

イベントポスターのテンプレート

<section className="flex flex-col justify-between p-16 bg-gray-900 w-full h-full">
  <div className="flex items-center justify-between">
    <span className="text-lg font-bold text-gray-400 uppercase tracking-widest">Design Conf 2026</span>
    <div className="w-12 h-12 bg-blue-500 rounded-xl"></div>
  </div>
  <div className="flex flex-col gap-6">
    <h1 className="text-7xl font-black text-white leading-none">The Future of Interface Design</h1>
    <div className="flex flex-col gap-2">
      <p className="text-3xl font-bold text-blue-400">March 15, 2026</p>
      <p className="text-2xl text-gray-400">San Francisco / Moscone Center</p>
    </div>
    <button className="w-fit px-10 py-4 text-xl font-bold text-gray-900 bg-white rounded-2xl">Get Tickets</button>
  </div>
</section>

カンファレンス講演のスライド

<section className="flex items-end gap-8 p-16 bg-gray-900 w-full h-full">
  <div className="flex flex-col gap-4 grow">
    <span className="text-lg font-semibold text-purple-400 uppercase tracking-wider">Keynote</span>
    <h1 className="text-5xl font-extrabold text-white leading-tight">Designing with AI: What Changes and What Doesn't</h1>
    <div className="flex items-center gap-3">
      <div className="w-12 h-12 bg-gray-700 rounded-full"></div>
      <div className="flex flex-col">
        <span className="text-lg font-semibold text-white">Pablo Stanley</span>
        <span className="text-lg text-gray-500">Founder, Efecto</span>
      </div>
    </div>
  </div>
</section>

---

メールヘッダーとニュースレターのグラフィック

アートボードのサイズ

形式	幅	高さ	用途
メールヘッダー	600	200	メール上部のバナー（最大幅600px）
メールのヒーロー画像	600	400	ニュースレターのヒーロー画像
ワイドメールヒーロー画像	1200	400	高解像度メールのヒーロー画像（600pxに縮小）

メールデザインのルール

• 最大幅は600pxが、あらゆるメールに共通する制約です。600pxまたは1200px（高解像度2倍）でデザインします。
• シンプルなレイアウトに限ります。 メールのレンダリングエンジンは2005年から進化が止まっています。1列または最大2列のレイアウトにします。
• 目立つCTAを配置します。 メール1通につき、主要なアクションは1つにします。ボタンを見落としようがないデザインにします。
• テキストは最小限にします。 メッセージはメール本文で伝えます。グラフィックは視覚的なフックにすぎません。
• ブランドを前面に出します。 ロゴ、ブランドカラー、すべてのメールで統一されたヘッダーを使います。受信トレイで認識されることが重要です。

メールヘッダーのテンプレート

<section className="flex items-center justify-between px-8 py-6 bg-gray-900 w-full h-full">
  <div className="flex items-center gap-3">
    <div className="w-8 h-8 bg-blue-500 rounded-lg"></div>
    <span className="text-xl font-bold text-white">Acme Weekly</span>
  </div>
  <span className="text-lg text-gray-400">March 2026</span>
</section>

ニュースレターのヒーローテンプレート

<section className="flex flex-col items-center justify-center gap-6 px-12 py-12 bg-blue-600 w-full h-full">
  <h1 className="text-4xl font-extrabold text-white text-center leading-tight">What we shipped this week</h1>
  <p className="text-xl text-blue-100 text-center">3 features, 2 fixes, 1 big announcement</p>
  <button className="px-8 py-3 text-lg font-bold text-blue-600 bg-white rounded-xl">Read the update</button>
</section>

---

ブログと記事のヒーロー画像

アートボードのサイズ

形式	幅	高さ	用途
ブログのヒーロー画像（16:9）	1200	675	標準的なブログヘッダー
ブログのヒーロー画像（2:1）	1200	600	横長のブログヘッダー
Medium 記事	1400	788	Medium.com のヘッダー
Substack	1456	816	Substack のヘッダー画像

ブログのヒーロー画像のヒント

• ブログのヒーロー画像は情報を伝えるものではなく、雰囲気を作るものです。抽象的で雰囲気のある表現にできます。
• ヒーロー画像内のタイトルテキストは任意です。多くのブログでは、画像の下に HTML でタイトルを表示します。
• テキストを入れる場合は、text-5xl から text-6xl を中央に配置し、十分な余白を設けます。
• テキストを最小限にした単色の背景は、すっきりとしたモダンな印象に仕上がります。
• 写真を使ったヒーロー画像には、画像の塗りつぶし（type "image" の set_fill）を使用します。

ブログのヒーロー画像のテンプレート

<section className="flex flex-col items-center justify-center gap-6 px-16 py-16 bg-gray-900 w-full h-full">
  <span className="text-lg font-semibold text-blue-400 uppercase tracking-widest">Engineering</span>
  <h1 className="text-5xl font-extrabold text-white text-center leading-tight max-w-[900px]">How we reduced build times by 80%</h1>
  <p className="text-xl text-gray-500 font-medium">March 2026 / 8 min read</p>
</section>

---

OG 画像とシェアカード

アートボードのサイズ

形式	幅	高さ	用途
Open Graph	1200	630	リンクのプレビュー用 og:image（Facebook、Discord、Slack、iMessage）
Twitter カード	1200	628	ツイートのリンクプレビュー用 twitter:image
WhatsApp プレビュー	1200	630	チャット内のリンクプレビュー

OG 画像のベストプラクティス

OG 画像は URL がシェアされたときに表示されます。プラットフォームによって表示サイズは異なります（Slack では 300px、Facebook では 500px、一部のチャットアプリでは 120px）。

1. タイトルが最重要です。 ページタイトルや記事の見出しを画像の中で目立たせます。text-5xl から text-6xl を使用します。
2. ブランドの目印を入れます。 ロゴまたはブランド名を隅に配置し、すべての OG 画像で統一します。
3. 細かい要素は避けます。 多くのプラットフォームでは小さく表示されます。シンプルなレイアウト、高いコントラスト、大きな文字を使います。
4. テキストは左揃えが効果的です。 多くのプラットフォームでは、モバイル表示時に右端が切り取られます。

OG 画像のテンプレート

<section className="flex items-center gap-12 px-16 py-12 bg-white w-full h-full">
  <div className="flex flex-col gap-4 grow">
    <div className="flex items-center gap-2">
      <div className="w-8 h-8 bg-blue-600 rounded-lg"></div>
      <span className="text-lg font-bold text-gray-400">acme.com</span>
    </div>
    <h1 className="text-5xl font-extrabold text-gray-900 leading-tight">How we reduced build times by 80%</h1>
    <p className="text-xl text-gray-500">A deep dive into our new CI/CD pipeline.</p>
  </div>
  <div className="w-[250px] h-[250px] bg-blue-100 rounded-3xl"></div>
</section>

---

証明書と賞状

アートボードのサイズ

形式	幅	高さ	用途
横向きの証明書	1400	1000	コース修了、賞状
A4 横向き	1123	794	印刷用の証明書

証明書のテンプレート

<section className="flex flex-col items-center justify-center gap-8 p-24 bg-white w-full h-full border-8 border-gray-200">
  <div className="flex items-center gap-3">
    <div className="w-10 h-10 bg-blue-600 rounded-lg"></div>
    <span className="text-2xl font-bold text-gray-900">Acme Academy</span>
  </div>
  <span className="text-xl text-gray-400 uppercase tracking-widest font-semibold">Certificate of Completion</span>
  <h1 className="text-5xl font-extrabold text-gray-900 text-center">Advanced Design Systems</h1>
  <p className="text-2xl text-gray-500 text-center">Awarded to</p>
  <p className="text-4xl font-bold text-blue-600">Jane Smith</p>
  <div className="flex items-center gap-12">
    <div className="flex flex-col items-center gap-1">
      <span className="text-lg text-gray-400">Date</span>
      <span className="text-lg font-semibold text-gray-700">March 6, 2026</span>
    </div>
    <div className="flex flex-col items-center gap-1">
      <span className="text-lg text-gray-400">Instructor</span>
      <span className="text-lg font-semibold text-gray-700">Pablo Stanley</span>
    </div>
  </div>
</section>

---

名刺

グラフィックデザインの中でも、制約が最も多く、技術が求められる形式です。すべてのピクセルが重要です。

基本原則

• 何よりも抑制が大切です。 名刺に使えるスペースは約 30 cm² です。すべての要素に配置する価値が必要です。
• サイズのコントラストで階層を作ります。 名前は大きく、肩書きは中くらい、連絡先は小さくします。最大 3 段階にします。
• 余白はぜいたくです。 最も印象に残る名刺は、余白が最も多いものです。スペースを埋めたくなる気持ちを抑えます。
• 印象に残る要素は 1 つに絞ります。 大胆な色のブロック、大きなイニシャル、幾何学的なアクセントなどから 1 つ選びます。

アートボードの設定

• 標準：336x192（96 DPI で 3.5" x 2"）、または高精細にする場合は 672x384
• 表裏用に 2 つのアートボードを作成し、「Front」と「Back」と名付けます
• 表：名前＋肩書き＋ブランド。裏：連絡先＋住所。
• 横に並べて配置します。表は x=0、裏は x=width+60 です

表面のレイアウトパターン

• クラシック：ロゴを左上に置き、名前を中央または左揃えにし、その下に肩書きを配置します。すっきりとしてプロフェッショナルな印象です。
• 大胆：カードの大部分にまたがるように、名前を text-3xl または text-4xl で配置します。肩書きは text-xs の大文字にし、文字間隔を広くします。
• ミニマル：名前だけを中央に配置し、広めの余白を設けます。表面にはそれ以外何も置きません。
• 非対称：名前を左揃えにし、右側 3 分の 1 に大きな色のブロックまたはアクセント図形を配置します。
• ブランド重視：ブランドカラーで全面を塗り、反転色（白）のテキストを配置します。

裏面のレイアウトパターン

• 情報を縦に並べる：電話番号、メールアドレス、ウェブサイト、住所を左揃えの列にします。小さなアイコンは任意です。
• 2 列：左に連絡先、右に住所を配置します。
• 中央揃え：すべての情報を中央揃えにし、控えめな区切り線または間隔で分けます。

タイポグラフィ

• 名前：text-xl〜text-3xl、font-bold または font-extrabold。カードの主役です。
• 肩書き／役職：text-xs〜text-sm、font-medium、text-muted-foreground。控えめにして、名前より目立たせないようにします。
• 連絡先：text-xs、font-normal。小さくても読みやすくします。すべて大文字のラベルには tracking-wide を使います。
• 名刺で使うフォントの太さは、絶対に2種類を超えないようにします。太字と標準の2種類だけです。

色のルール

• 使用する色は最大2色（黒／白を除く）。ブランドカラーとニュートラルカラーを使います。
• カード全面を色で塗ると、実物でも目を引きます。
• ダークカード（bg-zinc-950、bg-slate-900）は高級感があります。

ルール

• 段落は使いません。文章も使いません。名前、肩書き、連絡先だけにします。
• カード全体を囲む装飾的な枠線は使いません。古くさく見えます。
• 名前、肩書き／役職、少なくともメールアドレスと電話番号は必ず記載します。
• 横向きが標準です。縦向きは大胆で印象的です。クリエイティブ職の方には縦向きを提案します。

---

履歴書／CV

6秒で要点を把握できる、1ページの職務経歴書です。

基本原則

• 数秒で要点を把握できること。 採用担当者が履歴書に目を通す時間は6〜10秒です。視覚的な階層が重要です。
• 情報量が多くても整理されていること。 履歴書には多くの内容が詰まっています。情報量の多さを雑然と見せず、明快に伝えることがデザインの役割です。
• 控えめで上品なデザインであること。 大胆なデザインの選択も、鮮やかなアクセントカラーや特徴的なレイアウトなど、控えめにします。実験的なデザインは避けます。
• 内容が最も重要です。 装飾より文章のほうが大切です。視覚的な装飾のために、情報を載せるスペースを犠牲にしてはいけません。

アートボードの設定

• US Letter：816x1056（96 DPIで8.5" x 11"）
• A4：794x1123（96 DPIで210mm x 297mm）
• アートボードは1つです。履歴書は必ず1ページに収めます。

レイアウトのパターン

• 2カラム（最も一般的）：連絡先、スキル、学歴を配置する狭いサイドバー（w-1/3）と、職歴やプロジェクトを配置する広いメインカラム（w-2/3）。
• 1カラム：全幅で構成する伝統的な形式です。ヘッダー -> 概要 -> 職歴 -> 学歴 -> スキル。定番で、ATSにも対応しやすい形式です。
• 上部ヘッダー＋1カラム：名前と連絡先を載せた目立つヘッダーバンドの下に、1カラムの内容を配置します。
• 非対称：アクセントカラーの背景を使ったサイドバーで、視覚的に差別化します。

セクションの階層

1. 名前＋連絡先 — text-2xl〜text-3xl font-bold。続けて、メールアドレス、電話番号、所在地、LinkedInをtext-xsで記載します
2. 職歴 — 会社名＋役職＋在籍期間。それぞれに実績を2〜3項目、箇条書きで記載します
3. 学歴 — 学位、学校名、卒業年
4. スキル — カテゴリー別に分類します（言語、フレームワーク、ツール）
5. 任意：概要（最大2行）、プロジェクト、資格

タイポグラフィ

• 名前：text-2xl〜text-3xl、font-bold。ページ内で大きな文字を使うのは名前だけです。
• セクション見出し：text-sm、uppercase、tracking-widest、font-bold。視覚的な目印として機能します。
• 会社名／役職：会社名はtext-sm、font-semibold。役職はfont-medium。
• 本文／箇条書き：text-xs〜text-sm、font-normal。コンパクトながら読みやすくします。
• 日付：text-xs、text-muted-foreground。右揃えまたは本文内に配置します。

色の方針

• セクション見出し、サイドバー、または名前に使うアクセントカラーは1色にします。控えめにし、色を使いすぎないようにします。
• ダークカラー：本文にはslate-900またはzinc-900を使います。純粋な黒は使いません。
• アクセントカラーの候補：blue-700（プロフェッショナル）、emerald-700（クリエイティブ）、slate-700（落ち着いた印象）、amber-700（温かみ）
• サイドバーの背景：slate-50、blue-50など、落ち着いたアクセントカラーや控えめな色合いを使います。

ルール

• 必ず1ページに収めます。複数ページのCVを明示的に求められた場合を除き、例外はありません。
• 写真を明示的に求められた場合を除き、写真は使いません（履歴書に写真を載せるかどうかは文化によって異なります）。
• 連絡先にアイコンは使いません。スペースを無駄にします。テキストだけを使います。
• 装飾的な要素は使いません。すべての要素で情報を伝えるようにします。
• 日付の表記は統一します。「Jan 2023 - Present」または「2023 - Present」を使います。
• 「Lorem ipsum」ではなく、実在しそうな内容を使います。現実味のある役職名、会社名、箇条書きにしてください。

---

フライヤー（詳細なデザインガイド）

上記の「イベントポスターとフライヤー」のセクションを拡張し、単体の販促用フライヤー向けに、より詳しいレイアウトのパターン、色彩心理、タイポグラフィのルールを説明します。

基本原則

• 3フィート離れても伝わるインパクト。 フライヤーは掲示板や積み重ねられた紙、画面の上で注目を集める必要があります。見出しは強烈でなければなりません。
• 必要な情報だけを載せます。 WHAT（何を）＋ WHEN（いつ）＋ WHERE（どこで）＋ HOW（参加・購入・登録方法）。それ以外はノイズです。
• 大胆な視覚的階層。 3段階に分けます：（1）見出し／イベント名 — 最大、（2）重要な詳細 — 中、（3）細則 — 小。
• エネルギッシュな構成。 フライヤーには躍動感が必要です。斜めのテキスト、色面、重なり合う要素、強いコントラストを使いましょう。

アートボードの設定

• 標準的なフライヤー：816x1056（US Letter）または794x1123（A4）
• ハーフページ：816x528またはコンパクトな540x720
• SNS／デジタル用フライヤー：1080x1080（正方形）または1080x1350（4:5）

レイアウトパターン

• 大胆な積み重ね：上部に巨大な見出し、中央に画像／グラフィック、下部に詳細を配置します。上から下へ読み進める構成です。
• 全面画像＋オーバーレイ：カード全体に写真を配置し、テキストを読みやすくする半透明のオーバーレイを重ねます。ドラマチックな印象になります。
• 分割構成：上部を色面（見出し）、下部を白またはダークカラー（詳細）にします。すっきりと区切れます。
• 斜めの躍動感：画像とテキストの領域を斜めの境界線で分けます。活動的で躍動感のある印象になります。
• 中央揃えの積み重ね：すべてを中央揃えにして縦に配置します。上品でミニマルなイベントに適しています。
• タイポグラフィ主体：画像は使わず、文字だけで構成します。巨大な見出しと、ウェイトやサイズにコントラストをつけた詳細を使います。大胆でエディトリアルな印象になります。

タイポグラフィ

• 見出し：text-5xl～text-9xl、font-extraboldまたはfont-black、tracking-tight。すべて大文字にするのもおすすめです。
• 日付：text-xl～text-2xl、font-bold。強調するには、tracking-widestを使った大文字表記を検討してください。
• 詳細：text-sm～text-base、font-normal。控えめながらも読みやすくします。
• 詳細に使う文字サイズは最大2種類にします（日付と場所は同程度のサイズにします）。見出しだけは例外です。

イベントに合わせた色彩心理

• コンサート／パーティー：黒地にネオンカラー（zinc-950にemerald-400、fuchsia-500、cyan-400）。高いエネルギーを演出します。
• カンファレンス／ビジネス：白地に濃いブルーまたはスレート。清潔感と信頼感を演出します。
• コミュニティ／文化イベント：クリーム色またはダークカラーの背景に暖色系（アンバー、オレンジ、ローズ）。
• セール／プロモーション：赤＋黄色／白。緊急性を感じさせる色です。bg-red-600 text-white。
• アート／ギャラリー：モノクローム、または黒＋アクセントカラー1色。ミニマルで洗練された印象になります。

ルール

• 小さすぎる文字は使わないでください。腕を伸ばした距離から日付が読めない場合は、小さすぎます。
• 文字を詰め込みすぎないでください。フライヤーはパンフレットではありません。短いテキストブロックは最大3～4つにします。
• 日付、時刻、場所、参加方法は必ず記載してください。情報が欠けたフライヤーは役に立ちません。
• コントラストは必須です。どのような背景でも、テキストがひと目で読めるようにしてください。

---

レストラン／カフェのメニュー

美しく、ざっと見て把握しやすく、料理を魅力的に感じさせる、実用的なドキュメントです。

基本原則

• 見やすさを最優先します。 お客様はF字型またはZ字型にメニューを見ます。カテゴリー見出しはひと目で分かるようにしてください。
• 料理を主役にします。 飾りではなく、料理名と説明が中心となるようにします。
• 価格を揃えます。 価格は見つけやすく、目立ちすぎないようにします。右揃えにし、書式を統一してください。
• デザインで雰囲気を伝えます。 メニューはレストランのブランドそのものです。スタイルを食事体験に合わせましょう。

アートボードの設定

• 片面メニュー：816x1056（レター）または794x1123（A4）
• 折りたたみメニュー（各パネル）：408x528または同程度のハーフページ
• コンパクト／テーブルテント：540x720または480x640
• 複数ページの場合：アートボードを複数、横に並べて作成します

レイアウトパターン

• 1段組み：カテゴリーごとに上から下へ配置します。短いメニュー（20品未満）に最適です。
• 2段組み：左列と右列に分けます。1ページあたりに掲載できる品数を最大化できます。品数の多いメニューに使います。
• 中央揃えのエレガントな構成：すべてを中央揃えにし、余裕のある間隔で配置します。品数の少ない高級レストランに最適です。
• グリッドカード：画像のプレースホルダー付きのカード形式で料理を配置します。モダンでカジュアルなレストランに適しています。
• 非対称：幅広い特集用の列と、幅の狭いおすすめ料理／ドリンク用の列を組み合わせます。

セクション構成

STARTERS          <- Category header: text-lg to text-xl, font-bold, uppercase tracking-widest

Bruschetta ............... $12    <- Item name: text-sm font-semibold, price right-aligned
  Tomato, basil, balsamic         <- Description: text-xs text-muted-foreground

Burrata Salad ............ $16
  Heirloom tomato, arugula, olive oil

タイポグラフィ

• レストラン名：text-3xl〜text-5xlで、個性を際立たせます。これが全体の雰囲気を決めます。
• カテゴリー見出し：text-lg〜text-xl、font-bold、uppercase、tracking-wideにします。区切りを明確にします。
• メニュー名：text-sm〜text-base、font-semiboldにします。各行の主役です。
• 説明：text-xs〜text-sm、font-normal、text-muted-foregroundにします。食欲をそそる表現を、簡潔にまとめます。
• 価格：text-sm、font-mediumにし、右揃えにするか、点線の後ろに配置します。

レストランの種類ごとのスタイル

• 高級レストラン：ミニマルで、セリフ体のような雰囲気にします（font-light + tracking-wideを使用）。余白をたっぷり取ります。暗い背景またはアイボリーを使います。
• カジュアル／ビストロ：温かみのある色調で、少し遊び心を加えます。セクションの角を丸くします。bg-amber-50またはbg-stone-50を使います。
• モダン／トレンディ：すっきりしたサンセリフ体と、ダークテーマ（bg-zinc-950）を使います。おすすめメニューにはアクセントカラーを使います。装飾は最小限にします。
• カフェ：明るく、軽やかな印象にします。bg-whiteまたはbg-stone-50を使います。小さなイラストを加えるのもおすすめです。
• バー／カクテル：暗く、ムーディーな印象にします。bg-zinc-950またはbg-slate-900を使います。ゴールドやアンバーをアクセントカラーにします。雰囲気を大切にします。

ルール

• 価格を隠したり、見つけにくくしたりしないでください。価格の透明性は信頼につながります。
• カテゴリーごとの品目数は7〜9品を超えないようにしてください。選択肢が多すぎると、食事をする人は選べなくなります。
• 必ず含めるもの：レストラン名、カテゴリー、メニュー名、説明、価格。
• 食欲をそそる表現を使ってください。「自家製」「じっくりローストした」「季節の」「新鮮な」などを使い、「良い」「おいしい」は避けてください。
• 食事制限を示すマーク（V、VG、GF）は控えめにします。text-xsを使い、メニュー名の後ろに、彩度を抑えた色で配置してください。

---

インフォグラフィック／データビジュアライゼーション

データを魅力的で、記憶に残り、共有したくなるものにする視覚的なストーリーです。

基本原則

• データより、まずストーリー。 インフォグラフィックはストーリーを伝えます。データはそれを支えます。生の数値ではなく、物語の流れから始めてください。
• 重要なインサイトは1つ。 すべてのインフォグラフィックには、見る人の記憶に残る要点を1つだけ設けます。それ以外はすべて、そのインサイトを支えるものです。
• 視覚的な符号化。 数値を形、大きさ、色、位置に置き換えます。テキストと数値だけで済ませず、データを視覚的なパターンに変換してください。
• 上から下への流れ。 インフォグラフィックはスクロールして読むものです。明確な区切りと、はっきりしたつなぎを設けます。

アートボードの設定

• 標準：800x2400〜1080x3200（縦長で、スクロールして閲覧）
• SNS向け：1080x1920（9:16）または1080x1350（4:5）
• プレゼンテーション向け：1920x1080（横長で、重要なチャートを1つ）
• 複数ではなく、縦長のアートボードを1つ使ってください。インフォグラフィックは、途切れのない単一の作品です。

セクションの流れ

1. タイトルバナー — ストーリーの枠組みを示す、力強い見出し。「〜の現状」「XがYをどう変えたか」「数字で見るZ」など。
2. 重要な統計値 — 注目を集める大きな数値を1つ（text-7xl〜text-9xl）置きます。「〜の73％」や「4.2兆ドル」など。
3. 背景説明セクション — これが重要な理由を説明する2〜3文を置きます。text-base、max-w-xl。
4. データセクション（2〜4つ）— それぞれがデータの1つの側面を視覚化します。セクションごとに異なる視覚的な符号化を使います。
5. 比較 — 並列比較またはビフォー／アフターにします。違いを明確に示します。
6. 結論／CTA — 重要な要点を改めて示し、出典を記載します。

データビジュアライゼーションのパターン（Efecto Nodesを使用）

Efectoにはネイティブのチャートコンポーネントがないため、レイアウトを使ってデータを視覚的に表現します。

• 棒グラフ：値に比例した幅の横長フレームを使います。左にラベル、右に棒を配置します。
• 統計カード：大きな数値（text-6xl font-bold）とラベル（text-xs uppercase）を組み合わせます。3〜4枚をグリッド状に配置します。
• 比較列：2つの列を横並びにし、それぞれに項目を積み重ねます。色で区別します。
• タイムライン：垂直線（w-0.5 bg-border）に沿って、左右交互にコンテンツノードを配置します。
• アイコン配列：小さなアイコン（w-4 h-4）をグリッド状に並べ、色付きと彩度を抑えたアイコンで割合を表現します。
• ランキングリスト：大きさを示す棒を添えた番号付き項目を並べます。1〜5項目にします。

タイポグラフィ

• タイトル：text-3xl〜text-5xl、font-extrabold、tracking-tightにします。トピックを示します。
• 重要な統計値：text-7xl〜text-9xl、font-blackにします。視線を引きつける要素です。
• セクション見出し：text-xl font-boldにします。データセクションを区切ります。
• ラベル：text-xs uppercase tracking-widest font-mediumにします。データの注釈に使います。
• 本文：text-smにし、各セクションを2〜3行までにします。本文は補足であり、主役ではありません。
• 出典：text-xs text-muted-foregroundにし、インフォグラフィックの下部に配置します。

色の戦略

• データ用のメインカラーは1色＋ニュートラルカラー：白地に blue-600 の棒、slate-50 地に emerald-500 の棒。
• シーケンシャル：順位付けされたデータには、同じ色の明るい色合いから暗い色合いを使います（blue-200 → blue-800）。
• ダイバージング：比較には2色を使います（emerald-500 対 rose-500、「良い」対「悪い」）。
• カテゴリ：異なるカテゴリには3～4色を使います（青、アンバー、エメラルド、ローズ）。
• 背景：ごく淡い色合い（slate-50、stone-50、zinc-50）または白にします。インフォグラフィック全体を暗い色にしてはいけません。

ルール

• データセクションは最大4つまでにします。4つを超えると、注目度が急激に下がります。
• 生データの表は使いません。すべての数値を視覚要素に変換します。
• ソースは必ず明記します（下部に text-xs）。「Source: Company Annual Report 2025」のような記載でも、信頼性が高まります。
• 実際にありそうなデータを使います。「リモートワーカーの73%が非同期コミュニケーションを好む」のようにし、「X%の人がYをする」のような表現は避けます。
• セクションを詰め込みすぎないでください。データブロック間に gap-8 から gap-12 の間隔を設け、各セクションにゆとりを持たせます。

---

招待状／告知カード

イベントの雰囲気を決める、個人的で、ときに感情に訴えかけるデザインです。

基本原則

• まずは感情を大切にします。 招待状には、祝福、優雅さ、興奮、温かさといった気持ちが込められます。デザインでイベントの雰囲気を表現します。
• 大切な情報を美しく配置します。 誰が主催するのか、どのようなイベントなのか、いつ、どこで開催されるのか、どのように返答するのかを、上品に提示します。
• 記憶に残るデザインにします。 大きな文字、印象的な色、優雅な縁取りなど、意外性のある要素を1つ取り入れると印象に残ります。
• イベントに合わせます。 ブラックタイのガラパーティーの招待状は、子どもの誕生日パーティーの招待状とはまったく異なります。格式のレベルを正確に合わせます。

アートボードの設定

• 標準カード：672x480（7" x 5"）または480x672（5" x 7" 縦向き）
• 正方形：540x540または648x648
• A5 横向き：794x559
• 招待状全体を作成するため、アートボードを2つ作成します：「Front」と「Back」（または「Details」）

レイアウトパターン

• クラシックな中央揃え：すべてを中央に配置し、余白を十分に取ります。名前やイベント名を大きくし、その下に小さめの詳細を配置します。時代を問わないデザインです。
• フレーム／縁取り：細い装飾的な縁取り（内側の余白に border-2 rounded-xl と p-8 から p-12 を使用）。内側にコンテンツを中央揃えで配置します。
• 分割：左半分を色面または画像、右半分をテキストにします。現代的で整った印象です。
• 上部に重心を置く：大きな装飾的ヘッダー（色面、パターン、画像）を配置し、詳細を下部3分の1にまとめます。
• ミニマル：深みのある背景色にテキストだけを配置します。徹底して要素を絞ります。フォーマルなイベントに適しています。

コンテンツの階層

1. 主催者の一言（任意）—「両家とともに」や「ご招待いたします」— text-xs から text-sm、font-light
2. イベント名／名前 — デザインの中心です。「Sarah & James」、「Annual Gala」、「You're Turning 5!」など — text-3xl から text-5xl
3. イベントの種類 —「Wedding Celebration」、「Birthday Party」、「Grand Opening」など — text-sm から text-base
4. 日付＋時間 — 目立つようにします。text-lg font-semibold。装飾的な書式も検討します。
5. 会場 — 名称＋住所。text-sm から text-base。
6. 出欠の返答 — 返答方法。text-xs から text-sm。「3月15日までに [email protected] へご返信ください」
7. 追加情報 — ドレスコード、駐車場、食事に関する注意事項。text-xs text-muted-foreground。

イベントの種類に合わせたスタイル

• 結婚式：優雅で、セリフ体を思わせるデザイン。柔らかな色（rose-50、stone-50、amber-50）。名前には tracking-wide を使います。装飾は最小限にします。
• 誕生日（大人）：大胆にも優雅にもできます。暗い背景（zinc-900＋ゴールドのアクセント）や明るい色（フューシャ、アンバー）を使います。
• 誕生日（子ども）：明るく、遊び心のあるデザイン。大胆な色（yellow-400、sky-400、rose-400）。大きく楽しい文字。すべての要素に角丸を使います。
• 企業イベント：すっきりとしたプロフェッショナルなデザイン。ブランドカラー＋白。明確な階層。遊び心は加えません。
• 祝日：テーマに合わせた色（クリスマスには赤＋緑、ハロウィンにはオレンジ＋黒）。温かく、祝祭感のある雰囲気にします。
• ベビーシャワー：柔らかなパステルカラー（sky-100、rose-100、ミント）。穏やかで繊細な雰囲気にし、余白をたっぷり取ります。

ルール

• ごちゃごちゃさせないでください。招待状には余白があり、意図が感じられるデザインにします。迷ったら、要素を減らしてください。
• ダミーテキストは使わないでください。「Emma & Lucas」のような現実的な名前、実際の日付や会場を使います。
• 必ず含めるもの：イベント名、日付、時刻、場所、出欠の返信方法。
• 結婚式の場合：新郎新婦の名前はデザインの主役であり、単なる細部ではありません。堂々と際立たせてください。

---

メールニュースレター（レイアウト全体ガイド）

上記の「メールヘッダーとニュースレターのグラフィック」のセクションを拡張した内容です。ヘッダーやヒーローグラフィックだけでなく、ニュースレター全体のレイアウトデザインを扱います。

基本原則

• 1カラムが基本です。 メールクライアントの表示は予測できません。1カラム（max-w-xl〜max-w-2xl）なら、どこでも問題なく表示できます。
• ひと目で把握できるブロックにします。 読者はニュースレターをざっと読みます。各コンテンツブロックは、画像／見出し／抜粋／リンクで完結させます。
• 明確な視覚的リズムを作ります。 セクション間の間隔を統一し、読者が予測できるパターンを繰り返します。
• 各セクションにCTAを1つだけ設けます。 各コンテンツブロックに含めるアクションは1つだけにします。「続きを読む」「視聴する」「登録する」などです。

アートボードの設定

• 標準：600x900〜640x1200（メールの幅は通常600pxです）
• 最大幅は640にします。メールクライアントでは、それより広いレイアウトが切り取られます。
• アートボードは縦長の1枚にします。ニュースレターは縦にスクロールします。

レイアウトパターン

• ヘッダー → ヒーロー → カード → CTA → フッター：最も一般的なニュースレターの構成です。
• ブログダイジェスト：3〜5本の記事を、繰り返しのカード（画像を左、テキストを右に配置するか、上下に配置）で紹介します。
• 単一の記事：大きな特集記事1本に、補足画像や引用文を添えます。
• 厳選リンク：簡潔な説明を添えたリンクの番号付きリストです。画像は最小限にします。
• ミックス：特集記事＋クイックリンク＋イベントの告知＋フッター。

セクション構成

HEADER — Logo left, date/issue right. bg-background, py-4 px-6. Thin bottom border.

HERO — Featured story. Large image (rounded-xl), headline below (text-xl font-bold),
  2-line excerpt, "Read more" link.

CONTENT CARDS (x3-5) — Repeating pattern:
  Image thumbnail (w-24 h-24 rounded-lg) left + headline (text-base font-semibold)
  + excerpt (text-sm) + link

DIVIDER — Simple horizontal rule (h-px bg-border) between sections.

CTA SECTION — "Subscribe", "Share", or event promo. bg-muted rounded-xl p-6, centered.

FOOTER — Unsubscribe link, company address, social icons. text-xs text-muted-foreground.

タイポグラフィ

• ヘッダー：ロゴのテキストまたは画像。text-lg font-bold。
• 見出し：text-lg〜text-xl、font-bold。クリックできることが伝わる見た目にします。
• 本文／抜粋：text-sm、font-normal。カードごとに最大2〜3行にします。
• リンク：text-sm font-medium text-primary。下線を付けるか、色を明確に変えます。
• セクションラベル：text-xs uppercase tracking-widest font-semibold text-muted-foreground。
• フッター：text-xs、text-muted-foreground。

ルール

• 最大幅は640pxです。これを超えてはいけません。
• 複雑なレイアウトは避けてください。最大でも2カラムとし、1カラムを優先します。
• 必ず含めるもの：ブランドを示すヘッダー、コンテンツセクション、配信停止リンク、フッター。
• すべてのコンテンツカードに、明確なアクションリンクを付けます。読者にクリック先を推測させないでください。

---

ビジネス文書／レポート

プロフェッショナルなビジネス文書は、構成が整い、信頼性があり、情報が充実しています。

基本原則

• 構成によって信頼性を高めます。 読者が内容を読む前に、整理された文書が信頼を築きます。
• 情報量が多くても、読み進めやすくします。 ビジネス文書には多くのテキストが含まれます。デザインの役割は、読者が目的の情報を見つけやすくすることです。
• プロフェッショナルとして節度を保ちます。 派手なデザインは避けます。読みやすいタイポグラフィ、統一された余白、控えめなアクセントを使います。
• 階層構造がすべてです。 タイトル → セクション → サブセクション → 本文 → キャプションの5段階を、視覚的に明確に区別します。

アートボードの設定

• US Letter：816x1056
• A4：794x1123
• 複数ページの文書の場合：同じ寸法のアートボードを複数作成し、縦に配置します。
• ページ名：「01 — 表紙」、「02 — エグゼクティブサマリー」、「03 — 分析」

文書の種類

レポート／ホワイトペーパー：

• 表紙：タイトル（text-4xl font-bold）、サブタイトル、著者、日付、会社のロゴ
• 目次（任意）：セクション番号＋タイトル＋ページ番号
• セクション：大見出し（text-2xl font-bold）＋本文（text-sm）＋コールアウトボックス

提案書：

• 表紙：プロジェクト名＋クライアント名＋日付。プロフェッショナルで、相手に合わせたデザインにします。
• 課題 → 解決策 → アプローチ → スケジュール → 価格 → 条件

パンフレット：

• 2〜3カラムのレイアウト
• 特徴を紹介するボックス：bg-muted rounded-xl p-6 にアイコン＋見出し＋説明を配置
• 裏面：連絡先、場所、ウェブサイト

1枚もの／ファクトシート：

• すべてを1ページに収めます。情報密度を最大限に高めます。
• タイトル＋ロゴを含むヘッダーバンドと、統計ボックスを配置した2〜3カラムの本文

タイポグラフィ

• ドキュメントのタイトル：text-3xl〜text-4xl、font-bold。表紙のヒーロー要素です。
• セクション見出し：text-xl〜text-2xl、font-bold。セクションを明確に区切ります。
• サブセクション見出し：text-base〜text-lg、font-semibold。
• 本文：text-sm、font-normal、leading-relaxed。段落を読みやすくします。
• キャプション：text-xs、text-muted-foreground、italic。図や表の下に配置します。

構成要素

• 引用文：bg-muted p-6 rounded-xl、text-lg font-medium、border-l-4 border-primary
• 統計ボックス：bg-primary text-primary-foreground p-4 rounded-xl、大きな数値＋ラベル
• 表：全幅、ヘッダー行はbg-muted、行の背景色を交互に変更、文字サイズはtext-xs〜text-sm
• 区切り線：主要なセクションの間にh-px bg-border

ルール

• 本文は必ずtext-sm、leading-relaxedにします。行間が狭いと読むのが疲れます。
• 本文の列は最大2列にします。長文を読む場合は1列が最も安全です。
• 必ず含めるもの：タイトル、日付、著者／会社名、セクション見出し、ページ構成。
• 図や表にはキャプションを付けます：「図1：月間アクティブユーザー数、2025年1月〜12月」
• 装飾要素は使いません。すべての視覚要素は、情報を伝えるか、ナビゲーションを改善する必要があります。

---

グラフィックデザイン全般のヒント

構図

• 3秒で伝わる視覚的階層。 デザインを目を細めて見て、最も重要な要素がわかるか確認します。わからない場合は、主要要素、二次要素、三次要素のコントラストを強めます。
• 三分割法。 重要な要素は、対称性を意図して中央に配置する場合を除き、ど真ん中ではなく交点に配置します。
• 余白が構造を作ります。 パディングや間隔は、枠線や区切り線よりも大きな効果を発揮します。セクション間にはgap-8〜gap-16を使います。
• 視線を引きつける要素。 どの構図にも、最初に目が向かう視覚的な基点が必要です。他の要素よりも格段に大きく、太く、または色鮮やかにします。

グラフィックの色使い

• 3色ルール。 メインカラー、サブカラー、アクセントカラーを1色ずつ使います。3色を超えると、デザインが雑然とします。
• 60-30-10の配分。 60％をメインカラー（背景）、30％をセカンダリーカラー（コンテナや補助要素）、10％をアクセントカラー（CTAや強調箇所）にします。
• 50％のズームで確認。 半分のサイズでもデザインがはっきり伝わるなら、コントラストは適切です。

グラフィックのタイポグラフィ

• フォントは最大2種類。 見出し用に1種類、本文用に1種類を使います。同じフォントのウェイト違いを使う方法もあります。
• サイズの差が重要です。 見出しは本文の少なくとも2倍のサイズにします。text-4xlとtext-3xlの組み合わせではなく、text-6xlの見出しとtext-2xlの本文にします。
• 大文字の文字間隔。 大文字のテキストには必ずtracking-wideまたはtracking-widestを指定します。そうしないと窮屈に見えます。

フォーマット早見表

素材	サイズ	主なルール
プレゼンテーション	1920x1080	スライド1枚につきアイデアは1つ、最小でもtext-3xl
ピッチデック	1920x1080	スライド10枚、大きな数値、テキストは最小限
イベントポスター	1080x1350	内容＋日時＋場所＋CTA
メールヘッダー	600x200	ブランド＋1行、最大600px
メールのヒーロー画像	600x400	CTAは1つ、シンプルなレイアウト
ブログのヒーロー画像	1200x675	雰囲気を重視し、テキストは任意
OG画像	1200x630	タイトル＋ブランド、300pxでも見やすく
証明書	1400x1000	格式あるデザイン、中央揃え、ゆとりのある余白
名刺	336x192 / 672x384	色は最大2色、3段階の階層、表裏
履歴書	816x1056	必ず1ページ、6秒で要点を把握できる構成、アクセントカラーは1色
チラシ	816x1056	見出しを目立たせる。内容＋日時＋場所＋方法
メニュー	816x1056	カテゴリーごとに見やすく整理し、価格を明示し、食欲をそそるデザイン
インフォグラフィック	1080x3200	主要な洞察は1つ、データを視覚的に表現し、上から下へ構成
招待状	672x480	まず感情に訴え、格式のレベルを正確に合わせる
ニュースレター	640x1200	1列、最大640px、流し読みしやすいブロック
ドキュメント	816x1056	5段階の階層、控えめでプロフェッショナルなデザイン