Web Design / Renewal / Coding
Sansan Osteopathic Clinic
Website Renewal
情報を整理し、
迷わず予約につながるWebサイトへ。
02
PROJECT OVERVIEW
Overview
さんさん整骨院様のWebサイトリニューアル。
既存サイトの情報整理と導線改善を中心に、
ユーザーが必要な情報へスムーズにアクセスできる構成へ再設計しました。
- Type
- Website Renewal
- Category
- Clinic / Healthcare
- Device
- Desktop / Mobile
- Role
- Web Design / Coding
- Tools
- WordPress（オリジナルテーマ）/ PHP / HTML / CSS / JavaScript
03
THE CHALLENGE
情報はある。
でも、必要な情報に
たどり着きにくい。
01
02
03
-
01
INFORMATION
情報量に対して視覚的な整理が少なく、重要な情報を見つけにくい。
-
02
NAVIGATION
予約・施術内容・アクセスなど、ユーザーが求める情報への導線が分かりにくい。
-
03
VISUAL
テキスト中心の構成で、院の特徴や安心感が直感的に伝わりにくい。
04
OUR SOLUTION
情報を整理し、
「迷わないサイト」へ。
-
01
INFORMATION
ARCHITECTUREコンテンツを整理し、重要度に合わせて情報の優先順位を再設計。
-
02
USER
FLOW症状・施術内容・料金・アクセス・予約まで、ユーザーの目的に合わせた導線を設計。
-
03
VISUAL
COMMUNICATION写真・カードUI・アイコンを活用し、情報を直感的に理解できるデザインへ。
User Flow
- 症状Symptoms
- 施術内容Service
- 料金Price
- アクセスAccess
- 予約Reserve
どのセクションからでも、電話・LINE・ネット予約へ進めるようCTAを配置。
05
BEFORE / AFTER
From information-heavy
to user-friendly.
BEFORE
- TEXT HEAVY↓VISUAL & STRUCTURED
- LINKS IN TEXT↓CLEAR CTA
- ONE LONG COLUMN↓CARDS & SECTIONS
AFTER
枠内をスクロールすると、Before / After が同じ位置の割合で連動します。
06
DESIGN STRATEGY
CLEAR INFORMATION
症状や施術内容をカードUIで整理。ユーザーが自分の悩みに該当する情報を短時間で見つけられるように設計。
ACCESSIBLE CTA
電話・LINE・ネット予約など、複数の問い合わせ方法を明確に表示。特にスマートフォンでは画面下部に固定CTAを配置し、どの位置からでも予約・相談へ進めるように設計。
FRIENDLY & TRUSTWORTHY
整骨院としての信頼感を保ちながら、オレンジを中心に親しみやすい印象へ。実際の施術写真やスタッフ写真を使用することで、初めて訪れるユーザーにも院内の雰囲気が伝わるようにしています。
07
VISUAL SYSTEM
Color
- Orange#FF7A1A — メインアクセント
- Blue#00A8CC — 電話・情報
- Green#06C755 — LINE / CTA
- White#FFFFFF — ベース
- Dark#1E1E1E — テキスト
Typography
Noto Sans JP
こんなお悩み、お任せください
Radius
- 6px
- 12px
- 24px
- Pill
Buttons
Card
Check Item
Accordion
Step / Icons
Fixed CTA Bar
08
RESPONSIVE DESIGN
必要な情報を、
どのデバイスからでも。
-
FIRST VIEW
写真を上、コピーと予約ボタンを下に分け、文字が写真に埋もれないよう再配置。
-
SYMPTOMS
PCの4列カードを2列に組み替え、親指で追いやすいサイズに。
-
ACCESS / RESERVE
地図・院情報・予約ボタンを縦に並べ、確認からそのまま予約へ。
09
DESIGN DETAILS
10
FULL PAGE DESIGN
TOPページ全体 — Desktop