構成パターン図鑑|15の骨格

サイトの「骨格(構成)」を実物で。すべて同じ中立スタイルで作り、変えているのは“構成だけ”。だから違いが構成の差だと一目でわかります。

① 骨格(構成)× ② デザインの雰囲気 × ③ 業種 = 御社専用の1サイト(代表的な型が142スタイル)
01

クラシック縦積み(Z型)

王道。上から順に積む万能型。迷ったらこれ。

見本を開く →
02

スプリットスクリーン

画面を左右2分割。文字とビジュアルの対比。

見本を開く →
03

ベントーグリッド

大小タイルで一望。2026主流の回遊型。

見本を開く →
04

横スクロール・ギャラリー

横方向に展開。事例・作品向き。

見本を開く →
05

フルスクリーン・イマーシブ

全画面ビジュアルで没入させる。

見本を開く →
06

スクロールテリング

縦に章立て・タイムラインで物語る。

見本を開く →
07

ジグザグ・エディトリアル

左右交互の全幅。雑誌的な見せ方。

見本を開く →
08

サイドバー固定ナビ

左に縦ナビ固定、右が主役。

見本を開く →
09

1カラムLP(縦長CV特化)

一本道でCVへ。単品・予約向き。

見本を開く →
10

マガジン/多段グリッド

新聞・雑誌の段組。情報量が多い時。

見本を開く →
11

カードギャラリー/メーソンリー

高さ可変カードを敷き詰め。EC・作品。

見本を開く →
12

ブロークングリッド/非対称

あえて崩して個性を出す。2026トレンド。

見本を開く →
13

タブ/アコーディオン集約

情報を畳んで1画面に凝縮。FAQ・比較。

見本を開く →
Aa
14

キネティック・ヒーロー

動く特大文字が主役。2026トレンド。

見本を開く →
15

ヒーローレス/即コンテンツ

ヒーローを置かず本題から。硬派・玄人向け。

見本を開く →
TORAMARU 構成パターン図鑑 | 同じ中身でも“骨格”が違えば別サイトになる
図鑑トップ | 業種別見本へ