スライドワイヤーフレーム テンプレート集

16:9スライドのレイアウト型を38種収録している。実在の資料からレイアウトだけを採寸・再現し、テキストはすべてダミー化してある。新規にゼロから組まず、必ずこの中から近い型を選んで流用する。

使い方

1. 下のカタログから、目的とテキスト量に合う型を選ぶ
2. 該当ファイル（例 cover/cover-003.html）を読む
3. コピーして、テキストと項目数だけ差し替える
4. 座標・フォントサイズ・配色は原則そのまま。要素が増減するときだけ、同じリズム（行間・余白の刻み）で調整する

型の当たりがつかないときは、カテゴリ内の全ファイルを読むのではなく、カタログの「構造」列で2〜3件に絞ってから読むこと。

共通仕様

• スライドは 1280×720 固定。.stage の中の .slide に絶対配置し、JSでビューポートに合わせて等倍スケールする（PDF書き出しでもそのまま使える）
• 色は 白・黒・グレーのみ。濃色ベタの型は中間グレー（#6b6b6b〜#757575）＋白文字で明度関係を表現している
• ロゴは LOGO テキスト。シンボルは置かない。1枚に複数のロゴ枠がある場合は SERVICE LOGO / COMPANY LOGO のように役割を書く
• 写真・図版・QR・署名は、グレーの矩形に IMAGE / QR / SIGN / GRAPHIC のプレースホルダ
• 本文はダミーテキスト。元の文字数に合わせると実データを入れたときの破綻を防げる
• 装飾（ブロブ・波形・パターン等）は入れていない。レイアウトの判断を邪魔するため意図的に省いている

カタログ

表紙 cover/

id	背景	構造
cover-001	白	中央揃え。左上に社名ラベル／右上ロゴ、サブ＋大タイトル＋補足、下部に角丸ピルの登壇者情報、右下に更新日
cover-002	濃色	中央揃え。左上に斜めカットの白コーナー＋ロゴ、組織名＋大見出し＋期間＋日付
cover-003	濃色	左揃え。左上にサービスロゴ＋サービス名＋スラッシュ入り罫線、リード＋英字大タイトル＋和文タイトル、左下に認証ラベル2枚、右下に会社ロゴ、右上に社名／年月
cover-004	白	中央揃え。ロゴ＋大タイトルのみ。右に4×4のドットグリッド。情報量が少ない資料向け
cover-005	濃色	中央揃え。巨大ロゴ（140px）＋区切り入りサブタイトル＋更新月
cover-006	明グレー＋大きな斜めシェイプ	左上にラベル、英字2行の特大タイトル（124px）、日付、右下にロゴ
cover-007	淡いグラデーション	左揃えでロゴ（55px）＋タイトル＋日付のみ。最小構成
cover-008	黒	中央にロゴ（136px）＋英字サブ、右上に日付、下部にコピーライト

目次 toc/

id	背景	構造
toc-001	濃色	左に大きなグラフィック枠、右に「番号＋英字項目＋和文ラベル」6行＋区切り線
toc-002	白	左上に斜めコーナー＋ロゴ、左にINDEX、右に2階層（章／小項目）＋点線リーダー＋ページ番号。項目が15件以上ある資料向け
toc-003	白	左に英字＋和文の見出し、右に白カード＋5項目＋点線リーダー＋ページ番号
toc-004	白	番号＋項目名の8行のみ、右上にロゴ。最小構成
toc-005	白＋左に濃色パネル	パネルにCONTENTS／目次、右に「番号｜縦バー｜項目｜点線｜P.00」の6行。番号を大きく見せる型
toc-006	白＋角丸パネル	縦罫で区切った2カラム×4項目。項目名が長い（説明的な）目次向け

中見出し section/

id	背景	構造
section-001	濃色	右に多角形クリップの写真、左に英字大見出し＋和文、右下に巨大な章番号（下端で断ち切り）
section-002	濃色	中央に六角形の章番号バッジ＋3行の見出し
section-003	濃色	中央に円形の章番号＋1行見出し、右上にロゴ
section-004	中間色ベタ	見出し1行のみ。最小構成
section-005	白＋角丸パネル	パネル中央に見出し1行
section-006	濃色	左揃え。薄い章番号＋見出し
section-007	濃色	左に番号（54px）＋バー、その右に大見出し（50px）、左下にロゴ
section-008	明グレー	左上に英字大見出し（105px）＋和文、左下にSectionラベルと特大番号（92px）
section-009	淡いグラデーション	左上にロゴ、中央左に見出し＋バー。最小構成

会社概要 company/

id	背景	構造
company-001	白	左に9行の罫線テーブル、右に大きさの違う写真3点、上部に英字＋和文ヘッダー
company-002	白	左に5項目（住所は2行）、右に大きな写真、右下に円形ページ番号
company-003	白カード	中央に2行の大見出し＋罫線見出し、左右2カラムの会社情報、下部に役員2名（写真・役職・氏名・略歴6行）、脚注。情報量が最も多い型
company-004	白	左に項目リスト（拠点3件の住所ブロック入り）、右に全高の写真
company-005	白＋左に濃色パネル	パネル内に白文字で5項目、右の大半を写真が占める。写真を主役にする型
company-006	白＋角丸パネル	左に特大ロゴ、右パネル内に7項目（値が複数行になる項目あり）
company-007	白	上部に横並びナビ、左に罫線区切りの項目リスト（許認可の箇条書き含む）、右下に特大ロゴ

社長挨拶・メッセージ message/

id	背景	構造
message-001	白＋帯背景	英字大見出し＋2行リード＋本文5段落、右に顔写真＋役職＋氏名
message-002	白	左に見出し＋長文12行＋署名欄、右に全高の人物写真。文章量が最も多い型
message-003	白	左に大きなリード（46px）＋本文2段落＋署名、右に縦長写真
message-004	白	左に角丸写真、右にラベル＋リード＋本文2段落＋署名。上部にロゴ＋見出しのヘッダー

メンバー紹介 member/

id	背景	構造
member-001	白＋角丸パネル	3カラムの人物カード（写真・役職・氏名・略歴）
member-002	白カード	中央見出し＋リード、記事3カード（画像＋2行タイトル＋URLボックス）、下部にロゴ＋QRのバナー
member-003	白	見出し＋罫線、3枚の縦型カード（写真＋役職2行＋氏名＋長い略歴）。略歴が長い役員紹介向け

よくある質問 faq/

id	背景	構造
faq-001	白	角丸フルのQ帯＋A本文を4セット、右下に円形ページ番号

崩れやすい箇所

• 英字ラベルと和文の並び：ダミー文字は元の英字より幅が出やすい。縦罫や隣接要素と重なるので、絶対配置ではなく flex 行（gap で間隔指定）にする
• URL・長い英数字：white-space:nowrap で折り返しを止め、収まらなければフォントサイズを落とす。2行に折れるとボックス高が破綻する
• 断ち切り要素：巨大な章番号や背景シェイプは意図的にスライド外へ出している。はみ出し検査で引っかかっても直さない