サイトを読み込む（ファイル／フォルダ）

新規プロジェクトを作るときに、どちらかを選びます

HTML / CSS ファイルを読み込む… HTML と CSS のファイルだけを選びます。 1枚もののページや、画像をすべて外部URLで指定しているサイトはこちらで十分です。

フォルダを読み込む… ページのファイルが入ったフォルダをまるごと選びます。画像フォルダがある場合や、複数ページで構成されている場合はこちらを選んでください。 画像が正しく表示され、ページ同士のリンクもつながります。

1回の読み込みで扱えるファイルは60個までです。作れるページの数は ご利用のプランの上限にもよります（→ クレジットの数え方）。

読み込めない・白紙になることがあるもの

SHITAJI は見た目をそのまま写すツールで、ボタンを押したときの動き・ 切り替え・アニメーションといったJavaScript による見た目づくりは再現できません。

Tailwind CSS だけで作られたサイトはそのまま読み込めます。クラス名から自動でスタイルを組み立てるので、手書きのCSSと同じように扱えます （CDN版のTailwind（<script src="…tailwindcss.com">）を そのまま使ったファイルでも大丈夫です）。問題になるのはTailwind自体ではなく、React・Vue・Next.js などの「フレームワーク」の方です。

React・Vue・Next.js などで作られたサイトは、ファイルの中身が最初は「箱」だけで、 文字や画像はブラウザで開いたときにプログラムが組み立てます。 そのファイルをそのまま渡しても中身が空なので、SHITAJI は読み込む前に見つけてお知らせします。 この場合は、次の手順で読み込んでください：

1. そのサイトをブラウザで開く（開発中の自分のサイトなら、手元で表示した状態でよい）
2. ブラウザのメニューから「名前を付けて保存」→ 保存形式は「ウェブページ、完全」を選ぶ（Chromeの場合）。 同じ名前の .html ファイルと、 画像などが入った _files フォルダの2つができます
3. その2つ（HTMLファイルと _files フォルダ）を新しいフォルダ1つにまとめて入れ、SHITAJIの「フォルダを読み込む」でそのフォルダを選ぶ （フォルダを読み込むときは、フォルダを1つだけ選べます）

一方、スライド形式のプレゼンテーション（reveal.js等で作られたもの）は この検知に引っかからず、読み込み自体は成功したのに画面が真っ白になることがあります。スライドの中身はJavaScriptが動いて初めて1枚ずつ表示される作りのためです。 心当たりがある場合は、表示したい1枚だけを普通のページとして作り直してから読み込んでください。

読み込むと、Studio で崩れてしまう書き方を見つけて、直せるものは自動で書き直します。 そのうえで、残った点の重さによって出るものが変わります。

• 気になる点が無い… 何も出ずに、そのままエディタに入ります。
• Studioで見え方が少し変わる点だけ… 画面の下に「取り込みました。Studioで見え方が変わる点がN件あります」と短く出ます。 見たいときだけ「確認する」を押してください。
• Studioで保存できない・大きく崩れるおそれがある… 「取り込み結果」の画面が開きます （例: 部品の入れ子が深すぎる、デザインの指定が別ファイルのままで入っていない）。

「取り込み結果」には、自動で直した内容（押すと開く「直したところ」）、自動で直せなかったところ、 Studioでは見え方が変わるところが並び、その下の「次にできること」から選べます。

• このまま読み込む… 読み込みはもう済んでいます。直さずに進めても構いません。崩れた箇所は Studio に貼り付けたあとで直せます。
• AIに直してもらう… 「AIに直してもらう指示文をコピー」を押し、ChatGPT・Gemini・Claude など お使いのAIのチャットに貼り付けます。返ってきたHTMLを、同じ画面の欄に貼って「貼り付けた内容から直す」を押すと、 このページが直した内容に差し替わります（追加の費用はかかりません）。 スマホ・タブレットの表示に対応していないページでは、「スマホ・タブレットでも崩れないようにする（レスポンシブ対応）」に チェックを入れると、その直しも一緒に頼めます。ページが大きいときは「AIに渡すHTMLをダウンロード」が出るので、 指示文と一緒にそのファイルをAIへ添付してください。
• 元のHTMLを直して読み込み直す… ページ一覧の「⋮」→「HTML/CSSファイルから取り込む」で、このページを差し替えられます。

あとから見直したいときは、エディタ上部の「チェックポイント」の印を押すと、いまのページを確かめ直した結果が開きます （ここからも「AIに直してもらう指示文をコピー」が使えます。詳しくは 注意が出たときの直し方）。 Studioに入れたときの見え方は、上部の「Studio取込イメージ」に切り替えると、PC・タブレット・スマホの幅で確かめられます。

文字・書体・大きさ・色・画像・リンク先を直せます。どこまで直せるかはエディタで直せること・直せないことをご覧ください。直したら「Studio用に書き出す」を押して、コピー＆貼り付け（⌘V、Windowsは Ctrl+V）で Studio に追加します。

読み込んだだけではクレジットを使いません。できあがりを画面で確かめて「Studio用に書き出す」を押したときに、 そのとき初めてページの数だけ消費します（3ページのサイトなら3クレジット）。 書き出す前なら、気に入らなければ何度読み込み直しても無料です。 ただし、一度書き出したページに読み込み直すと新しいページとして扱われ、次の書き出しでもう1クレジット使います （そのときは確認が出ます。→ クレジットの数え方）。