介護福祉事業者向けHP制作サンプルを公開しました｜架空企業デモで透明性スタート

今日は短めの宣言記事になります

5本目で予告したサンプルサイト、ちゃんと公開できたので報告です

屋号は「合同会社ケアサイト工房」（架空）です

介護福祉事業者向けに、採用／施設紹介／ブログ運用代行の3メニューを揃えました

実物は記事内の iframe で全部見れます

5本目記事では「現場分かる人がAIを使って届ける」と書きました

5本目の事業宣言から1日

実物を出すのは、僕なりの「言ったらやる」の証明です

参考：通所リハ職員の僕が福祉事業者向けにAIサイト制作を始める話

5本目の宣言記事を書いてから、24時間以内にここまで持ってこれました

不完全なところもありますが、まず実物を世に出すことを優先しました

それでは中身を見てもらいます

5本目で予告したサンプル、公開しました（iframe で実物プレビュー）

公開URLはこちらです

https://caresite-koubou.hatappi-area.workers.dev/

下に iframe で埋め込んでおきます

スクロールできるので、そのままページの中身を確認してもらえます

※架空企業のサンプルです、実在する事業所・人物ではありません

別タブで開く →

ページ構成はこんな感じです

• トップ（index.html）：HERO＋3メニュー紹介＋ブランドストーリー
• 制作メニュー（services.html）：採用／施設紹介／運用代行の詳細
• 会社情報（company.html）：代表ごあいさつ＋会社概要テーブル
• お問い合わせ（contact.html）：相談用フォーム（送信処理は未実装）
• 送信完了（thanks.html）：フォーム送信後の表示用

「介護の想いを、サイトに翻訳する。」というキャッチコピーをトップに置きました

これが、僕が事業を通じてやりたいことの全部です

5本目記事では「現場分かる人がAIを使って届ける」と書きました

そのコピーを、サイトの第一印象に落としこんだ形です

参考：通所リハ職員の僕が福祉事業者向けにAIサイト制作を始める話

なぜ架空企業のサンプルから始めたのか（実績ゼロからの透明性）

正直に書きます

事業として実績ゼロからのスタートです

見せられる「過去の制作物」が、手元に1個もありません

普通の制作会社なら、実績ページに「過去の案件」を並べます

僕にはそれがありません

具体的には、こういう構成にしました

• 屋号：合同会社ケアサイト工房（架空）
• 代表：森本 涼介（架空）
• 所在地：香川県高松市〇〇町（架空）
• 電話番号：087-000-0000（架空）

全部「架空」ですが、デザインも文章もガチで作っています

実物を見てもらえれば、僕が作れる範囲はだいたい伝わるはず

これが、いま選べる一番誠実な見せ方やと思いました

「架空ですけど本気で作りました」というスタンスを、堂々と前に出します

実績ページの代わりに、サンプルサイトそのものをポートフォリオにする戦略です

ちなみに「介護福祉特化」という方向性は、5本目で宣言したまま変えていません

僕の本業は通所リハ職員です

参考：リハビリの仕事はやりがい感がハンパない！

参考：ケアマネージャーの資格を目指して

業界の言葉が分かる立ち位置を、そのまま事業の入口に持っていきます

架空であることを徹底的に明示する仕掛け

ここが、今回めちゃくちゃ気を使った部分です

「架空」とは書いたけど、よく見ずに「実在の会社や」と勘違いされたら最悪です

誤認防止のために、サイト内に4つの仕掛けを入れました

• sample-bar：全ページの最上部に「サンプルサイトです」固定バー
• sample-ribbon：HERO 右上に「SAMPLE」リボン表示
• fictional ラベル：会社情報テーブルの全項目に赤字「架空」ラベル
• 黄色警告ボックス：お問い合わせフォーム上に「※サンプル送信処理なし」明示

上から下まで、サイト中に「架空ですよ」のシグナルを散りばめてある状態です

過剰に見えても、誤認リスクをゼロに近づけることが優先です

架空表記の徹底度がそのまま、僕の誠実さの表れになる

そういうつもりで設計しました

お問い合わせフォームは、UIは普通に作っています

ただ、送信処理は意図的に未実装にしてあります

実装してしまうと、本気で送られてしまうリスクがあるからです

フォームを開いて画面を見るところまで、体験してもらえれば十分

そういう判断にしました

3つのメニューに絞った理由（採用／施設紹介／運用代行）

サンプルサイトの中で、提供メニューを3つに絞っています

• 採用サイト制作：求人応募が集まらない事業所向け
• 施設紹介サイト制作：見学・問い合わせを増やしたい事業所向け
• ブログ運用代行：「更新が止まる問題」の根本解決

「何でもやります」という見せ方を意図的に避けました

介護福祉業界で、現場や経営層からよく聞く悩み

だいたいこの3つに集約されます

• 求人を出しても応募が来ない
• 利用者さんの家族に施設の良さが伝わらない
• 自社サイトを作ったけど、ブログがすぐ止まった

「何でも頼める制作会社」より、「3つに絞って深く解いてくれる人」

業界課題にはその方が刺さるはず、という仮説です

価格レンジは応相談ベース＋目安併記

価格表記は、応相談を基本にしつつ目安を出しました

メニュー	表記	目安
採用サイト制作	応相談	5〜15万円
施設紹介サイト制作	応相談	5〜15万円
ブログ運用代行	月額8万円〜	月額8万円〜

ブログ運用代行だけ月額の最低ラインを出しています

理由は、運用代行は工数が読みやすく「最低これくらい」を提示できるからです

採用と施設紹介の制作は、規模によって工数が変わるので応相談にしました

「だいたいこのくらい」が分かれば、相談のハードルは下がる

完全に決め打ちじゃない感じも、相手の事情に合わせやすい形やと思っています

5本目では「半額〜1/3」と書きました

業界相場は20〜50万円

5〜15万円のレンジは、ちゃんとその範囲に入っています

宣言と整合させた形です

介護福祉らしさを出すデザインの裏側（深緑×クリーム×金）

サイトの配色は、深緑×クリーム×金の3色でまとめています

• 深緑（#1F4D3B）：信頼・安定・自然
• クリーム（#FAF6EE）：温かさ・柔らかさ
• 金（#C9A14A）：品格・丁寧さ

介護福祉のサイトって、よくある中小企業テンプレ写真を流用したものが多いです

ノートパソコンを開いた手元の写真とか、スーツの人の握手とか

業界のサイトとして、それは違うやろと思っていました

業界用のサンプルとして作る以上、配色のレベルから業界に合わせたかったです

フォント選びと葉っぱロゴ

フォントは Noto Serif JP と Noto Sans JP

この2つの組み合わせです

• 見出し：Noto Serif JP（明朝系で品格を出す）
• 本文：Noto Sans JP（読みやすさ重視）

ロゴモチーフには葉っぱを選びました

「育む・自然・癒し」を表す、業界に合うシンボルとして選んでいます

テンプレ写真を使わない、現場の温度をデザインに翻訳する

このスタンスは、サンプルだからこそ徹底しておきたかった部分です

実物を見てもらうのが、一番早いです

上の iframe か別タブで、一度開いてみてください

スマホで見ても崩れないようにレスポンシブも組んであります

使った技術と公開先（HTML/CSS/JS＋Cloudflare で月額ゼロ）

サンプルサイトはフレームワーク無し

HTML / CSS / Vanilla JS のみで作りました

• HTML：5ページ（index / services / company / contact / thanks）
• CSS：1ファイル（assets/css/）
• JS：ハンバーガーメニューと簡単なインタラクション

WordPress も React も使っていません

理由はシンプルです

• 介護福祉事業所のサイトに、重い仕組みは要らない
• 静的ファイルだけなら、保守も公開も安く済む
• AIで生成→手動微調整のループが回しやすい

公開先は Cloudflare Workers の静的アセット機能です

無料枠で運用できるので、月額ゼロで動いています

個人事業者でも、月額ゼロでこの規模が運用できる

これも、業界に伝えたい事実のひとつです

Cloudflare デプロイで遭遇した小さな落とし穴

ここで、ちょっとしたつまずきの話を書いておきます

公開作業で zip を Cloudflare にアップロード

zip は PowerShell `Compress-Archive` で作成

普通に動くと思ったら、画面のデザインが崩れて表示されました

原因は Windows の `Compress-Archive` のバグでした

zip 内のパス区切りが、バックスラッシュ（`\`）で固定される仕様

Cloudflare 側は Linux 系

スラッシュ（`/`）区切りを期待します

そこが噛み合わず、CSSも JSも画像も全部 404 になっていました

解決：Python の `zipfile` モジュールで zip を作り直し

スラッシュ区切りで書き出してくれるので、それでアップ

一発でデザインが正しく表示されました

AI使って個人でサイト作れる時代でも、こういう小さな落とし穴で詰まる

ここは正直に書いておきます

派手な技術トラブルじゃないけど、慣れないと数時間溶けるタイプの話です

似た作業をする人の参考になれば嬉しいです

気になる事業所オーナーさんへ（CTA）

ここまで読んでくれて、ありがとうございます

もう一度だけ、サンプルのURLを置いておきます

実物を見て「うちもこんな感じで作ってもらえそう」と感じたら

気軽に声かけてもらえると嬉しいです

連絡はXのDMで一本化させてください

5本目で書いた窓口と同じです

「うちのサイト、ちょっと相談したい」だけでも歓迎です

押し売りはしません

話を聞いて、合いそうなら見積、合わなさそうなら正直にそう言います

これからの予告も、軽く書いておきます

実際にお問い合わせがあったら、進捗を記事で報告していきます

初受注、初失敗、初納品、ぜんぶ書く予定です

挑戦記の続編として、隠さずやっていくつもりです

参考までに、過去のブログ休止と復帰の記録もリンクしておきます

参考：ブログの一時休止

休止して、戻ってきて、宣言して、サンプル出した

ここまで来れた事自体が、僕にとっては小さな達成です

次の記事は、事業の話だけじゃなく、日常のあれこれも交えて書こうかなと思っています

はたっぴブログの記事として、読み手の幅を少し広げたい時期です

ノシ