兵庫県たつの市と三木市の古民家ヨガスタジオ「YOGA FRAM」のサービスサイトを制作させていただきました。
情報をサービスごとに整理することでユーザーが目的に辿り着くサイト設計を心がけました。
- Client
- 古民家ヨガスタジオ「YOGA FARM」様 サイトをみる
- Role
-
- ヒアリング
- 要件定義
- 情報設計
- デザイン
- コーディング
- CMS実装
- テスト
- 公開作業
- 運用
- Development
-
- 言語：
- HTML / CSS / SCSS / jQuery
- 環境：
- Local
- ツール：
- WordPress / VScode / Koala / Adobe XD / Photoshop
- Term
- 約5ヶ月
- Release
- 2022年2月
Background
事業内容
古民家ヨガスタジオの運営
- アーサナレッスン（ヨガ教室）
- ヨガ哲学・アーユルヴェーダの座学講座
- 農業体験
目的
- サービスの見せ方を整理する
- Webサイトからの顧客・お問い合わせの獲得（月10件以上）
ターゲットユーザー
生き方について考え、心身ともに健康であることを求める30~50代女性
ターゲットキーワード
- たつの + ヨガ
- 三木 + ヨガ
課題
- クライアントにとってサービス・情報の管理を行い環境づくり
サービスの種類と拠点、予約の手段が増えたことで情報が複雑になり、管理方法に悩まれていることを解消するために、情報を整理しサービスごとに情報を管理できるWordPress管理画面を設計・構築すること。 - ターゲットが求める情報に辿り着き、予約・お問い合わせに至るまでシナリオづくり
ユーザーがヨガを「する」「学ぶ」などのニーズに合わせて情報を閲覧し、サイトの目的である【予約・お問合せ】に至るためのコンテンツとUIを作成すること。
またヨガレッスンの参加者が座学講座に、座学講座の受講者がレッスンや資格講座に参加するなど、サービスをまたいだ利用を促すための動線を作成すること。
Strategy
情報設計
サービスの種類を軸にページを分類し、ユーザーは「ヨガをしたい」「哲学を学びたい」などのニーズに合わせてページを選択できるようにサイトの動線を作成しました。
各サービスページ内は「サービス紹介→各種レッスン/講座の詳細→予約」の順にレイアウトを統一し、複数のサービスをまたいで利用するユーザーにとっても快適に情報収集できるページ構成を意識しました。
また、ページ右下に「予約ボタン」を固定配置することで、全てのページから予約・お問合せフォームにつながる動線を作成しました。
デザイン
アットホームな環境と穏やかでユーモアあふれるスタジオオーナーの人柄が伝わるデザインを目指しました。
配色は既存のロゴマークをもとに決定し、曲線や手書き風のラインなどをデザインパーツに取り入れることで親しみのある雰囲気を表現しました。
高齢の方やデジタルに不慣れな方も多くサイトを利用されることから、行間と文字間隔を広く取ることではっきりと読みやすいテキストを心がけるとともに、華美なアニメーションを避け、シンプルなサイトデザインを意識しました。
機能
サービス・情報の管理
Webサイトでサービスの管理を完結できるように、サービスごとにカスタム投稿タイプを作成し、コンテンツの追加・削除や内容編集を行える管理画面の設計・構築を行いました。
カスタムフィールドを活用した編集画面
カスタムフィールドを使って、入力フィールドにテキストを入力するだけでコンテンツが作成できるように編集画面を構成し、Webサイトのレイアウト崩れを心配することなく簡単にコンテンツを編集できるよう配慮しました。
使用したWordPressプラグイン
- MW WP Form（コンタクトフォーム）
- Advanced Custom Fields（カスタムフィールド）
- All-in-One WP Migration（環境移行・バックアップ）
- SEO SIMPLE PACK（SEO）
- Google XML Sitemaps（XMLサイトマップ）
- SiteGuard WP Plugin（セキュリティ）
- Akismet Anti-Spam（セキュリティ）
Flow
初回ヒアリング
2021年9月15日
事業内容やお客様の理解、ご要望の確認
情報設計・要件定義
3週間
サイト構成・仕様を検討し、サイトマップ・ワイヤーフレームを作成
素材準備
8週間
お米の収穫時期と重なったため、写真・原稿の準備期間を長めに確保
デザイン
3週間
デザインカンプ・プロトタイプを作成
実装
3週間
コーディングとWordPress実装
テスト①
1週間
テスト環境での点検
公開
2022年2月5日
オンライン会議でご案内しながら、お客様ご自身で公開作業を実施
テスト②
1週間
本番環境での再点検
Voice
ホームページ制作をご依頼いただいたきっかけを教えてください。
自分で作ったHPが古くなっていて、リニューアルしたかったから依頼できる人を探していました。
アーサナだけでなく、他の分野についても提供しているので、ヨガに関して理解をしてくださる方にお願いした方がよいと考えていたところ、知人のHPを見て素敵だと思ったから依頼しました。
ご依頼いただく前に、ホームページ制作を通して解決したい課題などはありましたか？
申し込みまでの動線をスムーズに作りたい。
完成したホームページ制作でその課題は解決されそうですか？
はい！
最初のミーティングでお話した後、思いついたことをメッセージでお伝えしたら、すぐにHPの構成案を修正してくださいました。
YOGA FARMの活動がきちんとカテゴライズされてわかりやすいと思います。
申し込みまでの動線についても、ページが長くなりすぎないよう配慮してくださったり、リンクの指定も、要望通りに編集してくださったので、解決できると思います。
制作期間は適切でしたか？
[短かった] ①-②-❸-④-⑤ [長かった]
始め聞いたときは長いと感じました。
実際に作業に入ると、ページの構成、文章、デザインと一つずつ丁寧に確認をとってくださいますし、納得のいくところまでやってくださったので、私の他の業務などのことも考えると丁度よかったです。
制作期間中のやりとりの中で印象に残っているエピソードはありますか？
毎回締切が定められていて、ページ構成→文章構成→デザイン構成といった具合に進んだと記憶しています。
基本的には締切を守ったつもりですが、後で「はっ！」と気づくことがあって連絡しても、毎回対応・修正してくださったのには、本当に感謝です。
クライアントの頭の中のイメージを聞き取る力がすごいなと思いました＾＾
最後の最後には、ブログの書き方のレクチャーをビデオで撮らせてもらったり、管理の仕方を丁寧に教えていただきました＾＾
完成したホームページにはご満足いただけていますか？
[不満足] ①-②-③-④-❺ [満足]
私が思っている以上のことをしていただきました！
画像の編集も素晴らしかったですし、当初、更新不要と伝えていたところを更新可能に変更してくださったのには本当に感謝しています。
最後に感想を教えてください。
大満足です！
HPの作成を通して、何をどのように提供してゆきたいのか、整理整頓できました！
私らしさのある、親しみのあるHPを作ってくださったな！と感じています。
あとは、ブログの充実で検索をアップさせてゆく方向に頑張ります。
素敵なHPを作っていただきありがとうございました＾＾
今後もHPの作成を続けてほしいです＾＾
こういう業界は入れ替わりが激しい気がしていて、ついてゆくのが大変なので、今後も色々と教えていただけたら嬉しいです。
Topics
- Google・Yahoo!Japan検索順位1位を獲得しました。（2023年5月現在）
【検索キーワード：「たつの ヨガ」】 - Google検索順位3位・Yahoo!Japan検索順位5位を獲得しました。（2023年5月現在）
【検索キーワード：「三木 ヨガ」】
