Apple Bento Grid
問題
視覚的に洗練されたプレゼンテーショングラフィックを作成するには、通常FigmaやKeynoteなどのデザインツールが必要です。このスキルは、Apple品質のベントーグリッドレイアウトを自己完結型のHTMLファイルとして生成し、スクリーンショットでピクセルパーフェクトな画像に変換できるようにします。デザインツールは不要です。
概要
Apple風のベントーカードグリッドをレンダリングする自己完結型HTMLファイルを生成します。各出力はインラインCSSを含む単一のHTMLファイルで、Google Fonts以外の依存関係はありません。カードは最小のギャップでタイトなCSSグリッドを埋め、2倍解像度でのPlaywrightスクリーンショットエクスポートに対応しています。ライトテーマとダークテーマの両方が利用可能です。
ワークフロー
- デザインシステムを選択的に読む: 必要に応じて
design-system.mdを参照します。- 常に読む: セクション2（ゼロギャップグリッド）+ セクション3（レイアウトテンプレート）— グリッドの基盤
- カードタイプごとに読む: 使用するカードに応じてセクション5.1～5.7
- テーマに応じて読む: セクション1（ライトトークン）またはセクション9（ダークトークン）
- 初回生成時に一度読む: セクション8（HTMLスケルトン）を構造の出発点として
- ユーザーのコンテンツを収集する — 表示する統計、マイルストーン、カテゴリ、引用
- テーマを選択する — コンテキストに基づいてライト、ダーク、または両方を提案します（下記のテーマ選択を参照）
- レイアウトを選択する — カード数と方向に基づいて3つのレイアウトテンプレートから選択します
- カードを構成する — カードタイプを選択し、ユーザーのコンテンツで埋めます。密度を優先します（空っぽに見えるカードは避ける）
- ロゴ/画像について尋ねる — ユーザーがロゴや画像を持っている場合は、それらを組み込みます（下記のロゴと画像を参照）
- HTMLを生成する — 単一の自己完結型HTMLファイルを生成します
- ビジュアルレビュー — ブラウザでHTMLを開き、スクリーンショットを撮って問題がないか確認します（下記のビジュアルレビューを参照）
- 縦長バージョンを提供する — 横長グリッドを生成した後、「ソーシャルメディア用に縦長（ポートレート）バージョンはいかがですか？」と尋ね、同意があればテンプレートCを適用します
- スクリーンショット（オプション） — Playwrightスクリプトを使用して2倍解像度でPNGをキャプチャします
ビジュアルレビュー
HTMLを生成した後、ユーザーに提示する前に必ず出力を表示して視覚的な問題をチェックします。Playwright、ブラウザMCPツール、またはopenコマンドを使用してファイルをレンダリングし、以下を確認します。
孤立した行 — 1つのピルタグや単語が単独で新しい行に折り返されている。残りのピルが均等に埋まるように1つ削除するか、2行全体を埋めるのに十分なピルを追加して修正します。
空白スペース — 余白が多すぎてカードがまばらに見える。サブタイトル、バッジ、または追加の説明テキストを追加して修正します。
テキストオーバーフロー — カード幅に対して数字やラベルが長すぎる。フォントサイズを小さくするか、省略形を使用します（例：「$2,400,000」ではなく「$2.4M」）。
グリッドの崩れ — 行のギャップが表示されたり、カードの配置がずれている。確認事項：align-items: startが設定されていない、ギャップが正確に6pxである、すべてのグリッドセルが埋まっている。
フォントフォールバック — Sora/DM Sansではなくシステムフォントでテキストがレンダリングされている。Google Fontsのリンクが存在し、ページにネットワークアクセスがあることを確認します。
スクリーンショットのクリッピング — エクスポートされたPNGでカードの右端または下端が切り取られている。ビューポート幅がグリッドCSS幅と正確に一致していること、およびクリップがboundingBox()のbox.x/box.yを使用しており、x: 0, y: 0ではないことを確認して修正します。
問題が見つかった場合は、HTMLを修正して再確認します。出力がビジュアルレビューに合格するまで、ユーザーに提示してはいけません。
テーマ選択
コンテキストに基づいてテーマを提案します。不明な場合は、両方を生成します。
| コンテキスト | 推奨テーマ |
|---|---|
| スライドデッキ / プレゼンテーション | ダーク — プロジェクターでの視覚的インパクトが高い |
| ソーシャルメディア / ポートフォリオ | ダーク — フィードで目立つ |
| レポート / ドキュメント埋め込み | ライト — 白いページ背景にマッチ |
| 印刷 / PDF | ライト — インク節約、可読性向上 |
| ユーザーが「Appleスタイル」と言った場合 | ライト — Appleのシグネチャールック |
| ユーザーが「モダン」または「スタイリッシュ」と言った場合 | ダーク — 現代的な雰囲気 |
| 特に指定なし | 両方 — 2つのファイルを生成し、ユーザーに選択させる |
完全なダークテーマトークンについてはdesign-system.mdのセクション9、ライトテーマトークンについてはセクション1を参照してください。
出力形式
常に単一の自己完結型HTMLファイルを生成します。
<!DOCTYPE html>+<html lang="en"><head>内のGoogle Fonts<link>タグ- 単一の
<style>ブロック内のすべてのCSS <body>内のすべてのコンテンツ — JavaScriptは不要
利用可能なカードタイプ
| カード | 用途 | 主な特徴 |
|---|---|---|
| ヒーロー | タグライン、見出し | グラデーショントップボーダー、2行にまたがる |
| 統計 | 数字 + ラベル | カテゴリごとに色分けされたアクセント |
| カテゴリ | グループ化された項目（フェーズ、チーム、四半期） | カラーラベル + サブタイトル + ピルタグ |
| 棒グラフ | 経時的な成長/比較 | グラデーションバー、ヘッダーバッジ |
| バッジ | ツール属性、注目のコールアウト | アイコンピル + 統計数字 |
| 引用 | ミッションステートメント、推薦文 | ダーク背景、白文字、緑<em> |
| ハイライト | ヒーロー数字（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のセクション2を参照してください。
align-items: startを絶対に設定しない — デフォルトのstretchでセルを埋める- 横長レイアウトでは
aspect-ratioを使用してコンテナ形状を固定する - 行: 横長の場合は
1fr、縦長の場合はauto - ギャップ:
6px（8pxではない） - すべてのグリッドセルが埋まっている必要がある — 空のセルは不可
スクリーンショットエクスポート
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）に設定してください。
重要: クリップは要素の位置を使用してください。 グリッド要素にクリップする場合は、boundingBox()のbox.xとbox.yを使用し、x: 0, y: 0は使用しないでください。グリッドがより広いビューポートで中央に配置されている場合、x: 0はグリッドの前からクリップを開始し、右側を切り取ることになります。
スクリーンショット後、常に出力画像を表示して、端がクリップされていないことを確認します。右端と下端のカードが完全に表示され、ボーダー半径が維持されていることを確認してください。
ロゴと画像
ユーザーは独自のロゴや画像をベントーグリッドカードに追加できます。ユーザーに、含めたいロゴや画像があるかどうか尋ねてください。
配置オプション:
| 場所 | 方法 | 最適な用途 |
|---|---|---|
| ヒーローカードの角 | position: absolute; top: 20px; right: 20px; width: 40px; の<img> | 会社ロゴ |
| バッジカードアイコン | バッジピル内のSVGを<img>タグ（width: 16px; height: 16px; border-radius: 4px;）に置き換える | ツール/フレームワークのロゴ |
| カード全体の背景 | テキスト可読性のためのオーバーレイグラデーション付きbackground-image: url(...) | 機能スクリーンショット |
| 単体画像カード | object-fit: cover; border-radius: 18px;でカードを埋める<img> | 製品写真 |
ガイドライン:
- ローカルファイルパスで
<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カラム縦長） | 任意のミックス、小さいフォント |
密度ルール: すべてのカードは十分に埋まっているように感じられるべきです。カードがまばらに見える場合は、サブタイトル、バッジ、またはピルタグを追加します。グリッドに目に見える空白スペースがある場合は、カードをセルにまたがらせるか、サポートカードを追加します。
カスタマイズチェックリスト
- コンテンツを収集 — 統計、カテゴリ、マイルストーン、引用
- テーマを選択 — ライト、ダーク、または両方
- レイアウトを選択 — 4カラム、3カラム、または2カラム
- グリッドエリアに名前を付ける — コンテンツに一致する読みやすい名前
- カードタイプを選択 — ヒーロー、統計、カテゴリ、チャート、バッジ、引用、ハイライト
- アクセントカラーを割り当てる — カテゴリごとに1つ、最大3～4アクセント
- 寸法を設定 — ビューポート幅がグリッド幅に一致
- アスペクト比を固定 — 横長のみ。縦長の場合は省略
- 密度を確認 — 空っぽに見えるカードがない、未使用のグリッドセルがない、ギャップ6px
- 方向に合わせてスケーリング — 縦長の場合は小さいフォント、パディング、半径
- スクリーンショット — Playwrightで2倍、ビューポートがグリッド幅に一致
検証
ベントーグリッドHTMLファイルを生成した後:
- ChromeまたはSafariで開く — すべてのグリッドセルが目に見える行ギャップなしで埋まっていることを確認
- フォントの読み込みを確認 — SoraとDM Sansがレンダリングされていること（システムフォールバックでない）
- ダークテーマの場合 — カード背景が#1a1a1aであり、#fffでないことを確認
- 正しいビューポート幅（1200/1100/600）で2倍解像度のスクリーンショット
- 密度を確認 — 過度な空白スペースがあるカードがないこと
注意事項
- Google Fontsはインターネットアクセスが必要です。オフラインではグリッドはシステムフォントにフォールバックします
- Playwrightスクリーンショットはオプションです。ユーザーは手動でブラウザのスクリーンショットを撮ることもできます
aspect-ratioは横長レイアウトのみに使用します。縦長レイアウトはコンテンツの高さから流れます- Appleのような抑制を維持するため、グリッドあたり最大3～4のアクセントカラー
- このスキルはスクリーンショットエクスポート用の静的HTMLを生成し、インタラクティブなダッシュボードではありません
- データポイントが6未満のグリッドには、通常テンプレートC（2カラム縦長）が最適です
参照ファイル
design-system.md— 完全なデザイントークン（ライト+ダーク）、カードCSS/HTML、レイアウトテンプレート、スケルトンscripts/screenshot.mjs— Playwrightスクリーンショットキャプチャスクリプト