訪問看護ステーション HP＋採用サイト

ご注意: 本事例はポートフォリオ用にサービス名・画像・金額等を架空のものに差し替えて掲載しています。実際のプロジェクトとは異なります。

プロジェクト概要

訪問看護ステーションのHP＋採用サイトを制作しました。「看護師が来ない」という深刻な採用課題に対し、ステーションの魅力を伝えるHPと、応募までの導線を設計した採用サイトを同一ドメインで構築しています。

顧客からのご要望

• 看護師の採用に直結するサイトにしたい
• LINE経由で気軽に相談できる導線がほしい
• 見学会・オンライン説明会の告知を強化したい
• 利用者とご家族にも安心感を与えるデザインにしたい
• 求人ごとの詳細な募集要項ページがほしい

制作アプローチ

ネイビーとゴールドを基調に、医療機関としての信頼感と訪問看護ならではの温かみを両立させたカラースキームを採用。参考サイトのUI/UXを分析し、同水準の採用サイト機能（募集要項一覧、求人詳細、オンライン説明会、フローティングCTA）を実装しました。

成果物の詳細

ページ構成（全5ページ）

• ステーションHP（数字で見る実績、サービス紹介、スタッフ紹介、アクセス）
• 採用トップ（採用メッセージ、文化紹介、募集職種、LINE CTA）
• 募集要項一覧（職種・雇用形態フィルタ、求人カードグリッド）
• 求人詳細（給与内訳テーブル、応募資格、選考フロー、スティッキーサイドバー）
• オンライン説明会（説明会詳細、カジュアル面談案内、FAQ）

主な機能

• スクロール連動ヘッダー（ピル型デザイン）
• フローティングCTA（LINE相談＋オンライン説明会）
• モバイル固定CTAバー（電話・LINE・応募の3導線）
• 求人フィルタリング（JavaScript）
• Google Maps埋め込み
• スクロールアニメーション、数字カウンター

技術的な工夫

• 採用ファネル設計: HP → 採用トップ → 募集一覧 → 求人詳細 → 応募/LINE相談の段階的な導線
• 3層LINE CTA: フローティングボタン・モバイル固定バー・セクション内CTAで離脱を防止
• 同一ドメイン統合: ステーションHPと採用サイトを1ドメインで運用し、自然な回遊を実現
• 2カラム求人詳細: 詳細テーブル＋スティッキーサイドバーで情報量と応募導線を両立
• レスポンシブ対応: 1024px / 768px / 480px の3段階で最適化
• CSS変数設計: デザイントークンによる一貫したスタイル管理

制作期間

約1週間（一般的な制作会社では6〜8週間）