navaigate-present

navaigate-present は何をしますか？

メンバー自身のブランドに合わせたインタラクティブなプレゼンテーション。このスキルには最初はブランドやハウススタイルが設定されていません。すべてのデッキはNavAIgateのものではなく、メンバーのブランドのように見えます。最初のデッキを作成する前に、希望するスタイルを見つけます：質問をし、メンバーのサイトや好きなサイトを調査し、選択肢となる方向性を表示します。

ブランドに関係なく、すべてのデッキが守ること：

• 1画面に1つのアイデア。 左側に配置されたテキスト：ラベル、1語ずつ表示されアクセントフレーズが1つある見出し、短いプレーンパラグラフ。右側にライブキャンバスデモ。
• デモは実際に操作して学べる。 発表者が1つのものを押したり、ドラッグしたり、切り替えたりすると、画面が即座に反応します：数字がカウントされ、チャートが再描画され、カードが新しい場所へ滑らかに移動します。すべての変化にはイージングが適用され、ジャンプしません。
• 決して静止しない。 各デモは、スライドが表示されると到着アニメーションを再生し、待機中も穏やかな動きを保ちます。ページの背景はゆっくり動き、クリックした場所に波紋が広がります。
• トークのように動作する。 下矢印キー（またはSpace、Page Down、右矢印キー）で正確に1スライド移動します。上と左で戻り、HomeとEndで端にジャンプします。Fで全画面表示。下部にグループ化されたプログレスバー、上部バーにスライド名、マップスライドで任意の場所にジャンプできます。これらは template\core.js に含まれており、スライド内で変更してはいけません。
• 映画のようにテストされている。 すべてのスライドが3つのサイズでスクリーンショットされ、すべてのコントロールが押下テストされています。重なり、クリッピング、エラーは一切ありません。

わかりやすく話しましょう：ほとんどのメンバーはプログラマーではありません。各ステップの前に一言で何が起こるかを説明し、コマンドは尋ねられない限り見せないでください。ブランドは自身のフォルダ ~/.navaigate-present/brands/ に保存されるため、このスキルを更新してもブランドは影響を受けません。

0. どのブランド？

python -I scripts\brand.py list を実行します。

• ブランドがまだないか、新しいブランドが必要な場合：最初にセットアップ（セクション1〜4）を行います。約15分かかります。
• 1つのブランドがある場合：それを使用します。複数ある場合：リクエストから明らかでなければ、どれを使うか尋ねます。

1. 質問

これから何が起こるかを説明します：いくつかの質問、ウェブサイトと好きなスタイルの確認、そして2〜3つの方向性の選択。AskUserQuestion（1回の呼び出しで4つの質問）で質問します：

1. どのような印象にしたいですか？ 落ち着いてプレミアム / 大胆でエネルギッシュ / フレンドリーで温かい / クリーンでテクニカル。
2. ライト or ダーク？ ライト / ダーク / ウェブサイトに合わせる / 両方表示する。
3. ボタンやタグの角は？ 完全に丸い（ピル型） / 少し丸い / 四角 / ウェブサイトに合わせる。
4. スライドの背景は？ ソフトなドットグリッド / 細かい格子 / 方眼紙の線 / 無地。

その後、チャットで1つのメッセージで以下を尋ねます：

• ブランド名とウェブサイト；
• ロゴ（ファイルパス、またはドラッグ＆ドロップ）。SVGが最適ですが、透明な背景のPNGでも構いません。ファイルがない場合はウェブサイトから取得できることを伝えてください；
• ブランドガイドラインがあれば（PDFまたはリンク）；
• 好きなスタイルを1〜3つ：ウェブサイト、プレゼンテーション、ブランド、スクリーンショット。他業界のものでも構いません。スライドの雰囲気を参考にしたいものを伝えてください；
• 絶対に使いたくないもの（例：ピル型、絵文字、ネオンなど）；
• プレゼンテーションの対象者を一言で；
• デッキの保存場所（ドキュメント内の <Brand> presentations フォルダを提案）。

2. リサーチ

1. メンバーのサイトとお気に入りのサイト。 python -I scripts\research.py "~/.navaigate-present/research/<slug>" <website> <reference> を実行します。各サイトについて、最初の画面とページ全体のスクリーンショット、ヘッダーにあるロゴを保存します。また、ページが実際に使用しているフォント、背景色とテキスト色、アクセントカラー、角の丸み、ラベルスタイルも測定します。すべてのスクリーンショットを確認してください。 数値は実際のデータを示し、画像は雰囲気を示します。
2. ガイドラインがあれば、それを読みます。PDF内の色、フォント、ルールは、ウェブサイトが示すものより優先されます。
3. ウェブサイトもお気に入りもない場合？ メンバーの分野でデザインの良いサイトを3〜4つウェブ検索し、それらをインスピレーションとしてリサーチします。Firecrawlが接続されている場合は firecrawl_search で見つけ、formats: ["branding"] でのスクレイピングでサイトの色やフォントを再度読み取ります。
4. 見つけた内容を平易な言葉で数行で伝えます。 例：「あなたのサイトはクリーム色に深い緑を使い、見出しにはセリフ体を使っています。あなたが好きなデッキはダークで、四角い角と広い余白を使っています。」

お気に入りから取り入れるもの：その雰囲気（ライトかダークか、余白の取り方、タイプの特徴、角、色の使い方）。ロゴ、製品名、文言、正確なレイアウトを決して取らないでください。メンバー自身の色、ロゴ、名前はそのまま保持します。

3. 方向性

~/.navaigate-present/drafts/<slug>-a、-b、-c に2〜3つのドラフトブランドを作成します。各ドラフトには brand.json（references\BRAND.md 参照）、ロゴのコピー、そして数語の "direction" 名を付けます。例：

• A、ブランドに忠実： メンバー自身のサイトの色、フォント、角。
• B、<お気に入り>に近い： メンバーの色とロゴに、お気に入りのモード、タイプの特徴、角、背景を組み合わせたもの。
• C、別の選択肢： 明確なコントラスト。例えばAがライトならダーク、または異なるフォントの組み合わせ。それでもブランドイメージは保たれていなければなりません。

メンバーの回答に従います：印象、ライトかダークか、角、背景。「ウェブサイトに合わせる」と指定された場合は、リサーチで測定した値を使用します。その後：

1. 各ドラフトに対して python -I scripts\brand.py check <draft folder> を実行し、すべての「PROBLEM」行を修正します。
2. python -I scripts\brand.py compare <draft a> <draft b> [<draft c>] を実行します。各方向性のオープニングとチャートスライドを構築し、それらを1つの画像 directions.png に並べて表示します。
3. 画像と各方向性の index.html のフルパスをメンバーに見せ、実際に操作してもらいます。どれが良いか、「Aの色とBのタイプ」のようなミックスを希望するか尋ねます。必要に応じて調整し、再度比較して、1つが決定するまで繰り返します。

4. ブランドを保存

1. 選択された方向性（メンバーの変更を含む）を ~/.navaigate-present/brands/<slug>/ に書き込みます（brand.json、ロゴ、フォントファイル）。
2. python -I scripts\brand.py check <slug> を実行し、次に python -I scripts\brand.py sample <slug> を実行します。これにより、そのブランドで5つのサンプルスライドがすべて構築され、スクリーンショットが撮られます。
3. コンタクトシートを表示し、サンプルの index.html のフルパスを提供します。メンバーが満足したらセットアップ完了で、以降のすべてのデッキはこのブランドを使用します。

5. デッキの作成

1. ブリーフィング。 対象者、伝えなければならないメッセージ、おおよそのスライド数、発表場所、使用できる事実。メンバーが提供した事実、または出典が明らかな事実のみを使用します。機能、数値、引用をでっち上げてはいけません。
2. アウトライン。 python -I scripts\new_deck.py "<deck folder>" "<title>" <brand slug> を実行します。サンプルスライドからデッキを開始します。次に _build\deck.json を書きます：グループ（プログレスバーになる）とスライドの順序。各スライドについて、発表者が操作する1つのことと、それが何を証明するかを決定します。操作するものがないスライドは弱いスライドです。
3. コピー。 すべてのスライドの label、headline、hl、body を一度に書き、デッキ全体が統一された声、つまり brand.json のブランドの声になるようにします。見出しは5〜10単語で、hl（2〜4単語）を見出し内に含めます。本文は最大約45単語。平易な言葉と短い文で、ダッシュや「レバレッジ」「シームレス」「アンロック」などの決まり文句は使いません。writing-style スキルと humanizer スキルがインストールされている場合は、それらを使用します。
4. ビルド。 references\SLIDE-BUILDER.md に従って各スライドをビルドします。スライドは個別のフォルダなので、ヘルパーが並行してビルドできます。各ヘルパーにそのランクブック、スライドID、ブランドスラッグ、事実、スライドごとに1つのデモアイデアを渡します。
5. テスト。 python -I scripts\build.py "<deck>" を実行し、次に python -I scripts\shoot.py "<deck>" 1920 1080、同じく 1440 900 と 1280 720 でも実行します。各実行で missing copy: none、fit: clean、console: clean が出力される必要があります。すべてのスクリーンショット（コントロールを押した後に撮影されたものも含む）を確認します。
6. レビュー。 各スライドを観客の視点で読みます。デモは見出しを証明していますか？文言は平易で正確ですか？サンプル数値は計算が合っていますか？また「Example figures」とラベル付けされていますか？ブランドの never リストを確認します。
7. 納品。 デッキの index.html のフルパスを提供します。これは1つのファイルで、Google Fontsを除きオフラインで動作し、スライドが画像を読み込む場合は assets\ ディレクトリも含まれます。

ルール

• 色とフォントはブランドからのみ取得します。 CSSではトークン（--accent、--accent-ink、--s1、--text、--muted、--line など）を使用します。キャンバスでは E.COL、E.FONT、E.HEAD、E.LABEL を使用します。スライドに16進数の色コードを直接記述しないでください。これにより、すべてのスライドがどのブランドでも機能するようになります。
• アクセント語は --accent-ink（または E.COL.accentInk）を使用します。アクセントカラーは背景上で読みやすくなるように調整されています。塗りつぶしには --accent を、アクセント塗りつぶし上の文字には --on-accent を使用します。
• 角の丸みはブランドに従います。 ボタンとタグには var(--rp)、カードには var(--r)、キャンバスでは E.R を使用します。999px と直接指定しないでください。
• ロゴは常にメンバーの実際のファイル であり、ビルドによってインライン化されます（セクション内の <!--LOGO-->）。再描画したり、画像生成AIに依頼したりしないでください。ロゴファイルがない場合、ブランド名は見出しフォントで設定します。ロゴには固定サイズのボックスを与え、その中に収めます（object-fit: contain）。
• 数値は実数か、ラベル付きであること。 サンプルの計算は正しく、「Example figures」と表示します。
• 金額と数値 はブランドの locale と currency（E.money、E.num）を使用します。言語はブランドのもの（デフォルトはイギリス英語）です。

ファイル

• template\page.html：シェルとCSSデザインシステム全体、すべてブランドトークンで記述。
• template\engine.js（E）：描画キット（曲線、カード、テキスト、ラベル、カーソル、波紋、ティック、スムーズチャートライン、グリッド、マネー、背景）。
• template\core.js（P）：コピー、1語ずつ表示される見出し、ステージ、キーボードとプログレス、コントロール、ループ。
• scripts\research.py：ウェブサイトのスクリーンショットと測定。
• scripts\brandkit.py：brand.json をトークン、フォント、ロゴに変換し、コントラストをチェック。
• scripts\brand.py：ブランドの一覧表示、チェック、比較、サンプル作成。
• scripts\new_deck.py はデッキを開始、scripts\build.py はビルド、scripts\shoot.py はテスト。
• references\BRAND.md：brand.json のフォーマット。references\SLIDE-BUILDER.md：スライドの契約とデモのルール（すべてのヘルパーに渡すこと）。
• examples\slides\：start（ロゴの表示）、path（マップ）、idea（スライダーで駆動するチャート）、switch（並べ替えによるビフォーアフター）、close。これらは新しいスライドが準拠すべき標準です。

すでに学んだ教訓

• インラインコード内の </script は、たとえコメント内であっても、ページのスクリプトを早期終了させます。build.py がエスケープします。
• 範囲入力の step はデフォルト値に一致しなければなりません。一致しない場合、ブラウザは最も近いステップにスナップします。
• 幅と最大高さのみが指定されたロゴはボックスからはみ出し、リビールのマスクで切り取られます。幅と高さの両方を指定し、その中に収めます。
• shoot.py が押すコントロールは、決して真に disabled であってはいけません。代わりに aria-disabled="true" を使用してください。
• 一部のGoogle Fontsにはウェイトが不足しています（Space Monoは400と700のみ）。brand.py check で各フォントが持つウェイトを見つけて保存します。
• 多くのブランドはボタンを黒く保ち、アクセントカラーを単語やアイコンに使用しています。research.py もそこを確認するので、スクリーンショットとともにアクセントリストを読んでください。
• シェルのヒアドキュメントはバックスラッシュや引用符を削除することがあります。スライドファイルやスクリプトはファイル書き込みツールを使用して作成してください。