Web site
YOGA FARM

兵庫県たつの市と三木市の古民家ヨガスタジオ「YOGA FRAM」のサービスサイトを制作させていただきました。
情報をサービスごとに整理することでユーザーが目的に辿り着くサイト設計を心がけました。

Client
古民家ヨガスタジオ「YOGA FARM」様 サイトをみる
Role
  • ヒアリング
  • 要件定義
  • 情報設計
  • デザイン
  • コーディング
  • CMS実装
  • テスト
  • 公開作業
  • 運用
Development
言語:
HTML / CSS / SCSS / jQuery
環境:
Local
ツール:
WordPress / VScode / Koala / Adobe XD / Photoshop
Term
約5ヶ月
Release
2022年2月
YOGA FARM|モックアップ(PC)
YOGA FARM|モックアップ(SP)

背景
Background

事業内容

古民家ヨガスタジオの運営

  • アーサナレッスン(ヨガ教室)
  • ヨガ哲学・アーユルヴェーダの座学講座
  • 農業体験

目的

  • サービスの見せ方を整理する
  • Webサイトからの顧客・お問い合わせの獲得(月10件以上)

ターゲットユーザー

生き方について考え、心身ともに健康であることを求める30~50代女性

ターゲットキーワード

  • たつの + ヨガ
  • 三木 + ヨガ

課題

  1. クライアントにとってサービス・情報の管理を行い環境づくり
    サービスの種類と拠点、予約の手段が増えたことで情報が複雑になり、管理方法に悩まれていることを解消するために、情報を整理しサービスごとに情報を管理できるWordPress管理画面を設計・構築すること。
  2. ターゲットが求める情報に辿り着き、予約・お問い合わせに至るまでシナリオづくり
    ユーザーがヨガを「する」「学ぶ」などのニーズに合わせて情報を閲覧し、サイトの目的である【予約・お問合せ】に至るためのコンテンツとUIを作成すること。
    またヨガレッスンの参加者が座学講座に、座学講座の受講者がレッスンや資格講座に参加するなど、サービスをまたいだ利用を促すための動線を作成すること。

戦略
Strategy

情報設計

サービスの種類を軸にページを分類し、ユーザーは「ヨガをしたい」「哲学を学びたい」などのニーズに合わせてページを選択できるようにサイトの動線を作成しました。

各サービスページ内は「サービス紹介→各種レッスン/講座の詳細→予約」の順にレイアウトを統一し、複数のサービスをまたいで利用するユーザーにとっても快適に情報収集できるページ構成を意識しました。

また、ページ右下に「予約ボタン」を固定配置することで、全てのページから予約・お問合せフォームにつながる動線を作成しました。

YOGA FARM|サービス分類
YOGA FARM|サイトマップ
【サイトマップ】

デザイン

アットホームな環境と穏やかでユーモアあふれるスタジオオーナーの人柄が伝わるデザインを目指しました。

配色は既存のロゴマークをもとに決定し、曲線や手書き風のラインなどをデザインパーツに取り入れることで親しみのある雰囲気を表現しました。

高齢の方やデジタルに不慣れな方も多くサイトを利用されることから、行間と文字間隔を広く取ることではっきりと読みやすいテキストを心がけるとともに、華美なアニメーションを避け、シンプルなサイトデザインを意識しました。

YOGA FARM|フォントと配色
【フォントと配色】
YOGA FARM|ベンチマーク
【ベンチマーク】

機能

サービス・情報の管理

Webサイトでサービスの管理を完結できるように、サービスごとにカスタム投稿タイプを作成し、コンテンツの追加・削除や内容編集を行える管理画面の設計・構築を行いました。

カスタムフィールドを活用した編集画面

カスタムフィールドを使って、入力フィールドにテキストを入力するだけでコンテンツが作成できるように編集画面を構成し、Webサイトのレイアウト崩れを心配することなく簡単にコンテンツを編集できるよう配慮しました。

使用したWordPressプラグイン

制作の流れ
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月現在)
    【検索キーワード:「三木 ヨガ」】