小豆島の古民家ヨガスタジオ「MYON YOGA STUDIO Akasha」のWordPressサイトを作成させていただきました。
「スタジオコンセプトと想いの表現」と「誰にとっても利便性の良いサイト」を軸にサイトを制作しました。
- Client
- 古民家ヨガスタジオ「MYON YOGA STUDIO Akasha」様 サイトをみる
- Role
-
- ヒアリング
- 要件定義
- 情報設計
- デザイン
- コーディング
- CMS実装
- テスト
- 公開作業
- 運用
- Development
-
- 言語：
- HTML / CSS / SCSS / jQuery
- 環境：
- Local
- ツール：
- WordPress / VS Code / Koala / Adobe XD / Photoshop
- Term
- 約7ヶ月
- Release
- 2022年1月
Background
2020年に東京から小豆島に移住し、フリーヨガインストラクターとして活動を始めたころにWixサイトを作成させていただいた「MYON YOGA」様からヨガスタジオをオープンすると伺い、改めてWebサイトを作成させていただくことになりました。
事業内容
- 古民家ヨガスタジオの運営
- ヨガレッスン
- アーユルヴェーダカウンセリング
- オンラインサービス（ヨガレッスン・オンラインコミュニティ）
目的
- 小豆島の住民に新規オープンする古民家ヨガスタジオを知ってもらう
- 新規顧客がサービスを理解し、予約につながるサイトを用意する
ターゲットユーザー
- 小豆島・香川在住の30〜40代女性（主婦）
- ヨガ初心者
ターゲットキーワード
- 小豆島 + ヨガ
- 小豆島 + ヨガスタジオ
- 小豆島 + リトリート
課題
- 古民家ヨガスタジオでのヨガ教室の予約を安定させる（月20件以上）
- サービス内容が正しく伝わり、スタジオの認知と信頼感を与えるコンテンツを作成する
- サービス紹介から予約ページ（外部サイト）までの分かりやすい動線を確保する
- 前サイトでの英語表記中心のデザインによる、コンテンツの認識と利便性の低下を改善する
- 誰もが理解できる表現でコンテンツを作成する
- ボタンなど、分かりやすく直感的に操作できるUIパーツを心がける
- スタジオコンセプトとクライアントの想いを表現するデザイン・コンテンツを作成する
Strategy
情報設計
スタジオへの安心感と信頼を与える
サービスごとの紹介ページに加え、「初めて利用するユーザーに向けた案内ページ」と「コロナウィルス対策に関するページ」を独立したコンテンツページとして設けることで、新規事業への信頼を与えられるサイト構成を心がけました。
認知から予約までの動線
サービスページでは、認知から予約までの流れを意識して次の順にコンテンツを構成しました。
- ファーストビューとメッセージでサービスへの興味を誘う
- スケジュールやサービス内容、受講フローなどの紹介コンテンツでサービスへの理解を深める
- 予約ボタンから外部予約ページへ誘導する
また、全てのページ下部に初めての方への案内ページと予約サイトトップページへアクセスできるバナーリンクを設置し、ユーザーがアクションに迷わないように工夫をしました。
デザイン
デザインコンセプトとオープニング
「ヨガを通して自分を見つめ、ありのままの自分に戻る場所であり、集まる人が創っていく空間にしたい」というクライアントの想いを表現するデザインを目指しました。
古民家ヨガスタジオAkasha様は、スタジオのシンボルに「石の島」として日本遺産に認定される小豆島の自然の石を集めて庭を手作りされたそうです。その中にはクラウドファンディングで応援してくれた方々が選んだ個性豊かな石も並べられ、お客様はその庭を通ってスタジオ内へ歩んでいくとお話を伺いました。
小豆島の個性豊かな石が集まる庭からインスピレーションを受け「石の形や色がひとつひとつ異なるように、様々な個性が集まり形になる場所」をコンセプトに、小豆島の海と石をイメージした様々な色と形のモチーフを散りばめたデザインを作成しました。
オープニングは、石をモチーフにした既存のスタジオロゴにアニメーションを加えて、お客様が一歩ずつ庭石の上を歩いてスタジオへ向かっていく様子を表現しました。
UIパーツの改善
前サイトでは英語表記が中心で、ボタンパーツがテキストのみのデザインとなっており、実際にユーザーから「分かりづらい」などの声が届いていたため、サイトリニューアルでは次の点を意識しながら、誰もが理解できる表現とデザインを心がけました。
- 日本語表記をメインに誰にでも理解できる言葉を選択する
- ボタンなどのアクションにつながるUIパーツは、ユーザーを主語にしてクリック後の遷移内容を明確に示す
- 内部リンクと外部リンクで異なるデザインを取り入れる
- テキストリンクの補助にアイコンを使用する
- 重要度の高いリンクはバナー形式で認識を高める
機能
サイト完成後は、クライアントご自身で運用を行える管理画面の作成を心がけました。
編集頻度の高いコンテンツ管理
高い頻度で編集や追加/削除を行うスタジオレッスン一覧とオンラインサービスには、コンテンツごとの情報管理を行いるようにカスタム投稿タイプを導入しました。
またカスタムフィールドを使って入力項目を作成し、各コンテンツの内容を統一して作成・管理を行える編集画面を心がけました。
テーブルコンテンツの管理
スタジオレッスンページのスケジュール表と料金表では、値の変更だけでなく、クライアント自身で時間帯や料金形態（セル）の追加・削除に対応できるようにTablePressプラグインを導入しました。
使用したWordPressプラグイン
- MW WP Form（コンタクトフォーム）
- TablePress（レッスンスケジュール）
- Advanced Custom Fields（カスタムフィールド）
- All-in-One WP Migration（環境移行・バックアップ）
- SEO SIMPLE PACK（SEO）
- Google XML Sitemaps（XMLサイトマップ）
- SiteGuard WP Plugin（セキュリティ）
- Akismet Anti-Spam（セキュリティ）
Flow
初回ヒアリング
2021年6月29日
事業内容やお客様の理解、ご要望の確認
情報設計・要件定義
4週間
サイトマップ・ワイヤーフレーム・仕様書を作成
素材準備
6週間
お客様に写真・原稿の準備を依頼
デザイン
3週間
デザインカンプ・プロトタイプを作成
実装
3週間
コーディングとWordPress実装
テスト
1週間
公開
2022年1月22日
Voice
ホームページ制作をご依頼いただいたきっかけを教えてください。
はるなさんの優しさでお声をかけていただいたので。
そして前回のサイトも自分好みのものだったのでお願いしました◎
ご依頼いただく前に、ホームページ制作を通して解決したい課題などはありましたか？
予約までの流れをもっとスムーズにしたい。
使う人にとってわかりやすいサイトにしたい。
完成したホームページ制作でその課題は解決されそうですか？
解決されました！
制作期間は適切でしたか？
[短かった] ①-②-❸-④-⑤ [長かった]
めちゃくちゃ丁寧に作り込んでいただいたので…！
制作期間中のやりとりの中で印象に残っているエピソードはありますか？
カウンセリング（ヒアリング）が結構面白かったです。
色々なサイトのURLが用意されていて、そこから自分が気に入ったものを選んだり、イメージを言葉で表現したものの中から好きなものを選んだり。自分が好きなデザインの方向性がわかって新鮮な体験でした！
完成したホームページにはご満足いただけていますか？
[不満足] ①-②-③-④-❺ [満足]
色も、アニメーションも、サイトの構造も思い描いていたもののとおりになりました。
私が表現したい想いを的確にデザインしていただきました。
最後に感想を教えてください。
まずは忙しい中で素敵なサイトをつくってくださりありがとうございました！
WordPressのホームページは初めてだったので、完成後にうまく使えるか不安でしたが、使い方のガイドなどもPDFにまとめてくれていたのでよく分かり、サイトをお渡しいただいた後の操作も不安がなかったです。
私の想いを丁寧にデザインに乗せてくれて、前回も素敵なサイトでしたが、より一層見てくれる方の心に残るホームページとなったのではないかと思います！
Topics
- Google・Yahoo!Japan検索順位1位を獲得しました。（2023年4月現在）
【検索キーワード：「小豆島 ヨガ」「小豆島 ヨガスタジオ」】
