WORKS 02 つなぐて 集客サイト・採用LP 制作事例

集客サイト全体図を見る

プロジェクト概要

クライアント
架空の児童発達支援サービス事業所「つなぐて」
制作期間
3週間(ターゲットリサーチ・情報設計・デザインカンプ)
担当範囲
企画立案、ユーザーリサーチ(ペルソナ策定)、 情報設計、デザインカンプ制作
使用ツール
Figma, Photoshop

クライアントの課題

既存のホームページは施設の情報(概要や住所など)を載せるだけにとどまっており、「ここなら通わせたい」と思ってもらうための動機付けが不十分という課題がありました。

また、支援を必要としている保護者の方は、一人で孤独を抱えていたり、相談すること自体をためらってしまうケースも少なくありません。そのような方々にとって、「見学予約」や「電話をかける」といった一歩踏み出すアクションは非常にハードルが高く、「安心感」や「相談しやすさ」をデザインでどう伝えるかが大きな課題となっていました。

さらに、福祉業界特有の『人手不足・採用難』への危機感があり、現場のホワイトな労働環境や本当の魅力を求職者に届ける手段がないことも大きな課題でした。

制作目標

1. 孤独を抱える保護者に寄り添い、「つながる安心感」を届ける

サイトを訪れた保護者に「自分一人ではない」「誰かに頼ってもいいんだ」と感じてもらうことが最大の目標。支援を受けることが「子供にとっても自分にとってもプラスになる」というポジティブな未来をイメージしてもらい、心理的な孤立感を和らげる。

2. 次のステップを可視化し、一歩踏み出す心理的なハードルを下げる

「何から始めればいいかわからない」という不安を取り除くため、見学や相談までの流れを明確に提示する。アクションを起こす際の迷いをなくすことで、電話や予約といった実際の手続きへの心理的負担を最小限に抑える。

3. 求職者の不安を先回りして解消し、ミスマッチのない採用エントリーを獲得する

求職者が抱きがちな「残業の多さ」や「保護者対応の精神的負担」といった福祉現場のリアルな不安を先回りして解消する。1日の業務の流れを厳選して開示し、職場のホワイトな労働環境を可視化することで、応募への心理的ハードルを下げ、意欲の高い人材とのミスマッチのないマッチングを実現する。

デザイン戦略(集客サイト)

1. 孤独を和らげる「共感」のファーストビュー

冒頭に、あえて保護者の悩みや不安に寄り添う「共感セクション」を配置しました。「これは自分のことだ」「自分だけではないんだ」と気づいてもらうことで、まずは心理的なガードを解き、安心して読み進めてもらうための導入を大切にしました。

2. 前向きな気持ちになれる配色の演出

「つなぐてができること」を提示するセクションから、背景色を少し落ち着いたトーンから明るいベージュ(#FEF1BC)へと一新しました。暗いトンネルから抜け出し、パッと視界が開けるような視覚的変化を与えることで、支援を受けることへの「希望」を表現。さらにアクセントのオレンジを加え、温かさと前向きな活力を演出しています。

3. 迷いをなくし、アクションへ導く「親切な設計」

「どうしたらいいかわからない」という不安を払拭するため、サイトの途中に適切なタイミングでCTA(お問い合わせ)ボタンを配置。さらに、次に取るべき具体的なステップを明確に示すことで、迷いなく相談へ進めるような、ユーザーの心に寄り添った導線設計を徹底しました。

4. あらゆるデバイスで安心を届ける「レスポンシブ設計」

「外出先ではスマホ、自宅ではPC」といった保護者の多様な閲覧シーンを想定し、デバイスを問わず一貫した体験ができるよう設計しました。単に要素を並べ替えるだけでなく、各画面サイズに最適化したフォントスケールや余白を再定義。どのデバイスからアクセスしても『つなぐて』の温かな世界観が変わらず伝わり、迷わずアクションへ繋がる導線を確保しています。

スマートフォン表示
PC表示

デザイン戦略(採用LP)

1. 実在感と理念を届けるファーストビュー

「こどもが笑顔になるためには、まず大人が笑顔でいられる環境が大切」という施設の採用理念を直感的に伝えるため、スタッフと子どもたちのリアルな笑顔の写真を大きく採用しました。イラストをメインにした集客用ページとは対照的に、徹底して「職場の実在感」を強調することで、求職者が自分が働く姿を具体的にイメージできるよう設計しています。

2. 不安を安心に変える「共感」と「引き算のタイムライン」

福祉現場で働く人々が抱きがちなリアルな不安に深く共感し、「ここなら私でも安心して働けるかも」と感じてもらえる解決策をシンプルに提示しました。また、1日の流れでは、全ての業務を長々と説明するのではなく、求職者が特に懸念するポイント(休憩、デジタル事務、定時退勤)に絞って引き算の設計を行うことで、ホワイトな労働環境を視覚的に印象づけています。

3. 求職者の行動動線に配慮したマルチデバイス設計

移動中などの隙間時間に「スマホ」で手軽に情報収集し、最終的な条件面の精査は「PC」でじっくり行うという、求職者特有の行動特性(UX)を考慮してレスポンシブ化を行いました。

スマートフォン表示
PC表示

プロジェクトの成果

1. 保護者の「知りたい」に応える、スムーズな体験の提供

共感セクションで心をほぐし、具体的な活動内容やスタッフの紹介を経て、見学・予約へと繋げる「自然な流れ」を構築できました。「次に何をすればいいか」を迷わせない設計にすることで、保護者がスムーズに次のステップへ進める構成を実現しました。

2. デザインによる「不安の解消」

保護者の孤独や悩みに徹底的に寄り添ったコンテンツ制作と、安心感を与える色調選びにより、訪問者が抱える「相談することへの不安」を取り除くことができました。ただ情報を伝えるだけでなく、読み手の心に寄り添うデザインの重要性を形にできました。

プロジェクトから得た学び

デザインとは単に情報を整理して伝えるだけではなく、「相手の立場に立ち、その心の動きを汲み取って形にすること」の重要性を学びました。

また、色調を意図的に切り替えることで、見る人の心情まで前向きに変えることができるという、デザインが持つ大きな力を肌で感じることができました。この制作を通して、技術だけでなく「誰かの心に届けるための視点」を持つことの楽しさを実感しています。

さらに、ひとつの事業所に対して、集客(親向け)と採用(スタッフ向け)の両軸から包括的にデザインで解決する重要性を学びました。現場のリアルな空気感と課題を知る私だからこそできる、事業所の経営に並走するトータルデザインの視点を得ることができました。

集客サイト全体図を見る