WORKS ― CASE 05せぼねクエスト接骨院 様｜接骨院・整骨院
せぼねクエスト接骨院 様｜接骨院・整骨院
レトロゲーム風LP 制作（自主制作）
その痛み、討伐しよう。
01PROJECT DATA
制作情報
- クライアント様
- せぼねクエスト接骨院 様（自主制作サンプル）
- 業種
- 接骨院・整骨院（腰痛・肩こり・スマホ首などの施術）
- サイトURL
- 実物のLPを別タブで見る »
- 制作タイプ
- 店舗LP（1ページ）制作／ピクセルアートUIデザイン
- プロジェクト期間
- 自主制作（サンプル）
- 制作目的
- 「接骨院＝入りにくい・こわそう」というイメージをやわらげ、痛みへの前向きな一歩を、ゲームの世界観で楽しく後押しするLPにしたい。
02PREVIEW
実際の画面を見る
sebone-quest.jp
▲ 枠の中はスクロールできます
CSSとインラインSVGだけで組んだ、動く実物のLPです。
ドット文字やHPゲージのアニメーションは、別タブで実物を開いてご覧いただけます。
03DESIGN POINTS
制作のポイント
POINT 01
痛みを「モンスター」に翻訳する。
腰痛・肩こり・スマホ首といった不調を、肩こりマンやぎっくり腰ドラゴンなどのピクセルモンスターに置きかえました。「敵＝倒すべき対象」として可視化することで、つらさを一人で抱えるのではなく、施術家と一緒に立ち向かうものへと印象を変えています。
POINT 02
通院の流れを「クエストマップ」に。
問診→検査→施術→アフターケアの4ステップを「STAGE 1-1〜1-4」のマップとして構成。はじめての方が抱きやすい「何をされるか分からない不安」を、RPGの一本道のように見せることで、次に何が起きるかがひと目で伝わる導線にしました。
POINT 03
レトロUIで、世界観を最後まで壊さない。
DotGothic16のドット文字、黒枠白文字のコマンドウィンドウ、赤→緑に回復するHPゲージ、点滅する「▶」など、ファミコン世代のUIを細部まで再現。画像ファイルを一切使わずCSSとインラインSVGだけでピクセル表現を組み、軽快に動く自己完結のLPに仕上げています。