原稿が決まったら、何を先に見せるかを画面の形へ変えます。
色や写真を増やす前に、見出し、説明、根拠、行動の強さを分けましょう。
このレッスンでは、無料の判断ガイドという提供物に合わせ、紙を読むような落ち着いた見た目と、実際の資料のプレビューを設計します。
おしゃれに見えるかだけでなく、文字が読めるか、何が資料の中身か、どこから受け取るかを判断できる状態を作ります。
この記事で学ぶこと
- 情報の主従を文字と余白で表現する。
- 実際の資料を根拠として見せる。
- 素材の役割と再利用条件を固定する。
情報の役割から見た目を決める
今回の資料は、勢いで申し込ませる催しではなく、社内の判断に使うガイドです。
見本では紙に近い明るい地と深緑を使い、三条件を大きな番号と横罫で示します。
資料を選ぶ閲覧室のように、内容と使い道を落ち着いて確かめられる方向です。
「高級感」「信頼感」という抽象語だけで止めず、何をどう見せるかまで言葉にしてください。
方向を比較するなら、実物を見せる案、質問に答えてもらう案、登壇者を中心にした案など、体験が異なる候補を少数並べます。
今回は提供物の実物を確認できるため、プレビューを使う案を選びます。
質問に答える診断や人物の大きな写真は、目的に対して必要ではありません。
色違いだけを大量に生成する前に、中心となる体験を選ぶ工程です。
決めた方向は、文字、色、余白、画像、動きの条件へ落とします。
見本では見出しに明朝系、本文と操作にゴシック系を使い、長い本文には十分な行間を設けます。
動きで読ませる必要がないので、大きなスクロール演出は付けません。
使う端末により書体が変わる場合もあるため、見た目を画像一枚へ固定せず、実際の文字量で確認する方針にします。
文字の大きさを役割で分ける
文字には、ページの約束、章の結論、本文、条件という役割があります。
すべてを太く大きくすると、何を先に読むか分かりません。
主見出しを最も強くし、三条件の名前を次に、本文と注記を読みやすい大きさへそろえます。
注記は小さくできる情報ではなく、目立たせ方が違う情報です。
無料条件や架空例の説明を読めないサイズへ縮めないようにします。
見出しの改行は意味で区切ります。
「FAQにする前に」を途中で切って一文字だけ残すより、短いまとまりで読める形を探します。
ただしPCの改行位置をスマートフォンへそのまま押し付けると、狭い画面で行数が増えすぎることがあります。
幅ごとに文字の大きさや改行の扱いを調整し、本文を横にスクロールしなくても読めるようにします。
画像の中へすべての文章を焼き込むと、修正や拡大が難しくなります。
今回の見出し、説明、リンク文はHTMLの文字として実装します。
資料プレビューに含まれる小さな文字は、近くの本文でも要点を説明し、原寸のPDFを開けるようにします。
プレビューだけを読まないと条件が分からない作りにしないことで、画像が見えない場合にも主な意味を保てます。
余白と色で読む順番をそろえる
余白は、同じ話をまとめ、次の話との境界を示します。
三条件の番号と説明は近づけ、次の条件との間には同じ間隔を取ります。
見出しと本文の距離が毎回違うと、別の階層に見えることがあります。
感覚で余白を増減する前に、同じ役割の要素を同じ基準へそろえてください。
広ければ高品質というわけではなく、関係が読み取れることが目的です。
色は、地、文字、主要な行動、補助情報の役割を分けます。
見本の深緑は見出しと主要リンクへ使い、薄い色は背景の区切りに使います。
リンクの上に置く文字が背景に埋もれないかも確認します。
色だけで操作可能と伝えず、下線や枠、形でも区別してください。
グレーの薄さで注記を消すような処理は、条件の読みにくさにつながります。
同じ形のカードを章ごとに増やすと、情報の違いが見えにくくなることがあります。
今回の三条件は番号の列、中身は実物の画像と説明、使い方は順番のリストにします。
内容の意味に合わせて形を選びながら、文字と色のルールは共有します。
統一感を作ることと、すべてを同じ箱へ入れることを区別し、読者が章の役割を理解できる形を残します。
画像は資料の中身を示すために使う
今回の中心画像は、配布するPDFのページを使います。
見本の集計図や確認表は、受け取れる内容を見せる証拠になります。
架空のオフィス写真を置いても資料の中身は分かりません。
画像を選ぶときは、証明、使用場面、説明、雰囲気のどの役割かを一つ決めます。
空いた場所を埋めるだけなら、画像を置かない案も検討してください。
資料を切り抜いて見せる場合は、見出しや「架空データ」の注記を切り落とさないようにします。
今回のプレビューには、実際の資料の抜粋である説明を添えます。
AIで画像を作り直して数字や文字が変わると、実物と食い違うため不適切です。
正確な図表は元の資料から使い、背景や装飾が必要な場合だけ別の画像として作る方法を選べます。
画像のサイズと容量も確認します。
大きな原寸画像を何枚も埋め込むと、スマートフォンで読むまでに時間がかかります。
見せる幅に合う画像へ縮小し、文字が潰れない範囲で圧縮します。
横幅と高さを実装へ指定すれば、読み込み前後に文章が動くのを抑えられます。
画像の意味を短い代替説明にし、詳しい内容は本文と実物のPDFで補ってください。
採用案を実寸と縮小で確かめる
デザインを評価するときは、制作画面を拡大した状態だけで見ないようにします。
PC幅、スマートフォン幅、ページ全体を縮小した表示で、約束、三条件、実物、行動の主従が残るかを見ます。
縮小時にすべて同じ濃さの箱に見えるなら、強調が多すぎる可能性があります。
細かい装飾を足すより、何を一番見せるかへ戻って整理します。
確認では、好みと不具合を分けます。
「緑より青が好き」は方向の好みですが、「条件文が背景に埋もれて読めない」は直すべき問題です。
「画像が弱い」と感じたら、中身が分からないのか、小さすぎるのか、約束に関係しないのかを具体化します。
AIへの修正も、この問題と残す要素を一緒に伝えると、無関係な全体変更を減らせます。
最後に、飾りの英字、重複する見出し、不要な影を一度外して見ます。
情報と主役が弱くならなければ、その要素は戻さなくて構いません。
見た目の採点や目視の判断は制作上の評価であり、実際の受取率や売上の検証ではありません。
採用理由と未確認の項目を記録し、確定原稿と一緒にAIへ渡せる形へ整えます。
実践課題
実践課題：見た目のルールと実物画像を選ぶ
制作シートへ、主色、地の色、文字の役割、余白、画像の目的、使わない演出を書きます。
続いてPDFを開き、プレビューにするページを選び、元のページ番号と画像の説明を記録します。
簡単な配置案へ実際の文を入れ、PCとスマートフォンで約束と受取リンクが分かるか確認してください。
画像の文字が小さい場合は、要点を本文へ補います。
- 文字と色の役割を決める。
- PDFの見本ページを選ぶ。
- 画像と文字の見え方を縮小して確かめる。
記入例は「紙色の地と深緑、三条件を番号と横罫で整理、実PDFの架空例を中身として表示」です。
失敗例は、図表の架空注記を切り取り、導入実績のように見せることです。
画像の範囲と説明を修正します。
自己確認では、文字の主従があるか、必要条件が読めるか、画像が実物と一致するかを見ます。
色の名前だけで終わらず、それぞれの役割と採用理由まで残してください。
自己確認
- 情報の主従を文字と余白で表現する。
- 実際の資料を根拠として見せる。
- 素材の役割と再利用条件を固定する。
まとめ
商品紹介ページの見た目は、読者の判断を支えるために設計します。
文字の主従、関係が分かる余白、役割を持つ色、実物を示す画像を組み合わせましょう。
今回の資料紹介では、不要な人物写真や動きより、中身を確かめられるプレビューを優先します。
実寸と縮小で検品し、採用理由を言葉にしたら、次は原稿と見た目の条件をAIへ渡して動くHTMLへ実装します。
- 情報の主従を文字と余白で表現する。
- 実際の資料を根拠として見せる。
- 素材の役割と再利用条件を固定する。
