離乳食教室「Happy Smile」様のホームページを制作しました。
業種 | 離乳食教室・かんたんおやつ教室 |
制作期間 | 3ヶ月 |
ホームページ | https://happysmile.studio.site/ |
制作方法 | STUDIO design |
制作範囲 | HP制作→ディレクション・構成・デザイン・コーディング(制作全て一人で対応) |
始まりは私の息子の離乳食教室だった
初めての子育て。離乳食なんて、どうやって作れば良いのかわからない、とにかく手探りだったときに、私はHappy Smileの離乳食教室に出会いました。
これは私が実際に離乳食教室に行った時のお教室のインスタ投稿です!

離乳食教室は初期・中期・後期の3つに分かれていて、離乳食が進むごとに、食べられる固さだったり量が変わってくるので、それに合わせた座学・そして、調理の実習と試食を学びました。
ただ、作るだけではなくて、座学も踏まえての調理なので、すごく頭に入ってきやすいですし、実際のレシピもいただけるので、家でも実践していました。(出汁の取り方とかめちゃくちゃ実践していたし、かぼちゃを用いたなんちゃってカレーとか毎回のごとくストックしていました。)
こんなことを学べる離乳食教室が家の近くにあったなんて!ととても感激していました。
私は確か、中期と後期を受けたと思います。その時に講師のたいなかゆきこ先生とお話する機会もあり、私がWEBデザイナーだということもお伝えしていました。
そんな時ホームページのご依頼が
なかなか、定期的に離乳食教室が行われている箇所って、近くを探してもあまりないという場合の方が多いと思うのです。だから、こういう場所に出会えて、本当に私自身がとても助かりましたし、初めての育児でとても大変な時にほっとできる場所があったということで、こんな素敵な場所のホームページ作れたらなぁなんてぼんやり考えていたら…!
なんと!たいなか先生から、ホームページを作って欲しいというご依頼が!
ただ、ご予算を提示したところ、オーバー気味だった…、ということでした。でも、私はなんとか、この離乳食教室の魅力を伝えたい!って思って、なんとか予算を抑えた制作をご提案し、受注という形になりました。
魅力を伝えるには写真の要素も必要
ホームページのデザインにあたって、決まった宣材写真がないというお悩みを聞きました。ホームページ制作にあたって、写真は顔に当たる部分だと思います。写真ってビジュアルだから、写真から受け取る印象ってとても大きいと思いますし、写真ひとつで印象ってものすごく左右されるものだと思うんですよね。
だから、お写真を撮影してみては?ということをご提案させていただきました。
カメラマンさんとモデルさんはたいなかさんのお知り合いで手配していただき、私は、自身が作ったワイヤーフレーム・デザインを元に、どういうカットが必要か・どういったシーンのお写真が必要なのか?ということを、精査していきました。WEBサイトを作る時は、内容ベースで、お写真を撮影していくのが良いと思います。
メインビジュアルはホームページの中で真っ先に目に入るお写真です。だからこそ、ひと目で印象に残す必要があると思います。
それでは、どうやって、お客様の魅力を伝えるお写真を撮ろうかと考えた時、
- 親子のふれあいの場であること
- 離乳食教室というのが一目でわかること
- 実際にどのように離乳食教室を行っているのか雰囲気が伝えられること
これを条件にメインビジュアルを考えました。

こちらはスマホ用のメインビジュアルです。たいなか先生の自宅がちょうど吹き抜けみたいになっているので、吹き抜けの上から撮影しました。
先生が調理実習をやっているところを離乳食教室に参加している親子が見ているような様子になりました。
そのほかも離乳食の美味しさが伝わる写真など、作成させていただきました。
オンライン・対面両方対応の情報設計を意識
Happy Smile様は、川崎市宮前区にある離乳食教室でありながら、オンラインでも全国対応で離乳食教室をやっていらっしゃいます。
離乳食のメニューは、オンラインも、対面も同じなので、共通部分を見せた後に対面とオンラインのコースが分かれているように、色を分けて構成しています。上部には対面とオンラインを選択できるボタンを設置し、対面を希望する人は対面だけの情報を、オンラインを希望される人はオンラインだけの情報を取りに行けるような設計にしております。

対面、オンラインを選択できる内部リンクのボタンを設置しています。

対面レッスンは赤系の色でまとめて、オンラインレッスンは青系の色でまとめています。
設計はSTUDIO design で設計
設計については、ブログの更新はなし(アメブロでブログは書いていく)とのことだったので、予算を抑えられるSTUDIO designを採用しました。
(STUDIO designかWordPressどっちでホームページを作るのが良いかは、こちらの記事でも紹介していますので、読んでみてくださいね。)

STUDIOで設計する場合、なかなかSTUDIOでの操作に慣れないと、更新はできないと思います(ビジュアルで編集はできるものの、操作を間違えるとサイトを壊してしまう可能性もあります)
今回、ご自身で離乳食講座の日程については、編集したいというご希望がありましたので、その箇所だけポップアップで表示をするようにし、その箇所のみ簡単に編集ができるように設計しました。(更新にあたりレクチャーも実施しました)
特定のキーワードで上位表示が叶っている
Happy Smile様のホームページにおいては、「宮前区 離乳食教室」「オンライン 離乳食教室」で上位表示がされています。どこかお教室を探す場合は、まず地名検索することは必至です。
地名+ジャンルの検索で上位を獲得できれば、ホームページへの流入も増えるはずです。
追加でのご依頼もあり、継続的に更新を続けています。
ホームページは作って終わりではありません。作ってからがスタートだと思っています。だから、常にまずは最新の情報に更新することは大前提です。
Happy Smile様の場合、離乳食教室以外にかんたんおやつ教室や、幼児食教室も行っています。ホームページを作った当初は幼児食教室はありませんでしたが、幼児食教室開始に伴い、ページの追加のご依頼をいただきました。(私の息子も成長に伴って、幼児食教室にお世話になりました!)
教室も時代の変化に沿って色々やることも少しずつ変わってきたり、新しい試みをはじめたりなどされると思います。そういった時に、WEBでの見せ方、ホームページの見せ方、戦略などいつでも相談に乗れる存在であれたらと思います。
