合宿アンケート
本日の学びや成果について、アンケートへのご協力をお願いします。
2026.10.17(土) / 午前 スライド作成 / 午後 ハンズオンガイド作成
午前は、相手に伝わる順番を決め、AIでスライドにする。
午後は、その手順のページを、AIで使いやすく作り変える。
目的と説明順を決め、図解入りのスライドにする。設計メモ・構成案・確認した画像スライドを持ち帰ります。
最初から長い設計メモを書く必要はありません。
AIの質問に短く答え、整理されたメモを自分の意図に合わせて直します。


| 言葉 | 何を決めるものか |
|---|---|
| 設計メモ | 誰に、何を、どの順に伝えるか。 |
| 構成案 | 各スライドの表示文章と、説明する図。 |
| 検収 | 出力が意図と素材に合うかの確認・修正。 |
本日の学びや成果について、アンケートへのご協力をお願いします。

日時2026年10月22日(木)21:45〜22:45
資料作成実践合宿 公開講評会
合宿で作成した資料や特設ページを題材に、改善ポイントをフィードバックする会です。
自分のテーマを一言で。
題材が未定なら、工務店の架空例から始められます。
最近作った資料、または次に作る予定の資料を1つ選びます。
手元のメモは整えず、そのまま使えます。
社外へ渡せない情報は、公開できる範囲へ置き換えます。
価格・条件が分からない場合は、推測せず「未確認」で残します。
使うツールはCodexです。
成果物を1つの作業フォルダーへ集め、W1からW4まで同じ会話で進めます。
操作するもの:Codexと、選択した作業フォルダー
Codexを開くと、入力欄の上に作業フォルダーの名前が出ます。
名前を押すと一覧が開き、使うフォルダーを選べます。


作業フォルダー/
00_素材.md
01_設計メモ.md
02_構成案.md
03_検収メモ.md
slides_(題材の短い名前)/
slide_01.png …
slide_03_v2.png(修正版)画像生成が使えない場合の復帰ルートは、W3とFAQにあります。
未確認の環境設定を推測で変更せず、講師の案内を確認します。
自分の案件が思い浮かばない人は、この架空の案件で進めます。
W1でAIに聞かれたら、下のメモを見ながら自分の言葉で答えます。
メモにないことを聞かれたら、「分からない」と答えて大丈夫です。
AIは「未確認」として残します。
毎回、できたものを確かめてから次へ。
デザイン変更とスキル化は、必須工程が終わった人向けの任意ワークです。
操作するもの:Codexの同じ会話・自分の題材と素材
プロンプトを渡し、AIからの質問に答えます。
短い回答や箇条書きで大丈夫です。
2問目からは、AIが候補を2〜3個示します。
近いものを選び、候補になければ自分の言葉で答えます。
あなたは、資料の設計メモを作るインタビュアーです。 短い対話で本人の考えを引き出し、資料の目的と説明順を設計メモに整理してください。 最初から完成したメモや長い入力シートを求めないでください。 この工程では設計メモを作ります。構成案・画像生成・スキル化へは進みません。 【始め方】 ・題材がまだ分からなければ、最初の返答は次の質問1つだけにする。 「今回は、どんな資料を作りたいですか? 一言で大丈夫です。 (例:取引先に新しいサービスを提案して、導入するか判断してもらう資料)」 ・題材、読み手、目的などが会話や素材ですでに分かっていれば、聞き直さず次の不足へ進む。 ・先に質問一覧や長い説明を表示しない。 【インタビューの進め方】 ・1回に尋ねるのは1つの論点。回答を受け取ってから次の質問へ進む。 ・短い回答や箇条書きを受け付ける。整った文章への書き直しを求めない。 ・2問目からは、毎回2~3個の候補を添えて選んでもらう。候補になければ自分の言葉で答えてよいと伝える。 ・毎回の長い解説や称賛を省き、必要な質問に進む。 ・すでに回答や素材で確認できた項目は省く。毎回同じ順序ですべてを尋ねない。 ・相手の本音や潜在ニーズを推測で決めず、本人が知っている状況と、AIの仮説を分ける。 ・素材にない数字・条件・実績・効果は補わない。本人も分からない情報は確認事項にする。 【聞き出す内容】 必要な範囲で、次を確認する。本人へ一括で記入を求めない。 ・どんな資料か。 ・誰に見せるか。その人がすでに知っていること、気にしていること。 ・どんな場面で使うか。画面で説明するか、相手が一人で読むか。 ・見終えた相手に、何を判断・理解・実行してほしいか。 ・使える素材、条件、数字は何か。手元のメモや既存資料は、そのまま受け取る。 ・相手は最初に何を知りたくなるか、その次は何か。 ・今回は入れない情報は何か。 【説明順を一緒に決める】 ・目的と素材が分かったら、相手が持ちそうな疑問を3~5個、短い言葉で提案する。 ・本人がすでに疑問や順番を示していれば、まずその案を使う。 ・提案する順番には、理由を1文添える。 ・本人には「先に答えるべき疑問はありますか?」など、1つの判断を尋ねる。 ・入れない情報が未定なら、候補を提案して本人に選んでもらう。 費用・手間・条件・注意点など、判断に必要な情報を省く候補にはしない。 ・目的、説明順、入れない情報は、本人の回答を得て決める。 ・未解決の事実は確認事項として残し、推測で埋めない。 【設計メモの完成形】 目的と説明順が本人の言葉・選択で決まったら、次の5項目を各1~2文でまとめる。 1. 読み手と使う場面 2. 見終えた相手にどうなってほしいか 3. 相手の疑問と、答える順番 4. 今回は入れない情報 5. 確認が必要なこと 素材の全文、数字の一覧、出典管理、画像の仕様を、設計メモへ詰め込まない。 素材は別に残し、後の構成案では設計メモと元の素材を両方読む。 最後に、意図と違う点がないか1問だけ確認する。 「分からない」と答えられた事実を、未確認と記録する。目的自体が決まらない場合は、目的を決める対話を続ける。 【元の素材】 同じ会話にあるメモ・資料を参照する。素材がまだなければ、インタビュー中に尋ねる。 素材がないからといって、価格・条件・実績・効果を作らない。 【確認後の保存】 本人が設計メモを確認したら、選択済みの作業フォルダーに「01_設計メモ.md」として保存する。 使った素材は「00_素材.md」として別に残す。本人が用意したファイルは上書きしない。 ファイル保存機能が使えない場合は全文を会話に残し、保存できたと報告しない。 最後に、設計メモと元の素材を次の工程で使うと短く伝えて止まる。

操作するもの:同じ会話の設計メモ・題材の説明
確認済みの設計メモと、最初に伝えた題材から構成を依頼します。
追加する情報があれば、金額・頻度・条件のメモも渡してください。
決めていない条件は「未確認」のままで大丈夫です。
あなたは、本人が確認した設計メモをスライド構成案にする編集者です。 同じ会話の設計メモと元の素材、または作業フォルダーの「01_設計メモ.md」「00_素材.md」を両方参照してください。 設計メモを読み取れない場合だけ、該当する本文を尋ねてください。確認済みの目的・順番・除外情報を聞き直さないでください。 この工程では構成案まで作ります。画像生成とスキル化へは進みません。 【枚数】 希望があれば従う。未指定なら、初回のハンズオン用に3〜5枚程度の構成を提案する。 判断に必要な条件が収まらない場合は、情報を落とさず枚数の追加を提案する。 【構成と文章のルール】 ・1スライドで伝えることは1つにする。 ・目的に応じて、最初の1~2枚で資料の主張や求める判断を明確にする。 ・素材にない数字・効果・実績・事例・URL、相手へのお願いや条件を足さない。 ・未確認事項は未確認と分かる表現にする。資料の根拠として言い切らない。 ・費用・手間・条件・注意点など、相手の判断に必要な情報を省かない。 ・「今回入れない情報」に従う。ただし判断に必要な条件まで除外される場合は確認する。 ・文章は意味を保って短くする。専門用語は読み手の知識に合わせて説明する。 ・画像化の目安は、1枚120字以内、箇条書き3項目まで、主要な文章グループ3つまで。 超える場合は内容を削る前に分割を検討する。文字サイズを小さくする前提で詰め込まない。 ・希望枚数に収まらない場合は、必要な内容と枚数が衝突する箇所を示して確認する。 ・構成案では、表示文章と一緒に、内容を説明する図の計画まで決める。 通常の説明は、図解または小さな立体イラストを入れることを標準とする。 ・図の種類は、教える内容から選ぶ。 比較は同じ軸で並べた比較図、手順は矢印で順序を示すフロー図、 全体の位置は構成図、階層は枝分かれや入れ子、選択は分岐図にする。 概念や利用場面の説明には、内容に合う場面・物の立体イラストを使う。 原稿にない因果関係や推奨経路は作らない。 ・各図について、何を表すか、要素同士がどう関係するか、読む順番、文章との配置を具体的に記す。 「図を入れる」「アイコンを添える」だけで終えない。図中の文字も「表示」に含める。 ・表、チェックリスト、ファイルツリーが十分に説明していれば、場面イラストは追加しない。 ・表紙、短い問い、重要な一文、締めは、学習上の理由があれば文字だけでもよい。 ただし、実際の内容が工程や比較の説明なら図を入れる。文字だけにする理由を記録する。 ・表示文章と、管理用の見出し・設計意図・図解指示を分ける。 話す台本や、検討途中の文章を表示文章へ混ぜない。 【出力形式】 最初に、本人が確認した短い設計メモを示す。 続けて、全スライドを次の表にまとめる。 | 番号 | 1枚で伝えること | 答える疑問 | 図の種類 | 素材の根拠 | その後、各スライドを次の形式で記す。 「表示」のコードブロックには、画像に載せる文章だけを入れる。 ### [スライド 1] 管理用の見出し 役割:[タイトル/説明/比較/手順/問い/締めなど] 表示: ```text 実際に表示するタイトル、または主となる一文 実際に表示する本文 実際に表示する図のラベル(必要な場合) ``` 図の種類:[比較図/フロー図/構成図/階層図/分岐図/場面・物の立体イラスト/表/文字のみ(理由を記す)など] 図解指示:[具体的な対象・関係・読む順番・配置。ラベルは「表示」の語句を使う。文字だけなら理由] 強調する語句:[表示文章から1~3箇所。必要なければ「なし」] 【自己点検】 ・目的と、読み手の疑問の順番に沿っているか。 ・表示文章が全枚分あり、1枚で伝えることが1つになっているか。 ・必要な条件や注意点を落としていないか。 ・素材にない情報や、未確認事項の断定が混じっていないか。 ・今回入れない情報が、「含まない」と断る文の形でも入っていないか。 ・説明内容に合う図を計画しているか。対象・関係・配置が具体的か。 ・図のラベルも表示文章に含まれ、制作メモと分かれているか。 最後に、本人に確認してほしい点と、解消していない不足だけを短く示す。 【確認後の保存】 本人が構成案を確認したら、作業フォルダーに「02_構成案.md」として保存する。 既存の版を置き換える場合は別の版として残す。 画像化は次の生成プロンプトで進める。
操作するもの:AIが返した構成案
相手の疑問に答える順番か、必要な条件が残っているかを確かめます。
画像に載るのは「表示」のコードブロック内の文章です。


直したい文章は、AIに頼むか、保存されたファイルを手で直します。
意図どおりなら「OK」と返します。
構成案が02_構成案.mdとして保存されます。

操作するもの:02_構成案.md・Codexの画像生成
最初は白地・ネイビー×ブルーの基本デザインを使います。
説明には図解または小さな立体イラストを入れます。
あなたは、確定した構成案を画像スライドにする制作者です。 以下の構成案を使い、内蔵の画像生成機能でスライドを作成してください。 今回は画像生成と検収まで進めます。スキル化は、後の工程で実施します。 【確定した構成案】 同じ会話で確認済みの構成案、または作業フォルダーの「02_構成案.md」。読み取れない場合だけ本文を尋ねる。 【生成範囲】 確認済みの構成案の全枚。枚数が多い場合、まず1枚を試してから残りへ進む。 【保存先】 選択済みの作業フォルダー内に、設計メモの題材から短い名前を付けたフォルダーを作る(例:slides_工務店提案/)。生成後に利用可能な保存手段でここへコピーする。 【配色の変更】 未指定なら次のネイビー×ブルーを使用。今回はまず基本デザインで生成する。 【表示内容の扱い】 ・入力された構成案は本人が確定したものとして扱い、同じ確認を繰り返さない。 ・「表示」のコードブロック内だけを、画像に載せる文章として扱う。 最初の行は通常、タイトルまたは主となる一文。別のタイトルを足さない。 ・コードブロック外の管理用見出し、番号、役割、図の種類、図解指示、強調指定は文字として描かない。 図の種類・図解指示・強調指定は、制作に反映する。図のラベルは「表示」の語句だけを使う。 ・確定した順番・枚数・表示文章・条件・注意点を保つ。 勝手に言い換え、要約、追記、削除をしない。 ・収まらない場合は、図を小さく・単純にし、配置を変える。 それでも読めない場合は、分割案を示して本人の確認を待つ。文章を削らない。 ・表示範囲や図解の意味が判断できない場合は、該当箇所だけ確認する。 【初期デザイン】 ・16:9。1920×1080を基準に設計する。1回の画像生成につき1枚を作る。 ・白背景 #FFFFFF、濃いネイビー #1F2A44 の文字、広い余白、整列した配置。 ・アクセントはブルー #2F6FDE。判断ポイント、重要な語句、矢印、構造を示す線に使う。 ・タイトルの下に、細く控えめなブルーの線。グラデーションは使わない。 ・薄いパネルは #EEF4FF。広い面を濃い色で塗らない。 ・Noto Sans JP Bold相当の日本語ゴシック体を全枚で統一する。 ・文字は3段階。タイトル80px、本文・具体例・説明・まとめ56px、短い図解ラベル44px。 別解像度では3段階を同じ倍率で調整する。本文をラベルサイズへ下げない。 ・強調する語句は文字色だけを変える。「人」「AI」など、一部分だけを大きくしない。 同じ本文内の語句はすべて同じサイズに保つ。余白を埋めるために文字を拡大しない。 ・外側の余白は80px以上、文章グループ間は32px以上、行間は1.25~1.35を目安にする。 ・文字サイズは画像生成への目標指定として扱い、結果を見て統一感と可読性を確認する。 ・全面の暗い背景、派手な装飾、強い影、発光、絵文字、ロゴ、透かしを使わない。 ・表紙や章の区切りも同じデザインにする。 ・配色の変更が指定されている場合は、色だけを置き換え、読みやすさとデッキ内の統一を保つ。 【図解とイラスト】 ・説明スライドは、図解または小さな立体イラストを入れることを標準とする。 図の種類は構成案に従い、初稿から実際に描く。文章だけのパネルで置き換えない。 ・比較は同じ軸で並べた比較図、工程は矢印で順序を示すフロー図、 全体の位置は構成図、階層は枝分かれや入れ子、選択は分岐図で示す。 色付きの文章カードや装飾アイコンだけで、関係図の代わりにしない。 ・通常の説明には、内容に結びつく小さな場面・物・関係図を入れる。 表、チェックリスト、ファイルツリーが十分に説明していれば、場面イラストは追加しない。 ・表紙、短い問い、重要な一文、締めで文字だけにする場合は、構成案の理由が内容に合うか確認する。 実際の内容が工程や比較の説明なら、その関係図を入れる。 必須の図解がない画像を、後から文字だけの例外として受け入れない。 ・場面や物は、斜め上から見たすっきりしたベクター風の立体図にする。 白・薄いグレーを基調に、アクセント色、2~3段階の平面的な色面、短く薄い影を使う。 ・視点、輪郭の描き方、細かさをそろえる。人物は行動の説明に必要な場合だけ入れる。 自然な大人の体型と、分かりやすい動作にする。人物などに関する本人の制約を優先する。 ・文章と必要な関係図の領域を先に確保し、イラストの領域・最大サイズを決める。 イラストで本文を圧迫しない。内容が少なくても、絵を大きくして余白を埋めない。 ・文字とラベルは水平・正面向き。立体表現で文字や接続線を隠さない。 ・スクリーンショット、UI、顔写真、URL、QRコードを創作しない。 指定された空白領域は空ける。提供済みの実物素材は指示された範囲で使う。 ・スライド番号は画像に描かない。 【生成と検収の手順】 1. 全対象について、次の図解計画を整理する。 番号/図の種類/対象と関係/文章と図の配置/文字だけの場合の理由。 表示文章と強調箇所も確認し、必要な図解がプロンプトから抜けていないか点検する。 2. 1枚ずつ生成する。画像生成への指示には、その1枚のデザイン・表示文章・図解・配置だけを渡す。 表示文章と制作指示を明確に分け、文字サイズの3段階を毎回指定する。 必須の図解を「任意」「必要なら」と弱めない。 3. 生成した画像を1枚ずつ開き、確定した構成案と照合する。 文字・数字・条件の欠落や意味の変化、余計な文章、図解の欠落、はみ出しを確認する。 図解が計画どおりの対象と関係を示しているかも確認する。 必須の図解がなければ、文字と色が正しくても不合格として直す。 同じ表示幅で全枚を比べ、約960×540でも本文とラベルを読めるか確認する。 プロンプトに書いた内容が画像にもあるとは決めつけない。 4. 不具合の原因を具体的に直し、該当スライドを再生成して再確認する。 同じ指示のまま再試行し続けない。 5. 利用可能な保存操作で、slide_01.png のように番号順に保存する。 実際のファイルの存在、形式、寸法、16:9の比率、欠番を確認する。 利用可能な画像生成・保存手段がない場合は、その制約を報告する。 依頼なくHTML、PPTX、外部APIによる生成へ切り替えない。 最後に、生成枚数、保存先、修正した箇所、残っている問題を短く報告する。 検収で直っていない問題がある画像を、完成扱いにしない。 【修正から学ぶ記録】 既存の画像は上書きしない。修正版は同じフォルダーに slide_03_v2.png のように番号を付けて残す。保存前に対象ファイルの有無を確認する。 実際に直した箇所を「03_検収メモ.md」に短く残す。 意図しない増加グラフやSNS画面が出た場合、文章だけでなく図の意味も構成案と照合し、該当画像を内蔵画像生成で直す。

操作するもの:修正する画像・slides/・検収メモ
スライド[番号]の[直したい箇所]を、構成案の[正しい文章・図の意味]に合わせて直してください。 金額・条件・注意点と、指定していない部分は保ってください。 元の画像を残し、修正版を別名で保存して見せてください。
「もっと良く」ではなく、何をどう直すかを伝えます。
修正前の画像を残し、直した理由を検収メモへ記録します。
直したいスライドは、スクリーンショットを貼ると指しやすくなります。
範囲を選んで撮り、そのまま入力欄に貼り付けます。
| パソコン | クリップボードへ撮るキー |
|---|---|
| Mac | ⌘+Shift+Ctrl+4 |
| Windows | Win+Shift+S |


保存先は、画像を開いて上の表示のフォルダー名を押すと確かめられます。

操作するもの:見本のスクリーンショット・直したいスライド
入力欄に、次の3つを入れて送ります。
指示を先に貼ると、スクリーンショットで上書きされません。
元と並べて、文章・条件・図の関係が保たれているかを確かめます。
このスライドの見た目(色・書体・図の描き方)だけを、添付した見本に合わせてください。 文章・数字・図の中身は変えず、まず1枚だけ作って、元の画像は残してください。



操作するもの:変更した1枚・残りの画像
このデザインを、残りのスライドにも適用してください。 文章・数字・図の中身は変えず、元の画像は残してください。
デザイン変更は任意です。
時間が足りなければ、基本デザインで必須工程を終え、講義のあとに試します。
同じ文章と図の関係を保ち、見た目だけを変えた6例です。
選んだ見本の大きな画像を、W4でスクリーンショットに撮ります。
S1 標準の提案資料

画像生成による書体の参考イメージです。
指定フォントのファイルで組版した見本ではありません。

| 見本 | 変更用プロンプトへ入れる指定 |
|---|---|
| F1 角ゴシック | Noto Sans JP Bold相当の角ゴシックへ。サイズと配色は保持。 |
| F2 UDゴシック | BIZ UDGothic Bold相当のUDゴシックへ。字の内側の空間を十分に。 |
| F3 丸ゴシック | Zen Maru Gothic Bold相当の丸ゴシックへ。端と角に丸み。 |
| F4 明朝の見出し | 見出しだけNoto Serif JP Bold相当の明朝へ。本文は角ゴシックのまま。 |
正式な字形:Noto・BIZ UDGothic・Zen Maru Gothic。
F1とF2の差は参考画像では小さいため、公式見本も参照します。

| 見本 | 変更用プロンプトへ入れる指定 |
|---|---|
| D1 立体イラスト | 斜め上の視点、平面の色面、薄い影。 |
| D2 立体線画 | 立体の視点、白い面、濃紺の輪郭線、小さい差し色。 |
| D3 フラット | 正面2D、単純な面、少ない色、影なし。 |
| D4 モノライン | 正面2D、均一な太さの線、白い面。 |
| D5 手描き | 少し揺れる端正な線。文字はゴシックのまま。 |
| D6 切り絵 | 紙の単純な形を重ねる。浅い影、少ない色。 |
背景は全て白。
薄い補助色を本文の文字色には使いません。
スライド[番号]の配色だけをC2へ変更してください。 文字#263238、強調と線#007F86、薄い面#EAF6F5、背景は白。 文章・条件・図の関係・フォント・文字サイズは保ってください。
もっと多くの見本から選びたい人は、講義のあとの「デザイン見本20種」へ。
画像生成が使えないときや、構成案で止まったときに使います。
設計メモから構成案、画像スライドへ進んだ講師の試行例です。
自分の成果物と見比べ、目的・説明順・図の関係を確かめます。
完成例は、講師が架空の金額・頻度・条件を用意して作成しました。
実際の相場や効果を示すものではありません。作成する資料の内容は、自分の回答に合わせて決めます。
最初に知りたい:どんな成果が得られるか。
目指す成果:Instagram経由の問い合わせ増加。
次に知りたい:いくらかかるか。
完成例は、用意した条件のメモに3つの回答を加えて整理しました。
質問の数は、最初の一言と対話の内容によって変わります。

午前で使った手順の初期HTMLを、4つの工程で使いやすいページに作り変えます。
午前で使った手順の初期HTMLと画像を、配布フォルダから受け取り、作業用のフォルダにまとめます。
素材をダウンロードする(Googleドライブの配布フォルダを新しいタブで開きます)
Googleドライブの配布フォルダが開きます。クリックだけでは、ダウンロードは始まりません。
slide-guide-starter.html)と画像をダウンロードします。1017_bootcamp_guide フォルダを作り、その中に images フォルダを作ります。1017_bootcamp_guide の直下に、画像を images フォルダに保存します。1017_bootcamp_guide フォルダを開きます。フォルダ構成
1017_bootcamp_guide/
├── slide-guide-starter.html
└── images/
├── (配布画像1)
└── (配布画像2)画像のファイル名は、配布されたものをそのまま使います。
できたものに、チェックを入れます。
チェックの状態は保存されません。
設計メモ、構成案、画像スライドの順に、AIと進めます。
午前の手順を載せた初期HTMLを、利用者が迷わないページに改善します。
縦に長く並んだ初期HTMLを、工程ごとのタブに分け、いま必要な手順だけが見える状態にします。
長い1枚のページは、「いまどこまで進んだか」「次に何をするか」を見失いやすくなります。工程ごとに分けると、探す・迷う手間が減ります。
教材準備中です。 このプロンプトは、教材の確定後に掲載します。
このページ上部の4つのタブが、完成した姿の見本です。タブを押すと、その工程だけが表示されます。
完成イメージの画像は、教材の確定後に掲載します。
できたものに、チェックを入れます。
チェックの内容は、教材の確定時に見直します。チェックの状態は保存されません。
午前のガイドのFAQ(止まった場所から、再開する)も確認できます。
長いプロンプトを手順の途中に並べず、ボタンで開くポップアップに入れます。ポップアップ内でワンクリックでコピーできるようにします。
長い文章が手順の間に挟まると、手順が読み進めにくくなります。必要なときだけ開き、全文を1回の操作でコピーできれば、選択漏れや貼り間違いも減ります。
教材準備中です。 このプロンプトは、教材の確定後に掲載します。
「プロンプトを開く」ボタンを押すと、完成した動きの見本が開きます(Escキーや背景クリックでも閉じられます)。
完成イメージの画像は、教材の確定後に掲載します。
できたものに、チェックを入れます。
チェックの内容は、教材の確定時に見直します。チェックの状態は保存されません。
午前のガイドのFAQ(止まった場所から、再開する)も確認できます。
文字だけの手順に、説明用の画像を差し込みます。
操作画面は、言葉だけだと伝わりにくい情報です。画面を見て「同じ状態か」を確かめられると、迷いが減ります。
教材準備中です。 このプロンプトは、教材の確定後に掲載します。
画像の見本は教材準備中です。午前のガイドには、画像を手順の近くに置いた例があります。
完成イメージの画像は、教材の確定後に掲載します。
できたものに、チェックを入れます。
チェックの内容は、教材の確定時に見直します。チェックの状態は保存されません。
午前のガイドのFAQ(止まった場所から、再開する)も確認できます。
作ったページを、ChatGPT Sitesで公開し、他の人と共有できる状態にします。
手元のファイルだけでは、他の人が使えません。URLで共有できると、完成したものを見てもらえます。
教材準備中です。 このプロンプトは、教材の確定後に掲載します。
公開後の見本は教材準備中です。
完成イメージの画像は、教材の確定後に掲載します。
できたものに、チェックを入れます。
チェックの内容は、教材の確定時に見直します。チェックの状態は保存されません。
午前のガイドのFAQ(止まった場所から、再開する)も確認できます。
講義スライドの作り方と、デザイン見本20種を持ち帰ります。
同じ作り方を、別の資料にも使います。
PARTICIPANT BONUS
参加者特典
講義のあとも、自分の資料づくりに使えるものを2つ用意しました。
同じ内容のスライドを、20のデザインで描いた見本です。
色・書体・図の描き方の組み合わせを、まとめて選べます。
見本の書体名は、描画の参考です。
指定したフォントで厳密に組んだものではありません。

01ビジネス・ミニマル
シンプルなフラット図
Noto Sans JP相当の角ゴシック
「ビジネス・ミニマル」のデザインにしてください。 背景は白(#FFFFFF)、文字はネイビー(#1F2A44)、強調はブルー(#2F6FDE)。Noto Sans JP風の角ゴシックを使い、余白と整列を重視し、図はシンプルなフラット図にしてください。 元の文章・数字・条件、図の並列・順序・分岐を変えず、文字は大きく読みやすくしてください。 添付したスライド1枚だけを作り、元の画像は残してください。

02アイソメトリック
斜めから見た立体イラスト
Noto Sans JP相当の角ゴシック
「アイソメトリック」のデザインにしてください。 背景は白(#FFFFFF)、文字はネイビー(#1F2A44)、強調はブルー(#2F6FDE)。Noto Sans JP風の角ゴシックを使い、図は斜め上から見た立体イラストにそろえ、浅い影で奥行きを出してください。 元の文章・数字・条件、図の並列・順序・分岐を変えず、文字は大きく読みやすくしてください。 添付したスライド1枚だけを作り、元の画像は残してください。

03モノライン
均一な線の図
Zen Kaku Gothic New相当の角ゴシック
「モノライン」のデザインにしてください。 背景は白(#FFFFFF)、文字と線はチャコール(#30343B)、差し色はテラコッタ(#C65D38)。Zen Kaku Gothic New風の角ゴシックと、均一な太さの線で描く正面向きの図を使い、余白を広く取ってください。 元の文章・数字・条件、図の並列・順序・分岐を変えず、文字は大きく読みやすくしてください。 添付したスライド1枚だけを作り、元の画像は残してください。

04エディトリアル
写真と整った図表
Noto Serif JP相当の明朝見出し+角ゴシック本文
「エディトリアル」のデザインにしてください。 背景はアイボリー(#F7F3EC)、文字は黒(#242424)、差し色はブラウン(#9A6845)。見出しはNoto Serif JP風の明朝、本文は角ゴシックとし、写真・細い罫線・整った図表で雑誌のように構成してください。 元の文章・数字・条件、図の並列・順序・分岐を変えず、文字は大きく読みやすくしてください。 添付したスライド1枚だけを作り、元の画像は残してください。

05ブループリント
設計図風の線画
BIZ UDPGothic相当のUDゴシック
「ブループリント」のデザインにしてください。 背景は濃紺(#12355B)、文字と図の線は白(#FFFFFF)、差し色はシアン(#7CCCE8)。BIZ UDPGothic風のUDゴシックを使い、薄い方眼と精密な線画で設計図のように見せてください。 元の文章・数字・条件、図の並列・順序・分岐を変えず、文字は大きく読みやすくしてください。 添付したスライド1枚だけを作り、元の画像は残してください。

06ナチュラル・ペーパーカット
切り紙風の図
Zen Maru Gothic相当の丸ゴシック
「ナチュラル・ペーパーカット」のデザインにしてください。 背景は生成り(#F7F3EA)、文字は深緑(#244438)、差し色はグリーン(#4D8063)。Zen Maru Gothic風の丸ゴシックを使い、図は切り紙を重ねたような形と浅い影で、温かく表現してください。 元の文章・数字・条件、図の並列・順序・分岐を変えず、文字は大きく読みやすくしてください。 添付したスライド1枚だけを作り、元の画像は残してください。

07スケッチノート
手描きの囲みや図
Noto Sans JP相当の角ゴシック
「スケッチノート」のデザインにしてください。 背景は白(#FFFFFF)、文字と線はチャコール(#29313B)、差し色はオレンジ(#EF6B21)。文字はNoto Sans JP風の角ゴシックにし、図・囲み・下線は少し揺れる手描きのマーカー線で表現してください。 元の文章・数字・条件、図の並列・順序・分岐を変えず、文字は大きく読みやすくしてください。 添付したスライド1枚だけを作り、元の画像は残してください。

08和モダン
細い線の図
しっぽり明朝相当の明朝見出し+角ゴシック本文
「和モダン」のデザインにしてください。 背景は生成り(#F8F4EB)、文字は墨色(#292C2A)、差し色はテラコッタ(#A45E3F)。見出しはしっぽり明朝風、本文は角ゴシックとし、細い線画・広い余白・控えめな和紙の質感を組み合わせてください。 元の文章・数字・条件、図の並列・順序・分岐を変えず、文字は大きく読みやすくしてください。 添付したスライド1枚だけを作り、元の画像は残してください。

09レトロ・ポップ
太線のフラット図
M PLUS Rounded 1c相当の太い丸ゴシック
「レトロ・ポップ」のデザインにしてください。 背景はクリーム(#FFF2D8)、文字と輪郭はブラウン(#493528)、差し色はオレンジ(#EC6A2B)。M PLUS Rounded 1c風の太い丸ゴシックと、太線・丸い形のフラット図で、昔の印刷物のように親しみやすくしてください。 元の文章・数字・条件、図の並列・順序・分岐を変えず、文字は大きく読みやすくしてください。 添付したスライド1枚だけを作り、元の画像は残してください。

10ダーク・テック
細い線の技術図
Noto Sans JP相当の角ゴシック
「ダーク・テック」のデザインにしてください。 背景は濃紺(#0D1726)、文字は白(#F5FAFF)、差し色はシアン(#5CD5ED)。Noto Sans JP風の角ゴシックとシアンの細い技術図を使い、控えめな発光で先進的な印象にしてください。 元の文章・数字・条件、図の並列・順序・分岐を変えず、文字は大きく読みやすくしてください。 添付したスライド1枚だけを作り、元の画像は残してください。

11スイススタイル
グリッドと幾何学的なピクトグラム
Noto Sans JP相当の角ゴシック
「スイススタイル」のデザインにしてください。 背景は白(#FFFFFF)、文字は黒(#161616)、強調は赤(#D63D2E)。Noto Sans JP風の角ゴシックを使い、左揃え・グリッド・広い余白を重視し、図は単純な幾何学的ピクトグラムにしてください。 元の文章・数字・条件、図の並列・順序・分岐を変えず、文字は大きく読みやすくしてください。 添付したスライド1枚だけを作り、元の画像は残してください。

12ベンタグリッド
カード状に整理したフラット図
BIZ UDPGothic相当のUDゴシック
「ベンタグリッド」のデザインにしてください。 背景は薄いグレー(#F4F6F5)、文字は深緑(#20352E)、差し色はミント(#D1E9DD)。BIZ UDPGothic風のUDゴシックを使い、情報を角丸のカードに整理し、フラット図と十分な間隔で見やすくしてください。 元の文章・数字・条件、図の並列・順序・分岐を変えず、文字は大きく読みやすくしてください。 添付したスライド1枚だけを作り、元の画像は残してください。

13ネオブルータリズム
太い黒枠とくっきりしたフラット図
Dela Gothic One相当の極太見出し+角ゴシック本文
「ネオブルータリズム」のデザインにしてください。 背景は淡い黄色(#FFF2A5)、文字と枠は黒(#171717)、差し色はピンク(#F07FAD)。見出しはDela Gothic One風の極太ゴシック、本文は角ゴシックとし、太い黒枠・角のある形・くっきりした影で大胆に見せてください。 元の文章・数字・条件、図の並列・順序・分岐を変えず、文字は大きく読みやすくしてください。 添付したスライド1枚だけを作り、元の画像は残してください。

14バウハウス・ジオメトリック
円・三角・四角で描く幾何学図
M PLUS 1相当の太い角ゴシック
「バウハウス・ジオメトリック」のデザインにしてください。 背景は生成り(#F5F1E7)、文字は黒(#171717)、差し色は赤(#D84735)・黄(#E6B72E)・青(#315BA3)。M PLUS 1風の太い角ゴシックを使い、円・三角・四角を組み合わせたフラット図で構成してください。 元の文章・数字・条件、図の並列・順序・分岐を変えず、文字は大きく読みやすくしてください。 添付したスライド1枚だけを作り、元の画像は残してください。

15メンフィス
ポップな幾何学模様とフラット図
M PLUS Rounded 1c相当の太い丸ゴシック
「メンフィス」のデザインにしてください。 背景は温かい白(#FFF9F2)、文字は濃い紫(#302438)、差し色はピンク(#F39BB9)・ターコイズ(#68B8BC)・黄(#F0CF63)。M PLUS Rounded 1c風の丸ゴシックとフラット図を使い、点・波線・三角の模様を余白に少量添えてください。 元の文章・数字・条件、図の並列・順序・分岐を変えず、文字は大きく読みやすくしてください。 添付したスライド1枚だけを作り、元の画像は残してください。

16クレイ風3D
粘土のように丸い立体イラスト
Zen Maru Gothic相当の丸ゴシック
「クレイ風3D」のデザインにしてください。 背景は温かい白(#FFF8EF)、文字は深緑(#33493E)、図はミント(#D5E8DB)とピーチ(#EDC7BB)。Zen Maru Gothic風の丸ゴシックを使い、図は粘土のような丸い立体と浅い影で、柔らかく表現してください。 元の文章・数字・条件、図の並列・順序・分岐を変えず、文字は大きく読みやすくしてください。 添付したスライド1枚だけを作り、元の画像は残してください。
17ピクセルアート
ドットで描く図と直角の接続線
DotGothic16風の見出し+角ゴシック本文
「ピクセルアート」のデザインにしてください。 背景は淡い生成り(#F1F6EA)、文字は濃いティール(#183739)、差し色はターコイズ(#49A8A3)と黄(#E7B856)。見出しはDotGothic16風、本文は角ゴシックとし、図は角の見えるドット絵、接続線は直角にしてください。 元の文章・数字・条件、図の並列・順序・分岐を変えず、文字は大きく読みやすくしてください。 添付したスライド1枚だけを作り、元の画像は残してください。

18メッシュグラデーション
淡いグラデーションと半透明の図
Zen Kaku Gothic New相当の角ゴシック
「メッシュグラデーション」のデザインにしてください。 背景は淡いラベンダー(#F4ECFA)・青(#A6B7F4)・桃色(#F3BFAF)が滑らかに混ざるグラデーション、文字は濃紺(#292D48)。Zen Kaku Gothic New風の角ゴシックと半透明の図やパネルで、明るく滑らかに表現してください。 元の文章・数字・条件、図の並列・順序・分岐を変えず、文字は大きく読みやすくしてください。 添付したスライド1枚だけを作り、元の画像は残してください。
| 次に作る資料 | 先に考えること |
|---|---|
| 社内提案 | 上司に何を判断してほしいか。費用と手間をどこで答えるか。 |
| サービス説明 | 相手がすでに知っていることと、導入前に知りたいこと。 |
| 講義資料 | 見終えた人に何を理解し、何ができてほしいか。 |
見本の目的や順番を、そのまま自分の題材へ移しません。
W1のインタビューで、読み手と目的を決め直します。
W5で作ったスキルを、次の資料で使います。
直したくなった点は、そのスキルだけに伝えて直します。
新しいページを作るのではなく、いまあるページを改善するためのCodex用プロンプトを、選ぶだけで作ります。
Step 1
空の場合は「このフォルダーにある、いま開いているHTMLページ」として扱います。
Step 2
項目にチェックを入れると、選択肢が開きます。複数の項目を選べます。選択肢を選ばなかった場合は「おまかせ」になります。意味が分からない言葉は、「用語集で見る」から確認できます(新しいタブで開きます)。
Step 3
まだ項目が選ばれていません。
この環境ではポップアップが使えないため、プロンプトをここに表示します。
質問が多いときも、画像生成で止まったときも。
戻る工程を確認して続けます。
Webページを直すときに、Codexへ伝えるための言葉です。
意味・使いどころ・表示見本・Codexへの指示例を、16語そろえています。
Find
Terms
16語を表示中
条件に合う用語がありません。検索の言葉やカテゴリを変えてください。
UIは「画面の見た目と、操作する部品」(ボタン・文字・色など)。UXは「使ったときの体験全体」(迷わず目的を達成できたか)です。UIは、UXをよくするための手段です。
ページを直すときは、「見た目をよくしたい」ではなく「利用者が迷わず目的を達成できるようにしたい」から考えます。
UI(部品の見た目)
UX(体験の流れ)
迷わず最後まで進めれば、よいUX
利用者が迷わず目的を達成できるように、このページのUI(見た目・操作)を改善してください。 文章・リンク・機能は変えないでください。
画面の上に重ねて表示する小さな画面(ポップアップ)です。開いている間は、後ろのページを操作できません。
長い文章(プロンプトなど)を、必要なときだけ見せたいとき。確認や入力など、いま集中してほしい操作に使います。常に読ませたい手順は、入れません。
開いている間、後ろのページは操作できません。
この見本は枠の中で動きます。背景の暗い部分か「閉じる」で閉じられます。
長いプロンプトを、ボタンで開くモーダル(ポップアップ)にしてください。 開く・閉じる・全文コピーができ、Escキーでも閉じられるようにしてください。
同じ場所で、表示する内容を切り替える見出しの並びです。
工程や種類ごとに情報を分けて、いま必要な分だけ見せたいとき。
工程ごとにタブで切り替えられるようにしてください。 現在選択中のタブが分かる見た目にし、キーボードでも操作できるようにしてください。
見出しを押すと、中身が開いたり閉じたりする表示です。
補足や見本など、必要な人だけ読めばよい情報。必須の手順は閉じません。
ここに答えが入ります。
必要な人だけが開いて読みます。
よくある質問を、見出しを押すと開くアコーディオンにしてください。 最初は閉じておき、必須の手順は折りたたまないでください。
画面を縦の列で区切った構成です。1カラムは本文が縦一列、2カラムは本文の横に目次などを置く構成です。
読み物は1カラム。目次や関連リンクを常に見せたいなら2カラム。スマホでは1カラムに戻すのが基本です。
1カラム
2カラム
本文を2カラム(本文と、右側の目次)にしてください。 スマホでは1カラムに戻してください。
画面の幅(PC・スマホ)に合わせて、レイアウトが自動で変わる作りです。
PCでもスマホでも見られるページ。横スクロールが出ないこと、文字や押す部分が小さくなりすぎないことが目安です。
PCの幅(3列)
スマホの幅(1列)
スマホ(画面幅360〜390px)でも見やすいレスポンシブ表示にしてください。 横スクロールが出ないようにし、ボタンは押しやすい大きさにしてください。
完成後の画面イメージを見せる、見本の画面枠(PCやスマホの画面)です。
操作画面や完成イメージを、文章より早く伝えたいとき。
説明の近くに、PC画面とスマホ画面のモックアップを入れてください。 画像は後から差し替えられる枠にし、代替テキスト(alt)を付けてください。
関連する情報を、枠で囲んだ小さな面にまとめる見せ方です。
種類の違う情報を並べて、役割を見分けやすくしたいとき(手順・補足・配布ファイルなど)。
手順・補足・配布ファイルを、役割が分かるカードUIに分けてください。 カードごとに見出しと余白をそろえてください。
ページの一番上にある、タイトルやロゴ、メニューを置く帯です。
いま見ているサイトが何か、どこへ移動できるかを、最初に伝えたいとき。
ページの上部に、サイト名と主要メニューを置いたヘッダーを作ってください。 スマホでも1行に収まるようにしてください。
ページ間・ページ内を移動するためのメニューです。
どこにいるか(現在地)と、次にどこへ行けるかを示したいとき。現在地は、色だけでなく下線などでも示します。
現在地は、色・太さ・下線で示しています。
午前・午後・応用編・用語集へ移動できるナビゲーションを、全ページの上部に置いてください。 現在のページが分かる表示にしてください。
「ダウンロードする」「申し込む」のように、次の行動をうながすボタンやリンクです。
読んだ人にしてほしい行動が1つあるとき。目立たせるのは、1ページに1〜2個までにします。
主なボタンだけを目立たせています。
ページの最後に、「資料をダウンロード」のCTAボタンを置いてください。 主なボタンは1つだけ目立たせ、他は控えめにしてください。
ページを開いて最初に見える、大きな見出しと一言説明の領域です。
ページの目的を、最初の数秒で伝えたいとき。
ページの最初に、題名と1行の説明、主なボタンを置いたヒーローセクションを作ってください。 文章量は少なくしてください。
マウスを重ねたときに、見た目が変わることです。「押せる場所」を伝える合図になります。
ボタン・リンク・カードなど、押せる場所を示したいとき。スマホにはホバーがないので、ホバーだけに頼りません。
キーボードでフォーカスしても、同じ見た目になります。
ボタンとカードに、マウスを重ねたときの見た目の変化(ホバー)を付けてください。 スマホでも使えるように、ホバーだけに頼らない作りにしてください。
基本の色に加えて、強調したい所だけに使う色です。
ボタンやリンクなど、目を向けてほしい所だけに使います。使いすぎると、どこが大事か分からなくなります。
アクセントカラーを1色に決めて、ボタン・リンク・見出しの印だけに使ってください。 文字と背景の明暗差は確保してください。
文字や部品のまわりの、何も置かない空きです。
情報のまとまりを見分けやすくしたいとき。詰め込むほど、読みにくくなります。
余白が少ない
本文が続きます。まとまりが分かりにくい。
見出し次の本文です。
余白がある
本文が続きます。まとまりが見分けやすい。
見出し次の本文です。
見出しと本文、カードとカードの間の余白を広げて、まとまりが見分けやすいようにしてください。 文章は変えないでください。
手順に番号を付けて順番を示す表示と、できたかどうかを確かめる確認欄です。
操作手順など、順番どおりに進めてほしい情報。「できたら確認」を付けると、次へ進んでよいか迷いません。
手順に番号を付けたステップ表示にし、各ステップの終わりに「できたら確認」のチェック欄を付けてください。 手順の文章は変えないでください。