01 — 制作の概要
ロードサービスLPの
リデザイン・WordPress構築
既存サイトをリデザインし、WordPressでサイトを構築。お客様の声・よくある質問・
ポリシーなどを、クライアントが更新しやすい形にカスタマイズしました。
- 担当したこと
- 構成整理 / 画面・Webデザイン / PC・スマートフォン対応 / WordPress構築
- 使用したツール
- Figma / WordPress / HTML / CSS
- 制作したもの
- PC・スマートフォン版のLP / 更新しやすい管理画面
- 制作について
- 担当範囲：再構成の企画・制作、WordPressでの実装
制作期間：約2週間
チーム構成：1名（企画から実装まで担当）
02 — 制作前の課題
緊急時でも、必要な情報が
すぐ分かるように。
対応可否・料金・連絡先を、
短時間で判断できるか。
設計のポイント
車のトラブルで困っているユーザーは、短時間で対応可否・料金・連絡先を判断したい。そこで、情報の優先順位と電話までの流れを整理する方針としました。
対応してもらえる？
対応エリア・時間を確認
費用はいくら？
料金の目安・追加費用を確認
どこに相談すればいい？
電話相談への入口を確認
03 — 情報・導線の設計
不安を解消し、電話相談につなげる。
ユーザーの確認したい順に、情報を並べる。
電話相談までの情報の流れ
01
トラブル発生
助けを探す
02
対応可能か
時間・エリア
03
費用の不安
料金の目安
04
依頼の判断
サービス・よくある質問
05
電話相談
分かりやすい電話ボタン
04 — デザインの工夫
一つひとつの設計に、理由を。
緊急時の判断を助けるための、
3つの工夫。
01 / 情報の優先順位
重要情報を、最初に。
対応時間・エリア・電話相談を認識しやすい位置に整理。緊急時の判断に必要な情報を優先する。
02 / 電話相談への導線
電話への入口を、分かりやすく。
電話ボタンのデザインと文言を統一し、ページのどこからでも相談につながる構成に。
03 / スマートフォンへの対応
小さな画面でも、迷わせない。
スマートフォンでは情報を縦に整理し、見出し・料金・連絡先の読みやすさを確認。
05 — 完成したデザイン
完成画面と、使いやすさの工夫。
必要な情報と電話相談への導線を、
ひとつの画面に。
画面抜粋：ページ冒頭 / 料金 /
電話相談への導線
06 — 実装・更新のしやすさ
公開後も、更新しやすい
サイトへ。
WordPressで、更新しやすい仕組みに。
WordPressで、お客様の声・よくある質問・プライバシーポリシー・特定商取引法に関する表記をメンテナンスしやすくカスタマイズ。
完成画面だけでなく、運用側の使いやすさにも配慮しました。
