ウェブサイト ／ 整骨院・鍼灸
クローバー整骨院
痛む場所ではなく、
困る動作から探すサイト。
神奈川県藤沢市の架空の整骨院を題材にしたウェブサイトです。初回の検査から施術、料金までの説明を並べ、腰や肩の症状から自分に近いページを探して受付案内へ進める構成にしました。
作品を開く架空の事業者を題材にした自主制作です。
急なけがも、
長びく痛みも。
想定したのは、急なけがで慌てている方と、慢性の痛みを抱えたまま通う先を決めかねている方です。症状別のページを設け、どちらの入口からも受付案内へ届くようにしました。
冒頭は施術の映像と短いコピーだけにとどめ、その先に受付時間、よくある悩み、選ばれる理由、施術メニュー、アクセスの順で並べています。
人体の図から、
悩みへ入る。
地色は緑がかった白、主要なボタンだけを赤茶にしました。見出しは明朝体、本文はゴシック体にして、二つの書体で読み分けています。ヘッダーは左に丸いロゴの札、右上に「予約」と「メニュー」の大きな円形のボタンを置きました。
よくある悩みは、人体のシルエットの部位と引き出し線で結び、スクロールに合わせて首から足首へ部位が順に光ります。本文は左の1本の線に四つ葉の印を並べた流れとして組み、選ばれる理由は丸い写真を線で結んだ3段階にしました。映像の上では、コピーの行ごとに白い不透明の帯を敷いて文字を読ませます。
本文から絞り込んで、
近い症状を見つける。
症状の一覧とお客様の声には絞り込み欄を置きました。言葉を入れると本文を含むものだけが残り、表示件数が更新され、すべて表示で元の一覧へ戻せます。
料金表は健康保険、自費、初めての方限定、交通事故・労災の区分で提示。予約は電話とWebの案内までとし、送信するフォームは置いていません。
縦一列にして、
読む順序を残す。
スマートフォンでも冒頭の写真と映像を画面いっぱいに使い、白い帯に載せたコピーと予約案内のボタンを下へ重ねます。「メニュー」の丸いボタンを押すと、全ページと受付時間を並べたシートが画面いっぱいに広がります。人体の図は左に置き、その横に悩みのカードを縦に並べます。料金は施術名の下に金額と回数券を置きました。
制作情報
- 種別
- 自主制作・架空サイト
- 制作範囲
- 構成・文章・デザイン・実装
- 使用技術
- HTML / CSS / JavaScript
Vite / GSAP - 対応画面
- PC・タブレット・スマートフォン
