新規プロジェクトの作り方〜Studioに取り込むまで
約4分・プロジェクトを作り、Studio用に書き出して、コピー＆貼り付けでStudioに取り込むまでの一通り。
SHITAJIは、生成AIで作ったHTML/CSSを、崩さずStudioへ写す道具です。ここでは、プロジェクトを 新しく作ってから、コピー＆貼り付けでStudioに取り込むまでを一通り説明します。
始め方を選ぶ
「HTML / CSS ファイルを読み込む」「フォルダを読み込む」「サンプルで試す」 「自分のAIで作る（ベータ）」の4択です。 はじめての方はサンプルで試すのがおすすめです。ダウンロードは要りません。読み込むだけならクレジットは減りませんので、 まず画面で見てから進められます（減るのは「Studio用に書き出す」を押したときです）。 手元に生成AIで作ったファイルがあれば、そのまま「HTML / CSS ファイルを読み込む」を選んでも構いません。
はじめては「サンプルで試す」がおすすめ
エディタで文字・画像・リンク先を直す
SHITAJIは「崩さず写すこと」に一点集中したツールなので、編集できるのは文字・書体／大きさ／色・画像・リンク先だけです。レイアウトを組み替える必要はありません （それはStudioに入ってからの仕事です）。直すところがなければ、このステップは飛ばして構いません。
「Studio用に書き出す」を押す
上部ツールバーの「Studio用に書き出す」を押します。全ページを検査し、 Studioで崩れない形かどうかを自動でチェックしたうえで、結果を「Studio に取り込む」モーダルにまとめて表示します。内容を変えたら、そのたびに書き出し直してください（押すたびにやり直します）。
「Studio に取り込む」モーダルの1手順目
コピーしてStudioに貼り付ける
同じモーダルの中で「変換する」→「コピー」を押します。あとはStudio側の編集画面をクリックしてから ⌘V（Windowsは Ctrl+V）を押すだけです。画像として貼り付くのではなく、 テキスト・ボックス・画像といったStudioのネイティブ要素になるので、入れたあとも普通に編集できます。
「変換する」→「コピー」＝2・3手順目
コピー＆貼り付けがうまくいかないときは
同じモーダルからChrome拡張「SHITAGAKI」を使う経路も選べます。クリップボードを介さずに Studioへ送るので、コピー＆貼り付けの逃げ道として使えますが、拡張のインストールと、 プロジェクトごとのトークンの発行・管理がひと手間増えます （トークンは他人に知られると代わりに使われてしまうため、忘れずコピーし、共有しないでください）。 具体的な操作は SHITAGAKI（Chrome拡張）の使い方 で、 トークンの再発行は トークンの再発行 で解説しています。