伝えたい雰囲気に合うテンプレートを選び、HTMLのスライドを作る

## テンプレートを選ぶ前に、使う場面と雰囲気を聞く テンプレートを読んだり選んだりする前に、焦点を絞った質問を二つ行う。 まず、プレゼンテーションをどのような場で使うのかを尋ねる。 例として、創業者向けピッチ、調査結果の統合、ブランド宣言、授業の導入、デザインレビューなどがある。 次に、聴衆にどのようなムードや雰囲気を感じてほしいかを尋ねる。 例として、自信に満ちて力強い、静かで文学的、温かく遊び心がある、暗く重厚などがある。 テンプレートを選ぶ前に、ユーザーの回答を待つ。 詳細な概要があっても、この確認段階を省いてはならない。 テーマや業界だけから好みを推測しない。 ユーザーが目指す感情を、主要なデザイン入力として扱う。 一つの用途でも複数の視覚的方向性があり得るため、用途とトーンを分けて考える。 聴衆の期待に関係する場合だけ、格式の程度を尋ねる。 概要に含まれる情報量が極端に多いか少ない場合は、コンテンツ密度も尋ねる。 明るい、暗い、または混合配色という明示的な希望は、厳守条件として記録する。 この確認段階では、本制作を始めない。 ユーザーがすぐ答えられる程度に、質問を短く保つ。 ## 雰囲気に合い、はっきり違うテンプレートを3つ選ぶ 個別のテンプレートファイルを開く前に、テンプレート一覧を読む。 回答をムード、トーン、最適用途の説明、格式と照合する。 用途は業界の許可リストではなく、緩やかな判断材料として使う。 テーマの業界らしさでテンプレートを採点しない。 テンプレートが示す収容量とコンテンツ量を、密度で比較する。 ユーザーが明るい配色か暗い配色を指定した場合、配色方式を厳守条件として使う。 非推奨用途の案内は、緩やかな警告として扱う。 ユーザーの明示的な希望は、緩やかな警告より優先する。 トーンが本当に合う候補を、ちょうど三つ選ぶ。 候補の説明は分類名ではなく、感じられる性質を中心にする。 ユーザーが実際に選べるよう、三候補には十分な違いを持たせる。 編集調、企業調、遊び心のある調子など、ほぼ同じ方向性を三つ返さない。 可能であれば、直接的な適合案、信頼できる代替案、思慮ある再解釈案を一つずつ含める。 聴衆に対して格式が適切かを確認する。 保守的な取締役会に格式の低いデザインを使うなど、重大な不一致は指摘する。 デモのスライド数は、利用可能なレイアウトの証拠としてだけ使い、品質評価には使わない。 テンプレートが候補に残ってから、HTMLとCSSの全文を読む。 ## 本当の内容を入れた、表紙スライドの見本を作る 候補に残した各テンプレートのタイトルスライドと、それを支える視覚体系を確認する。 プレビューには最初のスライドだけを取り出す。 各プレビューを一枚に限定し、比較にかかる負担を小さくする。 仮置きのタイトル、副題、著者、日付を、ユーザーの実際の内容へ置き換える。 選定用プレビューに一般的な仮置き文章を見せない。 各プレビューを、仮のプレビューフォルダーに単独のHTML成果物として保存する。 番号付きファイル名と、安定した説明的なスラッグを使う。 プレビューに必要な同階層のスタイルシート、スクリプト、フォント、素材をすべて残す。 元のテンプレートフォルダーに依存せず、各プレビューを開けるようにする。 タイトルスライド本来の寸法とレスポンシブ動作を保つ。 候補を比較する時は、ブラウザーの表示領域を統一する。 ユーザーが選ぶ前に、プレビューを再設計しない。 テンプレートの視覚的個性を、配色変更、書体変更、簡略化で変えない。 実際の長いタイトルが、衝突や切れを起こさず折り返されるか確認する。 画像の仮置き部分、帰属表記、日付形式を確認する。 提示前に、すべてのプレビューをブラウザーで開く。 目視確認を任意の後工程ではなく、制作の一部として扱う。 ## 3つの見本を見せて、選んでもらうまで待つ 実行環境のブラウザー起動手段で、三つのプレビューをすべて開く。 番号を付けた比較をユーザーへ送る。 意見が正しい候補に対応するよう、番号とファイル名を固定する。 各選択肢に、テンプレート名とトーンを一行で説明した文を添える。 各プレビュー成果物の絶対パスを示す。 現在の画面で、そのパスを直接利用またはクリックできるようにする。 各候補が希望する雰囲気に合う理由を説明する。 プレビューを、文章だけの比較説明に置き換えない。 どの選択肢がしっくりくるかを尋ねる。 プレゼンテーション全体を作る前に、明示的な選定を待つ。 返答がないことを承認とみなさない。 ユーザーが三候補すべてを退けた場合は、ムードの解釈を見直して候補を選び直す。 ユーザーの好みに明確に合わない候補を、弁護し続けない。 選ばれたテンプレートを、以後の唯一の視覚体系として使う。 一枚のスライドが難しいという理由で、後からテンプレートを切り替えない。 ## テンプレートの見た目を守って、全スライドの中身を入れ替える 選ばれたテンプレートのフォルダー全体を、ユーザーのプロジェクト作業領域へ複製する。 フォント、太さ、字間、行間を保つ。 完全な配色とCSS変数を保つ。 レイアウトグリッド、配置方式、flex階層、余白のリズムを保つ。 視覚的個性を担うスライド単位のクラスを保つ。 粒状表現、括弧、図形、イラスト、手描き風装飾などの要素を保つ。 既存のナビゲーション実行方式と操作モデルを保つ。 すべての見出し、本文、箇条書き、説明文、統計値、氏名、日付、帰属表記、制作者用の仮置き語句を置き換える。 セクションラベルや画面装飾内の語句も、置き換えが必要な制作者用の仮置き内容として扱う。 すべての画像の仮置き部分を、同じ寸法のユーザー画像へ置き換える。 実際の内容に適した見出し、段落、一覧、画像の各要素を使う。 スライドを増やす必要がある場合は、最も近い既存レイアウトを複製する。 スライドを減らす場合は、不要なものを末尾から外す。 スライド数を変えるたびに、現在ページと総ページの表示を更新する。 すべてのスライドを適応させ、デモ文章や仮置き数値を残さない。 テンプレートの密度上限内で、ユーザー情報の階層を明確に保つ。 次へ進む前に、書き換えた各スライドから内容がはみ出していないか確認する。 ## 足りない種類のスライドを、同じ見た目で作り足す 選んだテンプレートに必要な種類のスライドがない場合は、不足するレイアウトを一から設計する。 比較表やタイムラインがないというだけで、問題をユーザーへ戻さない。 別のテンプレートからレイアウトを持ち込まない。 同じフォントファミリー、太さ、余白、文字の階層を使う。 既存の配色だけを使い、新しい意味色が必要に見える場合は最も近い既存アクセント色を選ぶ。 同じ装飾語彙と視覚的な質感を再利用する。 装飾の多いプレゼンテーション内で何も装飾がないスライドは、デザイン上の失敗である。 スライドの内側余白、グリッド列、列間、配置規則を合わせる。 カード、統計、引用、説明文には、テンプレートの構成文法を再利用する。 上部ラベル、ページ番号、角の印、その他の画面装飾を合わせる。 新しいスライドを、既存スライドと同じ種類の兄弟要素として挿入する。 現在のキーボード操作、scroll-snap、段階式ナビゲーションの動作へ組み込む。 新しいスライドを、二枚の元スライドの間に置いて確認する。 別の視覚言語を継ぎ足したように見える場合は、設計し直す。 ユーザーにレイアウト問題の解決を求めず、実装から検証まで進める。 ## テンプレートのフォント・色・配置を崩さない 元のフォントを読み込めない時に、似たフォントで代用しない。 代わりに、読み込み指定や素材パスを直す。 アクセント、背景、中間色の配色を変えない。 異なるテンプレートのスライドを混ぜない。 機能がないように見えるという理由だけで、装飾を外さない。 選んだテンプレート内で、古い視覚スタイルを現代風に作り替えない。 視覚言語が不適切なら、選定段階で別のテンプレートを選ぶ。 内容を入れやすくするために、グリッドを組み替えない。 レイアウトを壊す前に、内容の長さと階層を編集する。 仮置き領域を埋めるために画像を変形しない。 意図した縦横比に合うよう、素材を切り抜くか選び直す。 プレゼンテーションの対象表示領域で、すべてのスライドを確認する。 切れ、はみ出し、コントラスト、行の折り返し、ナビゲーションを点検する。 追加や取り外しの後に、ページ番号と総数を確認する。 プレビュー、途中版、最終版のファイルを、目視確認できる状態に保つ。 ## 全部のファイルをブラウザーで見て確かめ、場所を伝える すべてのプレビュー、途中版、最終プレゼンテーションをブラウザーで開く。 目視確認する前に、成果物の完成を知らせない。 各成果物の絶対パスを送る。 画面がクリック可能なパスに対応する場合は、各パスを一行ずつ示す。 最終プレゼンテーションでは、選んだテンプレートを一般的な名称で示し、トーンが合う理由を一行で説明する。 納品結果に影響する場合だけ、注意事項を述べる。 ユーザーの操作が必要な注意事項は、最終成果物のパスの近くに置く。 元のテンプレートにレイアウトがなく、一から設計したスライドを明示する。 引き継ぎは、成果物、パス、理由、重要な注意事項だけに絞る。 制作手順の全記録を語らない。 必要な素材が、納品フォルダーからすべて参照できることを確認する。 最終ファイルからナビゲーションが動くことを確認する。 最終プレゼンテーションに仮置き内容が残っていないことを確認する。 ブラウザーでの確認とパスの提示を、完了条件として扱う。 どちらか一方でも欠けている場合は、完了と報告しない。