← 使い方ガイド
生成AIに、崩れにくいサイトを作ってもらうコツ
約2分・ChatGPT・Claude・Geminiなどにサイトを作ってもらう前に貼り付ける指示文。コピーしてそのまま使えます。
ChatGPT・Claude・Gemini などの生成AIチャットに、サイトの内容を伝える前にこの指示文を 一緒に貼り付けると、取り込んだときに崩れやすい書き方をあらかじめ避けて作ってくれます。SHITAJI で読み込む前提のHTMLを作りたいときにお使いください。
1
この指示文をコピーする
そのままコピーして、生成AIチャットの一番最初のメッセージに貼り付けてください。
ヒント：ChatGPT・Gemini の「Canvas」、Claude の「Artifacts」など、コードをその場で 編集・プレビューできる機能があれば、先に有効にしてから貼り付けてください。 通常のチャット欄よりコードが壊れにくくなります。
コピーして生成AIに貼り付けてください
生成AIでWebサイトを作ってください。次のルールを必ず守ってください。
【出力】
・「トップページ」「会社概要」「お問い合わせ」のように内容ごとに複数のHTMLファイルへ分割しない。ページが複数あるように思える内容でも、すべて1つのファイルの中に、ページ内リンク（<a href="#id">であるセクションへ移動する形）で行き来する1枚の縦長ページとしてまとめる
・単一の静的HTMLファイルを1つだけ出力する（<!doctype html>から</html>まで）。ビルドや変換が要らない形にする
・<script>タグ、onclick等のon*属性、href="javascript:..."は使わない（後ですべて動かなくなります）
・コードだけを出力し、説明文やコードフェンス（```）は付けない
【レイアウト】
・中央寄せのコンテナには、max-widthだけでなくwidth:100%も必ず一緒に書く
・横並び（flex）の行の中に文字を入れるときは、その文字の要素にflex:1 1 auto; min-width:0を付ける
・複数の項目を2列以上に折り返して並べたい行は、親要素に必ずflex-wrapを付ける（子の幅を50%等の割合にしただけでは折り返さず、1行に押し込まれて文字が潰れる）
・要素の幅はcalc()のような計算式ではなく、単純な%かフラクション（w-1/2等）で指定する（計算式は変換・保存の過程で途中の画面幅の数値に固定されてしまうことがある）
・縦方向のmargin:autoは使わない
・見た目を揃えるためだけに<table>を使わない（本当の表組み以外では使わない）
【文字】
・アイコンと地の文（普通の文章）を同じ要素の中に混ぜない。<a>タグやボタンの中身も同様で、<span>アイコン</span><span>ラベル</span>のように別々の要素にする
・文章の一部分だけに背景色・枠線・パディングを付けたいときは、その部分を独立した要素として文章の外に出す
・見出し（h1〜h6）の中には文字だけを入れる。位置調整のための空の飾り要素は見出しの外に置く
・1つの文章の中で、色違いの強調を何箇所も作らない（強調したい色は1つにまとめる）
【画像・アセット】
・インラインSVGの色は、外部CSSではなくSVGタグ自身にfill="#xxxxxx" / stroke="#xxxxxx"として書く
・font-familyの先頭には、実際に<link>等で読み込んでいるWebフォントの名前を書く
・画像は実在するプレースホルダー画像サービスのURL等を使い、存在しないローカルファイルパスを書かない
【繰り返し要素】
・カード一覧などの繰り返し部分は、各アイテムの子要素の数・構成をすべて揃える（1つだけタグの数が違う、等をしない）
・項目ごとに絵柄が変わるアイコンは、アイコンフォントではなく画像（SVGの<img>など）にする
【動き】
・ホバー効果は:hoverとtransitionのCSSだけで作る
・出現アニメーションはopacity:0とtransitionの組み合わせか、@keyframesの中でtransform: translateY(...)のようにまとめて書く（translateだけを単独のプロパティとして分けて書かない）
・@keyframesを使うときは、0%（またはfrom）と100%（またはto）の両方を必ず書く（片方だけを省略しない）
・アコーディオン（開閉するFAQ等）はJSを使わず<details><summary>質問</summary>回答</details>の形で書く
・モーダル・カルーセル・スライダーなど、JSでの開閉が前提になる複雑な部品は作らない
【構造】
・<main>はページに1つだけにし、入れ子にしない。<main>自体にはclassやstyleを付けない
・内容のかたまりごとに<section>を分け、それぞれに見出し（h1〜h6）を1つ入れる
・リンクは、実際にそのページの中に存在するidや、実在するページのパスにだけ張る
2
続けて、作りたいサイトの内容を伝える
同じメッセージの下に続けて、屋号・業種・載せたい内容・雰囲気などを いつもどおり伝えてください。指示文と依頼内容は同じメッセージにまとめても、 分けて2通で送っても構いません。
3
できあがったHTMLをSHITAJIに読み込む
生成AIが出したHTMLをファイルとして保存し、「サイトを読み込む」から取り込みます。読み込み後に出る「直したところ」「まだ直っていないところ」のレポートで、 残った崩れが無いかも確認してください。
崩れを完全に無くすものではありません。生成AIの出力は毎回変わるため、指示文を守ってもらえないこともあります。 依頼内容を自分でまとめるのが面倒なときは、「自分のAIで作る」を使うと、屋号やジャンルを選ぶだけで指示文を自動で組み立ててくれます （貼り付け・貼り戻しの手順は同じです）。