技法を組み合わせた、実例サイト。

SakuraIDOL

Sakura 架空アイドルグループ

満開の、その先へ。

• 散る花びら
• 3Dティルト
• キネティック
• Ken Burns

#01 王道の流れ — なぜ、王道で引き込むのか。

サイトを見る ↗流れを解読 →

FlowDeskSAAS

FlowDesk 架空SaaSプロダクト

チームの仕事を、ひとつの流れに。

• WebGLシェーダー
• ベントグリッド
• オドメーター
• ⌘Kパレット

#02 説得の流れ — なぜ、迷わず申し込めるのか。

サイトを見る ↗流れを解読 →

MOON BREWCAFE

MOON BREW 架空スペシャルティカフェ

月夜に、一杯の余白を。

• マウス視差
• 豆トレイル
• 縦書き
• フィーチャービューア

#03 もてなしの流れ — なぜ、余白で誘うのか。

サイトを見る ↗流れを解読 →

NOCTILUCAIDOL

NOCTILUCA 架空アイドル（深夜系）

夜にしか咲けない光がある。

• 疑似ビジュアライザ
• RGBグリッチ
• ネオングロー
• CRT走査線

#04 足し算の流れ — なぜ、この順番か。

サイトを見る ↗流れを解読 →

あわいRYOKAN

山峡の湯宿 あわい 架空の一棟貸し湯宿

なにもしない、をしに行く。

• 縦書きタイポ
• 湯けむりCanvas
• 横スクロール客室
• 季節クロスフェード

#05 引き算の流れ — なぜ、静かなのか。

サイトを見る ↗流れを解読 →

VESTIGEFASHION

VESTIGE 架空ファッションブランド

服は、記憶の痕跡である。

• キネティックセリフ
• フリッカー切替
• differenceカーソル
• フィルムグレイン

#06 編集の流れ — なぜ、めくりたくなるのか。

サイトを見る ↗流れを解読 →

HANABI WAVEFES

HANABI WAVE 2026 架空の野外音楽フェス

音が上がる、夜が咲く。

• 花火Canvas
• 版ズレタイポ
• ステッカー浮遊
• チケットUI

#07 高鳴りの流れ — なぜ、行きたくなるのか。

サイトを見る ↗流れを解読 →

TANGENTARCH

TANGENT ARCHITECTS 架空建築設計事務所

線を引く。余白を設計する。

• SVG線画ドロー
• 露出グリッド
• 寸法線アノテーション
• 図面ワイプ

#08 構築の流れ — なぜ、線だけで成立するのか。

サイトを見る ↗流れを解読 →

METEOR BREAKERSGAME

METEOR BREAKERS 架空ゲームのプロモサイト

星を、ぶっ壊せ。

• ドット絵スプライト
• 実績トースト
• レーダーチャート
• ダメージ数字

#09 翻訳の流れ — なぜ、ゲームに見えるのか。

サイトを見る ↗流れを解読 →

AURELIAHOTEL

AURELIA 架空ラグジュアリーリゾート

静けさに、黄金の時間を。

• 液体ゴールドWebGL
• キネティック明朝
• カスタムカーソル
• スクロール視差

見どころ — WebGLの液体ゴールドで“静寂の質感”を描く、余白の効いた設計。

サイトを見る ↗流れを解読 →

AXIONHARDWARE

AXION One 架空フラッグシップ製品ページ

光をまとう、フラッグシップ。

• Three.js 3Dプロダクト
• チタン反射マテリアル
• スペックカウンター
• マグネティックUI

見どころ — Three.jsのプロシージャル3D端末が回転し、色替えで質感が変わる製品ページ。

サイトを見る ↗流れを解読 →

NOCTURNEMOVIE

夜想 -NOCTURNE- 架空映画のプロモサイト

夜が明けない街で、最後の朝を探す。

• Canvasエンバー粒子
• RGBグリッチタイトル
• 疑似予告編モーダル
• フィルムグレイン

見どころ — Canvasの粒子と版ズレタイトル、疑似予告編で“公開前の緊張感”を演出。

サイトを見る ↗流れを解読 →

SUIRENSKINCARE

SUIREN 睡蓮 架空ラグジュアリー スキンケア

水のうるおいを、編集する。

• 非対称スプリット
• SVGグーイ/メタボール
• 実写プロダクト写真
• スプリング微動

見どころ — 暗い全面シェーダの逆を行く高明度エディトリアル。実写プロダクト写真とSVGグーイの“にじむ水”で差別化。

サイトを見る ↗流れを解読 →

MERIDIANWEALTH

MERIDIAN 子午線資産経営 架空の資産運用会社

時を、味方に。

• 自己描画SVG折れ線・面グラフ
• カウントアップ数値
• SVGドーナツ配分チャート
• 明色エディトリアル年次報告書

見どころ — 明るいアイボリー×紺×真鍮の年次報告書レイアウトと自己描画SVGインフォグラフィックで金融の誠実さ・信頼感を可視化する流れを7章に解剖。

サイトを見る ↗流れを解読 →

MINORI FARMCRAFT FARM

みのり農園 MINORI FARM 架空のクラフト農園

土と手から、食卓へ。

• 手描きSVGライン描画
• 破れ紙コラージュ(feDisplacementMap)
• スクロール連動パス描画
• 紙めくりホバー

見どころ — 写真を一枚も使わず、手描きのSVG野菜と破れ紙のコラージュで“畑の近さ”と信頼をつくる産直LP。畑から食卓へスクロールで一本の道が描かれる温かいスクロールストーリーを章ごとに解剖。

サイトを見る ↗流れを解読 →

VELOXTRAINING

VELOX ヴェロックス 架空パフォーマンスジム

限界は、更新するもの。

• キネティックタイポ
• ワープ速度キャンバス
• スクロール速度マーキー
• 数値カウントアップ

見どころ — グラファイト＋ライム一色のジムLPを、ワープ速度キャンバス・スクロール速度マーキー・ハードに走る数値カウントで“加速する身体”を体に叩き込むキネティック設計として章ごとに解剖。

サイトを見る ↗流れを解読 →

KAMADODINING

KAMADO 竈 架空の炭火割烹

熾火に、季節を委ねる。

• 実写料理フォト主体
• スクロール視差
• Ken Burns ズーム
• アンビエント火の粉Canvas

見どころ — 文字より先に湯気の立つ一皿を全画面でぶつける、暗く暖かいシネマティックな炭火割烹サイト。実写料理×視差×Ken-Burns×火の粉でつくる“食欲の設計”を章ごとに解剖。

サイトを見る ↗流れを解読 →

KAIROMOBILITY

KAIRO Mobility 架空のEV・次世代モビリティ

電気を、流れとして走る。

• 横スクロール章立て(スティッキーピン)
• Canvas 電気エネルギー流線
• spec odometer カウントアップ
• SVG 航続レンジ弧+充電円環

見どころ — 縦スクロールを横の章送りへ変換し、車体を横切るCanvasのエネルギー流線で“電気的な滑らかさ”を体で伝える。オレンジ一点差しのキネティック設計を実物プレビュー付きで解読。

サイトを見る ↗流れを解読 →

CLARACLINIC

CLARA クリニック 架空の歯科・皮膚科クリニック

こわくない通院を、デザインする。

• 左サイドバー固定＋現在地インジケータ
• 呼吸するSVGパルス波形
• soft blob（feGaussianBlur）
• 選べる予約ミニカレンダー

見どころ — 左サイドバー固定＋右カラム縦スクロールの高明度クリニックLPを、呼吸するパルス・soft blob・実際に選べる予約ミニカレンダーの各セクションがどう“清潔と信頼”を積み上げるか章立てで解剖。

サイトを見る ↗流れを解読 →

MOFUPET CARE

MOFU もふ 架空のペットグルーミング&ケアサロン

犬も猫も、その子のペースで。

• バウンシーSVGマスコット
• 生JSスプリング物理
• 肉球カーソル
• カード主導レイアウト

見どころ — 自作の弾むSVGマスコット（犬/猫/小鳥）とカード主導の明るいパステルで“こわくないペットサロン”をつくる——生JSのバネ物理・肉球カーソル・色違いカードの設計を、実物のスクロール連動プレビュー付きで章ごとに解剖。

サイトを見る ↗流れを解読 →

HOSHIKAWAPLANETARIUM

HOSHIKAWA 星川プラネタリウム 架空の科学館・プラネタリウム

夜を、見上げにいく。

• 生WebGL 3D星球ドーム(等距離魚眼投影)
• sidereal driftで回る傾いた星軸
• 3Dで軌道を辿る星座ライン+天の川
• 3D流れ星ストリーク

見どころ — 数千星を単位球面に配置し天文ドーム映写機と同じ等距離魚眼投影で描画。傾いた回転軸のsidereal drift、視線パン、プロシージャル天の川、タブ選択でドームが振り向き実座標で星座ラインを辿る仕組みを全て生WebGLで構築。単一コンテキストの堅牢設計を解剖。

サイトを見る ↗流れを解読 →

ABYSS LABDEEP SEA

ABYSS LAB 暗海研究所 架空の海洋研究所

太陽の届かない海で、光をつくる。

• スクロール深度エンジン(章＝水深にアンカー)
• 加算合成Canvas発光フィールド
• 深度連動の暗さ・粒子・HUD
• 発光生物の名鑑フィルタ

見どころ — scrollY を章にアンカーした水深(0→4000m)に写像し、単一の深度値で背景の暗さ・発光粒子の密度・水深HUDを同時駆動。沈降そのものが理解の深まりになる没入エディトリアルの設計を解剖。

サイトを見る ↗流れを解読 →

TOU-TOUURUSHI

TOU-TOU 滔々 架空の漆工房

木を、漆で124日かけて包む。

• sticky工程シーケンス
• 連続クロスフェード写真送り
• 進捗連動レール+本文の同期
• 24工程の履歴書テーブル

見どころ — 写真をstickyで留め、スクロール進捗(0..1)で写真のクロスフェード・工程テキストの順次送り・右レールを同一曲線で連続駆動。実写マクロを主役に、木地から完成までを一層ずつ積む process エディトリアルを解剖。

サイトを見る ↗流れを解読 →

HAKOBUNEESTIMATE

HAKOBUNE はこぶね見積 架空の引越し見積

条件を動かすと、右の見積がその場で変わる。

• form-first(入力から始まる)
• dt正規化トゥイーンのライブ計算
• 内訳バーの連続伸縮
• 相場カーブ+PDF風帳票

見どころ — 最初の画面が入力。単一の金額モデルを dt正規化トゥイーンで毎フレーム再描画し、合計カウントと内訳バーが入力に連動して連続更新。読ませず“使わせる”道具型の設計を解剖。

サイトを見る ↗流れを解読 →

kobanDASHBOARD

koban 配車ダッシュボード 架空の配車SaaS

LPではなく、プロダクト画面そのもの。

• 実物UIの3カラムapp shell
• フィルタ/ソート/検索の実装
• ステータス色+ライブ通知ログ
• ページネーション+集計フッター

見どころ — 左サイドバー＋KPI帯＋配車テーブル＋通知ログという、LPでなく管理画面そのもの。フィルタ・ソート・ステータス色・ダミーのライブ更新まで、本物のUIの密度と整然さで魅せる設計を解剖。

サイトを見る ↗流れを解読 →

OTEMACHI POSTCHRONICLE

OTEMACHI POST 大手町郵便局のあゆみ 架空の郵便局100年史

スクロールした分だけ、時間が進む。

• no-hero(1924からいきなり)
• スクロール進捗→西暦カウント
• 時代転調(色・写真・書体)
• 実写の時代帯パララックス

見どころ — ヒーローを置かず1924年から始まる縦スクロール年代記。単一のスクロール進捗から西暦カウント・レール・地色を同時駆動し、セピア→現代へ色/写真/書体が転調する時間軸の設計を解剖。

サイトを見る ↗流れを解読 →

REIWA RICEWHITE PAPER

REIWA RICE 令和の米白書 架空の調査レポート

目次から始まる、図表とデータの白書。

• toc-first(目次から始まる)
• スクロールで組み上がる自己描画チャート
• 章番号・図表番号・脚注・出典
• 数値count-up

見どころ — 目次から始まる白書。折れ線/棒/ドーナツを自己描画SVGで、スクロール進捗に連動して組み上げる。章番号・図表番号・脚注・出典という学術の組版で、データを語る設計を解剖。

サイトを見る ↗流れを解読 →

JUKU 2026COMPARE

JUKU 2026 中学生の塾えらび 架空の比較表

ヒーロー無し、表が主役。

• no-hero(表が主役)
• 列ソート+条件フィルタ
• 2〜3校の横並び詳細比較
• ○△×と数値の揃え

見どころ — ヒーローを持たず、比較表そのものが体験。列ソート・条件フィルタ・気になる塾の横並び比較を、○△×と数値の揃えで整然と見せる compare 型の設計を解剖。

サイトを見る ↗流れを解読 →

KAWABE MATSURINOTICE

KAWABE MATSURI 川辺町夏まつり 架空の町内会告知

町内会いちばんの夜を、一枚に。

• list-first(掲示物の情報密度)
• 手作りのSVGあしらい(提灯/櫓/金魚)
• reveal staggerで要素が湧く
• タイムテーブル+雨天対応

見どころ — 公民館の掲示物。日時・場所・出店・盆踊り・注意が一枚に整然と詰まる。版ズレ・スタンプ・提灯のSVGあしらいで手作り感を出しつつ、グリッドと余白で“雑”にしない告知型の設計を解剖。

サイトを見る ↗流れを解読 →

MOTOMACHI GINZADIRECTORY

MOTOMACHI GINZA 元町銀座 全58店 架空の商店街一覧

今、営業中の店だけを絞り込む。

• no-hero(一覧が主役)
• 営業時間から“今営業中”を算出
• 業種フィルタ+検索+並べ替え
• カード/リスト表示切替

見どころ — ヒーローを完全排除し、全58店の一覧が主役。営業時間から現在の営業状態をリアルタイム算出し、業種フィルタ・検索・並べ替え・表示切替で整然と見せる index 型の設計を解剖。

サイトを見る ↗流れを解読 →

OGURAYAMA KARUTAKARUTA

OGURAYAMA KARUTA 小倉山かるた入門 架空のかるた入門

読みながら、試せる入門。

• list-first+遊べる体験
• 読み札→取り札を選ぶミニデモ
• SVGの札・お手つき判定
• 段階的ルール+用語集

見どころ — ルールを段階で説明しつつ、途中で実際に手を動かせる。読み札が読まれ取り札を選ぶミニ体験・お手つき判定を挟み、読みながら試せる manual-play 型の設計を解剖。

サイトを見る ↗流れを解読 →

SOKKINDOBUYBACK

SOKKINDO 即金堂 架空の買取サービス

スマホ・PC買取、最短30分で振込。

• price-first(価格から始まる)
• 高密度の実売LP設計
• 機種タブでライブ価格更新
• 比較表・実績count-up・固定CTA

見どころ — 日本の実売LPの型を高密度で作り込む。価格から始まり、機種タブで金額と内訳がライブ更新、比較表・実績・締切カウントダウン・固定CTAまで。“にぎやか≠雑”を罫線と数字の揃えで成立させる sell-hard 型を解剖。

サイトを見る ↗流れを解読 →

UNSHU SHIMBUNNEWSPAPER

UNSHU SHIMBUN 雲州日日新聞 号外 架空の地方紙

紙面は、右から左へ読み進む。

• type-only(文字だけで始まる)
• 縦組み・右から左の紙面
• 段組み・囲み記事・社説
• 刷り上がるロード幕

見どころ — ヒーロー画像を持たず題字と大見出しだけで始まる縦組みの号外。右から左へ読み進み、段組み・囲み・社説という新聞の版面をそのままWebに移した read 型の設計を解剖。

サイトを見る ↗流れを解読 →

HIGUCHIRECRUIT

HIGUCHI 樋口製作所 採用 架空の町工場求人

うちは、6人の会社です。

• face-first(人の顔から始まる)
• 実写人物写真が主役
• 口語のインタビュー+一日の流れ
• 写真パララックス+count-up

見どころ — 生成した人物写真を主役に、社長本人の口語で語る採用ページ。顔から始まり、インタビュー・一日の流れ・仕事の中身を、写真の額装と finish で見せる people 型の設計を解剖。

サイトを見る ↗流れを解読 →

MINATO BOUSAIHANDBOOK

MINATO BOUSAI みなと区 防災の手引き 架空の自治体資料

目次から、必要な章を開く。

• toc-first(目次から始まる)
• 章番号・図版番号・注意/危険
• チェックリスト+避難所フィルタ+備蓄計算
• 印刷対応(@media print)

見どころ — 表紙もヒーローも置かず目次から始まる行政文書。章番号・図版番号・注意/危険の別・チェックリスト・避難所表・備蓄計算・印刷対応まで、実直な書式で信頼を作る document 型の設計を解剖。

サイトを見る ↗流れを解読 →

KANSHU METROTRANSIT

KANSHU METRO 環洲メトロ 架空の市営地下鉄の乗換案内

駅を2つ選ぶと、最短の道を路線図の上にひと筆で描きます。

• ヒーロー無し・実物の乗換案内UI
• Dijkstra経路探索（乗換ペナルティ＋同時間は乗換最小）
• 手描きSVGネットワーク図（5路線24駅）
• 経路のline-draw＋実経路を走る電車ドット

見どころ — 出発駅と到着駅を選ぶ（図の駅を直接クリックしてもよい）と、24駅5路線のネットワークにDijkstraをかけて最短経路を計算し、路線図の上にline-drawで道を描き、所要時間・運賃・乗換回数をcount-upで返す道具型。読ませず“使わせる”UIで、最後は路線一覧表で締める。

サイトを見る ↗流れを解読 →