いつもご覧いただきありがとうございます。坂本美唯です。
このたび、megurihealthlab.site を全面リニューアルしました。
新しいコンセプトは「AI保健室」です。
立ち止まる1時間が、来月の1日をつくる。
忙しいな、ちょっと苦しいな、と感じたら。元・保健室の先生が、AIで仕事の流れを整えます。
この記事では、リニューアルした理由と、どのAIを、どの工程で、どう使ったかをまとめます。AIを仕事に取り入れたいけれど、どこから手をつければいいか分からない方の参考になればうれしいです。
この記事で分かること
- リニューアルした理由と、新しいコンセプト「AI保健室」
- 新しいサイトの見どころ
- 使ったAIと、それぞれの役割
- 方向決めから公開までの作り方（8ステップ）
- AIに任せなかったこと
なぜリニューアルしたのか
以前のサイトには、2つの違和感がありました。
- 写真がAIっぽかった。AIで作ったモデル写真を使っていて、私自身でもなく、見た人に「この人に相談したい」と思ってもらえる写真ではありませんでした。
- 今の私の言葉になっていなかった。仕事をしながら、どんな方と一緒に、どんなふうに働きたいかが少しずつ見えてきました。前のサイトは、その思いをまだ言葉にできていませんでした。
最初はトップ画面（ファーストビュー）だけを作り直すつもりでした。ところが、トップが変わると、その下のページとの差が気になってくる。結局、サイト全体を新しいトップに合わせて整えることにしました。
新しいコンセプト「AI保健室」
私は看護師・養護教諭（保健室の先生）として6年間、現場で働いてきました。
保健室は、具合が悪くなってから駆け込む場所であると同時に、「ちょっとしんどいな」というときに立ち寄れる場所でもあります。少し休んで、整えて、また教室に戻っていく。
仕事も同じだと思っています。忙しいときほど、手を止めて流れを見直す時間がとれない。でも、そこで1時間立ち止まって業務を整えれば、来月の1日が浮くかもしれない。急がば回れ、です。
その「立ち寄れる場所」を、AIとWebでつくりたい。そう考えて、名前を「AI保健室」にしました。
新しいサイトの見どころ
| 場所 | 変わったところ |
|---|---|
| トップ画面 | 静止画3枚の切り替えと、スクロールに合わせて写真が散らばり、整っていく動き。手書き文字入り |
| サービス | 4つのサービス（Web制作・リール動画・SNS運用・AI活用）を、くるくる回る立方体で紹介 |
| 制作実績 | スクロールすると、実績のカードが1枚ずつ重なっていく見せ方 |
| 料金 | 写真つきのカード。PCはマウスを乗せると、スマホは画面の中央に来ると説明が出る |
| ブログ | 学校の「ほけんだより」をモチーフに、手書き風の題字 |
| サイト全体 | フォント・色・余白をトップにそろえ、下層ページまで同じ空気に |
スマホで見られることを前提に、スマホファーストで作っています。ぜひスマホでもご覧ください。
使ったAI
| AI | 使った工程 | 役割 |
|---|---|---|
| Claude Code（Anthropic） | 方向決め・デザイン案・コピー・コーディング・WordPress化 | 制作パートナー。相談しながら一緒に作る |
| ChatGPT（画像生成） | トップ・サービス・制作実績・料金の写真 | 撮影担当。人物なしの静物写真を生成 |
Claude Code は、パソコンのファイルを直接読み書きしながら作業してくれるAIです。チャットで相談するだけでなく、デザインの試作ページを作り、修正し、WordPressのテーマファイルまで仕上げてくれます。
ChatGPT には、写真の生成だけをお願いしました。プロンプト（指示文）は、Claude Code と一緒に作っています。
作り方：8つのステップ
ステップ1：参考サイトを集めて、「好き」を言葉にする
まず、好きだと感じるサイトをいくつか集めて、Claude Code に見せました。
「どこが好きか」を自分でうまく説明できなくても、AIに「このサイトのどこが良いと感じますか？」と聞かれながら答えていくと、だんだん言葉になります。
- 写真が主役で、左右に白い余白がある
- 押す場所がはっきりしている
- 水彩のような、やわらかい色づかい
こうして「好き」を分解してから、届けたい人と照らし合わせて方向を決めました。
ステップ2：デザインボードで方向性を固める
いきなり作り始めるのではなく、Claude Code にデザインボード（方向性をまとめた1枚のページ）を作ってもらいました。フォント、色、コピー、レイアウトの案が1ページで見比べられます。
ここで「AI保健室」という軸が生まれ、ブログを「ほけんだより」にする案も出ました。
ステップ3：試作して、壊して、作り直す
最初の試作は、3Dの表現ができる Three.js という技術で、スクロールに合わせて写真が3D空間に散らばる動きを作りました。
動きは気に入ったのですが、フォントと色が「なんか違う」。そこで方向性を見直し、より軽いCSSの3D表現で作り直しました。
AIと作ると、試作を捨てるハードルが下がります。1から作り直しても数時間なので、「ちょっと違う」を我慢せずに済みました。
ステップ4：コピーを決める
キャッチコピーは、Claude Code に何案も出してもらい、「急がば回れを連想させる言葉で」「忙しいとき・苦しいときに立ち寄れる場所というニュアンスで」と注文を重ねて絞り込みました。
決まったのがこちらです。
- 見出し：立ち止まる1時間が、来月の1日をつくる。
- リード：忙しいな、ちょっと苦しいな、と感じたら。元・保健室の先生が、AIで仕事の流れを整えます。
- 最後の画面：その1時間を、AI保健室で。
最終的に選ぶのは自分です。AIの案はあくまで材料として使いました。
ステップ5：写真をAIで作る（ChatGPT）
写真は、人物を写さない静物写真にしました。聴診器とノートパソコン、保健室の窓辺など、「元看護師が、いまはパソコンで仕事をしている」と伝わるものです。
AIっぽさを出さないために、プロンプトで細かくルールを決めました。
- 光は「午前10時ごろ、左の窓から入る、白いカーテン越しの自然光」
- 色は白が7割、木が2割、差し色にミント・レモン・コーラルを少しだけ
- 青く光る脳やロボットなど、いわゆる「AIっぽい絵」は禁止
- 同じチャットで順番に作り、光と色味をそろえる
この「共通ルール」を最初に決めておいたおかげで、あとからサービス・制作実績・料金の写真を追加したときも、トップと同じ空気でそろえられました。
スマホ用の正方形の画像は、横長の写真から切り抜くスクリプトも Claude Code に作ってもらいました。
ステップ6：手書き文字は、自分で書く
トップ画面には、私の手書き文字を入れています。ここはAIに任せず、自分で書いたものを取り込みました。
全部をAIで作ると、どうしても「誰が作っても同じ」になります。一か所だけでも本人の手が入ると、ページの温度が変わると感じました。
ステップ7：トップに合わせて、サイト全体を整える
トップができてから、ほかのセクションと下層ページをそろえていきました。
- フォント・色・余白をトップと同じルールに統一
- 「誰に、何を届けるか」に合わせて、サイト全体の文章を書き直し
- お客さま向けではない説明は思い切って削除
- 料金カードは、いくつかの見せ方を試作して比べてから決定
文章の書き直しでは、「この一文はお客さまのためのものか、自分の頭の整理のためのものか」をAIと一緒に仕分けました。自分で書いた文章ほど削るのが難しいので、ここは第三者の目として役に立ちました。
ステップ8：WordPressに組み込んで公開
最後に、完成したデザインをWordPressのテーマに組み込みました。
- 元のテーマはそのまま残し、コピーした新しいテーマで作業（いつでも戻せるように）
- 公開前に、本番のライブプレビューでスマホとPCの両方を確認
- 動きの多いページなので、「動きを減らす」設定の端末では控えめに表示
ファイルの分け方から手順書まで、Claude Code が用意してくれました。
AIに任せなかったこと
| 任せなかったこと | 理由 |
|---|---|
| 方向性・コピーの最終決定 | 「誰に、何を届けるか」は自分にしか決められない |
| 手書き文字 | 本人の手がいちばん伝わる部分だから |
| 写真の採用・不採用 | 「AIっぽい」と感じるかどうかは、人の目で判断する |
| 料金 | 金額は自分の仕事の価値の判断だから |
| 公開前の確認 | 実際の画面で、スマホとPCの両方を自分で見る |
AIは、手を動かす部分をとても速くしてくれます。そのぶん、「決める」ことに時間を使えるようになったのが、今回いちばんの収穫でした。
おわりに
今回のリニューアルは、私自身が「AIと一緒に仕事を整える」ことを実際にやってみた記録でもあります。
「AIを仕事に取り入れたいけれど、何から始めればいいか分からない」
「ホームページやSNSを見直したいけれど、忙しくて手が回らない」
そんなときは、ぜひAI保健室に立ち寄ってください。
その1時間を、AI保健室で。
公開日：2026年10月8日
