GROUNDWORK FOR STUDIO
白紙の Studio から、
始めなくていい。
AIが書いた HTML/CSS を、Studio のネイティブ要素としてそのまま流し込むツールです。 Figma の作り直しも、AIが生成したベースのサイトの模写も要りません。デザインの判断は、そこから先——
Studio の中で。
フリープランは月3ページまで無料 ／ カード登録不要 ／ 編集はパソコンのブラウザで
SAMPLE
このサイトたち、
AIが書きました。
AIが書いたコードは、よくできた下書きです。ただ、そのままでは Studio に持ち込めません。 SHITAJI が下地を整えて、Studio のキャンバスへ写します。 流れているのは、SHITAJIテンプレートに実際に出品されているテンプレートです。
流れているのは、SHITAJIテンプレートに実際に出品中のテンプレートです。SHITAJI は、これらを Studio へレイアウトを崩すことなく写します。
※ いずれも説明のための架空ブランドです。実在の団体・サービスとは関係ありません。
HOW IT WORKS
3ステップで、Studio に入ります
デザインデータの作り直しも、1要素ずつのコピーもありません。画像はすべて実際の画面です。
サイトをインポートする
AIやコーディングで作った HTML/CSS のファイルを選ぶだけ。Studio で崩れる書き方は、読み込みの時点で検出して自動で書き直します。何をどう直したかは、すべてレポートに並びます。
サイトを Studio 用に書き出す
「Studio用に書き出す」を押すと、Studio が正しく解釈できる書き方かを検査してから書き出します。リンク切れや共通パーツの検出など、気をつける点もこのとき一覧になります。
コピーして Studio に貼り付ける
「コピー」を押して、Studio 側で ⌘V（Windows は Ctrl+V）を押すだけ。画像として貼り付くのではなく、テキスト・ボックス・画像といった Studio のネイティブ要素になるので、入れたあとも普通に編集できます（Chrome 拡張を使う経路も引き続きご利用いただけます）。
HOW IT WORKS
3ステップで、Studio に入ります。
読み込む
AIやコーディングで作った HTML/CSS を選ぶだけ。崩れる書き方はその場で自動修復します。
書き出し＆変換
Studio が正しく解釈できるか自動検査してから、サーバー側で Studio のネイティブ要素へ変換します。
追加する
「コピー」→ Studio 側で ⌘V（Windows は Ctrl+V）。ボックス・テキスト・画像として編集できる状態で入ります。
※ 変換はサーバー側で実行されます（お使いのブラウザが処理するわけではありません）。
PARTS
ボタンやリンクも、
コピーするだけで揃います。
Webサイト作成の最小単位の部品です。気に入ったものの「コピー」を押すだけで、 そのまま Studio に⌘V（Windowsは Ctrl+V）で貼り付けられます。会員登録は不要です。
CAPABILITIES
Studio のために作られています
汎用のサイトビルダーではありません。Studio の仕様に合わせて、「Studio に正しく入ること」だけを目的に設計しています。 入ったあとをどう作るかは、Studio の仕事です。
直すのは、文字と色だけ。
デザインはそのまま。
読み込んだサイトの手直しは、付属のエディタでできます。
SHITAJI で直せる
- 文字の書き換え
- 選んだ文字の書体・大きさ・色
- 写真の差し替え
- リンク先
レイアウトを組み替える機能は置いていません。 読み込んだデザインをそのまま Studio へ写すことが目的なので、 途中で形を変えられる余地を作らないほうが、結果が読めます。
Studio で決める
- レイアウトの組み替え・余白
- 新しい要素の追加
- 見せ方・演出の作り込み
- 公開・独自ドメイン
そこから先の作り込みは Studio の中で、思いのままに。
1つずつ直す必要はありません。見出し・本文といったまとまりごとに、 色と書体をまとめて変えられます。試した結果が気に入らなければ、編集履歴から選ぶだけで、その時点まで戻せます。
取り込みの対応表も、盛らずに書きます。ここに載っているのはすべて Studio の実機で確認できたことだけ—— できないことには、理由を添えて。
いま、できること
レイアウト全般
ボックス・入れ子・横並び。CSS Grid の多列レイアウトも横並びに変換します。
テキスト・画像・リンク
太字やリンク入りの文章も、Studio のリッチテキストとして入ります。
動画・埋め込み・Lottie
動画、YouTube・Google マップの埋め込み、Lottie アニメーションを対応する Studio パーツへ。
アイコン・SVG
Material Symbols と Font Awesome の主要アイコン。インライン SVG は画像化して保全します。
ホバー・出現アニメーション
ホバーの変化、表示時のアニメーション、スクロール連動を Studio の設定として写します。
レスポンシブ
PC・タブレット・モバイルの差分を検出し、Studio のブレークポイントへ。
リスト・ループ・開閉
繰り返しは Studio のリスト機能へ、無限スクロールはループBOXへ、FAQ の開閉はトグルへ。
フォーム
入力欄・選択肢・送信ボタンを本物の Studio フォーム部品に。投稿の収集まで動きます。
まだ、できないこと（開くと理由が出ます）
JavaScript の動きを、そのまま持ち込むこと
取り込みの対象は静的な HTML/CSS です。開閉・無限スクロール・フォームなど、Studio の部品として表現できる動きは変換の対象にしていますが、それ以外の JS の挙動は対象外です。
スライダー（カルーセル）
自動で組み立てる対象には含めていません。順番に流れる見せ方をご希望の場合は、ループBOX（無限スクロール）をお使いいただけます。
タブ切り替え
入れたあとにきちんと編集できる状態でお渡しできると判断できたものだけを対応の対象にしています。タブ切り替えは現在その基準に届いていないため、見送っています。
表（テーブル）の列揃え
行ごとの横並びまでが対応範囲で、列の幅をぴったり揃えることは対象にしていません。列を揃えたい表は、幅を固定したカードの並びとして組み直すのが確実です。
※ 対応の範囲は、入れたあとにきちんと編集できることを基準に決めています。だからこそ、 SHITAJI が入れたものは Studio の標準の部品だけでできている、ということでもあります。
USE CASES
こんな方に向いています
AIでサイトを作っている方
制作会社・フリーランス
テンプレートを量産したい方
CONCEPT
下地（SHITAJI）に
込めた想い
下地とは、絵具をのせるために先に塗っておく層のことです。完成した絵には映りません。 SHITAJI がやっているのは、まさにそれです。本格的なデザインは、あくまで Studio の中で—— その手前にある、誰がやっても同じ結果になる工程だけを引き受けます。
SHITAJI だけではサイトを公開できません。これは足りていないのではなく、 そう決めています。キャンバスは Studio のもので、SHITAJI はそこに塗る下地です。
完成した絵に、下地は映らない
下地は、絵を決めない
絵具の「のり」をよくする
サイトを公開しません
Studio の機能を置き換えません
抜け出せなくしません
※ できることを増やすより、担当範囲をはっきりさせることを選んでいます。
HOW TO START
SHITAJI への取り込み方は、3つ
どれを選んでも、そのあとは同じです。Studio で崩れない形に自動で整えてから、 あなたの Studio へ写します。
自分のファイル / フォルダ
自分のAIで作る
無料でお使いいただけます（お使いのAIに貼り付けて使います）。
DOCUMENT
サービス資料を用意しています
機能・料金・導入の流れをまとめた資料（PDF・13ページ）です。社内での検討や共有にお使いください。
PRICING
制作した分だけの、わかりやすい料金
プランは毎月「クレジット」を付与します。1クレジット=ページ1枚の書き出し。読み込んで確かめるだけなら無料です。 編集は何度でも無料・毎月1日にリセット。作った量に比例するので、費用が読めます。
フリー
まず試したい方に
- ページ書き出し
- 3 枚/月
- クレジット繰越
- なし
- 保存容量
- 100MB
- プロジェクト数
- 3 件まで
- バージョン履歴
- 10 件保持
- 自分のAIで作る
- 3回/日
- WebGL埋め込みの表記
- あり
- サポート対応
- 通常
スターター
個人サイト・小さな制作に
- ページ書き出し
- 10 枚/月
- クレジット繰越
- 翌月まで
- 保存容量
- 300MB
- プロジェクト数
- 10 件まで
- バージョン履歴
- 20 件保持
- 自分のAIで作る
- 10回/日
- WebGL埋め込みの表記
- なし
- サポート対応
- 通常
スタンダード
本格的な制作・複数案件に
- ページ書き出し
- 30 枚/月
- クレジット繰越
- 翌月まで
- 保存容量
- 1GB
- プロジェクト数
- 30 件まで
- バージョン履歴
- 50 件保持
- 自分のAIで作る
- 30回/日
- WebGL埋め込みの表記
- なし
- サポート対応
- 優先
プロ
制作会社・量産体制に
- ページ書き出し
- 100 枚/月
- クレジット繰越
- 翌月まで
- 保存容量
- 5GB
- プロジェクト数
- 無制限
- バージョン履歴
- 100 件保持
- 自分のAIで作る
- 100回/日
- WebGL埋め込みの表記
- なし
- サポート対応
- 優先
単発1枚プラン
今月ぶんを使い切ったときに、ページ1枚ぶんだけ買い足せます。 プランの変更は不要で、買い切りです。 購入後48時間以内に1回だけご利用いただけます。
表示価格は税込です。年払いは12ヶ月分の一括請求（スターター ¥9,960/年・スタンダード ¥30,360/年・プロ ¥71,160/年）。 プランの変更・解約はマイページからいつでも行えます。
SUPPORT
小さなチームだから、近いサポートを
小さなチームで運営しているからこそ、利用者の声がそのまま開発に届く距離感を大切にしています。
開発チームが直接対応
サポート窓口の先にいるのは、このツールを作っている本人たちです。ご要望・不具合報告は開発の優先順位に直結します。
MEDIA
ノーコード制作のTIPSを、
発信しています。
Studio の使い方や、AIを使ったWeb制作のコツを、開発チームが記事にしています。 SHITAJI を使わない方にも役立つ内容です。
ノーコードサイトの問い合わせフォーム、通知メールが届かない・迷惑メールに入る原因
ノーコードサイトの問い合わせフォームで、送信は完了しているのに通知メールが届かない・迷惑メールフォルダに入ってしまうことがあります。よくある原因と、確認・対処のしかたを整理します。
Studioで公開したサイトがGoogle検索に出てこないときに確認すること
Studioでサイトを公開したのに、Googleで検索しても出てこない——そんなときに確認したいポイントを、公式ヘルプの情報にもとづいて整理します。noindex設定や反映までの時間の目安も解説します。
Studioのボックス入れ子構造には階層上限がある——11階層を目安に、深くなりすぎない工夫
Studioのボックス入れ子構造には、公式に案内されている階層の上限があります。複雑なデザインほど気づかないうちに深くなりがちで、保存できずにデータが消えることも。仕組みと防ぎ方を整理します。
FAQ
よくある質問
Studio の公式サービスですか？
いいえ。SHITAJI は Studio 株式会社の公式サービスではなく、独立した制作支援ツールです。Studio のご利用にあたっては、Studio 社の利用規約をご確認ください。
Studio に入れたあと、編集はどこまでできますか？
取り込んだ要素は Studio のネイティブ要素（テキスト・ボックス・画像など）になるため、Studio の通常の操作でそのまま編集できます。画像として貼り付く方式ではありません。
AIが作った HTML/CSS はどこまで対応していますか？
静的な HTML/CSS を対象に、Studio で崩れる書き方を自動修復して取り込みます。JavaScript による動的な挙動（スライダー等）は対象外ですが、ループBOX・動的リスト・埋め込み・Lottie など Studio 側のパーツで表現できるものは対応しています。
料金の「クレジット」とはなんですか？
プランが毎月付与する利用枠です。1クレジットでページを1枚、Studio に取り込めます。サイトを読み込むだけならクレジットは減りません——できあがりを確認して「Studio用に書き出す」を押したときに、はじめて消費します（気に入らなければ、読み込み直しも作り直しも無料です）。SHITAJIテンプレートの下地テンプレートは誰でも無料でプロジェクトにできます（クレジットは消費しません）。AIでページを作る場合は、できあがった時点で消費します。編集は何度でも無料で、毎月1日にリセットされます。一度書き出したページを読み込み直すと、新しいページとして数えます。Chrome拡張との連携に使う「トークン」とは別物です（そちらは拡張をプロジェクトにつなぐための鍵で、枚数は消費しません）。
無料で試せますか？
はい。フリープラン（月3ページまで）は無料で、クレジットカードの登録も不要です。有料プランは月払いのほか、少しお得な年払いも選べます。
保存容量には何が含まれますか？
サイトの中身に加えて、埋め込んだ画像、編集のたびに自動で残る履歴、「Studio用に書き出す」で作られる書き出し内容が容量を使います。写真を多く使うサイトでは、ページ数より先に容量の上限に届くことがあります。上限に達しても、いま保存されているものが消えたり読めなくなったりすることはありません（容量が増える保存だけをお断りします）。画像を減らすなどして小さくする保存はいつでも通ります。
アップロードしたデータはどう扱われますか？
変換処理は専用サーバー上で行い、処理に使った HTML/CSS の内容はログに残しません。またスクリプトの混入は取り込み時に自動で除去します。なお、アップロードされた画像は推測されにくいアドレスの公開URLで保存されます（Studio へ書き出す際にはページへ埋め込む形に変換されます）。公開前のサイトの画像も、URLを知っている人には見えるためご注意ください。詳しくはプライバシーポリシーをご覧ください。
既存の Studio プロジェクトにも追加できますか？
はい。コピー＆貼り付け（⌘V、Windows は Ctrl+V）も Chrome 拡張も、開いている Studio の編集画面へページ単位で追加する方式なので、新規プロジェクトにも既存プロジェクトにも使えます。