納品時のスクリーンショット

パソコン版

スマートフォン版

プロジェクト概要

成果・効果

Google検索結果での表示順位（公開から19日後）

「運動教室 武蔵丘小学校」でGoogle検索すると、検索結果の1位（約9,840件中）に表示されました。
さらに、AIによる概要にも以下の内容が表示され、注目度が上がっています。

武蔵丘小学校の近くには、子ども運動教室 &kids 世田谷という運動教室があります。
【子ども運動教室 &kids 世田谷】

• 鳥山北小学校から徒歩6分、武蔵丘小学校から徒歩9分

引用：Google検索結果「運動教室 武蔵丘小学校」

• 「運動教室 鳥山北小学校」1位・2位/約6万件中
• 「子ども 運動 世田谷」5位/約1,350万件中
• 「バランスボード 子ども 世田谷」1位/約6万件中
• 「トランポリン 子ども 世田谷」7位/約16万件中
• 「ボルダリング 子ども 世田谷」10位/約13万件中
• 「&kids」5位/約28万件中

（2025年3月15日現在）

お客さまのお悩み・課題

1か月半でリニューアルしなければいけない

• 2年前に開設したホームページについて、先月、制作会社から事業撤退の連絡があった。
  1か月半後に運用停止となるため、リニューアルを急いでいる。

レッスン内容の大幅変更

• いろいろと運営していく中で変化したことが多いので、ホームページのレッスン内容も大幅な変更が必要。

チラシ・パンフレットを基にしたコンテンツ

• 教室のコンセプトや伝えたいことは、チラシやパンフレットに記載されているため、それらをベースにしたコンテンツにしたい。

ご要望

ホームページ：全面リニューアル希望

• 既存のホームページで残したい部分はあるが、基本的にはゼロから作り直したい。

デザイン：子ども向け、統一感重視

• ホームページは子どもたちを対象としているため、柔らかく優しく、楽しい雰囲気のデザインにしたい。
• パンフレットやチラシのデザインと、統一感を持たせて制作していただきたい。

はなウェブからのご提案

ターゲットを絞り、独自性を強調

サイト名とキャッチフレーズを、ターゲット顧客の年齢層、地域、提供内容が分かるように変更し、同名のサイトや事業者との違いを明確にしました。
「&kids」⇒「子ども運動教室 &kids 世田谷」

笑顔の写真で親近感と信頼感を

トップページに、お子さまの笑顔や楽しそうなレッスンの様子を写した写真を使うと、サービスの雰囲気を具体的に伝えることができ、&kidsさまの魅力がより伝わりやすくなります。
お子さまの笑顔は見る人に安心感や親近感を与え、ウェブサイトへの信頼感を高めます。

メニュー構成の改善

リニューアル前は、自社サービスと連携先の紹介が、メニュー内で同じ階層に表示されており、ユーザーが混乱しやすい状態でした。
両者の関係性を明確にするため、連携先紹介ページにあたる「&kidsで開催中の教室」は「&kidsについて」に含め、メニューの配置を変更しました。

Googleフォームで利便性と管理効率を向上

リニューアル前のお問い合わせフォームの項目は、お申し込みフォームと兼用されており、お問い合わせだけを希望される方も、お子さまの生年月日といった個人情報を入力しなければなりませんでした。

お申し込みフォームは「Googleフォーム」で作成していただくことで、お問い合わせ用とお申し込み用のフォームを分けて設置でき、申し込み者リストも簡単に管理できるようになりました。

地図情報の改善によるアクセスの円滑化

アクセスページの改善

アクセスページに、目印となる目標物と、建物外観の写真を掲載して、ストリートビューを確認しなくても目的地までたどり着けるようにしました。

Googleマップ情報の修正

Googleマップのストリートビューでは、実際の場所と異なる風景（隣の建物の裏側）が映し出されており、Googleマップのピンも隣接する建物に立っていて、目的地が分かりにくい状態でした。
正しい位置を表示できるよう、情報の修正をご提案し、変更させていただきました。

埋め込み地図の修正

ウェブサイトに埋め込まれていたGoogleマップは、周辺の駐車場が表示され、教室の場所が分かりませんでした。
そこで、目標物を地図に含め、表示範囲を調整することで、教室の場所が分かりやすくなるように修正しました。

制作のポイント

ウェブサイトとパンフレットの連携によるデザインの統一

デザインの一貫性

トップページのメインビジュアル（PC・スマホ用）と下層ページのタイトル背景画像は、パンフレットを制作されたアオゾラデザインさまにご担当いただきました。
これにより、パンフレットとウェブサイトのデザインに一貫性が生まれました。

パンフレットのデザイン要素をWebへ展開：色彩と図形パターンの活用

パンフレットには、赤、黄、緑、紺、紫の5色が使用されており、背景画像の丸、三角、四角の模様も印象的でした。
これらの要素をウェブサイトでも際立たせるため、タイトル背景や見出し装飾にパンフレットで使用された色彩と図形パターンを取り入れました。

ウェブデザインにおける配色戦略と色彩心理

配色の決定基準：ロゴとパンフレットの色彩調和

通常、配色を決める際はロゴマークを基準にしています。
今回はロゴマークの「&」に使用されている鮮やかな赤色が、パンフレットで使用されているカラー群と色味が異なっていたため、パンフレットのカラー群を基準に配色を決定しました。

緑色がもたらす心理効果と行動喚起への期待

補色である赤と緑は、互いを引き立て合い、視覚的な訴求力を高める効果があります。
さらに、緑色は安心感や信頼感を与えるだけでなく、行動を促す心理効果も期待できるため、お問い合わせボタンに利用することでユーザーの行動喚起に繋がると考えられます。

配色（カラーコード・色見本）

#cd4847		メインカラー （基調となる主要な色）
#ffffff		ベースカラー （背景色）
#1b872b		アクセントカラー （ポイントとなる強調色）

制作内容の詳細

サイト仕様

お客さま情報

関連記事

セイブ・イラクチルドレン・名古屋（愛知県）イラク人医師の研修・医療支援

鍼灸院ひなた 清澄白河院（東京都）心身ともに支える鍼灸院

愛知学生会館（東京都）愛知県出身大学生のための男子学生寮

coco à coco（千葉県）SRTスピリチュアルカウンセラー

つながる輪（全国）小児血液・固形腫瘍患者家族の会

手をつなごう。／小児がん患児家族のコミュニティサイト

自分で修正・更新・保守できる
WordPressのホームページ制作

詳細を見る

ビジネスサイトが作りやすいテーマLightning採用

• Facebook
• X
• Hatena
• Pocket
• Copy

カテゴリー

ホームページ制作実績

主な担当範囲

MEO対策、SEO対策、Webサイト構造設計、WordPressサイト構築、コーディング、デザイン、引っ越し作業

担当範囲の詳細

WordPressセキュリティ対策、WordPressテーマのカスタマイズ、WordPressテーマ導入・設定、WordPressプラグイン導入・設定、マニュアル作成、レンタルサーバー移転、常時SSL化設定、簡易的なSEO対策、進行管理

テーマ

Lightning G3

制作種別

リニューアル