tightened-slide

Tightened Slide

ユーザーが Tightened Slide デッキ、横スワイプ式プレゼンテーション、HTML スライドデッキ、ローンチデッキ、分析デッキ、フレームワークデッキ、製品デッキ、またはデータに基づくトークを求めた場合は、このワークフローを使用します。

運用上の前提

• このシステムは Tightened Slide 専用です。
• 出力は静的な HTML デッキで、通常は index.html と、その隣にある images/ フォルダーで構成されます。
• テンプレートは assets/template.html です。
• 本文スライドには登録済みの S01 から S22 までのレイアウトを使用します。
• 納品前にバリデーターを実行する必要があります。
• 対応言語モードは英語と韓国語です。

ステップ 1：必要なことだけを確認する

ユーザーが完全なアウトラインとアセットを提供している場合は、そのまま進めます。重要な入力が不足している場合は、最大 3 つの質問をします。

1. 対象者とプレゼンテーションの場面。
2. 目標の所要時間またはページ数。
3. ソース資料、言語モード、必要な画像やデータ、厳守すべき制約。

テーマが指定されていない場合は、references/themes.md の International Klein Blue をデフォルトにします。 言語モードが指定されていない場合は、英語をデフォルトにします。

ステップ 2：デッキを準備する

出力先フォルダーと画像フォルダーを作成します。

mkdir -p path/to/deck/images
cp assets/template.html path/to/deck/index.html

index.html の <title> プレースホルダーを直ちに置き換えます。

ルート要素に言語モードを設定します。

<html lang="en" data-language="en">

または：

<html lang="ko" data-language="ko">

韓国語モードでは、フォントスタックとしてテンプレートの SUIT、Pretendard、Noto Sans KR、Noto Sans を使用し、その後に Inter とシステムのサンセリフフォントをフォールバックとして指定します。

オフライン時にローカルのアニメーションフォールバックを動作させる必要がある場合は、コピーした HTML から assets/motion.min.js にアクセスできる状態を保つか、テンプレートに組み込まれた CDN フォールバックを使用します。

ステップ 3：事前確認

スライドのマークアップを書く前に：

• テンプレートの <style> ブロックを読みます。
• references/layout-lock.md を読みます。
• references/layouts.md の関連するスケルトンを読みます。
• 使用予定のクラスがすべてテンプレートに存在することを確認します。
• グローバルクラスを独自に作成しないでください。ページ固有の調整に限り、インラインスタイルを使用します。

コーディングの前に計画表を作成します。

page -> data-layout -> reason -> image slot

7～8 ページのデッキでは、少なくとも 6 種類の Sxx レイアウトを使用します。10 ページ以上のデッキでは、少なくとも 8 種類を使用します。

ステップ 4：レイアウトを選ぶ

登録済みのレイアウトセットを使用します。

• S01 インデックス表紙
• S02 縦型タイムライン＋KPI
• S03 分割ステートメント
• S04 6 セル
• S05 3 層
• S06 KPI タワー
• S07 横棒グラフ
• S08 2 項目比較
• S09 ドットマトリクス・ステートメント
• S10 分割クロージング
• S11 横型タイムライン
• S12 マニフェスト＋インクバナー
• S13 3 つの力
• S14 ループ形式
• S15 マトリクス＋ヒーロー統計
• S16 複数カードの概要
• S17 システム図
• S18 なぜ今か
• S19 4 枚のカード
• S20 積み重ね型 KPI 台帳
• S21 技術仕様書
• S22 イメージヒーロー

地図、ルート、都市間の関係、位置ネットワーク、または歴史的な移動を示すページには、S08 + Tightened Map Component を使用します。

大きな画像を 1 枚使う場合は S22 を使用します。複数の画像には S15 または S16 の応用版を使用します。未登録の画像分割レイアウトやエビデンスウォールレイアウトは作成しないでください。

ステップ 5：ビジュアルシステムを適用する

厳守事項：

• デッキ全体でアクセントカラーは 1 色にします。
• グラデーション、シャドウ、角丸カード、ガラス表現、ネオン、3D、装飾的な境界線は使用しません。
• 大きな文字には 200 または 300 の軽いウェイトを使用します。
• 本文には控えめなウェイトを使用し、明確な階層を設けます。
• 大きな文字サイズには font-size:min(Xvw,Yvh) を使用し、Y >= X * 1.6 とします。
• 登録済みのステートメント／分割レイアウトを使用する場合を除き、見出しはコンテンツ軸の左側または上部に配置します。
• キッカーテキストはタイトルの横ではなく、上に配置します。
• .canvas-card にはすでに水平方向のパディングがあります。内部にさらに 5vw のパディングを加えないでください。
• すべてのキャプション、ラベル、脚注を、下部ナビゲーションのセーフエリアより上に配置します。
• SVG で描画できるのは図形のみです。表示するラベルには HTML を使用します。

言語ルール：

• 英語モードでは、簡潔なセンテンスケースのタイトルと、直接的な本文を使用します。
• 韓国語モードでは、短い韓国語のタイトル、コンパクトな本文、統一された製品用語を使用します。
• 図のラベルと生成画像内のテキストは、選択した言語モードに合わせます。

ステップ 6：画像のフロー

画像が必要な場合：

• 新しい画像を生成する前に確認してください。
• プロンプトを書く前にレイアウトスロットを選択してください。
• references/image-prompts.md を使用してください。
• 生成または提供された画像は images/ に保存してください。
• 画像の名前は {page}-{semantic-name}.{ext} にしてください。
• すべてのローカル画像に data-image-slot を追加してください。

スロットのデフォルト：

• S22：s22-hero-21x9
• S15：s15-grid-21x9 または s15-grid-16x10
• S16：s16-brief-21x9 または s16-brief-16x10

ステップ 7：検証

次を実行してください：

node scripts/validate-deck.mjs path/to/index.html

すべてのエラーを修正してください。警告は目視で確認する必要があります。

次に、ブラウザーでデッキを開いて、以下を確認してください：

• タイトルの配置
• 文字の太さ
• タイトルと本文の間隔
• 画像のトリミングと画像スロットへの適合
• ナビゲーションの上にあるキャプションと脚注
• ESC インデックスの視認性
• B の静的モード

納品チェックリストとして references/checklist.md を使用してください。