主役は1つ
MAIN
sub message
CTA
一番大きい要素だけ記憶に残す。
一番大きい要素だけ記憶に残す。
4階層以上にしない。
端に文字・顔・CTAを置かない。
整列軸は最大3本。
関係、位置、繰り返し、強弱を必ず確認。
左上から右下へ自然に流す。
白フチ・ギザギザ・AI破綻を落とす。
OKは主役が1つ。NGは主役が競合。
Markdown source
会社全体で適用するデザインのグローバルルール。
ブランド固有配色は `shiftai.md` を参照する。
# タイポグラフィ
- 和文フォント: Noto Sans JP
- 欧文フォント: Avenir Next Arabic
# スタイル
- 先進的、スタイリッシュ、ダイナミック、デジタル、明るい、誠実、信頼感のある
# 配色パターン
- 配色は `base / main / accent` の3役で組む。色数を増やす前に、同じ色相の明度差と彩度差で整理する
- 有彩色をメインカラーにする場合、ベースカラーはメインカラーと同系色の薄い色を使う
- 1つの配色パターンで使うアクセントカラーは1色だけ。補色と反対色を使い分ける場合は、別パターンとして分ける
- メインカラーが濃い場合、ベースカラーは白に近い淡色にする
- メインカラーが薄い / 明るい場合、ベースカラーは暗く濃い同系色にしてコントラストを確保する
- Red、Blue、Green、Lime、Yellow Orange、Magenta、Violet、Cyan、Pink など、どの有彩色でも同じ考え方を適用する
- ブランド訴求が重要な制作物だけ、具体的なSHIFT AI配色として `shiftai.md` を参照する
# 制作ルール(バナー / サムネイル / LP FV / スライド / SNS画像 共通)
## 主役・訴求
- 1枚に主役は1つだけ。メインコピー / メインビジュアル / CTA のいずれかを最大要素として確定させる
- 副要素は主役の30〜60%サイズに抑え、視覚ウェイトを競合させない
- 3秒以内に「誰に・何を・どうしてほしいか」が伝わること
- 1画像1メッセージ。複数訴求を詰め込まない
## 文字・タイポ
- 和文 Noto Sans JP / 欧文 Avenir Next Arabic 以外は使わない
- フォントウェイトは最大 Bold まで。Heavy / Black / ExtraBold など太すぎるウェイトは禁止
- メインコピーは画像短辺の8%以上のサイズを確保
- メインコピー / サブコピー / 補足の3階層までに収める。階層ごとにサイズ差は1.4倍以上つける
- 行間 1.4〜1.7、字間 -25〜20(基本は0、カタカタは狭くする)
- 1行は和文で最大20文字、欧文で最大40文字。改行は意味の切れ目で行う
- フチ文字、グロー(光彩)、過度なドロップシャドウは禁止。背景側で可読性を確保する
- どうしても背景と被る場合は、半透明の塗り帯を文字下に敷く
- 文字は必ず水平。斜体・湾曲・装飾フォントは禁止
- グラデーションはメインコピーやCTAボタンなどのアクセント用途に限定する。背景、装飾パーツ、通常カード、補足要素には使わない
## レイアウト・視線導線
- 視線導線はZ字を基本にする。左上から右上、左下、右下へ自然に読ませる。縦長資料や文章量が多い場合のみF字を使う
- 主役を画面の光学中心(やや上)か左上に置き、最初に目に入る起点を作る
- 余白は画像短辺の5%以上を全周に確保
- 上下左右のマージンは原則均一にする。ロゴだけはブランド規定や視認性を優先して例外可
- デザイン原則「近接」「整列」「反復」「対比」を必ず確認する
- 近接: 関連する要素は近づけ、関係ない要素は離す
- 整列: 文字、写真、CTA、数字の端を見えない線に揃える
- 反復: 同じ役割の要素は色、サイズ、余白、配置を繰り返す
- 対比: 主役と補足の差を明確にし、同じ強さの要素を並べすぎない
- 整列軸を最大3本までに固定。要素は必ずいずれかの軸に揃える
- グリッドを意識し、勘で配置しない
- 同じ役割の要素はサイズ・間隔を揃える
## 写真・加工・仕上げ
- 切り抜き写真はエッジを200%拡大してチェック。ジャギ・白フチ・髪の毛の破綻があれば差し替え
- 解像度は書き出しサイズの2倍以上の元画像を使用
- 過度なぼかし、レタッチ、フィルターは禁止
- 人物・モックアップの質感を揃える
- 生成AI画像は手指・文字・対称性を必ず確認してから採用
## Hard Fail(即不採用)
- メインコピーが一瞥で読めない
- 文字がフチ・光彩・ドロップシャドウに依存している
- 主役が複数競合している
- 写真の切り抜き / 解像感の粗さが見える
- ぼかし・エフェクトが過剰
- 規定外のフォントが混入している
- 太すぎるフォントウェイトが使われている
- アクセント以外にグラデーションが使われている