| name | slide-design-guide |
| description | Slide design reference workflow: before authoring any slide deck (html2pptx, PPTX, presentation HTML), browse SlideLand (slideland.tech) for real-world reference decks matching the topic, extract design essence (palette/whitespace/typography/layout), and apply the bundled Japanese slide-design principles digest during generation AND self-review. Trigger on スライド作成, スライドを作って, デッキ作成, プレゼン資料, 発表資料, slide deck, presentation slides, html2pptx生成. |
| metadata | {"short-description":"SlideLand参照＋日本式スライドデザイン原則でスライドを作る"} |
Slide Design Guide
スライドを作るときの事前リサーチと品質基準を定めるスキル。
HTML/PPTXの変換は html2pptx スキル、ローカル編集は edit-slide スキルが担当し、
本スキルは「どんなデザインにするか」を決める工程に差し込む。
ワークフロー（スライド作成時は毎回）
1. SlideLandでデザイン参考を探す
スライドランド は実在企業の公開デッキ
（会社紹介・決算説明・統合報告書・サービス紹介など）を
テイスト × 資料種別 × 業種 × 色 でタグ化したギャラリー。
- タグ検索URL:
https://www.slideland.tech/docs/<タイプ>/<値>
- 資料種別:
/docs/material/company-introduction など
（会社紹介資料 / 統合報告書 / 決算説明資料 / 事業計画 / サービス紹介資料 / 中期経営計画）
- 色:
/docs/color/blue など（ブルー/グリーン/レッド/イエロー/黒/ツートン）
- テイスト: スタイリッシュ / ポップ / ミニマル / 爽やか / 信頼感 / 高級感 / 近未来 / ダイナミック / やさしい
- カテゴリ一覧:
/docs/category-list、ページネーションは末尾 /2 /3
- 手順: トピックから資料種別×業種×トーンを決める → WebFetchで該当タグページを見る →
起点デッキを1〜2件選ぶ → 実物スライドを必ず吸収（下記）→
配色・余白・タイポ・レイアウト構造のエッセンスだけを言語化して
デザイン方針（コンセプト一文＋hexパレット＋タイポスケール）に落とす。
実物吸収（タグ情報だけで済ませない。一覧ページ止まりはスキル違反）
- タグページにWebFetchで実物URL（SpeakerDeck / PDF）を聞き出す。
scripts/absorb_deck.sh <url> [outdir] [枚数] で実物スライドをダウンロード
（SpeakerDeckは files.speakerdeck.com/presentations/<id>/slide_N.jpg を抽出、
PDFはそのまま保存。ブラウザ操作は不要）。- Readツールで画像/PDFページを実際に見て、デザインDNAを言語化する。観察観点:
表紙の構成（分割/全面/余白量）、セクション見出しの流儀（チップ/帯/番号）、
情報整理の型（カード/罫線リスト/表）、角丸・影・罫線の使い方、
配色の面積配分、タイポのジャンプ率、ラベルのletter-spacing。
- 抽出したDNAを自分のデッキに構造として移植する（文言・図版・ロゴの複製は禁止）。
- 禁止: 実スライドの文言・図版・ロゴの複製。参考は構造とトーンのみ
（slide-design-md コレクションと同じ運用ルール）。
- 実物吸収は既定でON（必須）。省略してよいのは「ユーザーが明示的に画像取得不要と言った」
ときだけで、その場合も省略した旨を一言添える（黙って一覧タグ止まりにしない）。
省略時は本セクションの代わりにタグ分類＋下記モジュール（2.5）で方針を立てる。
- SlideLandに合う系統がない場合はその旨を一言添えて、
references/japanese-slide-principles.md の流派ガイドから直接方針を立てる。
2. 日本式デザイン原則を適用する
生成時とセルフレビュー時の両方で references/japanese-slide-principles.md
（日本のスライドデザイン専門サイト10件からの抽出ダイジェスト）のチェックリストを当てる。
最低限の絶対ルール:
- 1スライド1メッセージ、タイトルは体言止めまたはアクションタイトル（結論を書く）
- 和文ゴシック（游ゴシック / ヒラギノ角ゴ / Noto Sans JP）、本文は18pt相当以上、行間1.4前後
- 配色は ベース70:メイン25:アクセント5、無彩色+3色以内、原色・高彩度を避ける
- レイアウト4原則（整列・近接・反復・対比）＋ピクセル整列＋余白を恐れない
- 箇条書き3階層以上は図解化を検討。コントラストはWCAG AA（4.5:1）以上
- 和風テイストの場合は日本の伝統色（NIPPON COLORS / 和色大辞典）＋明朝系見出し＋余白多め
2.5 「日本ぽさ」を底上げする3モジュール（毎回適用）
ただの原則だけでなく、以下の具体モジュールを生成時の下敷きにすると一気に上品になる。
- 和文タイポgrammar →
references/japanese-typography.md
コピペ基盤CSSを必ず下敷きに。要点は4つ:
font-feature-settings:"palt" 1（詰め組）/ line-break: strict（禁則）/
text-wrap: balance（見出しの1文字孤立を構造的に消す）/ 和欧混植フォントスタック。
フォントは Noto Sans JP 一辺倒をやめ、本文＝游ゴシック/ヒラギノ角ゴ、和・高級の見出し＝明朝。
- 和色パレット →
references/wairo-palette.md
配色はランダムhexでなく名前のある伝統色セットから取る。テイスト別セットあり。
ベースは純白より生成り #FBFAF5。ベース70:メイン25:アクセント5、アクセントは5%・1要素のみ。
- 「間（ま）」の設計 →
references/japanese-slide-principles.md のレイアウト節
死に余白と意図的な間を区別する（主役1つ＋端を揃えた大胆な空き）。詳細は原則ダイジェスト参照。
3. 作って終わりにしない
スクリーンショット → references/japanese-slide-principles.md のチェックリストで自己レビュー →
改善を最低1周回す（feedback_design_review_loop）。その後 html2pptx スキルの
エクスポート工程（標準台紙 16:9、テキスト分割対策）へ進む。
4. 実在情報の混入チェック（納品前・必須ゲート）
SlideLand等を参考にすると、参考元や第三者の実在情報が無意識に紛れ込む。
テンプレート/サンプルとして配るものは、固有名は架空に統一し、納品前に必ずスキャンする。
- 機械スキャン:
grep -onE '<img|src=http|url\(http|[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}|https?://' で
外部画像・実URL・実メールを洗い出す（許可は Google Fonts と w3.org/2000/svg のみ）。
- 目視/サブエージェント監査: 本文テキストを読み、以下を架空化・汎用化する。
- 実在の社名・サービス名・製品名・ブランド（自作架空名が実在企業と衝突する場合も含む。
例: 「Azure」=MS商標 → 改名）。
- 実在の人名・役員名・著者名、実在ロゴのSVG複製。
- 第三者の登録商標・規格・イニシアチブ名（例: ISO 27001 / RE100 / Slack / Instagram / TikTok /
MSCI格付 / CET1 等）→ 汎用語に置換（「国際セキュリティ規格」「主要SNS」「主要ESG評価機関」等）。
- 実在の住所・郵便番号・電話番号（実在の丁目/番地/〒は使わない）→ エリア表記か明示プレースホルダ
（
000-0000 / 〒000-0000 / （仮））。
- 実在企業の実数値・市場シェア・財務数字・キャッチコピーの逐語。架空かつ妥当な数字に。
- ドメイン/メールは自作ブランド名に一致する明らかな架空のものだけ（
brand.jp 等）。
- 修正後は再レンダして崩れ（置換で文字数が変わりオーバーフロー）がないか確認してから納品。
- 原則は「参考は構造とトーンのみ。文言・図版・ロゴ・固有データの複製は禁止」（セクション1と同じ）。
リファレンス
references/japanese-slide-principles.md — 日本式デザイン原則ダイジェスト＋セルフレビューチェックリストreferences/japanese-typography.md — 和文タイポ基盤CSS（palt詰め組／禁則／text-wrap:balance／和欧混植）references/wairo-palette.md — テイスト別の伝統色パレット集（hex付き）scripts/absorb_deck.sh — 実物デッキ吸収（SpeakerDeck/PDF）
関連
- 変換・エクスポート:
html2pptx スキル（references/japanese-slide-design.md も併読）
- 流派コレクション:
~/dom-to-pptx/slide-design-md/（SlideLand起点のDESIGN.md集）
- 既存の固定ルール: border-left禁止 / SVG偽画像禁止 / 縦軸設計 / table禁止（メモリ参照）
