apple-bento-grid

Apple Bento Grid

課題

見栄えのよいプレゼンテーション用グラフィックを作成するには、通常、Figma や Keynote などのデザインツールが必要です。このスキルでは、スクリーンショットを撮るとピクセル単位で正確な画像になる、自己完結型の HTML ファイルとして、Apple 品質の Bento グリッドレイアウトを生成します。デザインツールは不要です。

概要

Apple に着想を得た Bento カードグリッドを表示する、自己完結型の HTML ファイルを生成します。各出力はインライン CSS を含む単一の HTML ファイルで、Google Fonts 以外の依存関係はありません。カードは隙間を最小限に抑えた CSS グリッドに配置され、Playwright で 2 倍解像度のスクリーンショットを書き出せる状態になります。ライトテーマとダークテーマの両方を利用できます。

ワークフロー

1. デザインシステムを必要な箇所だけ読む：必要に応じて design-system.md を参照します。
   • 必ず読む：セクション 2（Zero-Gap Grid）とセクション 3（Layout Templates）— グリッドの基礎
   • カードの種類に応じて読む：使用するカードに合わせてセクション 5.1〜5.7 を参照
   • テーマに合わせて読む：セクション 1（ライトトークン）またはセクション 9（ダークトークン）
   • 初回の生成時に一度読む：構造の出発点としてセクション 8（HTML Skeleton）を参照
2. ユーザーのコンテンツを集める — 紹介する統計、マイルストーン、カテゴリ、引用文
3. テーマを選ぶ — コンテキストに基づいてライト、ダーク、または両方を提案します（下記の「テーマの選択」を参照）
4. レイアウトを選ぶ — カードの数と向きに基づいて、3 つのレイアウトテンプレートから選びます
5. カードを構成する — カードの種類を選び、ユーザーのコンテンツを配置します。密度を優先し、空虚に感じるカードを作らないようにします
6. ロゴや画像について確認する — ユーザーがロゴや画像を持っている場合は、それらを取り入れます（下記の「ロゴと画像」を参照）
7. HTML を生成する — 自己完結型の HTML ファイルを 1 つ作成します
8. 見た目を確認する — ブラウザーで HTML を開き、スクリーンショットを撮って問題がないか確認します（下記の「見た目の確認」を参照）
9. 縦型バージョンを提案する — 横長のグリッドを生成した後、「SNS 用の縦型（ポートレート）バージョンも作りますか？」と尋ね、希望する場合はテンプレート C をベースに調整します
10. スクリーンショットを撮る（任意）— Playwright スクリプトを使って 2 倍解像度の PNG をキャプチャします

見た目の確認

HTML を生成した後は、ユーザーに提示する前に、必ず出力を表示して見た目の問題を確認します。Playwright、ブラウザー MCP ツール、または open を使ってファイルをレンダリングし、次の点を確認します。

孤立した行 — 1 つのピルタグや単語だけが新しい行に折り返されています。ピルを 1 つ削除して残りが均等に収まるようにするか、2 行を埋めるのに十分な数のピルを追加して修正します。

余白が多すぎる — 余白が多く、カードがまばらに見えます。サブタイトル、バッジ、追加の説明文を加えてカードを埋めます。

テキストのはみ出し — 数字やラベルがカードの幅に対して長すぎます。フォントサイズを小さくするか、短縮して修正します（例：「$2,400,000」ではなく「$2.4M」）。

グリッドの崩れ — 行の間に隙間が見えたり、カードの位置がずれたりしています。align-items: start がないこと、gap が正確に 6px であること、すべてのグリッドセルが埋まっていることを確認します。

フォントのフォールバック — Sora／DM Sans ではなく、システムフォントでテキストが表示されています。Google Fonts のリンクがあり、ページがネットワークにアクセスできることを確認します。

スクリーンショットの切り抜き — 書き出した PNG でカードの右端や下端が切れています。ビューポートの幅がグリッドの CSS 幅と正確に一致していること、切り抜きに x: 0, y: 0 ではなく boundingBox() の box.x／box.y を使用していることを確認します。

問題が見つかった場合は HTML を修正し、再度確認します。見た目の確認に合格するまで、ユーザーに提示しないでください。

テーマの選択

コンテキストに基づいてテーマを提案します。判断に迷う場合は、両方を生成します。

コンテキスト	推奨テーマ
スライドデッキ／プレゼンテーション	ダーク — プロジェクターでより視覚的なインパクトを与えます
ソーシャルメディア／ポートフォリオ	ダーク — フィード内で目を引きます
レポート／ドキュメントへの埋め込み	ライト — 白いページの背景になじみます
印刷／PDF	ライト — インクを節約でき、読みやすさも向上します
「Apple 風」と指定された場合	ライト — Apple を象徴するスタイルです
「モダン」または「洗練された」と指定された場合	ダーク — 現代的な雰囲気です
希望の指定がない場合	両方 — ファイルを 2 つ生成し、ユーザーが選べるようにします

ダークテーマのトークンの詳細は design-system.md の Section 9、ライトテーマのトークンの詳細は Section 1 を参照してください。

出力形式

常に、次の要件を満たす自己完結型の HTML ファイルを 1 つ生成してください。

• <!DOCTYPE html> + <html lang="en">
• <head> 内に Google Fonts の <link> タグ
• CSS はすべて 1 つの <style> ブロックに記述
• すべてのコンテンツを <body> 内に記述 — JavaScript は不要

利用可能なカードの種類

カード	用途	主な特徴
Hero	キャッチコピー、見出し	グラデーションの上辺、2 行分の幅
Stat	数値 + ラベル	カテゴリーごとに色分けされたアクセント
Category	グループ化された項目（フェーズ、チーム、四半期）	色付きラベル + サブタイトル + ピルタグ
Bar Chart	時系列の成長／比較	グラデーションのバー、ヘッダーバッジ
Badge	ツールのクレジット表記、注目ポイント	アイコン付きピル + 統計値
Quote	ミッションステートメント、推薦コメント	ダークな背景、白いテキスト、緑色の <em>
Highlight	大きく見せる数値（3x、10x、100%）	全体を覆うグラデーション背景

レイアウトテンプレート

テンプレート	列数	幅	アスペクト比	最適な用途
A: 横型	4 列	1200px	52/25	12〜16 枚のカード、スライド
B: 横型	3 列	1100px	52/22	8〜10 枚のカード、内容を絞った構成
C: 縦型	2 列	600px	なし（コンテンツに合わせる）	8〜14 枚のカード、ソーシャルメディア

重要：隙間ゼロのグリッドルール

Apple 風の見た目にするため、次の 5 つのルールは必須です。詳細は design-system.md Section 2 を参照してください。

1. align-items: start は絶対に設定しない — デフォルトの stretch でセルを埋めます
2. 横型レイアウトでは aspect-ratio を使い、コンテナーの形状を固定します
3. 行のサイズ指定：横型は 1fr、縦型は auto
4. 間隔：6px（8px ではありません）
5. すべてのグリッドセルを埋める — 空のセルを作らない

スクリーンショットのエクスポート

 scripts/screenshot.mjs の Playwright スクリプトを使って、ピクセル単位で正確な PNG をキャプチャします。

cd scripts
npm install
npx playwright install chromium
node screenshot.mjs

screenshot.mjs の pages 配列を編集し、HTML ファイルを指定します。各エントリーには、file（HTML パス）、output（PNG パス）、viewportWidth（グリッドの幅に合わせる）が必要です。

重要：ビューポートの幅はグリッドの幅に合わせてください。 ビューポートがグリッドより広いと、グリッドが中央に配置され、クリップによって右端が切れる場合があります。viewportWidth には常にグリッドの CSS 幅を正確に指定してください（4 列は 1200、3 列は 1100、2 列は 600）。

重要：クリップには要素の位置を使用してください。 グリッド要素をクリップする際は、x: 0, y: 0 ではなく、boundingBox() の box.x と box.y を使ってください。グリッドが幅広のビューポート内で中央に配置されている場合、x: 0 からクリップを開始すると、グリッドより手前から始まり、右側が切れてしまいます。

スクリーンショットを撮影した後は、必ず出力画像を確認してください。 端が切れていないことを確認します。最も右と最も下のカードが、角丸を含めてすべて見えていることをチェックしてください。

ロゴと画像

ユーザーは、独自のロゴや画像をベントーグリッドのカードに追加できます。追加したいロゴや画像があるか、ユーザーに確認してください。

配置オプション：

場所	方法	最適な用途
ヒーローカードの隅	<img> に position: absolute; top: 20px; right: 20px; width: 40px; を指定	会社のロゴ
バッジカードのアイコン	.badge-pill 内の SVG を <img> タグ（width: 16px; height: 16px; border-radius: 4px;）に置き換える	ツール／フレームワークのロゴ
カード全面の背景	テキストを読みやすくするオーバーレイグラデーションと background-image: url(...) を使用	機能のスクリーンショット
独立した画像カード	カード全体を覆う <img> に object-fit: cover; border-radius: 18px; を指定	製品写真

ガイドライン：

• ローカルファイルパスを指定した <img src="path/to/file.png"> を使用してください。HTML はホスティング用ではなく、スクリーンショットのエクスポート用です
• ロゴはカードの主役にならないよう、小さく（24～48px）してください
• ダークテーマでは、ロゴが暗い背景でも見えるようにしてください（白または明るい色のバージョンを使用）
• アクセシビリティのため、必ず alt テキストを追加してください

コンテンツの調整

ユーザーのデータ	推奨テンプレート	カードの構成
カテゴリなしで、統計が3～5件	C（縦2列）	ヒーロー1枚 + 統計3～5枚 + 引用1枚
統計が6～8件、カテゴリが1～2個	B（横3列）	ヒーロー1枚 + 統計4～6枚 + カテゴリ1～2枚 + チャート1枚
統計が8～12件、カテゴリが3個以上	A（横4列）	全種類を組み合わせる：ヒーロー、統計、カテゴリ、チャート、バッジ、引用、ハイライト
ソーシャル／ポートレート形式	C（縦2列）	任意の組み合わせ、小さめのフォント

密度のルール：すべてのカードに十分な内容があるようにしてください。カードがまばらに見える場合は、サブタイトル、バッジ、またはピルタグを追加してください。グリッドに目立つ空き領域がある場合は、カードを複数のセルにまたがらせるか、補助カードを追加してください。

カスタマイズのチェックリスト

1. コンテンツを集める — 統計、カテゴリ、マイルストーン、引用
2. テーマを選ぶ — ライト、ダーク、または両方
3. レイアウトを選ぶ — 4列、3列、または2列
4. グリッド領域に名前を付ける — コンテンツに合った読みやすい名前
5. カードの種類を選ぶ — ヒーロー、統計、カテゴリ、チャート、バッジ、引用、ハイライト
6. アクセントカラーを割り当てる — カテゴリごとに1色、アクセントは最大3～4色
7. 寸法を設定する — ビューポート幅をグリッド幅に合わせる
8. アスペクト比を固定する — 横向きの場合のみ。縦向きの場合は省略
9. 密度を確認する — 空いて見えるカードや未使用のグリッドセルがないこと、間隔が6pxであること
10. 向きに合わせて調整する — 縦向きではフォント、パディング、角丸を小さくする
11. スクリーンショットを撮る — Playwright を2倍の解像度で使用し、ビューポートをグリッド幅に合わせる

確認

ベントーグリッドの HTML ファイルを生成した後：

1. Chrome または Safari で開き、すべてのグリッドセルが埋まり、行間に目立つ隙間がないことを確認する
2. フォントの読み込みを確認する — Sora と DM Sans が（システムの代替フォントではなく）表示されていること
3. ダークテーマの場合 — カードの背景が #fff ではなく #1a1a1a であることを確認する
4. 正しいビューポート幅（1200/1100/600）で、2倍の解像度のスクリーンショットを撮る
5. 密度を確認する — 余白が過剰なカードがないこと

メモ

• Google Fonts の利用にはインターネット接続が必要です。オフラインではグリッドにシステムフォントが使用されます
• Playwright によるスクリーンショットの撮影は任意です。ユーザーはブラウザーで手動撮影することもできます
• aspect-ratio は横向きのレイアウトでのみ使用します。縦向きのレイアウトではコンテンツの高さに応じて配置されます
• Apple のような控えめなデザインを保つため、グリッドあたりのアクセントカラーは最大3～4色にしてください
• このスキルが生成するのはスクリーンショットのエクスポート用の静的 HTML であり、インタラクティブなダッシュボードではありません
• データポイントが6件未満のグリッドでは、通常、テンプレート C（縦2列）が最適です

参照ファイル

• design-system.md — ライト／ダーク両方のデザイントークン、カードの CSS／HTML、レイアウトテンプレート、スケルトンの完全版
• scripts/screenshot.mjs — Playwright のスクリーンショット撮影スクリプト