← 使い方ガイド
Figmaで作ったデザインをSHITAJIで使う
約3分・プラグイン「SHITAJI for Figma」でHTMLに書き出して読み込む方法（使えない場合はスクリーンショット＋生成AIでも）。
Figmaで作ったデザインは、プラグイン「SHITAJI for Figma」でHTMLファイルに書き出し、 そのままSHITAJIに読み込めます。
1
Figmaでプラグイン「SHITAJI for Figma」を開く
書き出したいフレームを1つ選び、Figmaのメニューから 「プラグイン → SHITAJI for Figma」を開きます。フレームはオートレイアウトで組んでおいてください。座標で置いた要素は スマホの画面幅で崩れてしまいます。
2
「HTMLをダウンロード」を押す
プラグインの画面に「確認してほしい点」が出るので、目を通してからダウンロードして ください。見出しにしたい文字はレイヤー名をH1〜H6に、リンクに したい文字や箱はレイヤー名をlink:リンク先のURLにすると、 そのまま反映されます。PC版とスマホ版の2つのフレームを同時に選んで実行すると、 画面幅に応じたレイアウトとして書き出せます。
※動き（アニメーション）は書き出しの対象外です。
3
できあがったHTMLをSHITAJIに読み込む
ダウンロードしたHTMLファイルを、「サイトを読み込む」から取り込みます。Studioで見え方が変わる点があると、読み込んだ直後に短いお知らせか「取り込み結果」の画面が出ます （→ 読み込んだあとに出る知らせ）。 Figmaから書き出したHTMLは、部品の入れ子が深くなりやすく、「取り込み結果」の画面が開くことがあります。 そのときは「AIに直してもらう指示文をコピー」で、お使いのAIに入れ子を減らしてもらえます （画像が多くてページが大きいときは「AIに渡すHTMLをダウンロード」で添付します）。
プラグインが使えない場合
Figmaのファイルを直接開けない環境などでプラグインが使えないときは、Figmaのデザイン 画面をスクリーンショットで生成AI（ChatGPT・Claude・Geminiなど）に見せ、見た目を 再現したHTML/CSSを書いてもらう方法もお使いいただけます。
1
Figmaのデザイン画面をスクリーンショットで保存する
Figmaで開いている画面を、画像として保存してください。スマホ向けの画面も 別途デザインしている場合は、そちらも保存しておくと、あとで生成AIに両方渡せます。
2
この指示文をコピーし、スクリーンショットと一緒に生成AIへ貼り付ける
指示文を生成AIチャットに貼り付けたら、続けて保存したスクリーンショットも添付して 送信してください。画像を読み込める生成AI（ChatGPT・Claude・Geminiなど）であれば お使いいただけます。
ヒント：ChatGPT・Gemini の「Canvas」、Claude の「Artifacts」など、コードをその場で 編集・プレビューできる機能があれば、先に有効にしてから貼り付けてください。 通常のチャット欄よりコードが壊れにくくなります。
コピーして生成AIに貼り付けてください
Figma（またはそれに近いデザインツール）で作った画面のスクリーンショットを、続けて貼り付けます。
この画像に写っているデザインを、そのままの見た目で再現した1つの静的なWebサイト（HTML/CSS）を作ってください。
【画像の再現について】
・配置・余白・文字の大きさ・色・写真やアイコンの位置を、画像を見ながらできるだけ忠実に再現する
・画像に写っている文章・数値・写真はそのまま使い、写っていない内容を新しく作り足さない
・画像は主にパソコン向けの1つの画面幅を表しています。スマホの画面幅で見たときも文字が
潰れたりはみ出したりしないよう、要素を縦に積み直すなどしてレイアウトを自動で調整してください
（スマホ版の見た目そのものは画像に無いため、そこは判断にお任せします）
・パソコン版・スマホ版など複数の画像を渡した場合は、それぞれ対応する画面幅の見た目として扱ってください
・画像には写っていない動き（ホバー効果・アニメーションなど）は、無理に付け足さなくて構いません
・使われているフォントが分かる場合はそのフォント名を、分からない場合は近い雰囲気の代替フォントを指定してください
続けて、次の一般的な制作ルールも必ず守ってください。
生成AIでWebサイトを作ってください。次のルールを必ず守ってください。
【出力】
・「トップページ」「会社概要」「お問い合わせ」のように内容ごとに複数のHTMLファイルへ分割しない。ページが複数あるように思える内容でも、すべて1つのファイルの中に、ページ内リンク（<a href="#id">であるセクションへ移動する形）で行き来する1枚の縦長ページとしてまとめる
・単一の静的HTMLファイルを1つだけ出力する（<!doctype html>から</html>まで）。ビルドや変換が要らない形にする
・CSSはhead内の<style>タグに書き、外部ファイルにしない。CSSだけの塊とHTMLだけの塊のように、複数のコードブロックに分けて出力しない（必ず1つの<!doctype html>〜</html>にまとめる）
・CSSでvar(--変数名)の形を使うときは、使う変数をすべて:rootセレクタの中で実際の値として定義する（定義しないまま変数だけを使わない）
・<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等を使い、存在しないローカルファイルパスを書かない
・画像のURLはsrc="https://..."のようにURLの文字列だけをそのまま書く。[説明文](URL)のようなリンクの書き方をsrc属性の中に書かない
【繰り返し要素】
・カード一覧などの繰り返し部分は、各アイテムの子要素の数・構成をすべて揃える（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や、実在するページのパスにだけ張る
・見た目を変えずに済む場合は、装飾だけのための<div>の入れ子を増やさない（同じスタイルを親要素に直接指定できるなら、包むだけの要素を挟まない）。特に表（<table>）は元から入れ子が深いので、その周りをさらに何重にも<div>で包まない
3
できあがったHTMLをSHITAJIに読み込む
生成AIが出したHTMLをファイルとして保存し、「サイトを読み込む」から取り込みます。
どちらの方法も、完全に同じデザインを再現できるとは限りません。プラグイン経由でもオートレイアウトで組まれていない部分は座標のまま書き出され、 スマホの画面幅で崩れることがあります。スクリーンショット経由の場合は、文字の大きさや 細かな余白が生成AIの読み取り精度によって多少ずれることがあります。取り込んだ後はSHITAJIのエディタで文字・色・画像を直接調整できます。