パソコン版
スマートフォン版
プロジェクト概要
- サイトの種類
- コーポレートサイト（企業・個人事業主・団体などの公式サイト）
- 制作種別
- リニューアル
- プロジェクト期間
- 約1.5か月（お申し込み～納品・公開まで）
各担当の稼働期間（※同時進行）
・当方作業：約1か月（設計・構築・デザイン等）
・お客様作業：約0.5か月（原稿準備・内容のご確認等） - ページ数
- ■ 基本ページ：7ページ
・トップページ（1ページ）
・下層ページ（6ページ）
■ 更新機能（自動一覧ページ）
・ブログ - 公開日
- 2025年3月
- 担当範囲
-
旧制作会社との引き継ぎサポート・デザイン・WordPress構築・公開後の環境整備まで、全体を通して対応しています。
詳細を見る
【 企画・設計 】
- サイト構造設計（迷わないメニュー構成づくり）
- デザイン設計（ブランドに合わせた配色・レイアウト設計）
- 個別レイアウト設計（原稿や目的に合わせた専用デザイン設計）
- レスポンシブWebデザイン（画面サイズに応じた見やすいレイアウト調整）
【 コンテンツ設計・制作 】
- 画像・素材の選定（内容に合うビジュアルの提案）
【サイト構築・機能実装 】
- WordPress構築（ご自身で更新できる仕組みづくり）
- セキュリティ対策（不正アクセス・改ざん防止）
- バックアップ体制の整備（サイトデータの保存体制づくり）
- メールフォーム設計・設置（お問い合わせ・お申し込みの窓口づくり）
- XMLサイトマップ設定（検索エンジンにページを伝える設定）
【サーバー・通信環境 】
- 常時SSL化・URL正規化（通信の暗号化とURLの統一）
【システム関連】
- テストサイト構築・動作検証（非公開環境での安全確認）
【 サイトのお引っ越し】
- 旧制作会社との引き継ぎサポート（技術的なやり取りの支援）
- レンタルサーバー移転（サイトデータのサーバー引っ越し）
【 サポート・運用準備 】
- 専用マニュアル提供（納品後も自走できる更新手順書）
- 進行管理（無理のないスケジュールでの伴走）
- Web資産管理シート（ログイン情報・契約情報の一元管理）
成果・効果
「運動教室 武蔵丘小学校」でGoogle検索すると、検索結果の1位（約9,840件中）に表示されました。
さらに、AIによる概要にも以下の内容が表示され、注目度が上がっています。
武蔵丘小学校の近くには、子ども運動教室 &kids 世田谷という運動教室があります。
【子ども運動教室 &kids 世田谷】
- 鳥山北小学校から徒歩6分、武蔵丘小学校から徒歩9分
引用：Google検索結果
Google検索結果での表示順位
- 「運動教室 鳥山北小学校」1位・2位/約6万件中
- 「運動教室 武蔵丘小学校」1位/約9千件中
- 「バランスボード 子ども 世田谷」1位/約6万件中
- 「子ども 運動 世田谷」5位/約1,350万件中
- 「トランポリン 子ども 世田谷」7位/約16万件中
- 「ボルダリング 子ども 世田谷」10位/約13万件中
解決したかったこと
抱えていたお悩み・課題
- 2年前に開設したホームページについて、先月、制作会社から事業撤退の連絡があった。
1か月半後に運用停止となるためリニューアルを急いでいる。 - いろいろと運営していく中で変化したことが多いので、ホームページのレッスン内容も大幅な変更が必要。
- 教室のコンセプトや伝えたいことは、チラシやパンフレットに記載されているため、それらをベースにしたコンテンツにしたい。
いただいたご要望
- 既存のホームページで残したい部分はあるが、基本的にはゼロから作り直したい。
- ホームページは子どもたちを対象としているため、柔らかく優しく、楽しい雰囲気のデザインにしたい。
- パンフレットやチラシのデザインと、統一感を持たせて制作していただきたい。
はなウェブからのご提案
WordPressにて再構築
制作会社の独自サーバーにて独自のシステムで構築されていたため、ホームページのデータを新しいレンタルサーバーへ移行することができず、ホームページを最初から作り直す必要がある旨ご説明いたしました。
ターゲットを明確にして、独自性を強調
サイト名とキャッチフレーズを、ターゲット顧客の年齢層、地域、提供内容が分かるように変更し、同名のサイトや事業者との違いを明確にしました。
「&kids」⇒「子ども運動教室 &kids 世田谷」
笑顔の写真で親近感と信頼感を
トップページに、お子さまの笑顔や楽しそうなレッスンの様子を写した写真を使うと、サービスの雰囲気を具体的に伝えることができ、&kidsさまの魅力がより伝わりやすくなります。
お子さまの笑顔は見る人に安心感や親近感を与え、ウェブサイトへの信頼感を高めます。
メニュー構成の改善
リニューアル前は、自社サービスと連携先の紹介が、メニュー内で同じ階層に表示されており、ユーザーが混乱しやすい状態でした。
両者の関係性を明確にするため、連携先紹介ページにあたる「&kidsで開催中の教室」は「&kidsについて」に含め、メニューの配置を変更しました。
Googleフォームで利便性と管理効率を向上
リニューアル前のお問い合わせフォームの項目は、お申し込みフォームと兼用されており、お問い合わせだけを希望される方も、お子さまの生年月日といった個人情報を入力しなければなりませんでした。
お申し込みフォームは「Googleフォーム」で作成していただくことで、お問い合わせ用とお申し込み用のフォームを分けて設置でき、申し込み者リストも簡単に管理できるようになりました。
地図情報の改善によるアクセスの円滑化
アクセスページの改善
アクセスページに、目印となる目標物と、建物外観の写真を掲載して、ストリートビューを確認しなくても目的地までたどり着けるようにしました。
Googleマップ情報の修正
Googleマップのストリートビューでは、実際の場所と異なる風景（隣の建物の裏側）が映し出されており、Googleマップのピンも隣接する建物に立っていて、目的地が分かりにくい状態でした。
正しい位置を表示できるよう、情報の修正をご提案し、変更させていただきました。
埋め込み地図の修正
ウェブサイトに埋め込まれていたGoogleマップは、周辺の駐車場が表示され、教室の場所が分かりませんでした。
そこで、目標物を地図に含め、表示範囲を調整することで、教室の場所が分かりやすくなるように修正しました。
制作のポイント
ウェブサイトとパンフレットのデザインの統一
デザインの一貫性
トップページのメインビジュアル（PC・スマホ用）と下層ページのタイトル背景画像は、パンフレットを制作されたアオゾラデザインさまにご担当いただきました。
これにより、パンフレットとウェブサイトのデザインに一貫性が生まれました。
パンフレットのデザイン要素をWebへ展開：色彩と図形パターンの活用
パンフレットには、赤、黄、緑、紺、紫の5色が使用されており、背景画像の丸、三角、四角の模様も印象的でした。
これらの要素をウェブサイトでも際立たせるため、タイトル背景や見出し装飾にパンフレットで使用された色彩と図形パターンを取り入れました。
ウェブデザインにおける配色戦略と色彩心理
配色の決定基準：ロゴとパンフレットの色彩調和
通常、配色を決める際はロゴマークを基準にしています。
今回はロゴマークの「&」に使用されている鮮やかな赤色が、パンフレットで使用されているカラー群と色味が異なっていたため、パンフレットのカラー群を基準に配色を決定しました。
緑色がもたらす心理効果と行動喚起への期待
補色である赤と緑は、互いを引き立て合い、視覚的な訴求力を高める効果があります。
さらに、緑色は安心感や信頼感を与えるだけでなく、行動を促す心理効果も期待できるため、お問い合わせボタンに利用することでユーザーの行動喚起に繋がると考えられます。
配色（カラーコード・色見本）
| #cd4847 | メインカラー （基調となる主要な色） |
|
| #ffffff | ベースカラー （背景色） |
|
| #1b872b | アクセントカラー （ポイントとなる強調色） |
サイト仕様
- CMS
- WordPress
- 使用テーマ
- Lightning G3 Pro Unit
- 対応端末
- パソコン / スマートフォン / タブレット（レスポンシブ対応）
- 搭載機能
【 お問い合わせ導線・情報発信 】
- メールフォーム設計・設置（お問い合わせ・お申し込みの窓口づくり）
【 利便性・コンテンツ強化 】
- Googleマップ埋め込み（アクセス情報を地図で分かりやすく掲載）
- HTMLサイトマップ（必要なページへたどり着きやすくする一覧導線の設計）
【 保守・安全性・SEO基盤 】
- セキュリティ対策（不正アクセス・改ざん防止）
- 自動＆手動バックアップ（サイトデータの保存体制づくり）
- XMLサイトマップ（検索エンジンにページを伝える設定）
- 導入ツール
- reCAPTCHA（お問い合わせフォームの迷惑メール・スパム対策）
- 納品資料・設計資料
【 運用・引き継ぎ資料 】
- ブログ更新ガイド（投稿方法をまとめた手順書）
- アップデートマニュアル（日常のメンテナンス方法をまとめた手順書）
- Web資産管理シート（ログイン情報や契約情報を整理して管理するための資料）
【 設計資料 】
- カラーコード一覧表（配色ルールを共有するためのカラーパレット資料）
- ディレクトリマップ（サイト構造とSEO設計を整理した資料）
- サイトツリー（ページ全体の構成を把握しやすくした図解資料）
お客様情報
- 名称
- &kids 川井航様
- サイト名
- &kids
- URL
- https://andkids-k.com
- エリア
- 東京都世田谷区
- 事業内容
- 年長～中学生までの「五感」を育む子ども運動教室。
少人数制トレーニングにより、カラダとココロの強さと柔軟性を育てる。