SaaSくらべ

【PR】本記事にはアフィリエイトリンクが含まれます。記事内で紹介する商品・サービスを購入・契約すると、当サイトに報酬が支払われる場合があります。

公開日:2026-04-30 / 最終更新:2026-04-30 / 運営者:マヤ

【PR】本記事には運営者が提携するアフィリエイトリンクが含まれます。製品情報は公式サイトおよび公式ヘルプをもとに2026年4月時点で整理しました。料金・機能は変更される場合があるため、最終判断前に公式の最新情報を必ずご確認ください。

STUDIOの始め方｜登録から最初のサイト公開まで5ステップ【2026年版】

「Figmaでデザインは作れるが、それをコーディングしてサイトにするのが面倒」「海外のサイトビルダーは日本語フォントの選択肢が少なくて困る」。Webデザイナーや制作者がノーコードでサイトを作ろうとするとき、この2つの不満を同時に解消してくれる候補がSTUDIOです。ただし、Figma感覚で触れる反面、一般的なドラッグ&ドロップ型のサイトビルダーとは操作の考え方が異なるため、「登録したけれど何から触ればいいかわからない」で手が止まる人は少なくありません。

日本語フォントの棚が充実した国産デザイン工房——Figma感覚でサイトが組めるが、ECやブログの拡張は隣の工房(Webflow)に分がある。STUDIOはそういう立ち位置のサイトビルダーです。この記事では、アカウント登録から最初のサイトを公開するまでの全工程を5ステップに分けて案内します。

所要時間の目安は1〜2時間です。無料プランでもサイトの作成・公開は可能ですが、STUDIOのバナーが表示されURLもSTUDIOのサブドメインになります。有料プランはMini ¥590/月、Personal ¥1,190/月、Business ¥3,980/月、Business Plus ¥9,980/月(いずれも年払い時)です。

公式サイトとヘルプセンターの内容を2026年4月時点で確認しています。STUDIOは国産ツールなので日本語の公式ドキュメントが充実しており、困ったときの情報収集はしやすい環境です。

まずSTUDIOを知る

STUDIOは、日本発のノーコードWebサイトビルダーです。Figmaに近いビジュアルエディタでレイアウトを組み、リアルタイムプレビューを見ながらサイトを構築できます。日本語UIが完全対応しており、ダッシュボードからエディタまですべて日本語で操作できます。

日本語フォントのラインナップが豊富で、Noto Sans JP、Noto Serif JP、M PLUS 1p、M PLUS Rounded 1cなどのGoogle Fonts日本語フォントに加え、STUDIO独自の日本語フォントも利用可能です。LP、コーポレートサイト、ポートフォリオなど、日本語中心のサイト制作で力を発揮します。

STUDIOの料金・機能・強み弱みを詳しく知りたい方は、STUDIO 徹底レビュー記事をご覧ください。この記事では「登録してから最初のサイトを公開するまで」に絞って進めます。

登録までに揃えるもの

クレジットカードは無料プランでは不要です。Googleアカウントでのサインアップにも対応しています。

Step 1: 無料アカウント作成

まず STUDIO公式サイト にアクセスし、「無料で始める」ボタンからアカウントを作成します。メールアドレスとパスワードを入力するか、Googleアカウントでサインアップしてください。

登録後、ダッシュボードが表示されます。STUDIOでは「プロジェクト」という単位でサイトを管理します。ダッシュボード上の「新しいプロジェクト」からサイト作成を始めます。

UIはすべて日本語表記です。海外製のサイトビルダーで英語UIに不安がある人でも、メニューやヘルプの理解に困ることはありません。アカウント作成は即時完了し、承認審査はありません。

Step 2: テンプレート選択・ダッシュボード設定

「新しいプロジェクト」をクリックすると、テンプレートの一覧が表示されます。カテゴリ(コーポレート、ポートフォリオ、LP、イベントなど)で絞り込めます。

テンプレートの選び方
STUDIOのテンプレートは日本語で作られたものが多く、海外製のビルダーのように英語テキストを日本語に差し替える手間が少ないのが特徴です。気になるテンプレートをクリックしてプレビューを確認し、「このテンプレートを使う」でプロジェクトが作成されます。

空白から始める場合
テンプレートを使わず「空白のプロジェクト」から始めることもできます。Figmaなどでデザインカンプがある場合は、空白プロジェクトで0からレイアウトを組むほうが自由度が高いです。

プロジェクトの基本設定
ダッシュボードの「プロジェクト設定」から、サイト名、ファビコン、OGP画像(SNSシェア時に表示される画像)を設定しておいてください。あとから変更可能ですが、公開前に済ませておくと手戻りが少なくなります。

Step 3: ビジュアルエディタでデザイン編集

テンプレートを選択するとビジュアルエディタが開きます。画面中央にページのプレビュー、左側にレイヤーパネル、右側にスタイルパネルが配置されています。

ボックスモデルの理解
STUDIOのエディタはHTMLのボックスモデル(Flexbox)の概念で構成されています。要素をボックスとして配置し、横並び・縦並び・余白・整列をスタイルパネルで制御します。Figmaの「Auto Layout」に似た操作感なので、Figmaを使ったことがある人なら馴染みやすいはずです。

テキストの編集
テキスト要素をダブルクリックすると直接書き換えられます。フォントの変更は右側のスタイルパネルから行います。日本語フォントは「日本語」カテゴリで絞り込めるので、Noto Sans JP、M PLUS 1pなどを選んでください。

画像の差し替え
画像要素をクリックし、スタイルパネルの「画像」から手元のファイルをアップロードするか、Unsplash連携で無料画像を検索・挿入できます。画像のフィット方法(Cover / Contain)やオブジェクトポジション(表示位置)もスタイルパネルで調整できます。

レスポンシブ設定
エディタ上部のデバイス切り替え(デスクトップ / タブレット / モバイル)で、各ブレークポイントでの表示を個別に調整します。モバイル表示ではフォントサイズ、余白、要素の並び順を変更するケースが多いので、必ず確認してください。

Step 4: CMS・フォーム設定

静的なLPやコーポレートサイトであればこのステップは省略できますが、ブログ記事やお知らせの更新が必要な場合はCMSを、問い合わせ受付が必要な場合はフォームを設定します。

CMS(コンテンツ管理)の設定
左メニューの「CMS」からコレクション(記事のカテゴリ)を作成し、フィールド(タイトル、本文、サムネイルなど)を定義します。テンプレートにCMSが含まれている場合は、既存のコレクションにコンテンツを追加するだけで始められます。CMSモデルは無料プランでも3つまで作れます。150ページ・5 CMSモデルまで扱うならPersonal(年払い月¥1,190)以上が目安です。

フォームの設置
エディタでフォーム要素を追加し、入力フィールド(名前、メールアドレス、メッセージなど)を配置します。送信先のメールアドレスはプロジェクト設定で指定します。フォーム機能は無料プランでも月100件まで利用できます。

外部サービスとの連携
Google Analytics、Google Tag Managerのトラッキングコードはプロジェクト設定の「Apps」から追加できます。アクセス解析を行う場合は公開前に設定しておいてください。

Step 5: プレビュー・公開

編集が一通り終わったら、公開前にプレビューで確認します。

1. ライブプレビュー
エディタ右上の「プレビュー」ボタンで、実際のブラウザ表示をシミュレーションできます。デスクトップ・タブレット・モバイルのそれぞれの表示を確認し、テキストの折り返し、画像の表示サイズ、ボタンのタップ領域をチェックしてください。

2. サイトの公開
プレビューで問題がなければ、エディタ右上の「公開」ボタンをクリックします。無料プランでは「プロジェクト名.studio.site」のURLでサイトが公開されます。

3. 独自ドメインの接続
Miniプラン以上にアップグレードすると、独自ドメインを接続できます。プロジェクト設定の「ドメイン」からドメインを入力し、DNS設定でCNAMEレコードを追加する手順です。DNS設定の具体的な値はSTUDIOの管理画面に表示されます。

4. 公開後の更新
エディタで変更を加えたら、再度「公開」ボタンを押すと更新が反映されます。CMSコンテンツ(ブログ記事など)の更新は、CMSパネルから直接行えるため、エディタを開かずに記事の追加・編集が可能です。

トラブルシューティング

1. 要素の配置が思い通りにならない
STUDIOのエディタはFlexboxベースのため、WixやSquarespaceのような自由配置(アブソリュート配置)とは操作感が異なります。要素を横に並べたい場合は親ボックスの「方向」を「横」に設定してください。Flexboxの基本概念に不慣れな場合は、STUDIO公式の「デザインガイド」ページを一読することをおすすめします。

2. モバイル表示が崩れる
デスクトップで作ったレイアウトがモバイルで崩れるのは、ブレークポイントごとの設定が未調整であることが多いです。エディタのデバイス切り替えでモバイル表示にした状態で、フォントサイズ・余白・ボックスの方向(横→縦への切り替え)を個別に調整してください。

3. フォントが太く表示される
日本語フォントのウェイト(太さ)設定が意図と異なる場合があります。スタイルパネルの「フォントウェイト」で、Regular(400)やMedium(500)など目的のウェイトを明示的に指定してください。ウェイトのバリエーションが少ないフォントもあるので、使いたいウェイトが利用可能か確認しておくと安心です。

まとめ

STUDIOの初期セットアップは、アカウント作成 → テンプレート選択 → デザイン編集 → CMS・フォーム設定 → プレビュー・公開の5ステップです。日本語テンプレートが充実しているため、テキストと画像を差し替えるだけでも1〜2時間で形になります。無料プランでもサイト公開まで試せるので、「操作感を確かめる」段階で費用はかかりません。

このツールに対するマヤの見立てとしては、STUDIOは「日本語のサイトを、デザインの自由度を保ちつつノーコードで作りたい人」に向いています。日本語フォントの選択肢と日本語UIは海外製ビルダーにはない強みで、LP・コーポレートサイト・ポートフォリオとの相性が良好です。一方で、EC機能がないこと、ブログやお知らせを本格運用するとPersonalプラン以上が必要になること、Flexboxの概念に慣れていないと学習時間がかかる点は事前に把握しておきたいところです。まず1ページ作ってみれば、自分に合うかどうかはすぐに判断できます。

合わせて読みたい

よくある質問（FAQ）

STUDIOの無料プランでサイトを公開できますか?

はい。無料プランでもサイトの作成と公開は可能です。URLは「プロジェクト名.studio.site」の形式になり、STUDIOのバナーが表示されます。独自ドメインの接続とバナー非表示にはMiniプラン(年払い月¥590)以上が必要です。

STUDIOはコーディング知識がなくても使えますか?

はい。STUDIOはノーコードのビジュアルエディタで操作します。ただし、Figmaなどのデザインツールに近い操作感のため、Flexboxの概念(ボックスの並べ方・余白の取り方)を理解しているとスムーズに使えます。一般的なドラッグ&ドロップ型のサイトビルダー(WixやSquarespaceなど)よりは学習時間がやや必要です。

日本語フォントは豊富に使えますか?

はい。STUDIOは国産サービスのため、日本語フォントのラインナップが充実しています。Noto Sans JP、Noto Serif JP、M PLUS 1p、M PLUS Rounded 1cなどのGoogle Fonts日本語フォントに加え、STUDIO独自の日本語フォントも利用できます。海外製サイトビルダーと比べて日本語の表示品質は大きな強みです。

STUDIOとWebflowの違いは何ですか?

どちらもデザインの自由度が高いノーコードサイトビルダーですが、STUDIOは日本語UI・日本語フォントの充実・シンプルなCMSが特徴です。WebflowはCMSの柔軟性、カスタムアニメーション、EC機能(Webflow Ecommerce)など機能の幅が広い反面、UIは英語で学習コストもやや高くなります。日本語サイトのLP・コーポレートサイトならSTUDIO、多言語サイトや大規模CMSならWebflowが候補になります。

STUDIOでブログやECサイトは作れますか?

ブログはCMS機能で作成できます。CMSモデルは無料プランでも3つまで使え、独自ドメインで運用するならMini(年払い月¥590)以上、記事数やページ数が増えるならPersonal(同¥1,190・150ページ/5 CMSモデル)が目安です。記事の投稿・カテゴリ分け・一覧表示が可能です。一方、EC機能はSTUDIO単体では提供されていないため、ECサイトを作るにはShopifyなど外部サービスとの連携が必要です。

途中で有料プランに切り替えたらデータは引き継がれますか?

はい。無料プランで作成したデザイン、ページ、CMSのコンテンツはすべてそのまま引き継がれます。アップグレードはダッシュボードのプロジェクト設定から数分で完了します。

【PR】下記リンクは運営者のアフィリエイトリンクを含みます。公式サイトで料金・機能の最新情報を確認の上、自己判断でご登録ください。

【PR】▶ STUDIO 無料プランで始める

日本語フォントが豊富なノーコードサイトビルダー。Figma感覚でLPやコーポレートサイトを作りたいデザイナー向け。

【PR】▶ Webflow の詳細レビューを読む

「EC機能も欲しい」「カスタムアニメーションにこだわりたい」ならWebflowも選択肢に入ります。

この記事について
運営者:マヤ(海外 SaaS × 日本人向けアフィリエイト歴の個人サイト運営者)
情報ソース:STUDIO 公式サイト、公式ヘルプセンター
最終更新日:2026-07-28

本サイトはアフィリエイトリンクを含みます。