現在、ポートフォリオ制作として進めている鍼灸院ホームページ制作が、いよいよ完成に近づいてきました。
今回は実際のサイトのファーストビューのスクリーンショットを公開しながら、制作の意図や設計のポイントを紹介します。
今回のホームページ制作では、WordPressとElementorを使用してサイトを構築しています。
WordPressとElementorでデザインカンプを実装
今回の治療院サイトは、画像を多く使ったやや複雑なファーストビュー構成になっています。
通常のWordPress編集では再現が難しいレイアウトですが、Elementorを使用することでデザインカンプにかなり近い形で実装することができました。
ファーストビューでは、
・施術中の写真
・キャッチコピー
・予約導線
など、ホームページ訪問者が最初に知りたい情報を整理しています。
施術写真のカルーセルでサービス内容を直感的に伝える
右側のメイン画像は、施術中の写真を2枚フェードするカルーセルになっています。
訪問者がサイトを開いた瞬間に、「鍼灸院のホームページである」ことが直感的に理解できるように設計しました。
治療院のホームページでは、文字だけでなく視覚的にサービス内容を伝えることが重要です。
地域密着型を意識した風景写真
左側には、地域の風景写真を配置しています。
こちらも2枚フェードのカルーセルになっています。
鍼灸院や治療院は、基本的に地域密着型のビジネスです。
そのため、
・地域の景色
・地元の雰囲気
を感じてもらうことで、
「近くの治療院かもしれない」
「ここなら通えそう」
と感じてもらうことを狙っています。
ローカルSEOを意識したキャッチコピー
キャッチコピーには、
「新潟市」などの地域名を入れ、ローカルSEOを意識しました。
治療院や鍼灸院のホームページでは、
・鍼灸院 ○○市
・治療院 ○○市
といった検索から訪問されるケースが多いためです。
丸ゴシックフォントで安心感を演出
フォントには丸ゴシック系フォントを採用しました。
丸ゴシックは
・やわらかい印象
・親しみやすさ
・安心感
を与えるフォントです。
体調不良や不安を抱えながらホームページに訪れる方も多いため、
少しでも安心して読み進めてもらえるデザインを意識しました。
Web予約システムを導入
今回のホームページでは、Ameliaという予約プラグインを使用してWeb予約機能を導入しています。
予約導線は非常に重要なため、
・ヘッダー
・ファーストビュー
・ページ下部
など、複数箇所に予約ボタンを設置しました。
また、Web予約に慣れていない方のために、電話番号もしっかりCTAとして表示しています。
PC表示では番号表示、スマートフォンではタップできる電話ボタンとして表示されるよう設計しています。
現在の進捗状況
現在は、
・トップページ
・各詳細ページ
の制作がほぼ完了し、
・Amelia予約システムの動作確認
・全体の最終チェック
を行えば、サイトは完成する予定です。
まとめ、鍼灸院ホームページ制作は完成目前
今回のポートフォリオでは、
・地域密着型の設計
・安心感のあるデザイン
・わかりやすい予約導線
を意識して鍼灸院ホームページ制作を進めています。
次回の記事では、今回導入した予約システムプラグイン「Amelia」の使い心地についても紹介する予定です。
また、サイト完成の報告も行いますので、引き続き制作の進捗をブログで発信していきたいと思います。
どうぞよろしくお願いいたします。
