【自己表現の事業サイト】構成設計＋コーディング
OUTELINE
概要
要件整理から構成設計、進行管理、実装・公開までを担当。
「信頼性」と「独自性」を両立させた事例です。
| ご依頼主 | MasterPiece様 |
|---|---|
| クライアント業種 | スクール・教育事業 |
| ターゲット | 30代後半〜60代／第二の人生・新しい生き方を模索し始めている方 |
| URL | https://www.jicohyogenworker.com/ |
| 対応範囲 | ・競合リサーチ ・構成提案 ・WF（設計図）作成 ・ レスポンシブコーディング（PC・SP） ・WP（SWELL）カスタマイズ ・note連携 ・公開作業 |
| 主な作業内容 | ・競合リサーチ8社 ・WF 1ページ作成（トップ＋下層1） ・全ページコーディング ・カスタム投稿設定 ・note記事連携 ・表示速度を考慮した実装 |
| ページ数 | トップ＋下層3ページ＋ブログ |
| 支給データ | ・サーバ情報 ・講座／事業にかかわる資料 ・写真素材 ・デザイン（Illustrator） |
| 制作期間 | 約4ヶ月（構成設計〜公開）／実制作 約14営業日 |
| 制作費用 | 詳細はお問い合わせください |
課題
このアカデミーの集客は「広告 → メルマガ登録 → ステップメール → 個別相談 → プログラム参加」という流れができていました。
一方で、「そもそも何をしている事業なのか」という信頼性の部分が弱いという課題がありました。
ご要望
- 「アカデミー」としての信頼性をしっかり打ち出したい
- 「自己表現ワーカー」という独自の在り方も大切に伝えたい（信頼性と独自性の両立）
- HPを情報収集の入口として使ってほしい
（個別相談の前に必要な情報を届け、参加への心理的ハードルを下げたい） - 分かりやすく欲しい情報が拾いやすい構成を重視したい
PROCESS
設計の考え方
サイト制作に入る前に、まずは事業内容や既存の集客導線を把握し、「ホームページに何を期待されているのか」を整理しました。
クライアント理解のためのリサーチ
既存サイトやLP、メルマガ、ブログ、SNS、YouTubeなど、クライアントが発信しているコンテンツを幅広く確認しました。
サービス内容だけでなく、どのような想いで活動しているのか、どのような言葉で受講生と向き合っているのかを把握し、「自己表現ワーカー」という独自の価値観への理解を深めました。
また、ターゲット層が抱える悩みや市場動向についても調査を行い、クライアントの発信内容と照らし合わせながら、サイトに掲載すべき情報や伝え方を検討しました。
SNSや動画など複数の媒体で継続的に発信されていたため、ホームページ単体ではなく、既存の情報発信との連携も意識しながら構成を設計しています。
競合リサーチ（8社）
サイト構成や掲載コンテンツの参考となる事例、直接競合となるアカデミーを中心に調査を実施しました。
どのような情報を掲載しているかだけでなく、信頼性の伝え方、実績の見せ方、ページ遷移、アニメーションの雰囲気なども確認し、サイト制作の方向性を整理しています。
業界として求められる情報を押さえながらも、「自己表現ワーカー」という独自の価値観が埋もれない構成を検討しました。
構成提案・ワイヤーフレーム作成
リサーチ内容をもとに、情報の優先順位や導線を整理し、サイト全体の構成を提案しました。
特に、「アカデミーとしての信頼性」と「自己表現ワーカーという独自の価値観」の両方が伝わることを重視しています。
当初は講座内容を詳しく紹介するページ構成も検討しましたが、プログラム内容は参加者や時期によって変動するため、固定的な情報として掲載することが難しい状況でした。
そこでクライアントと相談しながら、講座内容そのものではなく、受講生がどのような変化を経験したのかが伝わる構成へ調整。受講生のビフォーアフターを下層ページとして設けることで、活動の価値や成果を具体的にイメージできるよう設計しました。
POINT
実装の工夫
更新の手間を増やさない note連携
「ブログの更新は手間」というお悩みに対し、note の発信内容をサイトに連携。
新たな運用負担を増やさずに、サイトを”動いている事業”として見せられる仕組みにしました。日々の発信がそのまま信頼性につながります。
世界観を保ちつつ、軽く・速く
画像に頼りすぎずなるべくテキストで実装し、ページの表示速度に配慮。
アニメーションは多用しすぎず、デザインの世界観に合わせて必要な箇所だけに設定しました。
「速くて読みやすい」ことが、情報収集の入口としての使いやすさと信頼感を支えています。
設計から実装まで同じ担当が通すことで、「信頼性と独自性の両立」という狙いを細部までブレずに形にできました。
運用を見据えたブログ設計
当初、ブログ機能は必須ではないというお話もありましたが、ホームページには「事業の信頼性を伝える」という役割も求められていました。
そこで予算とのバランスを考慮し、WordPressテーマ「SWELL」の標準機能を活用してブログ機能を実装。募集情報や活動報告などを最低限更新できる状態を整えました。
また、既にあったクライアント個人のブログには事業と親和性の高い記事が多数あったため、コラム記事をサイトへ移行。
将来的にコンテンツを充実させていく際の土台として活用できるようにしています。
大きなコストをかけずに、現在の運用と将来の拡張性の両方を考慮した構成としました。
こうしたワイヤーフレームの作成だけのご依頼も承っています。
ワイヤーフレーム作成
サイト全体はもちろん、特定ページだけのご依頼なども柔軟に対応いたします。
制作に関する
お問い合わせはこちら
ご依頼・ご相談のお問い合わせは
メールフォームでのみ
受付しています
kim designは同業者さま専門のパートナーとして業務委託でのご依頼中心に一緒にサイト制作の納品・運用後のサポートをいたします。
