モータークリニック東京 HP制作
制作要件
クライアント
【クライアント名】
モータークリニック東京（架空企業名）
【事業内容】
地域展開の整備工場
制作目的
車のことを「よく分からない」「不安」という
方への来店、リピートを増やしたい。
ターゲット
・20〜40代の女性
・ファミリー層
・車の整備に詳しくなく、
整備工場に不安や入りづらさを感じている
構成設計
01
予約する
【FV】
ファーストビューに
「予約する」ボタンを設置。
初めての方もリピーターの方も、
迷わず予約へ進める導線を設計しました。
02
伝える
【お知らせ】
最新情報をいち早く届けられるよう、
FVの直下にお知らせを配置しました。
03
共感する
【こんなお悩みありませんか？】
「整備工場は入りづらい」
「車のことが分からない」など、
ユーザーが抱える不安や悩みに共感し、
次の解決へつなげます。
04
解決する
【モータークリニックなら大丈夫！】
ユーザーの悩みに対する解決策を提示し、
安心感を与えながら
「初めての方へ」へ誘導します。
05
安心を与える
【初めての方へ】
初めて利用する方に向けた
説明ページへの導線を設置。
「何をするの？」
「どうやって利用するの？」といった
不安の解消につなげます。
06
詳しく見る
【サービス・スタッフ・クリニック紹介】
サービス一覧・スタッフ紹介・
クリニック紹介へそれぞれ移る導線を設置。
必要な情報を詳しく確認できることで、
利用前の安心感や信頼感につなげます。
07
予約する
【予約する】
ページ下部にも予約ボタンを設置。
コンテンツを読み進めたユーザーが、
そのまま迷わず予約へ進めるようにしています。
コンセプト
車のお医者さん
整備工場の「無機質」「専門的で入りづらい」というイメージをなくし、
小児科のようにやさしく、安心して相談できる雰囲気を目指しました。
パステルカラーや丸みのあるデザインを取り入れ、やわらかく親しみやすい印象に。
また、難しい内容はイラストや図解を使い、
車に詳しくない方でも分かりやすいサイトになるよう設計しました。
配色
工夫した点
01
12ページ制作。
お客様の不安を少しでも取り除けるよう
各ページわかりやすく丁寧な説明文を添えています。
ヘッダーリンクから各ページにも移れます。
02
工場内や店舗の写真。
工場や、店舗内の写真を取り入れ、
HPで店内の様子を見えるようにしました。
お客様とのやりとりの風景もいれることで、
安心感と信頼感のある雰囲気も演出しています。
03
安心丁寧な一文。
こちらからお客様に問いかけ解決できる
丁寧な一文を添え、予約につなげるようにしています。
04
フッターにSNSリンク。
SNSへの導線を設け、認知拡大や
情報発信の強化につなげました。
制作日
2026年６月
制作時間
ワイヤーフレーム
デザインカンプ
実装
計
9h
22.5h
41h
72.5h
使用ツール・スキル
Figma/WordPress/HTML/CSS/Javasprict
©TUNAGU×TUNAGI Design