内容は揃ったのに、ページごとに色や文字の大きさが違い、どこを読めばよいか分からない。
AIで資料を作るときも、先に見た目の共通ルールを決めると判断しやすくなります。
このレッスンでは、営業資料の文字、色、余白、図の使い分けを決めます。
華やかさの好みを当てる作業ではありません。
相手が見出し、説明、条件を読み分けられるように、制作と修正で使う基準を短いメモへまとめます。
この記事で学ぶこと
- 見出し・本文・補足の役割から文字の強弱を決められる。
- 色と余白を、情報のまとまりや読む順序に使える。
- AIへ渡すデザインのルールを具体的な言葉で保存できる。
見出し・本文・補足の強弱を決める
文字は役割ごとに大きさと太さを揃えます。
見出しはページの結論、本文はその理由や内容、補足は出典や追加の条件です。
同じ役割が同じ見た目なら、ページを送るたびに読み方を覚え直す必要がありません。
「重要そうだから全て太字」にすると強弱がなくなるため、最初に読んでほしい文を一つ選びます。
演習では16:9の横長画面を使います。
1920×1080を設計上の基準にする場合、見出し64〜88px、本文36px前後、補足22px前後を初期案にできます。
これは今回の出発点であり、どの画面でも読める保証値ではありません。
実際には表示する窓の大きさに合わせて縮小されます。
補足が読めなければ、大きくするか別ページへ移し、拡大すれば読めるという理由で放置しないでください。
価格や対象外は、小さい補足へ押し込めない情報です。
「24万円」を大きく、「税別」を極端に小さくすると、条件を見落としやすくなります。
重要条件は本文として扱い、一緒に読み取れる位置と大きさにします。
日本語フォントは端末にある読みやすいゴシック系を使い、特殊な書体に頼らず、実際の表示で改行や欠けを確認する方針を記しておきます。
色に役割を持たせて数を絞る
色は好みだけで増やさず、背景、基本の文字、強調、補足の役割で決めます。
演習の初期案は、背景を白、文字を濃い墨色、強調を深い緑にします。
AIへ渡す色コードの例は、背景#FFFFFF、文字#182628、強調#086C5C、補足#586B6Aです。
色コードは色を指定する記号で、暗記は不要です。
そのまま指示へ添えられます。
強調色は、ページの結論や次の行動など、注目してほしい所へ使います。
見出し、本文、数字、背景を全て緑にすると、どれが重要なのか分かりにくくなります。
費用ページなら価格と範囲を一つのまとまりとして扱い、別の項目を無秩序に強調しないようにします。
1ページ内で強い色が何か所も競っていたら、読む順番を決め直してください。
区別を色だけへ任せないことも必要です。
「対応する項目は緑、対象外は赤」だけでは、色を見分けにくい人や白黒印刷で意味が失われます。
「提供すること」「対象外」という見出しを付け、文字でも分かるようにします。
薄い背景の上の薄い文字は、端末で見え方が変わりやすいため避けます。
最終的な読みやすさは、生成画像の印象ではなくブラウザーとPDFで確かめます。
余白と整列で情報のまとまりを示す
余白は、何も置かなかった場所というだけではありません。
同じ話題の要素を近づけ、別の話題とは離すことで、関係を示せます。
例えば納品物の名称と説明は近くに置き、次の納品物との間を広くします。
名称より別の説明の方が近いと、どの説明が何に対応するか分かりにくくなります。
まず情報の組を決め、その組ごとに余白を揃えます。
演習では、見出しの左端と本文の左端を揃え、画面の外周に一定の余白を残します。
1920幅の設計なら左右120px程度を初期案にできますが、内容を無理に押し込むための固定値ではありません。
左右で余白が違う意図がないのにずれていれば、揃える指示を出します。
中央揃えは短い表紙などに絞り、長い説明は左揃えにすると行の始まりを追いやすくなります。
文字が入らない場合は、最初に大きさを下げないでください。
重複する説明を削る、口頭補足へ移す、一枚を二つのまとまりに整理するなど、内容の扱いを先に考えます。
費用や対象範囲まで削ってはいけません。
余白を作る目的は情報を減らすことではなく、必要な情報を読み分けられる状態にすることです。
内容と表示の両方を確認して決めます。
内容に合わせて表・手順・文章を選ぶ
情報の関係に合う形を選ぶと、説明を短くできます。
同じ項目で比較するなら表、時間の順序なら手順、理由を伝えるなら文章が候補になります。
今回の4週間の流れは、1週目から4週目へ並べる形が合います。
各週へ「支援者」「顧客」の役割も付ければ、誰が何を行うか確認しやすくなります。
矢印を増やすだけでは、担当は伝わりません。
納品物は四つを同じ形式で並べ、それぞれ何に使うかを短く添えます。
分類表なら「問い合わせの種類を揃える」、管理シートなら「担当と状態を確認する」といった役割です。
四つを同じ箱へ入れることが目的ではなく、同じ種類の情報として読み比べられることが目的です。
説明の長さが大きく違えば、文を整えるか別の配置を選びます。
この演習では、基本版を文字と図形で作ります。
写真の選定や画像生成を必須にせず、説明の構造を先に練習するためです。
実務で写真が判断を助けるなら追加できますが、架空の導入先や実在しない実績を連想させる画像は避けます。
飾りのアイコンがなくても、見出し、整列、余白が揃えば資料は読めます。
画像を足す前に、何を説明する役割なのかを言葉にしてください。
共通ルールを短いメモに保存する
ここまでの判断をwork/design.mdへまとめます。
必要なのは、画面比率、文字の役割、色、余白、情報の形、使わない表現です。
「高品質に」「洗練された」といった形容詞だけで終わらず、AIが作った後に比較できる条件を書きます。
例えば「本文は左揃え、価格と税区分は同じまとまり、4週間の流れは順番と担当を示す」なら、実物で確認できます。
依頼文は「work/outline.mdの内容に合わせて、ここで決めたデザインのルールをwork/design.mdへ保存してください。文字サイズは初期案と明記し、読みにくい場合は情報整理を優先します。根拠のない実績、装飾用の写真、過剰なアニメーションは入れません」で始められます。
保存後に内容を読み、元の構成や契約条件を書き換える指示が混ざっていないか確かめます。
ルールは制作を助けるためのものです。
全ページへ同じ三列の箱を使うように指定すると、手順や価格条件が読みづらくなる場合があります。
文字と色は共通にしながら、内容の関係に応じて配置を変える余地を残します。
最初の数ページを見て読みにくさが分かったら、共通ルールを直し、該当ページへ反映します。
毎ページを別々の好みで直すより、資料全体の一貫性を保ちやすくなります。
実践課題
実践課題：デザインのルールを保存する
つくるものは、AIが参照できるデザインメモです。
構成メモを用意し、文字の三つの役割、色、余白、図の使い方を決めます。
次にCodexへ保存を頼み、価格ページと4週間の流れに当てはめた場合を言葉で確認してください。
- 文字・色・余白の役割を決める。
- 価格と日程ページに当てはめる。
- work/design.mdへ保存する。
架空の記入例は「横長16:9。白地に濃い文字、強調は深緑。本文は左揃え。価格と税区分を同じまとまりにする。4週間の流れは順序と担当を示す。写真は基本版に使わない」です。
文字サイズは出発点として記し、実際の画面で読めるかを優先します。
自己確認
- 見出しと本文を見分ける基準があるか
- 色を使わなくても提供範囲と対象外を区別できるか
- 情報が入らないときの対処が書かれているか
まとめ
文字は役割で強弱を付け、色は意味を決めて使います。
余白と整列は、同じ情報をまとめ、読む順序を示すために調整します。
共通ルールがあれば、AIの出力を好みだけで評価せず、どこを直すか説明できます。
数値は今回の初期案として扱い、実際の表示で見直してください。
次は目的・事実・構成・デザインの四つのメモを使い、HTMLの初稿を作ります。
- 見出し・本文・補足の役割から文字の強弱を決められる。
- 色と余白を、情報のまとまりや読む順序に使える。
- AIへ渡すデザインのルールを具体的な言葉で保存できる。
