02 / PATTERNS

レイアウトパターン集

バナー構図は、無限ではなく 「6つの構図テンプレ」 の組み合わせで成立します。
本ページでは、買取/販売/求人それぞれの代表的な 6パターン(計18点)を SVG モックで提示し、適するアスペクト比と向き不向きを明記します。

使い方 ① カテゴリを決める → ② 訴求軸(写真主役/数字主役/コピー主役)を決める → ③ 該当パターンのモックをガイドに構図を組む。SVGはあくまで構図の骨格で、実制作では「中の写真/コピー」を差し替えてください。

買取(BUY)— 6パターン

「整理・売却益・社会貢献」の動機に応える構図。生活感のある写真と数字訴求が中心。

BUY · 構図1
上コピー + 中央写真 + 下CTA

最も汎用。コピーを先に読ませ、写真で具体化、CTAで完結。「本棚を整理する手元」など人物カット中心。

Ratio 1:1 / 4:5 新規層 / Feed
BUY · 構図2
数字インパクト(巨大数字)

「最短2日」「最大◯%」など具体数字を主役に。背景はサービス色フル。写真使わずタイポのみで完結。

Ratio 1:1 再訪 / Story
BUY · 構図3
上下分割(写真/コピー)

上半分に写真、下半分にコピー+CTA。情報量を整理しやすく、写真の世界観も保てる。Story でも縦長で機能。

Ratio 4:5 / 9:16 Feed/Story
BUY · 構図4
フォト全面 + 下帯コピー

写真の力で勝負。下に半透明帯を敷きコピー配置。ストーリー性のあるカット(段ボール詰め)と相性◎。CTA はLPに譲る。

Ratio 1:1 / 4:5 ブランド広告
BUY · 構図5
アイコン主役 + コピー

写真がない・撮影できない時の代替。本/段ボール等のシンプルアイコンを大きく配置。LINE広告等の小サイズ枠で視認性◎。

Ratio 1:1 LINE/Display
"
BUY · 構図6
引用句型(お客様の声)

利用者の生声をクオート記号で引用。署名(年代/職業)を小さく入れて信憑性。リテンション層に効く。※体験談はステマにならぬよう明示。

Ratio 1:1 / 4:5 再訪 / 信頼形成

販売(SELL)— 6パターン

「発見・出会い・読書体験」を主題にする。書影と生活シーンの組合せが鍵。

SELL · 構図1
書影グリッド(在庫の広さ)

複数の本表紙をグリッド配置。「◯◯万冊」の数字訴求と組合せ。ThriftBooks 系の「在庫の広さ」訴求と同じ。

Ratio 1:1 新規 / 在庫訴求
SELL · 構図2
1冊主役(特集型)

特定タイトルを大きく配置。新着・話題・季節特集など、本そのものを主役に。クラシック書店広告のWeb版。

Ratio 4:5 特集 / カタログ広告
SELL · 構図3
生活シーン全面 + 左上コピー

本のある暮らし(コーヒーと本、寝室の枕元、椅子と本)を全面で見せ、左上にコピーパネル。KINTO 系の世界観訴求。

Ratio 1:1 / 4:5 ブランド広告
¥
SELL · 構図4
左写真 + 右価格(左右分割)

本の写真と価格を左右に対比配置。「◯円から」「半額」など価格訴求が主役のとき。リターゲ広告で効く。

Ratio 1:1 リタゲ / 価格訴求
SELL · 構図5
本文抜粋型

本の一節をそのまま掲載し、読書体験のフックに。AbeBooks 的な「希少本との出会い」訴求や、文学書ECで強い。

Ratio 1:1 / 4:5 ロイヤル層 / 文芸
SELL · 構図6
検索ボックス模倣型

バナー内に検索バー風UIを配置。「◯◯を探す」とコピーで、行動を擬似化。Google Display で機能。CTAを大きめに。

Ratio 1:1 / 横長 Display / リタゲ

求人(HIRE)— 6パターン

「ミッション参加」「カルチャー共感」を中心に。職種訴求はLPに譲り、バナーは入口に徹する。

HIRE · 構図1
スタッフ写真 + 下帯コピー

現スタッフの働く姿を主役に。「本の循環を支える人、募集中」など仕事ミッションを下帯で。VBの「多様な働き方」を象徴。

Ratio 1:1 / 4:5 認知 / カルチャー
HIRE · 構図2
大きいコピーのみ(言葉主役)

写真を一切使わず、ミッション/問いかけのコピーを大きく。Wantedly誘導など、共感重視の場で機能。VBらしい簡素さ。

Ratio 1:1 Feed / 共感
HIRE · 構図3
人物写真 + コメント引用

特定スタッフの顔と一言を組合せ。「なぜVBで働くか」を一人称で伝える。倉庫・編集・エンジニア等で職種に色付け。

Ratio 1:1 / 4:5 中途 / 職種訴求
HIRE · 構図4
職場風景 + コピー(上下分割)

VBらしい場所(倉庫の本棚・店舗・ブックバス)を上半分に。職種ではなく「働く場所」で共感を集める。

Ratio 1:1 / 4:5 認知 / 場所訴求
HIRE · 構図5
募集職種リスト型

「3職種同時募集」などまとめ訴求。職種を箇条書きで明示し、自分に該当があるか即判定。低関心層への引きが強い。

Ratio 1:1 / 4:5 中途 / 複数職種
?
HIRE · 構図6
問いかけ型(疑問符)

「本のある仕事に、興味ありませんか?」など疑問形コピー。受動的閲覧者に判断を促す。求人プラットフォーム配信で機能。

Ratio 1:1 認知 / 共感喚起
03 / GUIDANCE

パターン選択のフローチャート

どのパターンを選ぶか、3つの問いで決められます。

Q1. 主役は?

  • 写真 → 構図3/4 (上下分割/フォト全面)
  • 数字 → 構図2 (数字インパクト)
  • コピー → 構図6 (引用/問いかけ)
  • 商品/書影 → SELL 1/2

Q2. ターゲットは?

  • 新規層 → 構図1 (汎用) / 構図4 (フォト全面)
  • 再訪・リタゲ → 構図2 (数字) / 構図6 (引用)
  • 低関心層 → 構図5 (アイコン)
  • ロイヤル層 → SELL 5 (本文抜粋)

Q3. 配信面は?

  • Meta Feed → 1:1 全構図使用可
  • Meta Feed 縦長 → 4:5 構図1/3/4 推奨
  • Story/Reels → 9:16 構図3/4 + セーフゾーン厳守
  • Display/LINE → 1:1 構図2/5 推奨