Phoneより、本でいこう（KIBI）

1. 01

   ファーストビュー

   左上に2行のコピー「Phoneより、本でいこう。」、右上に枠線で囲んだリンク「KIBIの読書のススメ」。画面中央に同じポーズの線画を2体並べる。

2. 02

   下部インフォバー

   左下にロゴタイプ「KIBI」、中央に「1 2 3」のピル型ページ表示と所在地・営業日時の1行、右端に縦書きの「スクロール⇩」を置く。

3. 03

   メッセージ本文

   左に問いかけの見出し、右に大きめの本文を置く2カラム。本文中のフレーズを青系の数色で強調する。

4. 04

   読み物ブロック

   抽出データ上、「本を少々」「やっぱり本でしょ！」などの見出しを持つブロックがある（フルページキャプチャ上では表示を確認できない）。

5. 05

   写真・フッター

   画面幅いっぱいの読書風景の写真に白文字「本でいこう。」と破線の円を重ね、下部にロゴと ABOUT / ONLINE SHOP のリンクを置いて締める。

• 線画のペアはPCスクショでは寝転ぶポーズ（2）、フルページでは座るポーズ（1）になっており、一定間隔で切り替わるスライドショーと思われる。setInterval と opacity の CSS transition で再現できる
• ロゴ「KIBI」と縦書きの「スクロール⇩」は複数の画面に重なって写っており、position: fixed で固定表示していると思われる
• 縦書きのスクロール表示は writing-mode: vertical-rl で組める。矢印に小さな上下のループアニメーションを付けると誘導になる
• 写真上の破線の円は SVG の circle に stroke-dasharray を指定すると再現できる

検出された技術:WordPressGoogle FontsAdobe Fonts

• 01色は白と黒を基本にし、青系の強調色は本文中のフレーズだけに限定する
• 02線画は線幅をそろえたSVGで用意し、同じポーズで持ち物だけを変えたペアをつくる
• 03和文は字間を広め（letter-spacing: 0.1em 前後）にとったゴシックで、見出しも本文もウェイトを抑える
• 04要素を画面の四隅と中央に分散させ、中央の余白を広く残す

1---
2title: "Phoneより、本でいこう（KIBI） 再現用デザイン仕様書"
3source: https://kibi-obuse.com/
4katapick: https://katapick.com/sites/kibi-obuse
5category: LP
6region: 国内 (JP)
7tags: [ミニマル, イラスト, ライト, 余白, 縦書き, テキスト主体]
8launched: 2026-09
9verified: 2026-09-26
10difficulty: 2/5
11estimated_hours: 10
12generator: Katapick
13---
14 
15# Phoneより、本でいこう（KIBI） — 再現用デザイン仕様書
16 
17> スマホ派と本派を、同じポーズで並べてるだけ。小布施の本屋KIBIのメッセージLP「Phoneより、本でいこう」は、同じポーズの線画にスマホと本を持たせるだけで、答えを読み手に委ねている。
18 
19このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
20そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せる構成になっています（→「7. AI実装プロンプト」）。
21 
22## 1. 見どころ