小林メディカルクリニック東京
自費オンライン相談ページ

小林メディカルクリニック東京の公式サイトに、自費のオンライン相談（自律神経症状・便秘・更年期症状）の案内ページを3つ追加する案件です。内容・料金・受診の流れを分かりやすく伝え、そのまま予約へ進めること、既存サイトのデザインになじませること、3ページを同じ品質でそろえることを目標にしました。

3ページとも同じセクション構成にしました。ページごとに変えるのは文言・料金・医師の紹介だけで、レイアウトとスタイルは共通です。

1. ファーストビュー相談名と「自費診療」「スマホで完結」「1回15分」などの要点
2. チェック「こんな症状でお困りではありませんか」で対象となる方を示す
3. 概要・メニュー担当医と相談できる内容
4. 流れアプリ登録 → 予約 → オンライン相談の3ステップ
5. 料金税込の相談料と、別途かかる費用の内訳
6. お問い合わせ予約への導線

便秘ページのCSSは、自律神経ページのCSSと比べて、背景の透かし文字を指定する1行だけが異なります。更年期ページも自律神経ページのCSSを読み込んでおり、追加のスタイルは医師2名を並べるための約1KBだけです。

• 既存テーマに固定ページ用のPHPテンプレートを追加し、共通のヘッダー・フッター・パンくずをそのまま使いました。
• ページ専用のCSS・JavaScriptは対象のページだけで読み込み、bodyクラスで範囲を限定して、既存のスタイルと衝突しないようにしました。
• PCとスマートフォンのグローバルナビに「オンライン診療」のメニューを追加し、トップページの診療案内にも導線のブロックを追加しました。
• スマートフォンのメニューで「オンライン診療」を開閉できるようにしました（変更前にサーバー上のファイルをバックアップ）。
• 下書きの段階で、ログインしていない状態ではページが見えないことを確認してから公開しました。
• 公開前に、プレビュー用のURL（Cloudflare Pages）でクリニックに内容を確認してもらいました。

• PC（1440px）とスマートフォン（390px）で、ヘッダー・フッター・パンくず・メニュー・料金・予約の文言・画像の欠け・横スクロールを確認しました。
• 作業したAIとは別のAIでも確認を行い、ページのtitleとdescriptionが二重に出力されるおそれを見つけて、出力を1か所にまとめました。
• 公開直後の確認で見つけたスマートフォンの表示崩れを、同日中に修正しました。
• 私がスクリーンショットで指示した微調整を8回行いました（お問い合わせボタン下の余白、メニューの「（自費）」の前での改行など）。

• 相談料は「11,000円（税込）」のように税込で表示しました。
• 別途かかる費用（情報通信機器の運用に係る実費、アプリ使用料）は、表で項目ごとに示しました。
• 自費診療であることを、見出し・ファーストビュー・料金・お問い合わせの各所で明記しました。
• 診察の結果によって保険診療に切り替わる場合があることを記載しました。
• 症状の説明は「〜が関係している場合があります」という表現にとどめ、効果や改善を約束する文言は入れていません。
• 担当医の氏名を明記しました。

2026年10月13日時点の公開ページです。

ページの構成とビジュアルのデザイン、AIへの作業指示、コードと画面のレビュー、スクリーンショットでの微調整の指示（8回）、公開の判断は私が行いました。コーディングと、プレビューの公開・WordPressの下書き作成・ファイルのアップロード・メニューの設定はAIが行い、品質確認は作業したAIとは別のAIでも行っています。クリニックとの連絡も私が担当しました。

この分担は、記録が残っている自律神経症状・便秘の2ページのものです。

• 自律神経症状・便秘の2ページを7月27日に公開し、同じ構成の更年期症状ページも7月28日に公開されました（プレビュー公開から4日）。3ページとも現在公開中です。
• GA4では、公開（2026年7月27日）から10月14日までに、3ページ合計で285回の表示、182人の閲覧がありました。予約数は手元にありません。

次に改善したいこと：

• PCのファーストビューと固定ヘッダーの余白を調整する
• スマートフォンの見出しの改行位置を整える

業務で制作したページです。社外秘の情報は掲載していません。料金は2026年10月13日時点の表示です。