小豆島の古民家ヨガスタジオ「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代女性（主婦）
- ヨガ初心者
ターゲットキーワード
- 小豆島 + ヨガ / ヨガスタジオ
- 小豆島 + リトリート
課題
- ユーザーがヨガスタジオの魅力を感じ、予約・利用につながるサイト設計
初めてヨガをするユーザーにもサービス内容が正しく伝わり、スタジオの理解と信頼感を与えるコンテンツを作成すること。
サービス紹介から予約ページ（外部サイト）までの動線が分かりやすく伝わるUIデザインを心がけること。 - 前サイトでの英語表記中心のデザインによる、コンテンツの認識と利便性の低下を改善する
日本語表記を中心に誰もが理解できる表現を心がけること。
ボタンなど、分かりやすく直感的に操作できるUIパーツの作成を心がけること。 - スタジオコンセプトとクライアントの想いを表現するデザイン・コンテンツを作成する
クライアントとよく話し、共感することで、機能面だけでなく想いやメッセージを表現したデザイン・コンテンツを作成すること。
Strategy
情報設計
スタジオへの安心感と信頼を与える
サービスごとの紹介ページに加え、「初めて利用するユーザーに向けた案内ページ」と「コロナウィルス対策に関するページ」を独立したコンテンツページとして設けることで、新規事業への信頼を与えられるサイト構成を心がけました。
認知から予約までの動線
サービスページでは、具体的にサービスを利用する場面をイメージできるような順でコンテンツを配置してページを構成しました。
- ファーストビューとメッセージでサービスへの興味を誘う
- スケジュールやサービス内容、受講フローなどの紹介コンテンツでサービスへの理解を深める
- 予約ボタンから外部予約ページへ誘導する
また、全てのページ下部に初めての方への案内ページと予約サイトトップページへアクセスできるバナーリンクを設置し、ユーザーがアクションに迷わないように工夫をしました。
デザイン
デザインコンセプトとオープニング
「ヨガを通して自分を見つめ、ありのままの自分に戻る場所であり、集まる人が創っていく空間にしたい」というクライアントの想いを表現するデザインを目指しました。
古民家ヨガスタジオAkasha様は、スタジオのシンボルに「石の島」として日本遺産に認定される小豆島の自然の石を集めて石庭を手作りされたそうです。
その中にはクラウドファンディングで応援してくれた方々が選んだ個性豊かな石も並べられ、お客様はその庭を通ってスタジオ内へ歩いていくとお話を伺いました。
小豆島の個性豊かな石が集まる手作りのお庭をヒントに「石の形や色がひとつひとつ異なるように、様々な個性が集まり形になる場所」をコンセプトとして、小豆島の海と石をイメージした様々な色と形のモチーフを散りばめたデザインを作成しました。
オープニングは、石をモチーフにした既存のスタジオロゴにアニメーションを加えて、お客様が一歩ずつ庭石の上を歩いてスタジオへ向かっていく様子を表現しました。
UIパーツの改善
前サイトでは英語表記が中心で、ボタンパーツがテキストのみのデザインとなっており、実際にユーザーから「分かりづらい」などの声が届いていたため、サイトリニューアルでは次の点を意識しながら、誰もが理解できる表現とデザインを心がけました。
- 日本語表記をメインに誰もが理解できる言葉を使う
- ボタンなどのアクションにつながるUIパーツは、ユーザーを主語にして遷移後に起こることを明示する
- 内部リンクと外部リンクで異なるデザインを取り入れる
- テキストリンクの補助にアイコンを使用する
- 重要度の高いリンクはバナー形式で認識を高める
コーディング・CMS構築
サイト完成後は、クライアントご自身で運用を行える管理画面の作成を心がけました。
編集頻度の高いコンテンツの管理
コンテンツ編集や追加/削除の頻度が高いスタジオレッスン一覧とオンラインサービスには、カスタム投稿タイプを導入しました。
またカスタムフィールドを使って項目ごとに入力フィールドを用意し、コンテンツ内容を統一して作成・管理を行える編集画面を作成しました。
テーブルコンテンツの管理
スタジオレッスンページのスケジュール表と料金表では、値の変更だけでなく、時間帯や料金形態（セル）の追加・削除に対応できるようにTablePressプラグインを導入しました。
WordPressダッシュボードのカスタマイズ
「WordPressの使い方ガイド」と「お客様専用ガイド」のPDF資料を管理画面上で閲覧できるようにダッシュボードをカスタマイズしました。
使用した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月現在）
【検索キーワード：「小豆島 ヨガ」「小豆島 ヨガスタジオ」】 - Google検索順位5位・Yahoo!Japan検索順位3位を獲得しました。（2023年4月現在）
【検索キーワード：「小豆島 リトリート」】
