新規プロジェクトの作り方〜Studioに取り込むまで
約4分・プロジェクトを作り、Studio用に書き出して、コピー＆貼り付けでStudioに取り込むまでの一通り。
SHITAJIは、生成AIで作ったHTML/CSSを、崩さずStudioへ写す道具です。ここでは、プロジェクトを 新しく作ってから、コピー＆貼り付けでStudioに取り込むまでを一通り説明します。
始め方を選ぶ
「HTML / CSS ファイルを読み込む」「フォルダを読み込む」「自分のAIで作る（ベータ）」から選びます。 手元に生成AIで作ったファイルがあれば「HTML / CSS ファイルを読み込む」、 まだ何も無ければ「自分のAIで作る」で、お使いのAIに下書きを作ってもらえます。読み込むだけならクレジットは減りませんので、まず画面で見てから進められます （減るのは「Studio用に書き出す」でページを書き出したときです）。
まず操作に慣れたいときは、マイページの「はじめてガイド」から「サンプルで最初のプロジェクトを作る」を押すと、用意されたサンプルがそのまま読み込まれます （このサンプルは書き出してもクレジットを消費しません・1回だけ）。 登録前にお試しで読み込んだページがあれば、 同じブラウザなら選択肢の一番上に「お試しの続きから始める」が出て、そのまま引き継げます。
「どこから始めますか？」の選択肢
エディタで文字・画像・リンク先を直す
SHITAJIは「崩さず写すこと」に一点集中したツールなので、編集できるのは文字・書体／大きさ／色・画像・リンク先だけです。レイアウトを組み替える必要はありません （それはStudioに入ってからの仕事です）。直すところがなければ、このステップは飛ばして構いません。
「Studio用に書き出す」を押して、ページを選ぶ
画面右上の「Studio用に書き出す」を押すと、まず「書き出すページを選ぶ」画面が出ます。 Studioへ反映したいページにチェックを入れて進めてください。クレジットを使うのは「未書き出し」のページだけで、 書き出したあとに直したページ（変更あり）や、もう一度コピーしたいだけのページ（書き出し済み）は無料です。 何枚使うかは、画面の下に合計で出ます。
「書き出すページを選ぶ」＝クレジットを使うのはここ
選んだページは、Studioで崩れない形かどうかを自動で確かめたうえで、「Studio に取り込む」画面にまとめて出ます。内容を変えたら、そのたびに書き出し直してください。
コピーしてStudioに貼り付ける
「Studio に取り込む」画面で、ページの行の「コピー」を押します（「準備しています…」の行は、そのまま少し待つと押せるようになります）。 次にStudioで追加先のページを開き、貼り付け先（Base など）を選んでから ⌘V（Windowsは Ctrl+V）を押します。 画像として貼り付くのではなく、テキスト・ボックス・画像といったStudioのネイティブ要素になるので、入れたあとも普通に編集できます。 ページが複数あるときは、1ページずつ「コピー」→Studioで貼り付け、を繰り返します。
ページごとの「コピー」を押して、Studioで⌘V
読み込んだあとに「注意」が出たときは
Studioで見え方が変わりそうなところがあると、読み込んだ直後に短いお知らせか「取り込み結果」の画面が出ます。 そのまま進めても構いませんし、「AIに直してもらう指示文をコピー」でお使いのAIに直してもらうこともできます。 詳しくは サイトを読み込む の「読み込んだあとに出る知らせ」をご覧ください。
コピー＆貼り付けがうまくいかないときは
- Chrome などのブラウザで開いているか… コピーは、Chrome などのブラウザでSHITAJIを開いたときに使えます。
- Studioで貼り付け先を選んでいるか… 追加先のページを開き、貼り付け先（Base など）を選んでから ⌘V（Windowsは Ctrl+V）を押します。
- 書き出してから時間が経っていないか… 「書き出しから時間が経ちました」と出たら、もう一度「Studio用に書き出す」を押してからコピーします。
- 貼り付けた内容があとから消える… ページの作りが複雑すぎる可能性があります。部品の入れ子を減らすか、ページを分けてください （→ 注意が出たときの直し方）。 それでも解決しないときは、画面右下の「相談する」からお知らせください。