白黒エディトリアルデザイン
A4資料または16:9バナーを、白・黒・赤の限定配色で設計する。 情報階層は文字サイズ、ウェイト、余白、大きな矩形写真で作り、情報を持たない装飾を加えない。
配色を固定する
- ベースは白
#FFFFFFとする。 - 見出し、黒帯、写真の代替面には黒
#111114を使う。 - 赤
#E23E14は番号、記号、強調語、時刻だけに使い、面積を全体の3%未満にする。 - 本文は
#2A2C30、注記は#6E6E6A、罫線は#DEDEDA、黒地上の補助文字は#C9C9C5とする。 - 4色目を加えない。
- グラデーション、パステル色、ドロップシャドウ、光彩、半透明ぼかし、大きな赤い面を使わない。帯は黒にする。
文字を設定する
- 日本語と欧文をNoto Sans CJK JPで統一する。
- ウェイトは900、700、500だけを使い、400以下を使わない。
font-feature-settings: "palt" 1を適用する。- 見出しの字間を
-0.02em、小さなラベルの字間を0.10em〜0.16emとする。 - 読めない補足、英字ラベル、雰囲気だけを作る語句を削る。
A4（210 × 297 mm）では次を使う。
| 要素 | サイズ | ウェイト | | --- | ---: | ---: | | 主見出し | 36〜42 pt | 900 | | セクション見出し | 14〜15 pt | 900 | | 小見出し | 11〜13 pt | 900 | | 本文 | 8.5〜10.5 pt | 500 | | 注記 | 7〜8 pt | 500 |
16:9バナーは 1200 × 675 px で設計し、2400 × 1350 px で書き出す。
| 要素 | サイズ | ウェイト | | --- | ---: | ---: | | 主見出し | 64〜74 px | 900 | | 主見出し2行目 | 47〜54 px | 900 | | ラベル | 19 px | 900 | | 小見出し | 17 px | 900 | | 本文 | 14.5 px | 500 | | 注記 | 13 px | 700 |
主見出しは本文の4倍以上にする。 中間の文字サイズを増やさない。
レイアウトを組む
- ロゴは左上だけに置く。高さはA4で
6.4 mm、バナーで34 pxとする。 - 右上には、黒タグや日付などを1要素だけ置ける。
- 写真、箱、ボタン、カードに角丸を使わない。
A4では次を守る。
- 左右マージンを
14 mm、上を13 mm、下を8 mmにする。 - 写真と黒い面は紙端まで裁ち落とす。
- 下端の黒いブロックは紙端まで伸ばし、その下に白を残さない。
16:9バナーでは次を守る。
- 左テキスト65%、右写真35%を基本比率にする。
- 内側余白を左
56 px、右46 px、上54 pxにする。 - 下端の黒帯に人数、日時、会場、企業名をまとめる。
罫線を制限する
- 1面あたり4本まで使う。1つの表に含まれる行区切りはまとめて1本と数える。
- セクション間、表またはリストの行間だけに使う。
- 太さはA4で
0.22 mm、Webまたはバナーで1 px、色は#DEDEDAに固定する。 - 罫線を左右の内容マージン内に収める。
- 見出し下の飾り線、アクセント色の線、太線、点線、破線、隣接要素の両側の線、四辺の囲み枠を使わない。
写真を使う
- 角丸なしの矩形にし、可能な限り大きく使う。
- 画面または紙端まで裁ち落とす。
- フィルター、色調変換、ダブルトーン加工をしない。
- 写真上に文字を重ねない。例外は黒タグ1個だけとする。
- 比率を決める前に顔の位置を確認し、顔を途中で切らない。
納品前に検査する
次の問いで1つでも「いいえ」があれば修正する。
- 配色は白・黒・赤に収まり、赤の面積は3%未満か。
- すべての文字を読め、各文字要素に必要性があるか。
- 情報階層を装飾ではなく、文字サイズ、ウェイト、余白、写真の大きさで作ったか。
- すべての角が直角か。
- 罫線の本数、太さ、色、用途は制限内か。
- 写真は未加工の矩形で、文字の重なりを抑え、顔を安全にトリミングしたか。
- A4または16:9の指定と最終書き出しが一致しているか。
出典
[小出孝雄氏のAIクリエイティブ指示書](https://x.com/takoidet/status/2085268284837175595)を、制作と検査に使える手順へ再構成した。 提供画像では第4章を確認できなかったため、その内容は推測して追加していない。