メむンコンテンツぞスキップ
芋出し画像

AIに意図を正確に䌝えるための“段階的プロンプト蚭蚈”ずいう手法あるく戊蚘

    管理人あるく

    AIを䜿っおWebアプリやUIを䜜るずき、 「思ったものが出おこない」「途䞭で勝手に倉えられる」 ずいう経隓をしたこずがある方は倚いず思いたす。

    その䞀方で、 意図どおりのUIをほが毎回再珟できる人もいたす。

    䞡者の違いは䜕か
    私が行き぀いたその答えが “段階的プロンプト蚭蚈” ずいう手法です。

    この蚘事では、 AIに意図を正確に䌝え、再珟性の高いアりトプットを埗るための 「最適なプロンプトの刻み方」を䜓系化しお玹介したす。

    ■ なぜ段階的に䌝える必芁があるのか

    AIは倧量の情報を䞀床に枡されるず、 「どれを優先すべきか」を刀断しきれず、 意図がブレるこずがありたす。

    特にUIのように、

    • レむアりト

    • 挙動

    • 導線

    • デザむン

    • PC/スマホの差分

    • 犁止事項

    など耇数の芁玠が絡む堎合、 䞀気に䌝えるず誀解が起きやすくなりたす。

    そこで有効なのが 段階的に䌝える手法です。

    ■ 最初に「段階的に䌝えたす」ず宣蚀する

    段階的プロンプト蚭蚈の最初のステップは、 AIに察しお「これから段階的に情報を枡したす」ず宣蚀するこずです。

    これからUI仕様を段階的に䌝えおいきたす。
以䞋の順番で情報を枡すので、各ステップは“郚分的な仕様”ずしお理解しおください。

1. 目的・意図
2. レむアりト構造ワむダヌフレヌム
3. 挙動動き
4. 導線の意味UX
5. デザむンの固定倀
6. 犁止事項
7. 最終統合Markdown仕様曞ワむダヌフレヌム補足

ステップ7で最終仕様が確定したす。
それたでは「ただ仕様は確定しおいない状態」ずしお認識しおください。

    この宣蚀を入れるこずで、 AIは「段階的孊習モヌド」に入り、 途䞭で勝手に仕様を確定したり、䜙蚈なUIを远加するのを防ぐ効果がありたす。

    ■ 最適な刻み方5〜7ステップ

    Step 1目的・意図を䌝える

    たずは「なぜそのUIを䜜るのか」を䌝えたす。

    • 導線を垞に芋える䜍眮に眮きたい

    • PC版では芖線移動を枛らしたい

    • スマホ版では瞊䞊びが自然

    • 今回はStep導線を䜿わない

    AIは「意図」を理解するず、 構造や挙動を勝手に倉えなくなりたす。

    Step 2レむアりト構造を䌝える

    ここでワむダヌフレヌムレむアりト構造を画像で枡すず最匷です。

    文章よりも画像のほうが、

    • カラム幅

    • 䜙癜

    • 導線の䜍眮

    • スクロヌル領域

    • 芖線の流れ

    AIには䌝わりやすかったりするからです。
    画像は専甚アプリで描くのが掚奚されるずは思いたすが、パワポで基本図圢を組み合わせた簡単な説明画像でもわりず䌝わりたす。

    Step 3挙動動きを䌝える

    構造ず挙動を混ぜるずAIが混乱するため、ここは分離したす。
    䟋えば以䞋のようにしたす。

    • 特定箇所だけスクロヌルできるようにする

    • ラベルの䜍眮は〇〇にする

    • フィルタ機胜を぀ける

    • キヌワヌド怜玢できるようにする

    • 導線は〇〇のようにする

    • スマホ察応レスポンシブルデザむンにする

    Step 4導線の意味UXを䌝える

    AIは「意味」を理解するず、 UIの自然さを保ったたた構築しおくれたす。
    䟋えば以䞋のようにしたす。

    • 導線は垞に芖界に入るべき

    • PC版では暪䞊びが自然

    • スマホ版では瞊䞊びが自然

    Step 5デザむンの固定倀を䌝える

    ここで初めおCSSの話になりたす。
    䟋えば以䞋のようにしたす。

    • 角䞞 12px

    • 圱 0 2px 4px rgba(0,0,0,0.06)

    • 緑 #4CAF50

    • 青 #2196F3

    • 〇〇郚分は癜薄い枠線

    AIの「デザむンの癖」を消すためのステップです。

    Step 6犁止事項を䌝える

    これを蚀わないずAIは勝手に远加したす。
    䟋えば以䞋のようにしたす。

    • 〇〇はやらない

    • 〇〇は1カラム固定

    • スマホ版では〇〇無効

    Step 7最終統合仕様曞を䞀床に枡す

    最埌に、完成した仕様を䞀床に枡したす。

    • Markdown仕様曞

    • PNGワむダヌフレヌム

    • 補足文章意図

    これが「最終仕様」ずしおAIに認識されたす。
    GeminiやChatGPTなど別々のAIでもほが同じUIが生成されたす。

    ■ この手法のメリット

    ✔ 再珟性が高い

    耇数のAIでほが同じUIが生成されたす。

    ✔ 意図が正確に䌝わる

    途䞭で勝手に最適化されるこずが枛りたす。

    ✔ UIの自然さが保たれる

    導線の意味やUXの意図が反映されたす。

    ✔ 倧芏暡なUIでも砎綻しない

    構造 → 挙動 → 意味 → デザむン → 制玄 の順で理解されるため、 耇雑なUIでも安定したす。

    ■ たずめ

    AIに意図を正確に䌝えるためには、 次の䞉点セットが最匷です。

    1. 段階的プロンプト5〜7ステップ

    2. PNGワむダヌフレヌムレむアりト画像

    3. Markdown仕様曞構造化された最終仕様

    そしお、最初に 「これから段階的に䌝えたす」ず宣蚀するこずで、 AIは仕様を章立おずしお理解し、 最終的に高い再珟性を持぀アりトプットを返しおくれたす。

    管理人あるく

    付録1FAQアプリを䜜っおもらうための仕様曞md

    # 1. 目的
ログむン認蚌に関する FAQ を
蚺断チャヌト・カテゎリ・キヌワヌド怜玢 の 3 導線で探せる Web アプリを構築する。

PC 版では導線を垞に衚瀺し、FAQ 郚分だけスクロヌルする UI を採甚する。

# 2. レむアりト仕様
■ PC版暪 2 カラム
巊カラム幅 30%

蚺断チャヌトsticky

カテゎリタブsticky

右カラム幅 70%

キヌワヌド怜玢sticky

FAQ䞀芧独立スクロヌル領域

■ スマホ版1 カラム
巊右統合しお瞊䞊び

sticky は無効化

# 3. 導線仕様3 導線
① 蚺断チャヌト巊カラム
.diag-card で囲む

ボタンは瞊䞊び

Step 導線は 封印goStep は動䜜しない or Stepタブ非衚瀺

② カテゎリタブ巊カラム #category -tabs にタブを生成

active タブは緑色

FAQ をカテゎリでフィルタ

③ キヌワヌド怜玢右カラム
PC版ではタむトルず怜玢ボックスを暪䞊び

PC版では怜玢カヌドを sticky

怜玢ボックスはコンパクトmax-width: 320px

テキストは䞭倮寄せtext-align: center

# 4. FAQ 衚瀺仕様
■ FAQデヌタ構造faqData
js
{
  id: number,
  question: string,
  answer: string,
  category: string,
  subcategory: string,
  flow_step: number,
  keywords: string[]
}
■ FAQカヌド
Q ず A のアコヌディオン圢匏

Q をクリックするず A が開閉

ID・カテゎリ・サブカテゎリ・Step を衚瀺

■ フィルタ条件
カテゎリ䞀臎

キヌワヌド䞀臎question / answer / keywords

Step は封印垞に "すべお"

# 5. PC版の特別仕様重芁
■ キヌワヌド怜玢カヌド右カラム
stickytop: 20px

暪䞊びレむアりトflex

怜玢ボックスはコンパクトmax-width: 320px

■ FAQ䞀芧
FAQだけスクロヌル領域にする

CSS:

css #faq -container {
  max-height: calc(100vh - 140px);
  overflow-y: auto;
  padding-right: 8px;
}
# 6. CSS仕様重芁ポむント
■ sticky
css
.left-col {
  position: sticky;
  top: 20px;
}

.filter-box.search-sticky {
  position: sticky;
  top: 20px;
  z-index: 10;
}
■ PC版怜玢導線の暪䞊び
css
.filter-box {
  display: flex;
  align-items: center;
  gap: 16px;
}
 #search -box {
  flex: none;
  max-width: 320px;
  text-align: center;
}
■ FAQスクロヌル領域
css #faq -container {
  max-height: calc(100vh - 140px);
  overflow-y: auto;
}
# 7. JS仕様重芁ポむント
■ 初期化
js
renderDiagnosis();
renderCategoryTabs();
renderFAQ();
■ Step 封印
js
// Stepタブは描画しない
// goStep は䜕もしない
function goStep(step) { return; }
■ FAQフィルタ
js
const filtered = faqData.filter(item => {
  const matchCategory = currentCategory === "すべお" || item.category === currentCategory;
  const matchKeyword = item.question.toLowerCase().includes(keyword)
    || item.answer.toLowerCase().includes(keyword)
    || item.keywords.join(" ").toLowerCase().includes(keyword);
  return matchCategory && matchKeyword;
});
# 8. HTML構造必須
■ 巊カラム
蚺断チャヌト

カテゎリタブ

■ 右カラム
キヌワヌド怜玢search-sticky

FAQ䞀芧

# 9. 最終 UI の特城再珟性の芁点
導線が垞に芋えるsticky

FAQだけスクロヌルする

PC版は暪䞊び、スマホは瞊䞊び

怜玢ボックスはコンパクト䞭倮寄せ

Step 導線は封印

FAQはカテゎリ怜玢で絞り蟌み


    付録2Geminiに䜜っおもらったシングルファむルHTMLのコヌド

    <!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ログむン認蚌 FAQ</title>
  <style>
    /* ==========================================
       ベヌススタむル & リセット
       ========================================== */
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
      line-height: 1.6;
      color: #333 ;
      background-color: #f4f7f6 ;
      padding: 20px;
    }

    /* アプリ党䜓コンテナ */
    .app-container {
      max-width: 1200px;
      margin: 0 auto;
      display: flex;
      gap: 24px;
      align-items: flex-start;
    }

    /* コンポヌネント甚カヌド共通 */
    .card {
      background: #fff ;
      border-radius: 8px;
      padding: 16px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
      margin-bottom: 16px;
    }

    .card h2, .card h3 {
      font-size: 1.1rem;
      margin-bottom: 12px;
      color: #2c3e50 ;
      border-bottom: 2px solid #eef2f5 ;
      padding-bottom: 6px;
    }

    /* ==========================================
       巊カラムPC版 30%
       ========================================== */
    .left-col {
      flex: 0 0 30%;
      position: sticky;
      top: 20px;
    }

    /* ① 蚺断チャヌト */
    .diag-card {
      background: #fff ;
      border-radius: 8px;
      padding: 16px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
      margin-bottom: 16px;
    }

    .diag-card .diag-buttons {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .diag-btn {
      padding: 10px 12px;
      background-color: #e9ecef ;
      border: 1px solid #ced4da ;
      border-radius: 6px;
      cursor: pointer;
      text-align: left;
      font-size: 0.9rem;
      transition: background-color 0.2s, border-color 0.2s;
    }

    .diag-btn:hover {
      background-color: #dee2e6 ;
      border-color: #adb5bd ;
    }

    /* ② カテゎリタブ */
    #category -tabs {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .category-tab {
      padding: 10px 14px;
      border: 1px solid #ced4da ;
      border-radius: 6px;
      background-color: #fff ;
      cursor: pointer;
      font-weight: bold;
      font-size: 0.9rem;
      text-align: left;
      transition: all 0.2s;
    }

    .category-tab:hover {
      background-color: #f8f9fa ;
    }

    /* active タブは緑色 */
    .category-tab.active {
      background-color: #28a745 ;
      color: #fff ;
      border-color: #28a745 ;
    }

    /* ==========================================
       右カラムPC版 70%
       ========================================== */
    .right-col {
      flex: 0 0 70%;
      min-width: 0; /* Flex箇所のあふれ防止 */
    }

    /* ③ キヌワヌド怜玢search-sticky */
    .filter-box.search-sticky {
      position: sticky;
      top: 20px;
      z-index: 10;
    }

    .filter-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      background: #fff ;
      border-radius: 8px;
      padding: 16px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
      margin-bottom: 16px;
    }

    .filter-box h2 {
      margin-bottom: 0;
      border-bottom: none;
      padding-bottom: 0;
      white-space: nowrap;
    }

    #search -box {
      flex: none;
      width: 100%;
      max-width: 320px;
      padding: 8px 12px;
      border: 1px solid #ced4da ;
      border-radius: 6px;
      font-size: 0.95rem;
      text-align: center;
      outline: none;
    }

    #search -box:focus {
      border-color: #28a745 ;
      box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.25);
    }

    /* FAQ䞀芧独立スクロヌル領域 */
    #faq -container {
      max-height: calc(100vh - 140px);
      overflow-y: auto;
      padding-right: 8px;
    }

    /* カスタムスクロヌルバヌWebkit */
    #faq -container::-webkit-scrollbar {
      width: 6px;
    }
    #faq -container::-webkit-scrollbar-thumb {
      background-color: #ccc ;
      border-radius: 3px;
    }

    /* ==========================================
       FAQカヌド & アコヌディオン
       ========================================== */
    .faq-item {
      background: #fff ;
      border: 1px solid #e0e0e0 ;
      border-radius: 6px;
      margin-bottom: 12px;
      overflow: hidden;
      box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    }

    .faq-header {
      padding: 14px 16px;
      background-color: #fff ;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      user-select: none;
      font-weight: bold;
      color: #1a252f ;
      transition: background-color 0.2s;
    }

    .faq-header:hover {
      background-color: #f8f9fa ;
    }

    .faq-question {
      display: flex;
      align-items: center;
      gap: 8px;
      padding-right: 12px;
    }

    .faq-q-badge {
      color: #28a745 ;
      font-weight: bold;
      font-size: 1.1rem;
    }

    .faq-toggle-icon {
      font-size: 0.8rem;
      transition: transform 0.3s ease;
      color: #6c757d ;
    }

    .faq-item.open .faq-toggle-icon {
      transform: rotate(180deg);
    }

    .faq-body {
      display: none;
      padding: 16px;
      border-top: 1px solid #eef2f5 ;
      background-color: #fafbfc ;
    }

    .faq-item.open .faq-body {
      display: block;
    }

    .faq-answer {
      margin-bottom: 12px;
      line-height: 1.7;
    }

    /* FAQメタデヌタ */
    .faq-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      font-size: 0.75rem;
    }

    .badge {
      padding: 2px 8px;
      border-radius: 4px;
      background-color: #e9ecef ;
      color: #495057 ;
    }

    .badge-id {
      background-color: #6c757d ;
      color: #fff ;
    }

    .badge-cat {
      background-color: #e3f2fd ;
      color: #0d47a1 ;
    }

    .badge-subcat {
      background-color: #e8f5e9 ;
      color: #1b5e20 ;
    }

    .badge-step {
      background-color: #fff3e0 ;
      color: #e65100 ;
    }

    .no-faq {
      text-align: center;
      padding: 32px;
      color: #6c757d ;
      background: #fff ;
      border-radius: 8px;
    }

    /* ==========================================
       スマホ版 レスポンシブ (1カラム)
       ========================================== */
    @media (max-width: 768px) {
      .app-container {
        flex-direction: column;
        gap: 0;
      }

      .left-col,
      .right-col {
        flex: 1 1 100%;
        width: 100%;
      }

      /* sticky を無効化 */
      .left-col,
      .filter-box.search-sticky {
        position: static;
      }

      /* 怜玢カヌドのレむアりト倉曎 */
      .filter-box {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
      }

      #search -box {
        max-width: 100%;
      }

      /* スクロヌル制限を解陀しお画面党䜓でスクロヌル */
      #faq -container {
        max-height: none;
        overflow-y: visible;
        padding-right: 0;
      }
    }
  </style>
</head>
<body>

  <div class="app-container">
    <!-- ■ 巊カラム幅 30% -->
    <div class="left-col">
      <!-- ① 蚺断チャヌト -->
      <div class="diag-card">
        <h3>お困りごずの蚺断</h3>
        <div class="diag-buttons" id="diag-buttons-container">
          <!-- JSで動的にボタン生成 -->
        </div>
      </div>

      <!-- ② カテゎリタブ -->
      <div class="card">
        <h3>カテゎリ</h3>
        <div id="category-tabs">
          <!-- JSで動的にタブ生成 -->
        </div>
      </div>
    </div>

    <!-- ■ 右カラム幅 70% -->
    <div class="right-col">
      <!-- ③ キヌワヌド怜玢 (sticky) -->
      <div class="filter-box search-sticky">
        <h2>ログむンFAQ怜玢</h2>
        <input type="text" id="search-box" placeholder="キヌワヌドを入力䟋: パスワヌド" oninput="handleSearch()">
      </div>

      <!-- FAQ䞀芧 (独立スクロヌル領域) -->
      <div id="faq-container">
        <!-- JSで動的にFAQ䞀芧生成 -->
      </div>
    </div>
  </div>

  <script>
    /* ==========================================
       4. FAQデヌタ構造faqData
       ========================================== */
    const faqData = [
      {
        id: 1,
        question: "パスワヌドを忘れおログむンできたせん。",
        answer: "ログむン画面の「パスワヌドをお忘れの方はこちら」リンクをクリックし、ご登録のメヌルアドレスを入力しおリセット手続きを行っおください。",
        category: "パスワヌド",
        subcategory: "再蚭定",
        flow_step: 1,
        keywords: ["パスワヌド", "忘れた", "リセット", "再蚭定", "倉曎"]
      },
      {
        id: 2,
        question: "2段階認蚌のコヌドが届きたせん。",
        answer: "迷惑メヌルフォルダに振り分けられおいないかご確認ください。たた、SMS受信制限を蚭定しおいる堎合は解陀しおください。",
        category: "2段階認蚌",
        subcategory: "SMS・メヌル",
        flow_step: 2,
        keywords: ["2段階認蚌", "コヌド", "届かない", "SMS", "ワンタむム"]
      },
      {
        id: 3,
        question: "アカりントがロックされおしたいたした。",
        answer: "耇数回ログむンに倱敗するず安党のためアカりントが䞀時ロックされたす。30分以䞊眮いおから再詊行するか、サポヌトぞお問い合わせください。",
        category: "アカりント状態",
        subcategory: "ロック解陀",
        flow_step: 1,
        keywords: ["ロック", "凍結", "倱敗", "解陀", "ログむンできない"]
      },
      {
        id: 4,
        question: "登録したメヌルアドレスを倉曎したいです。",
        answer: "ログむン埌、マむペヌゞの「䌚員情報倉曎」から新しいメヌルアドレスぞ倉曎手続きを行っおいただけたす。",
        category: "䌚員情報",
        subcategory: "メヌル倉曎",
        flow_step: 3,
        keywords: ["メヌルアドレス", "倉曎", "登録情報", "マむペヌゞ"]
      },
      {
        id: 5,
        question: "「セッションが切れたした」ず衚瀺されたす。",
        answer: "䞀定時間操䜜がない堎合に衚瀺されたす。お手数ですが、再床ログむン画面よりログむンし盎しおください。",
        category: "゚ラヌ察応",
        subcategory: "セッション゚ラヌ",
        flow_step: 2,
        keywords: ["セッション", "期限切れ", "タむムアりト", "゚ラヌ"]
      }
    ];

    // 蚺断チャヌト甚簡易質問デヌタ
    const diagnosisOptions = [
      { label: "🔑 パスワヌドが分からない", category: "パスワヌド" },
      { label: "📱 認蚌コヌドが届かない", category: "2段階認蚌" },
      { label: "🔒 アカりントがロックされた", category: "アカりント状態" },
      { label: "⚠ ゚ラヌ画面が衚瀺される", category: "゚ラヌ察応" }
    ];

    /* ==========================================
       状態管理 (State)
       ========================================== */
    let currentCategory = "すべお";
    let searchKeyword = "";

    /* ==========================================
       7. JS仕様
       ========================================== */

    // Step 封印goStep は䜕もしない仕様芁件
    function goStep(step) {
      return;
    }

    // ① 蚺断チャヌトの描画
    function renderDiagnosis() {
      const container = document.getElementById("diag-buttons-container");
      container.innerHTML = "";

      diagnosisOptions.forEach(opt => {
        const btn = document.createElement("button");
        btn.className = "diag-btn";
        btn.textContent = opt.label;
        btn.onclick = () => {
          // 遞択したカテゎリぞ切り替え
          selectCategory(opt.category);
        };
        container.appendChild(btn);
      });
    }

    // ② カテゎリタブの描画
    function renderCategoryTabs() {
      const container = document.getElementById("category-tabs");
      container.innerHTML = "";

      // 重耇なしのカテゎリリスト生成 ("すべお" を先頭に付䞎)
      const categories = ["すべお", ...new Set(faqData.map(item => item.category))];

      categories.forEach(cat => {
        const tab = document.createElement("button");
        tab.className = `category-tab ${cat === currentCategory ? 'active' : ''}`;
        tab.textContent = cat;
        tab.onclick = () => selectCategory(cat);
        container.appendChild(tab);
      });
    }

    // カテゎリ遞択凊理
    function selectCategory(cat) {
      currentCategory = cat;
      renderCategoryTabs();
      renderFAQ();
    }

    // ③ キヌワヌド怜玢ハンドラ
    function handleSearch() {
      const input = document.getElementById("search-box");
      searchKeyword = input.value.trim().toLowerCase();
      renderFAQ();
    }

    // FAQ䞀芧の描画およびフィルタリング
    function renderFAQ() {
      const container = document.getElementById("faq-container");
      container.innerHTML = "";

      // 仕様に基づいたフィルタ条件Stepは封印し、垞に党件察象
      const filtered = faqData.filter(item => {
        const matchCategory = currentCategory === "すべお" || item.category === currentCategory;
        const matchKeyword = item.question.toLowerCase().includes(searchKeyword)
          || item.answer.toLowerCase().includes(searchKeyword)
          || item.keywords.join(" ").toLowerCase().includes(searchKeyword);
        return matchCategory && matchKeyword;
      });

      if (filtered.length === 0) {
        container.innerHTML = '<div class="no-faq">該圓するFAQは芋぀かりたせんでした。</div>';
        return;
      }

      filtered.forEach(item => {
        const itemEl = document.createElement("div");
        itemEl.className = "faq-item";

        itemEl.innerHTML = `
          <div class="faq-header" onclick="toggleAccordion(this)">
            <div class="faq-question">
              <span class="faq-q-badge">Q.</span>
              <span>${escapeHtml(item.question)}</span>
            </div>
            <span class="faq-toggle-icon">▌</span>
          </div>
          <div class="faq-body">
            <div class="faq-answer">${escapeHtml(item.answer)}</div>
            <div class="faq-meta">
              <span class="badge badge-id">ID: ${item.id}</span>
              <span class="badge badge-cat">カテゎリ: ${escapeHtml(item.category)}</span>
              <span class="badge badge-subcat">サブ: ${escapeHtml(item.subcategory)}</span>
              <span class="badge badge-step">Step: ${item.flow_step}</span>
            </div>
          </div>
        `;

        container.appendChild(itemEl);
      });
    }

    // アコヌディオン開閉制埡
    function toggleAccordion(headerEl) {
      const faqItem = headerEl.parentElement;
      faqItem.classList.toggle("open");
    }

    // ゚スケヌプ凊理 (XSS察策)
    function escapeHtml(str) {
      return str
        .replace(/&/g, "&amp;")
        .replace(/</g, "&lt;")
        .replace(/>/g, "&gt;")
        .replace(/"/g, "&quot;")
        .replace(/'/g, "&#039;");
    }

    // 初期化 (仕様芁件)
    window.addEventListener("DOMContentLoaded", () => {
      renderDiagnosis();
      renderCategoryTabs();
      renderFAQ();
    });
  </script>
</body>
</html>

    この蚘事が参加しおいる募集

     
     

    管理人あるく

     
     
    組織改善を構造で敎理する人管理人あるく AIず共創しながら、人ずチヌムの“気づき”を芋える化するこずを探求䞭。 心理的安党性・組織颚土・組織文化などを構造的に敎理し、組織改善の共通OSっぜいものを䜜りたい。 オリゞナルモラヌルサヌベむサヌビス「MPB」の開発に挑戊䞭🔥

    あなたぞのおすすめ