GROUNDWORK FOR STUDIO
白紙の Studio から、
始めなくていい。
SHITAJI は、Studio で本格的にデザインを始める前の「下地」をつくるツールです。 HTML/CSS のサイトを Studio のネイティブ要素として流し込みます。 Figma の作り直しも、生成AIが書いたコードの手直しも要りません。デザインの判断は、そこから先——
Studio の中で。
招待制で提供中 ／ フリープランは月3ページまで無料 ／ カード登録不要
流れているのは、生成AIが書いた架空ブランドのサイトです。SHITAJI は、これらを Studio へ写します。
CONCEPT
「下地（SHITAJI）」に
込めた想い
下地とは、絵具をのせるために先に塗っておく層のことです。完成した絵には映りません。 SHITAJI がやっているのは、まさにそれです。本格的なデザインは、あくまで Studio の中で—— その手前にある、誰がやっても同じ結果になる工程だけを引き受けます。
SHITAJI だけではサイトを公開できません。これは足りていないのではなく、 そう決めています。キャンバスは Studio のもので、SHITAJI はそこに塗る下地です。
完成した絵に、下地は映らない
下地は、絵を決めない
絵具の「のり」をよくする
SAMPLE
このサイトたち、
AIが書きました。
生成AIが書いたコードは、よくできた下書きです。ただ、そのままでは Studio に持ち込めません。 SHITAJI が下地を整えて、Studio のキャンバスへ写します。 並んでいるのは架空ブランドのサイト——すべて生成AIが実際に書いたものです。
※ いずれも説明のための架空ブランドです。実在の団体・サービスとは関係ありません。
HOW IT WORKS
3ステップで、Studio に入ります
デザインデータの作り直しも、1要素ずつのコピーもありません。画像はすべて実際の画面です。
サイトをインポートする
生成AIやコーディングで作った HTML/CSS のファイルを選ぶだけ。Studio で崩れる書き方は、読み込みの時点で検出して自動で書き直します。何をどう直したかは、すべてレポートに並びます。
サイトを Studio 用に書き出す
「Studio用に書き出す」を押すと、Studio が正しく解釈できる書き方かを検査してから書き出します。リンク切れや共通パーツの検出など、気をつける点もこのとき一覧になります。
書き出したサイトを Studio に追加する
Chrome 拡張がサイトを受け取り、Studio のデザイン画面へ1ページずつ追加します。画像として貼り付くのではなく、テキスト・ボックス・画像といった Studio のネイティブ要素になるので、入れたあとも普通に編集できます。
ここまでが、SHITAJI の担当範囲です。1ページ試してみる（無料）
DESIGN SYSTEM
直すのは、文字と色だけ。
デザインはそのまま。
読み込んだサイトの手直しは、付属のエディタでできます。できるのは文字の書き換え、選んだ文字の書体・大きさ・色、写真の差し替えとリンク先——それだけです。
レイアウトを組み替える機能は置いていません。 読み込んだデザインをそのまま Studio へ写すことが目的なので、 途中で形を変えられる余地を作らないほうが、結果が読めます。 作り込みは Studio の中で、思いのままに。
FEATURES
Studio のために作られています
汎用のサイトビルダーではありません。Studio の実機で確かめた仕様にもとづいて、「Studio に正しく入ること」だけを目的に設計しています。 入ったあとをどう作るかは、Studio の仕事です。
生成AIとの相性を最優先に設計
Figma を経由しない
入ったあとも編集できる
リストやループBOXなどの各種パーツにも対応
レスポンシブも一緒に運ばれる
手直しとトンマナ調整はエディタで
消しても戻せる・いつでも持ち出せる
CAPABILITIES
いま、できること。
まだ、できないこと。
対応表は、盛らずに書きます。ここに載っているのはすべて 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 の標準の部品だけでできている、ということでもあります。
WHAT WE DON'T DO
SHITAJI が、やらないこと
下地は、絵の代わりにはなりません。できることを増やすより、担当範囲をはっきりさせることを選んでいます。
デザインの良し悪しを決めません
サイトを公開しません
Studio の機能を置き換えません
抜け出せなくしません
DOCUMENT
サービス資料を用意しています
機能・料金・導入の流れをまとめた資料（PDF・4ページ）です。社内での検討や共有にお使いください。
USE CASES
こんな方に使われています
生成AIでサイトを作っている方
制作会社・フリーランス
テンプレートを量産したい方
PRICING
制作した分だけの、わかりやすい料金
プランは毎月「クレジット」を付与します。1クレジット=ページ1枚の作成（マーケットのテンプレート購入にも1クレジットでつかえます）。 編集は何度でも無料・毎月1日にリセット。作った量に比例するので、費用が読めます。
表示価格は税込です。年払いは12ヶ月分の一括請求（スターター ¥15,360/年・スタンダード ¥41,760/年・プロ ¥101,760/年）。 プランの変更・解約はマイページからいつでも行えます。
SUPPORT
小さなチームだから、近いサポートを
招待制で提供している今は、利用者の声がそのまま開発に届く距離感を大切にしています。
開発チームが直接対応
サポート窓口の先にいるのは、このツールを作っている本人たちです。ご要望・不具合報告は開発の優先順位に直結します。
導入のご相談
制作フローのどこに組み込めるか、チームでの使い方など、導入前のご相談はお問い合わせフォームからどうぞ。
FAQ
よくある質問
Studio の公式サービスですか？
いいえ。SHITAJI は Studio 株式会社の公式サービスではなく、独立した制作支援ツールです。Studio のご利用にあたっては、Studio 社の利用規約をご確認ください。
Studio に入れたあと、編集はどこまでできますか？
取り込んだ要素は Studio のネイティブ要素（テキスト・ボックス・画像など）になるため、Studio の通常の操作でそのまま編集できます。画像として貼り付く方式ではありません。
生成AIが作った HTML/CSS はどこまで対応していますか？
静的な HTML/CSS を対象に、Studio で崩れる書き方を自動修復して取り込みます。JavaScript による動的な挙動（スライダー等）は対象外ですが、ループBOX・動的リスト・埋め込み・Lottie など Studio 側のパーツで表現できるものは対応しています。
料金の「クレジット」とはなんですか？
プランが毎月付与する利用枠です。1クレジットでページを1枚作成（追加・複製・読み込み）でき、マーケットのテンプレート購入にも1クレジットでつかえます（マーケットの購入・出品はスタータープラン以上）。作成後の編集は何度でも無料で、毎月1日にリセットされます。ページを削除しても、その月の消費は戻りません。★Chrome拡張との連携に使う「トークン」とは別物です（そちらは拡張をプロジェクトにつなぐための鍵で、枚数は消費しません）。
無料で試せますか？
はい。フリープラン（月3ページまで）は無料で、クレジットカードの登録も不要です。有料プランは月払いのほか、少しお得な年払いも選べます。
保存容量には何が含まれますか？
サイトの中身に加えて、埋め込んだ画像と、編集のたびに自動で残る履歴が容量を使います。写真を多く使うサイトでは、ページ数より先に容量の上限に届くことがあります。上限に達しても、いま保存されているものが消えたり読めなくなったりすることはありません（容量が増える保存だけをお断りします）。画像を減らすなどして小さくする保存はいつでも通ります。
アップロードしたデータはどう扱われますか？
変換処理は専用サーバー上で行い、処理に使った HTML/CSS の内容はログに残しません。またスクリプトの混入は取り込み時に自動で除去します。なお、アップロードされた画像は推測されにくいアドレスの公開URLで保存されます（Studio へ書き出す際にはページへ埋め込む形に変換されます）。公開前のサイトの画像も、URLを知っている人には見えるためご注意ください。詳しくはプライバシーポリシーをご覧ください。
既存の Studio プロジェクトにも追加できますか？
はい。Chrome 拡張は開いている Studio の編集画面へページ単位で追加する方式なので、新規プロジェクトにも既存プロジェクトにも使えます。
なぜ招待制なのですか？
サポートの品質を保つためです。取り込みがうまくいかないときに実際に検証してお答えできる人数を超えないよう、お申し込みいただいた方から順にご案内しています。申し込みは無料で、5営業日以内にご連絡します。
GET STARTED
下地は、こちらで。
デザインは、Studio で。
まずは1ページ、白紙ではない状態から始めてみてください。 お申し込みは1分で完了・クレジットカードの登録は不要です。 内容を確認のうえ、ログイン用のご案内をお送りします。