“説明する”より、“体験させる”。
Overview
CODE SEVENは、世界観・キャラクター・装備という情報量が前提のコンテンツです。
そこで「長文を読ませる」ではなく、カード一覧とモーダルを軸に“触れて理解する”導線で構成しました。
Challenge
課題は、情報が増えるほど“読むのが面倒”になり離脱しやすい点でした。
文字量を減らすのではなく、情報の出し方を変え、クリックごとに興味が深まる体験設計が必要でした。
Solution
- カード一覧で「まずは雰囲気を掴める」入り口を作成
- モーダルで情報を“必要な分だけ”表示し、読了負担を軽減
- キャラ/スタッフ/ガジェットを同じ体験ルールで統一し、迷いを減らす
Highlights
- カード一覧→モーダル→詳細の3段導線で没入体験を設計。
- data属性を使ったモーダル表示で、コンテンツ更新を容易に。
- 世界観を壊さないUIトーンで、閲覧のテンポを維持。
Design
黒基調＋高コントラストのトーンで“任務資料”の空気を演出。
見た目の派手さではなく、カード密度・余白・見出し階層で「読みやすいのに緊張感がある」バランスを狙いました。
Screenshots
Result
情報量が多いコンテンツでも、一覧→モーダルの流れで回遊しやすく、“世界観を読む前に感じる”体験へ変換できました。
ブランドトーンとUIの一体感を示せる制作事例です。
Role & Deliverables
- 企画：世界観と閲覧体験の設計
- UI設計：カードUI・モーダル導線
- 実装：HTML / CSS / JavaScript
Technology
- HTML / CSS / JavaScript ・ Modal UI ・ Data Attribute Driven
参考制作費
約 ¥280,000〜¥360,000
世界観設計 / キャラクター・ガジェット・スタッフモーダル / ネタバレ解除演出 / Contact演出を含む想定です。
※演出内容・実装密度・ページ構成により変動します。
“世界観が伝わるサイト”、設計します。
情報整理から実装まで一貫対応。 見た目だけで終わらせず、体験として伝わる形にします。
この規模感で相談する このテイストで作りたい方へ。
情報に没入する流れを体験できます。