引き継ぎ — ドキュメント整形プロンプト集
// HANDOVER PROMPTS — wanchance.com 用 HTML整形ルール / 最終更新: 2026-05-14
運用中 このページは「AIに頼んでドキュメント整形してもらうとき」のテンプレ。 そのまま貼ればフォーマット崩れない
使い方: 別タブで Claude / GPT に内容を投げるとき、 このページのプロンプトをまるごとコピーして「以下の文章を整形して」と続けて投げる。 wanchance.com の
mikyun-doc スタイルにそのまま貼れる完成HTMLが返ってくる。
プロンプト 1.1 — 引き継ぎ文章作成スクリプト
以下の文章または HTML 断片を、 「WordPress のカスタム HTML ブロックにそのまま貼れる完成HTML」に変換してください。
最重要: 余計な装飾は不要。 とにかく読みやすさ最優先で。 ブログ記事ではなく、 ドキュメントページとして整えてください。
// 必須ルール
■ 全体構造
- 出力は
<section class="mikyun-doc">から開始する <style>を必ず内包する- 外部CSSや外部JSは使わない
- そのまま WordPress に貼って完成する状態にする
■ デザイン
- 背景はすべて透明
- 白背景は禁止
- 枠線・余白・文字サイズだけで読みやすくする
- ダークテーマでもライトテーマでも読める配色にする
- 本文は 14px 基準、 行間はやや広め
- 装飾過多にしない
■ 見出しルール
- h1, h2 は使わない
- 最大でも h3 相当まで
- 見出しは以下のクラスで表現する:
.title= ページタイトル.section= 大見出し.sub= 小見出し
■ CSSルール
- すべて
.mikyun-doc配下で完結させる - WordPressテーマや Gutenberg の影響をできるだけ受けないようにする
.wp-block-group,.wp-block-columns,.wp-block-column,.wp-block-preformatted,.wp-block-tableなどで白背景が入る場合を考慮し、 必要に応じて transparent を強制する- 必要な箇所には
!importantを使ってよい (過剰指定にはしない)
■ レイアウト
- 最大幅は 1000px 以内
- 中央寄せ
- 必要なときだけ 2カラムの grid を使う
- スマホでは必ず 1カラム化する
- 表は横スクロールを許可して崩れにくくする
■ パーツ変換ルール
- 通常文は
<p> - 箇条書きは
<ul><li> - 表データは
<table> - 構成図・CLI 出力・設定断片は
<pre> - まとまりごとのブロックは
.cardで囲う - 注意事項や補足は
.noteを使ってよい - 重要項目は太字で目立たせるが、 色に頼りすぎない
■ コード・pre
- 背景透明
- 枠あり
- 等幅フォント
- 長い行は折り返しまたは横スクロールで崩れないようにする
■ 変換方針
- 元の内容は省略しない
- 意味を変えない
- 冗長なだけの重複表現は整理してよい
- 文章が長すぎる場合は、 適切に段落・カード・表へ再構成する
- コピペ元に見出しレベルの乱れがあっても、 読みやすい構造へ自動補正する
- 「いかにもAIが装飾した感」は出さない
■ 出力形式
- 完成HTMLのみ出力する
- 説明文は不要
- markdown コードフェンスは使わない
- すぐ貼り付けられる最終形だけを出す
絶対に勝手に内容を変えないでください。 表示方法を変えるのは OK。 コードを出すのではなく、 内容をよく考えて見やすいように表示してください。
// 追加指示 (見た目調整)
- 背景が白く見える原因になりやすい要素はすべて透明化する
- タイトル文字を大きくしすぎない
- もっとも大きい文字でも控えめにする
- 罫線・余白・文字サイズのバランスで見やすくする
- 視認性を保ちながら圧迫感をなくす
追加ルール — 目次・アンカー自動化
// 目次について
- 長文ページでは、 本文冒頭に目次ブロックを追加する
- 目次はページ内リンクとして機能するようにする
- 目次の見た目は本文になじむよう、 装飾を控えめにする
- 目次にも白背景は使わない
- 目次は
.cardまたは専用のシンプルな枠で表現してよい - 目次タイトルは大きくしすぎず、 本文より少し強い程度にする
// アンカーについて
- 目次の各項目は、 本文内の対応見出しへジャンプできるようにする
- 各
.sectionと必要な.subにidを付与する id名は英数字とハイフン中心で、 短く分かりやすくする- 日本語見出しをそのまま
idにせず、 壊れにくい名前へ整理する - 同名見出しがある場合は重複しないよう自動調整する
// 対象範囲
- 目次化する対象は、 原則として
.sectionと、 必要に応じて.sub - 細かすぎる項目は目次に入れすぎない
- 目次は長くなりすぎないよう整理する
- ただし元内容は省略せず、 表示構造だけ整理する
// スクロール配慮
- 固定ヘッダー等で見出しが隠れにくいよう、 アンカー位置に配慮する
- 必要なら
scroll-margin-topを使って調整してよい
// JavaScript について
- 必要な場合のみ、
<script>を HTML 内に内包してよい - 外部JS は禁止
- PHP や functions.php 編集が不要な形を優先する
- WordPress のカスタムHTMLブロックに貼るだけで動作する構成を優先する
- 既存本文を大幅に手修正しなくても使える方法を優先する
// 自動判定について
- 元文に番号付き見出し (例:
1.,2.,10.1など) がある場合、 それを見出し候補として活用してよい - ただし本文と通常文の区別を崩さないこと
- 誤検出しそうなものは無理に目次へ入れないこと
- 目次の精度よりも、 本文の可読性と安全な表示を優先すること
// 出力優先順位
- 最優先は「そのまま貼って崩れにくいこと」
- 次に「見やすいこと」
- 次に「目次リンクが自然に使えること」
- 凝った演出や過剰な自動化は不要
// 禁止事項
- 白背景の目次ボックスにしない
- 目立ちすぎる色付き装飾をしない
- 大きすぎる見出しを使わない
- WordPress テーマ依存のクラスや外部ライブラリ前提にしない
- 内容を勝手に要約・削除・改変しない
補足 — 2026-05-14 時点の標準スタイル
現在の wanchance.com は mikyun-doc という統一スタイルを使ってる。 各クラスの意味:
| クラス | 用途 |
|---|---|
.title | ページタイトル (赤下線) |
.subtitle | サブタイトル (日付・ステータスなど、 等幅フォント、 グレー) |
.section | 大見出し (黒背景・赤縦線) |
.sub | 小見出し (赤、 // SUBHEAD 風) |
.phase | フェーズ見出し (黄色背景、 進行段階表示用) |
.badge | ステータスバッジ (緑=完了、 .todo は橙) |
.note / .danger / .success | 情報枠 / 警告枠 / 完了枠 |
.ascii | 構成図用 (黒背景、 等幅、 黄色文字) |
.check (+ .x / .w) | 緑✓ / 赤✗ / 橙! のミニチェック印 |
運用 Tips: 1191 (R640 WireGuard剥がし) を参考ページとして手元に置いとくと、 新ページ作るときに「あの書き方どうだっけ」が即解決。