講座も、メンバー紹介も、活動写真も、ブログもある。
それでも初めて来た人が「自分はどこから見ればいいのだろう」と迷ってしまう。
そんなとき、必要なのは情報をさらに増やすことではありません。
ホームページの主語を、運営する側から、悩みを抱えて訪れる人へ変えることです。
今回紹介するのは、ULTRAコミュニケーション協会のWordPressサイトを、今の悩みから入口を選べるホームページへ整えた事例です。
まず、実際の公開画面をご覧ください。
画面の印象は大きく変わりました。
しかし、本当に変えたかったのは色や写真ではありません。
「協会を知ってもらう順番」から、「訪問者が自分に合う一歩を選ぶ順番」へ。
その変化を、実画面と一緒に解説します。
完成後の公開サイトはこちらです。
※Beforeは、2026年4月23日に保存された公開アーカイブを使用しています。アーカイブでは一部画像を取得できない場合があるため、この記事では確認できる画面と保存済みの制作記録だけを比較しています。
リニューアル前も、必要な情報はそろっていました
旧サイトにも、協会の活動を知るための情報はありました。
- 協会の案内
- スクールと講座
- メンバー紹介
- ブログ
- 受講者の声
足りなかったのは、コンテンツの数ではありません。
初めて訪れた人が「これは私の悩みに関係がある」と感じ、次に見る場所を決めるまでの順番でした。
旧サイトのファーストビューには、「全ての人にウルトラなコミュニケーションを」という大きなメッセージがありました。
協会の理念は伝わります。
一方、家族や職場の会話に悩んでいる人が見たとき、「私の場合はどこから始めればよいのだろう」という迷いが残りやすい状態でした。
ホームページ診断で見えたのは、デザインの古さではありません
古いから新しくする。
それだけなら、色と写真を変えれば終わります。
今回のホームページ診断で見えたのは、情報が多いぶん、全部が同じ強さで並び、訪問者が自分に関係する入口を探さなければならないことでした。
| 見直した場所 | Before | After |
|---|---|---|
| 最初のメッセージ | 協会の理念を伝える | 訪問者の「伝わらない」悩みに寄り添う |
| メニュー | 多くの項目を横並びで見せる | 主要項目と相談ボタンへ整理する |
| 学びの入口 | コース名から探す | 診断・講座・スクールから選ぶ |
| 写真 | 情報を説明する画像が中心 | 実際に話し、学ぶ場面を見せる |
| 新しいサービス | 診断への入口が見つけにくい | ホーム・メニュー・講座から診断へ進める |
| スマホ | 情報を上から追って探す | 学ぶ・相談する行動を早く選べる |
ホームページは、情報をたくさん載せるほど伝わるわけではありません。
読む人の頭の中にある順番で情報が出てくることが大切です。
一番大きく変えたのは、ホームページの主語
旧サイトは、「私たちは、こんな協会です」から始まっていました。
リニューアル後は、訪問者が心の中で感じていることから始まります。
- 相手に合わせすぎて疲れる
- きちんと伝えたつもりなのに誤解される
- 感情的になったあとで後悔する
- 同じすれ違いを何度も繰り返してしまう
そこで、最初の言葉を「人とのすれ違いを、わかり合うきっかけに。」へ変えました。
協会の説明を読む前に、「これ、私のことかもしれない」と感じてもらうためです。
ホームページを見る人が主人公です。
協会やサービスは、その人が次の一歩を見つけるための案内役です。
この順番へ変えると、同じ講座でも伝わり方が変わります。
診断・講座・スクールの3つから選べるようにした
「コミュニケーションを学びたい」と思っても、求めている深さは人によって違います。
まず、自分の傾向を知りたい人。
今の悩みに合うテーマを学びたい人。
時間をかけて、体系的に身につけたい人。
そこで、ページの上の方に3つの入口を用意しました。
- コミュニケーション診断
- コミュニケーション講座
- コミュニケーションスクール
サービス名を並べるだけではなく、「まず自分を知りたい方へ」「今の悩みに合うテーマで学びたい方へ」と、選ぶ理由も添えています。
コミュニケーション診断ページでは、152問から分かること、活用場面、申込みの流れ、よくある質問まで確認できます。
「詳しく見る」を、押した後が分かる言葉へ
旧サイトでは、「詳しく見る」というボタンが中心でした。
分かりやすい言葉ですが、押した先で何ができるかまでは伝わりません。
リニューアル後は、行動が想像できる言葉へ変えました。
- まず自分の傾向を知る
- 自分に合う講座を探す
- どれを選ぶか相談する
- 研修・講演について相談する
ボタンは小さな部分です。
しかし、ここが具体的になると、読むだけだったホームページが、次の行動を選べるホームページに変わります。
スマホは、パソコンを小さくしただけにしない
スマホでは、画面に表示できる情報が限られます。
だからこそ、何を一番に見せるかが大切です。
リニューアル後は、悩みに寄り添う言葉のすぐ下に、2つの入口を置きました。
- 今の自分に合う学びを探す
- まず自分の傾向を知る
画面下には「学びを選ぶ」と「相談する」も表示しています。
長いページを全部読む前でも、次に何ができるか分かる設計です。
協会らしさは、色だけでなく写真と余白でつくる
デザインは、白・紺・赤・金を基調にしました。
紺で信頼感をつくり、赤は大切な行動だけに使う。金は細い線や小さな見出しに使い、落ち着いた上質さを加えました。
もう一つ大きかったのが、実際の講座やグループワークの写真です。
人が話し、考え、学んでいる場面を見せることで、「何を教えている協会か」だけでなく、「ここに参加すると、どんな時間を過ごせるか」まで想像できるようにしています。
既存WordPressを捨てずに、使える情報は残す
今回のリニューアルは、新しいホームページを別の場所に作ったのではありません。
既存のWordPressを活かした本番サイトのリニューアルです。
講座、メンバー、イベントなど、これまで登録してきた情報は残しました。
そのうえで、見た目を担当する専用テーマと、情報を守る機能を分けています。
見た目を新しくすることと、今ある大切な情報を守ること。
どちらか一つではなく、両方を一緒に考えました。
公開後に確認したこと
公開後は、見た目だけで終わらせず、65項目を確認しました。
- 専用テーマと情報を守る機能が動いている
- 既存の講座・メンバー・イベント情報が残っている
- メニューからコミュニケーション診断へ進める
- 講座ページから診断を選べる
- パソコンとスマホで横にはみ出さない
- 画像の読み込みエラーがない
- トップと診断ページに専用のSNS画像が設定されている
現在、問い合わせ数や申込み数の変化はまだ計測していません。
そのため、「問い合わせが増えた」とは書きません。
今確認できている成果は、初めて来た人が悩みから入口を選び、相談や申込みまで進める道を実装できたことです。
この事例は、こんなホームページに当てはまります
- 講座やサービスが増え、メニューが分かりにくくなった
- 必要な情報はあるのに、問い合わせへの道が弱い
- 協会やスクールの理念はあるが、初めての人に伝わりにくい
- 新しいサービスを始めたのに、トップから見つけてもらえない
- 古いWordPressの情報を残したまま、印象を変えたい
- スマホで見ると、どこを押せばよいか分かりにくい
一つでも当てはまるなら、足りないものを増やす前に、伝える順番を見直すだけで変わるかもしれません。
同じULTRAコミュニケーションの改善を、別の角度から見る
2つの事例を見比べると、同じ事業でも、読む人によって必要な言葉と導線が変わることが分かります。
今ある強みを、「伝わる順番」に変える
ULTRAコミュニケーション協会にも、講座、メンバー、活動写真、ブログなど、たくさんの資産がありました。
今回行ったのは、その良さを消すことではありません。
初めて来た人が「これは自分の悩みに関係がある」「ここなら相談できそう」と思える順番に並べ直したことです。
ストーリーHPのホームページ診断では、悪いところを探すだけではなく、今ある強みがどこで伝わりきっていないかを見ます。
そして、改善後の画面を実際に操作できるアフターデモとして形にします。
「うちのホームページも、こんなふうに変わる？」
そう感じた方は、まず現在のホームページを見せてください。
基本価格11,000円（税込）。条件に合う方はモニター価格5,500円（税込）です。本番サイトの制作・公開は別途ご相談となります。