CONTACT

[ COMMAND DIRECTORY ]

SYSTEM ALL GREEN.

AWAITING ORDERS...

FILE No.0170 // REPORT

訪問看護事業所のホームページの制作・実装

訪問看護事業所のホームページの制作・実装

REPORT

三重県鈴鹿市を中心に訪問看護サービスを展開する訪問看護ステーション よきかな(株式会社 善哉)様のコーポレートサイトをデプロイしました。

「おうちで暮らすを支えたい」という理念をWebアーキテクチャ上で具現化し、ターゲットユーザーへ適切にデリバリーするための実行支援記録です。

訪問看護ステーション よきかな(株式会社 善哉)

制作期間
約1ヶ月
公開
2026年1月
実行範囲
企画・原稿構成・デザイン・WordPress Cocoon子テーマ開発・SEO初期設定

MISSION

課題・目的

訪問看護という事業特性上、「医療サービスとしての正確な情報提供」「自宅に迎え入れる心理的安心感」という、相反する2つの要件を同時に満たす必要がありました。

事業所番号や保険適用範囲といった正確性を追求すれば、サイトは行政のドキュメントに寄っていきます。しかし、実際にサイトを閲覧するのは「退院が決まり不安を抱えるご家族」であり、彼らが最後に確認したいのは「この人たちを家に上げても大丈夫か」という一点です。

本ミッションのコアは、この「正確性」と「体温」のパラメータを極限まで調整し、ユーザーの不安を払拭するUIを構築することに設定しました。

SYSTEM DESIGN / TACTICS

設計・技術的アプローチ

情報のオーバーロードを回避し、ユーザーへ適切な順序でデータを伝達するためのタクティクスを実装しています。

情報アーキテクチャの最適化とレイアウトの水平展開

支援内容、料金体系、求人情報など、提示すべきデータは多岐にわたります。これらを単一の縦軸に羅列した場合、ユーザーの離脱リスクが高まります。

この課題に対し、情報量の高いセクションは縦に積まず、横に逃がす設計を採用しました。支援内容やスタッフ紹介は横スクロールカードとして配置し、スマホ閲覧時にはScrollHintを連動させることで、直感的なデータナビゲーションを実現しています。

UI/UXにおける「体温」のデプロイ

「病院の顔か、家の顔か」を判断基準とし、視覚的な角を徹底して丸めました。ボタンはピル型(角丸100px)、カードは16px、フッター上端は300pxのR指定とし、全体の面が固まるのを防いでいます。

カラーは、「医療の落ち着き」と「現場のあたたかさ」の交点として、くすんだローズ(#b04974)を採用。ベーステキストには緑を帯びた黒(#43453d)を指定し、コントラストによる圧迫感を軽減しました。

タイポグラフィは、Zen Maru Gothicをベースに、欧文ラベルにのみ太いPaytone Oneをアサイン。柔らかさの中に構造的な芯を通すバランスを徹底しています。

運用・システムパラメータの最適化

運用フェーズにおける負担を最小化するため、以下のデータリンクと制御を実装しました。

料金表PDFの動的制御
制度改定に伴う更新を見越し、WordPressカスタマイザーを拡張。運用者がPHPに触れることなく、管理画面からダイレクトにPDFを更新可能な構造としました。
フォームUIの動的出し分け
問い合わせと採用の導線が混在するため、ラジオボタンの選択をトリガーとして入力フィールドを出し分ける仕様を実装しています。
リソース消費のカット
Contact Form 7のreCAPTCHA読み込みをis_page(‘contact’)でフィルタリングし、不要なページでの外部スクリプト読み込みを遮断しました。

TROUBLESHOOTING / ARCHITECTURE

環境制約や壁への対処

本プロジェクトにおける最大の技術的壁は、「独自のUI設計」「Cocoon(既存テーマ)の機能」のシームレスな統合でした。

お知らせ機能の運用はCocoonのシステムに依存しつつ、サイト全体の意匠は完全にコントロールする必要があります。両者のスタイルが衝突しないよう、明確な国境線を引くアーキテクチャを設計しました。

エントリポイントのルーティング制御
子テーマのheader.php先頭にてページ属性を判定。オリジナル空間とCocoon空間へのルートを分岐させ、共通のヘッダー・フッターのみを安全にインクルードする構造としました。
:where() 疑似クラスによる詳細度コントロール
Cocoon空間に無暗にリセットCSSを干渉させれば、テーマ側のスタイルが崩壊します。そのため、共通パーツの範囲にのみ詳細度0の局所リセット(destyle)を適用し、CSSの名前空間の衝突を完全に無効化しました。
アクセシビリティの担保
サイトの「動き」に対する安全網を実装しています。医療・介護分野のサイトでは、画面のスクロールに伴うアニメーションが、閲覧者の体調によって視覚的な負担(画面酔いなど)を引き起こすリスクがあるためです。具体的には、ご自身のスマホやPCで「視差効果を減らす(動きを減らす)」設定にしているユーザーには、アニメーションを完全にキャンセルし、静的に情報をデリバリーします。また、プログラムが正常に作動しない閲覧環境においても、画面が真っ白になったり情報が欠落したりせず、最初からすべてのテキストと画像が表示されるよう制御しています。

SUMMARY

完遂の記録・総括

「おうちで過ごせるっていいな」というクライアントのビジョンを、サイト全体の共通言語として全コンポーネントにデプロイしました。

訪問看護サイトの本質は、単なるサービス内容の提示ではありません。緊急事態に直面し、不安を抱えるユーザーに対し、「このチームなら自宅に招き入れても問題ない」という確固たる手触りを提供することです。

細部のUI調整から、裏側で稼働する堅牢なシステムアーキテクチャまで、すべての設計基準をその一点に集約し、目的を完遂するサイトをロールアウトできたと評価しています。妥協なくやり切りました。

実行支援・Webシステム構築のご相談はこちら

この記事を書いた人
HIROFUMI IWATANI

企業課題をデジタル技術で解決する設計・開発者。設計から実装、AI活用までを単独で遂行する。最前線で得た技術ログやWeb戦術を記録・発信中。
>> STATUS: ALL GREEN.

HIROFUMI IWATANIをフォローする
REPORT