8. ホームページビルダー
8. ホームページビルダー
対象: 院長、病院管理者(Owner / Admin)
目的
病院紹介、医療スタッフ、診療科目、アクセス、予約申請など患者が見る公開ランディングページをAIベースで自動生成し、サイドバーで直接編集・公開します。
別途デザイン/開発なしに雰囲気 → 色 → 強み3つだけ選択すれば1ページの病院ホームページが作られ、左サイドバーのドラッグ&ドロップで医療スタッフ/診療科目/特徴/FAQの順序を変更できます。
8.1 ホームページビルダーに入る
病院ページ左サイドバー追加機能 → ホームページメニューをクリックします。

上部にはホームページ共通設定があります。この組織のすべてのホームページに同じように適用される項目です。
| 項目 | 説明 |
|---|---|
| ホームページアドレス | 公開サイトが使用するサブドメイン(例:www6.your-domain) — 一度決めるとすべてのページが共有 |
| ホームページ表示用電話番号 | 空欄にすると病院情報の代表電話番号がそのまま使用されます |
| ホームページ表示用住所 | 空欄にすると病院情報の住所がそのまま使用されます |
| ロゴ / ファビコン | ヘッダーロゴとブラウザタブアイコン。既存に運営中のサイトURLを入力すると候補を自動的に取り込みます(ベータ) |
💡 共通設定が先です。 ページを複数作成できますが、アドレス・電話・ロゴは組織全体で1セットのみ維持されます。
8.2 新しいホームページを作る — 3つだけ選べば完了
**「新しいホームページ」**ボタンを押すとウィザードが開きます。

1. 雰囲気(Vibe)
ページ全体のトーンを決定します。
- 温かい — 柔らかいベージュ/クリームトーン。家庭医学・小児青少年・女性クリニックによく合います。
- モダン — ライトグレー。すっきりして基本に忠実なトーン。
- プロフェッショナル — 清涼な空色。一般医・検診センターに適しています。
- ラグジュアリー — 濃いチャコール。皮膚/美容・プレミアムラインのトーン。
2. 色(Primary Color)
ボタン・強調カラーとして使用されます。事前定義された8種類(空・ティール・緑・ネイビー・紫・金色・グレー・ダークグレー)以外にカスタムを選んでヘックスコードを入力することもできます。
3. 強み(Strengths) — 最大6個
診療/サービスの特徴を6個まで選びます。
- 最新設備・自費診療の明確化・専門医療スタッフ・親切な相談・アクセスの良さ・合理的な費用
- 迅速な予約・夜間診療・駐車場あり・非対面相談・多言語診療・定期健康診断
- +直接入力 — 上記リストにない強みを直接追加(1つにつき1行)

3つすべてを埋めると右下の**「ホームページ生成」**ボタンが有効になります。
💡 カテゴリの自動反映: 病院情報のカテゴリ(歯科・韓方医院・産婦人科・皮膚科・眼科・整形外科・内科・小児科・耳鼻咽喉科・泌尿器科・精神健康医学科・美容外科・家庭医学科など13種)に合わせてLLMプロンプトが自動的に調整されます。同じ強みでもカテゴリに合った診療項目・画像キーワード・表現トーンが生成され、医療広告法上の注意語もカテゴリ別にフィルタリングされます。
生成には約20~40秒かかります。終わると自動的にCMS編集画面に切り替わります。
8.3 CMS編集画面 — 左サイドバー+右リアルタイムプレビュー

画面構成はシンプルです。
| エリア | 役割 |
|---|---|
| 上部 | ←出る・変更表示(変更なし/変更あり)・最初に戻す・保存・公開する |
| 左パネル | ページメタ(チャットボット・SEO)+セクション別編集項目 — アコーディオン |
| 中央パネル | リアルタイムプレビュー — セクションごとにオン/オフトグル、テキストはダブルクリックで直接編集 |
| 右ガイド | プレビューセクションと位置が同期するページ構造案内(ヒーロー → 紹介 → 医療スタッフ → …) |
よく使う操作
- 保存: 明示的に
保存ボタンを押さないと反映されません(自動保存なし)。変更があると上部に変更ありバッジが表示されます。 - 公開する: スラッグが決まった状態で押すと短い確認ダイアログ(
公開しますか?)が表示され、公開を押すとすぐに反映されます。すでに公開されているページで再度押すと非公開に戻します。 - 最初に戻す: 最後の保存時点ではなく生成直後の状態に戻します。
- AIバッジ: テキストの横に黄色い
AIバッジが表示されている項目はLLMが自動生成した文言です。直接修正するとバッジが消えます。
8.4 医療スタッフ / 診療科目 / 特徴 / FAQ — ドラッグ&ドロップで順序変更
この4つのセクションは左サイドバーで項目を追加/削除するだけでなく順序も自由に変更できます。

操作方法
- 左サイドバーで医療スタッフ / 診療科目 / 特徴 / FAQアコーディオンを開きます。
- 各項目左側の**点6個ハンドル(⋮⋮)**をマウスでつかみます。
- 上/下にドラッグすると順序が変わり、プレビューに即座に反映されます。
医療スタッフのドラッグ時の注意
医療スタッフは2箇所に表示されます。
- 上部チェックリスト — 表示可否トグル
- 下部詳細フォーム — 名前/肩書/紹介の入力
両エリアの順序は自動的に同期されます。どちら側からドラッグしても同じ結果になります。医療スタッフ別の写真スロットも一緒についてくるため、写真を再度アップロードする必要はありません。
💡 医療スタッフの追加は2つの方法: サイドバーの
+メンバー以外を追加ボタンで直接入力するか、+医療スタッフ追加で新しいスロットを作ることができます。登録されたスタッフを自動的に候補として表示することはありません(StepNoteのメンバーデータとは分離されています)。💡 デフォルト医療スタッフの自動入力: 新しいページ作成時にLLMが医療スタッフを空欄にすると、1番スロットに**組織オーナー名+カテゴリ(専攻)**が、2・3番スロットにプレースホルダーが自動的に入力されます。医療スタッフセクションが空の状態で表示されないようにするためのもので、そのままにせず本人の情報に修正してください。
8.5 プレビューから直接編集する
中央プレビューでテキストをダブルクリックするとインラインで修正できます。サイドバーの入力欄をいちいち探す必要はありません。
プレビュー各セクション右上のトグルスイッチでそのセクションを即座にオン/オフできます。オフにしたセクションは公開ページに表示されません。
画像があるスロット(ヒーロー/医療スタッフ写真/ギャラリー)はクリックしてアップロードします。アップロードした画像はスロットキー基準で保存されるため、医療スタッフの順序を変えても付いてきます。
8.6 予約パネル(Sticky Booking Bar)
生成されたすべてのページには画面下部に固定予約パネルが常に表示されます。
- ヘッダーの**「予約する」ボタン、ヒーローの「オンライン予約する」、プレビュー下部の「相談申請」**はすべて同じ予約パネルを開くように動作します — 外部URLには移動しません。
- 入力項目: 名前・連絡先・希望日・希望時間・要望事項・個人情報同意。
- 受け付けられた予約は左サイドバー追加機能 → 予約メニューで確認します。
8.7 公開とスラッグ(URL)
- 公開前にスラッグ(サブドメイン)を決める必要があります。例:
gangnam-smile - 公開URLは
https://gangnam-smile.stepnote.site形式のサブドメイン方式です。 - スラッグは一度公開されると変更しないことを推奨します(SEO・ブックマークへの影響)。
- 公開後はサイトカードの
公開済みバッジが表示され、再度公開するボタンを押すと非公開に戻せます。
💡 stepnote.siteディレクトリ:
www.stepnote.siteにアクセスすると公開された病院サイト一覧をカード形式で見ることができます。患者が直接検索して訪れることができる公開ハブです。
よくある質問
Q. AI生成結果が気に入りません。作り直せますか? A. 同じ雰囲気/色/強みの組み合わせでは1ページのみ生成されます。新しいページを作成するか、CMSでテキストを直接修正してください。最初に戻すは最後の保存ではなく生成直後の状態に戻します。
Q. 1つの組織でページを複数作れますか? A. はい、ページごとにスラッグが異なれば可能です。ただしアドレス・電話・ロゴは組織単位の共通設定です。
Q. サイドバーに登録されたスタッフが自動的に医療スタッフの候補として表示されませんか? A. 現在は自動連携されません。CMSで直接医療スタッフを追加/入力してください。
Q. 予約はどこに入りますか? A. 左サイドバーの予約メニューで確認可能です。チャットボット予約と同じ画面です。