【コーチングHP】ほほ笑みメンタル様

ほほ笑みメンタル(アイキャッチ)

たくさんの想いとサービスを、「迷わず選べる形」へ。

コーチング・組織コンサルティング・企業研修・各種講座と、幅広いサービスを持つ「ほほ笑みメンタル」様。
その一つひとつの魅力はそのままに、初めて訪れた方が「自分に合うのはどれか」を迷わず選べるように、動線と見せ方の整理を中心に取り組んだリニューアルです。
そして今回は、友人である薬剤師ライターさんからのご紹介で実現した、私にとって初めての「協業案件」でもありました。

クライアントについて

ほほ笑みメンタル 様(橋枝サリー 様)

「働く女性の心がわかる、全力で幸せに導くコーチ」として、ライフ/キャリアコーチングからエグゼクティブ・コーチング、企業研修、組織のパーパス・バリュー策定まで幅広く手がけられています。パタゴニア日本支社で28年間キャリアを積まれたのち、ご自身の体調不良や「笑いヨガ」に救われた経験を礎に独立。日本トップコーチ協会認定コーチ、EAPメンタル・ヘルス・カウンセラーをはじめ、多くの資格をお持ちです。

そして今回、特に印象的だったのは、ホームページのリニューアルを進めているまさにその時期に、橋枝さんご自身が本の出版コンテストにも挑戦されていたこと。新しいことに次々と挑み続けるそのやる気と行動力に、私自身が大きく刺激を受けました。橋枝さんの前向きなエネルギーがサイトを訪れた方にも伝わるように、と意識しながら制作を進めています。

ご相談内容

ほほ笑みメンタル様は、コーチング・コンサルティング・研修・講座と、たくさんのサービスをお持ちです。
そのぶん、以前のサイトでは「どんなサービスがあるのか」「自分に合うのはどれなのか」が、初めて訪れた方には少し分かりにくい状態でした。

そこで今回のリニューアルでは、サービスの数や内容はそのままに、

  • それぞれのサービス・コースの違いが、ひと目で伝わること
  • 興味を持った方が、迷わず次の情報(事例・各サービスページ)へ進めること

この2点を軸に、動線とデザインの整理に取り組みました。

また今回は、橋枝さんとライターさんが記事の内容や言葉をつくり、Fuyuがそれを「伝わる形」にしていく——という協業のスタイル。
私にとっては初めての座組で、おふたりが込めた言葉の意図を汲み取りながら形にしていく面白さを感じたプロジェクトでした。

制作概要

制作期間約4ヶ月(ヒアリング〜公開まで)
制作範囲トップページ+主要3ページの大幅なデザイン改良/その他ページのトンマナ調整・視認性の改善
担当範囲デザイン・WordPress構築・既存テーマ上での実装・スマホ最適化(※原稿・言葉は橋枝様・ライター様が作成。Fuyuはそれを「形にする」役割を担当しました)

デザイン

  • TOPページ:サービスごとの「色分け」:法人向けはグレー、個人向けはピンク。
    色を見ただけで「どんな対象のサービスか」が直感的に伝わるように整理しました。
  • コースのイメージが伝わるレイアウト:サービスページ(下層ページ)は左右の色分けデザイン。
    コースごとに色を変えることで、内容の違いと“雰囲気”を視覚的に表現しています。
  • サイト全体のトンマナ統一:大幅に改良した主要ページに合わせ、その他のページも配色・余白・文字を調整。サイト全体の印象を揃え、どのページを見ても“同じサイト”だと感じられる仕上がりにしました。

機能・導線

  • トップページに事例スライダーを設置:興味を持ったその瞬間に、すぐ事例を見に行ける導線を用意しました。
  • 迷わせない構成:たくさんのサービスの中から、自分に合うものへスムーズにたどり着ける流れを設計しました。

サービスごとの「色分け」で、ひと目で違いが伝わる

ほほ笑みメンタル様の強みは、サービスの幅広さ。だからこそ、その幅広さが“分かりにくさ”にならないよう、色でグループ分けをしました。

法人向けのサービス(エグゼクティブコーチング・組織コンサルティング・企業研修など)はグレー系、個人向けのサービス(ライフ/キャリアコーチング・各種講座など)はピンク系
ページを見た方が「これは自分に向けたものだ」と感じ取れるよう、色そのものが“案内役”になる設計にしています。

切り抜き:TOPコースデザイン

トップページから「事例」へすぐ飛べるスライダー

サービスに興味を持った方が次に知りたくなるのは、「実際にどんな変化があったのか」という事例です。

そこでトップページに事例スライダーを埋め込み、気になったその場で事例へ移動できるようにしました。“興味”と“行動”の間にある段差をできるだけなくし、スムーズに次の一歩へ進める導線を意識しています。

切り抜き:スライダー

コースのイメージまで伝える、左右の色分けデザイン

各サービスページでは、左右で色を分けたデザインを採用しました。

他のコースページにも同じデザイン構造を使いながら、コースごとに色を変える。そうすることで、内容の違いだけでなく“そのコースの雰囲気・イメージ”までも感じ取ってもらえるようにしています。統一感を保ちつつ、一つひとつに個性を持たせる——そのバランスを大切にしました。

切り抜き:エグゼクティブコースデザイン
切り抜き:ライフキャリアコーススクリーンショット

既存のサーバー・テーマの上での、丁寧なリニューアル

今回は、ほほ笑みメンタル様がすでに契約されているサーバー・テーマ環境の上での改良でした。

普段、私は使い慣れた制作環境で一からつくることが多いのですが、今回は既存環境の仕様に合わせながらの制作。思うようにいかない部分はトライ&エラーを重ね、一つずつ最適な形を探していきました。
「今ある環境を活かしてリニューアルしたい」——そんなご要望にも、できるかぎり寄り添える形で対応しています。

公開後の変化・お客様の声

公開後、橋枝さんから「素敵なホームページになりました!」といううれしいお言葉をいただきました。

たくさんのサービスへの想いを、一つの分かりやすい形にまとめられたこと。
そして、橋枝さんの前向きなエネルギーが伝わるサイトになったこと。
協業という新しい形に挑戦したプロジェクトとして、私自身もとても学びの多い制作になりました。

「同じようなお悩みがあればお気軽にご相談ください」

  • サービスやメニューが多く、何がどう違うのか伝わりにくい
  • 興味は持ってもらえても、次のページへ進んでもらえない
  • 今のサーバーやテーマはそのままに、デザインだけ整えたい
  • 原稿は自分(やライター)で用意するので、「形にする」部分をお願いしたい

状況に合わせて、デザイン・構築から既存環境でのリニューアルまで対応可能です。お気軽にご相談ください。

ご相談・お見積もりはこちら

江﨑 文則(Fuyu Web CraftLab.)のイメージ
薬剤師/医療特化Web制作者
江﨑 文則(Fuyu Web CraftLab.)
薬剤師として10年以上、病院・薬局の現場で培った視点をそのままWebへ。 「原稿づくりや写真手配まで手が回らない」——そんな声に応えるため、文章・写真・デザイン・更新までワンストップでお手伝いしています。打ち合わせはやさしい言葉で、進行はサクサク。 医療に強いWeb制作|現場が伝わる構成と導線、スマホで見やすいページ設計。 運用まで伴走|更新・修正・MEO・デザイン(名刺/パンフ)もまとめてサポート。
制作実績

WORKS

PAGE TOP