FLOW ANATOMY #25 — 1サイトを縦に解剖する
『塾えらび2026』は、なぜ写真の前に
表を置くのか。
技法は『点』、サイトは『線』。架空の比較サイト『中学生の塾えらび2026』は、ヒーロー画像もキャッチコピーの大見出しもありません。ページを開いた瞬間、近隣9校の月謝・形態・合格実績・自習室・送迎・体験が1枚の表として目に入ります。見出しをクリックすれば並び替わり、チップを押せば条件で絞り込め、気になる2〜3校にチェックを入れると同じ画面の下に横並びの比較カードが生まれる——比較サイトにありがちな「まず魅力的な写真を見せてから資料請求フォームへ誘導する」流れを、あえて持ちません。表そのものが体験であり、説得の道具である設計を、章ごとに解剖します。解説をスクロールすると、実物のライブプレビューが同じ場所まで自動でついてきます。
BLUEPRINT流れの設計図 — 章の役割と緩急
看板→絞り込み→比較表→横並び比較→注意書き→出典、という一本道。動くのはページ全体ではなく「表の中身」だけ。ヒーローの派手さで惹きつける代わりに、情報の密度と整列の正しさで信頼を積み上げます。色は深緑1色に絞り、○△×の3色だけをアクセントとして許可する、静かな配色です。
- 00MASTHEAD起 — ヒーロー無し、いきなり看板と数字が並ぶ動
- 01FILTERBAR常 — 条件チップが表の上に貼りつき続ける常
- 02TABLE結 — 列を並び替え、○△×で照らし合わせる動
- 03COMPARE比 — 気になる2〜3校だけを横並びで見る動
- 04NOTES誡 — 数字だけで選ばせない、選ぶ前の注意動
- 05FOOTER常 — 架空である旨を明記して静かに締める常
ヒーロー無し、いきなり看板と数字が並ぶ
狙いページの最初の帯は、写真も大きなグラデーションも使わない淡いグリーンの情報バンド。「COMPARE／比較表」の小さなキッカーの下に「中学生の塾えらび2026」の見出し、そしてすぐ下に掲載塾数9校・対象学年・データ更新月を並べる定義リストが続きます。特に掲載数「9」は等幅数字(tabular-nums)で大きく強調し、これから読む表の規模を先に手渡す。感情ではなく数量で第一印象を作る、compare型サイトらしい入口です。
つなぎここで交わされる約束は「この先はずっと具体的な数字で語ります」というトーンの宣言。次の絞り込みバーも、その次の表も、この帯の“情報から始まる”姿勢をそのまま引き継ぎます。
条件チップが、表の上に貼りつき続ける
狙い「自習室あり／送迎あり／体験無料／個別指導／オンライン対応／プロ講師」の6つのチップ型チェックボックスが並ぶ絞り込みバー。position:sticky; top:0で画面上部に貼りつき、下の表をどれだけスクロールしても常に手が届く。複数条件はAND判定で、該当しない行はdisplay:noneで表から消え、「9 / 9校を表示中」のカウンタが即座に更新されます。チェックが入るとチップの背景が淡い緑に変わり、選んだ条件が一目でわかる。
つなぎこの帯だけは他の章と違い、スクロールしても画面から退場しません。次の表という長いコンテンツを、常に自分の条件で見続けられるようにする持続レイヤーです。
列を並び替え、○△×で照らし合わせる
狙いこのサイトの背骨。塾名・エリア・形態・月謝・合格実績など11列を横スクロールする表で、見出しをクリックすると数値/文字列/ランクの型に応じて並び替わり(aria-sortを正しく更新)、三角の矢印が向きを示す。金額は右揃えの等幅数字、自習室・送迎・体験は色付きの○△×バッジで、パッと見の照合速度を上げる。「塾名」列と「比較」チェック列はposition:sticky; leftで横スクロールしても常に見え続け、どれだけ右へ流しても「今どの塾を見ているか」を見失いません。
つなぎここで選んだ「比較」チェックが、そのまま次章の横並び比較に反映されます。表の外に出ることなく、比較の材料をこの1枚の中で集め終える章。
気になる2〜3校だけを、横並びで見る
狙い表の「比較」列でチェックした塾が、即座にこのセクションへカードとして現れる。月謝を大きな等幅数字で見せたあと、合格実績・クラス人数・自習室・送迎・体験・講師を定義リストで並べ、さらに「特徴」「月謝の内訳」「体験の流れ」という表には収まらない一文を添える。4校目にチェックしようとすると自動で外れ、「比較できるのは同時に3校まで」という警告が数秒だけ現れて消える——迷わせず、しかし比較不能な情報過多も許さない上限設計です。
つなぎ数字の一覧(表)から、数字だけでは伝わらない文脈(内訳・流れ)へ。ページを移動せず、チェックひとつで両方の粒度を行き来できることが、この章の価値です。
架空である旨を明記して、静かに締める
狙い最後は罫線1本と2行の小さな文字だけ。「本サイトはWeb Design Labのショーケース用に制作した架空の学習塾比較ページです」という一文と著作表記のみで、CTAボタンも資料請求フォームもありません。表とカードで語り尽くした後に、これ以上何かを売り込まない引き際が、no-hero・compare型サイト全体の静けさと一貫しています。
つなぎヒーローで始まらなかったサイトは、フッターでも煽らずに終わる。始まりと終わりのトーンを揃えることが、表主体の設計に品位を与えます。
TAKEAWAY“表を主役にする”ための5原則
『塾えらび2026』から取り出せる、比較サイト・料金表・スペック比較系のページ全般に持ち帰れる設計則。#18 星川プラネタリウム のような没入型と正反対の、情報密度で信頼を作るアプローチです。
ヒーローの代わりに「数量」で第一印象を作る
大きな写真の代わりに、掲載件数や対象範囲を大きな数字で見せる。感情ではなく規模感で「これは信頼できる比較データだ」と伝える入口。
数字は右揃え・等幅フォントで「読み比べられる」形にする
金額や件数はtabular-numsで桁を揃え、○△×は色+記号+ツールチップの三重化で意味を伝える。1行だけでなく縦に並べたときの比較しやすさまで設計する。
フィルタは行を消す、選ぶ理由は残す
条件に合わない行は非表示にしつつ、選んだ条件そのものはチップの色でずっと見える状態にしておく。「なぜ今9件中5件しか出ていないか」が常に自分でわかる設計にする。
比較は表の続きに留める、別画面へ逃がさない
チェックした行を同じページの下にカードとして展開し、上限も設けて情報過多を防ぐ。表と比較カードが同じデータソースを指しているという一貫性が、信頼の土台になる。
数字を見せきった後に「注意書き」を置く
ランキングや比較表は断定的に見えるほど危うい。何が数字に映らないかを自ら明記することで、かえって「ここまでの数字は信じてよい」という説得力が生まれる。