VALUE BOOKS · Design System

広告バナー制作の
判断を、迷わない。

買取・販売・求人の3カテゴリ別に、カラー・タイポグラフィ・コピーパターン・画像方針・NG例まで明文化したリファレンスサイトです。Meta / Google Display のフォーマット仕様とセーフゾーンも掲載しています。

01 / CATEGORIES

カテゴリ別ガイド

カテゴリごとにカラー・トーン・写真方針が異なります。制作前に該当カテゴリのガイドを開いてから着手してください。

BUY · 買取

本を売る人へ

読み終わった本を高く・カンタンに売りたい人向け。所有・整理・お得感のメッセージ。

Primary #A0330A
SELL · 販売

本を買う人へ

気になる本を見つけて買いたい人向け。発見・出会い・読書体験のメッセージ。

Primary #0095D9
HIRE · 求人

仲間になる人へ

VALUE BOOKS で働きたい人向け。価値観・働き方・本との関わりのメッセージ。

Primary #00475A 仮トーン
02 / FORMAT QUICK REFERENCE

主要フォーマット早見

Meta(Feed / Story / Reels)と Google Display で使うサイズの一覧。詳細仕様は フォーマットページ で。

1 : 1
1080 × 1080 px
Meta Feed(基本)
4 : 5
1080 × 1350 px
Meta Feed(縦長 / 視認性最大)
9 : 16
1080 × 1920 px
Meta Story / Reels
02b / BANNER DS

バナー精度を上げる6つのリファレンス

「次の1枚」を作るときに見るページ。事例ギャラリーから構図テンプレ、タイポ実例、出稿前チェックリストまで。里沙さん(外部デザイナー)と AI(banana / Imagen)の共通参照。

01 · INSPIRATION

参考事例ギャラリー

国内古本系・海外古本系・異業種から学べる広告/LP事例。リンクと「VBが学べる点」のみ掲載(画像転載なし)。

10事例 · カテゴリフィルタ付
02 · PATTERNS

レイアウトパターン集

買取/販売/求人別の構図テンプレ。SVGモックで主要18パターンを図解。AspectRatioと向き不向きまで明記。

18パターン · SVGモック
03 · GRIDS

グリッド・余白・セーフゾーン

4pxグリッドの実装ガイド、1080×1080のセーフゾーン、要素ヒエラルキー、z順序の図解。

セーフゾーン60%中央
04 · TYPOGRAPHY

広告用タイポ実例

8文字/15文字/25文字でのサイズ最適値。強調語・数字・縦組み判断まで実際にレンダリング。

9実例 · 実レンダ
05 · COPY RECIPES

コピー × ビジュアルレシピ

「整理レシピ」「価格訴求レシピ」など10種。コピー例 + 推奨ビジュアル + AI生成プロンプトのセット。

10レシピ · 英語プロンプト付
06 · CHECKLIST

バナー品質チェックリスト

出稿前10項目 + 配信後5項目。Yes/No判定可能なチェックボックス。配信後はCPA/CTR閾値で判定。

15項目 · チェック保存
03 / BRAND PRINCIPLES

守ること、避けること

どのカテゴリでも共通する VB ブランドの基本原則。

DO

  • 角丸は使わない(角は0pxシャープ)
  • Hiragino Sans を基本フォントに(W3=本文 / W6=見出し)
  • サービス色は混ぜず、ガイドどおり1カテゴリ1色で運用
  • ロゴは vb-assets CDN のSVGを使う(PNG化禁止)
  • 余白は4pxグリッド(4/8/16/24/32/48/64px)
  • イラストより実写優先、書籍は文化財として丁寧に扱う

DON'T

  • 角丸(border-radius が0ではないもの)
  • グラデーション・ネオモーフィズム・派手なシャドウ
  • 絵文字・カラフルなフリーアイコンの混在
  • 過度な装飾(光・キラキラ・誇張トーン)
  • 「絶対」「最安」など根拠のない誇大表現(景表法)
  • ステマ的な表現(広告であることを隠さない)
04 / RESOURCES

関連リソース

ロゴアセット CDN

ヘッダーロゴ・シンボルマークSVG。CORS設定済、どこからでも参照可。

vb-assets.pages.dev →

公式 VB Design System

UI制作向け公式デザインシステム(出典)。カラー・タイポトークンの大元。

aizakakn.github.io/designsystem →

広告用コンポーネント

CTAボタン・バッジ・ロゴ配置ルール。バナー実制作時の小要素仕様。

components →