STUDIOでホームページを作成する方法

STUDIOは、コードを書かずにレイアウトを組み、ホームページを公開できる日本発のWeb制作プラットフォームです。現在、公式サイトではサービス名を「Studio」と表記しています。このページでは検索時に広く使われる旧来の大文字表記をタイトルに残し、本文では現在の公式表記である「Studio」を使用します。

Studioは、視覚的なデザイン編集、公開環境、CMS、フォーム、共同編集などを同じサービス内で利用できます。無料プランでも試作と公開ができますが、独自ドメイン、ページ数、CMS、フォーム回答数、アクセス解析など、必要な条件によって有料プランを選びます。

このページでは、Studioでサイトを作成する手順、2026年7月17日時点の主な料金、デザイン・CMS・フォーム・SEOの考え方、契約前に確認したい制限を整理します。

この記事で分かること

• Studioの仕組みと主な機能
• 無料・有料プランの違いと料金の見方
• 作成から公開までの基本手順
• デザイン、CMS、フォーム、SEO設定の使い分け
• Studioを選ぶメリットと契約前の注意点
• Studioが向くサイト・向かないサイト
• Wix、WordPressとの違い

STUDIOとは

Studioは、ブラウザー上のエディターでページをデザインし、そのままStudioの公開基盤から配信できるノーコードのWeb制作サービスです。HTMLやCSSを直接記述しなくても、ボックス、文字、画像などを配置し、画面幅に応じた表示を設計できます。

基本的な位置づけは次のとおりです。

項目	内容
作成方法	ブラウザー上のデザインエディター
コード	基本制作では不要
公開先	Studioのホスティング環境
無料公開	Studioのサブドメインで公開可能
独自ドメイン	対応する有料プランで接続可能
CMS	モデルとアイテムを使って更新コンテンツを管理
フォーム	標準機能として作成・回答管理が可能
共同制作	リアルタイム編集や権限管理に対応
保守	サービス基盤はStudio側、内容と設定は利用者側で管理

Studioの特徴は、テンプレートの文章や画像を差し替えるだけでなく、デザインツールに近い感覚でレイアウトを組めることです。ただし、自由に配置できる分、余白、文字、画面幅ごとの表示を自分で判断する範囲も増えます。

Studioでサイトを作れば、自動的に情報設計や文章が完成するわけではありません。目的、閲覧者、必要ページ、各ページの役割、更新方法を先に決める必要があります。

STUDIOの主な機能

Studioでは、固定ページの制作から、CMSで更新する情報、フォーム受付、チーム制作までを一つのプロジェクトで扱えます。

機能	できること	主な確認事項
デザインエディター	文字、画像、ボックスなどを配置	画面幅、余白、操作性、再利用
テンプレート	完成例をもとに制作開始	ライセンス、自分の情報量との相性
CMS	お知らせ、実績、事例などをデータとして管理	モデル数、アイテム数、更新権限
フォーム	問い合わせや申込を受け付ける	回答上限、通知、個人情報、迷惑送信
独自ドメイン	自分のドメインで公開	対応プラン、DNS、契約名義
SEO設定	タイトル、説明、URLなどを設定	ページごとの内容、公開・検索状態
共同編集	複数人で制作・更新	招待、役割、公開権限
バージョン管理	過去の状態を確認・復元	保存期間はプランごとに異なる
外部連携	計測、埋め込み、各種サービス連携	プラン、規約、表示速度、Cookie

固定ページとCMSページの違い

会社概要、サービス、問い合わせなど、一つずつ内容とデザインを作るページは固定ページとして作成します。実績、スタッフ、物件、メニュー、お知らせなど、同じ項目を繰り返し追加する情報はCMSが向いています。

例えば制作実績なら、「タイトル」「概要」「カテゴリ」「公開日」「画像」「本文」といった項目をCMSモデルに定義し、実績ごとのデータを登録します。一覧と詳細のデザインを共通化できるため、更新のたびにページ全体を複製するより表示を揃えやすくなります。

ただし、数件しかなく更新予定もない情報までCMSにすると、設計と運用が複雑になる場合があります。更新件数、並べ替え、絞り込み、担当者を考えて選びます。

プロジェクトとチーム運用

サイトはプロジェクト単位で管理し、必要に応じてメンバーを招待します。デザイナー、文章担当、確認担当などが同じ画面で作業できます。

共同制作では、誰でも公開設定や重要ページを変更できる状態にせず、役割と公開手順を決めます。料金表、規約、ドメイン、フォーム通知先など、事業に影響する設定は確認者を置いてください。

無料プランと有料プランの違い

Studioの料金はプロジェクトの規模と必要機能で選びます。2026年7月17日に公式料金ページで確認した、一般的なサイトで比較対象になりやすいプランは次のとおりです。

プラン	料金表示	主な上限・特徴
Free	0円／月	50ページ、CMS 3モデル、ストレージ5GB、フォーム回答100件、バージョン履歴1日
Mini	年払い590円／月相当、月払い1,290円／月	2ページ＋404ページ、CMS 3モデル、10GB、フォーム回答100件、履歴5日、独自ドメイン、GA・GTMなど
Personal	年払い1,190円／月相当、月払い1,720円／月	150ページ、CMS 5モデル、10GB、フォーム回答1,000件、履歴30日、サイトパスワードなど
Business	年払い3,980円／月相当、月払い5,460円／月	企業運用向け機能、CMS 10モデル、履歴120日、リダイレクト、APIなど

表は公式ページに表示された主な条件を要約したものです。価格、税の扱い、上限、機能、キャンペーンは変更される可能性があります。契約時は公式料金表と購入画面で最新条件を確認しておきましょう。Business PlusやEnterpriseなど、より大規模な運用向けプランもあります。

Freeプランが向く段階

Freeプランは、エディターの操作、レイアウト、CMS、フォーム、Studio上での公開を実際に試す段階に向いています。独自ドメインが不要で、無料枠の条件が用途に合う小規模サイトにも利用できます。

ただし、公開URL、Studioのバナー表示、解析、ページ数以外の各種上限を確認します。事業サイトで長期利用する場合は、独自ドメインだけでなく、必要な計測と公開後の更新方法まで試してみましょう。

Miniプランのページ数に注意

Miniは独自ドメインで小規模サイトを公開しやすい価格帯ですが、公式料金表上のページ数は2ページと404ページです。ホーム、サービス、料金、会社概要、問い合わせ、プライバシーポリシーなどを別ページにすると上限を超えます。

1ページ構成またはごく小規模なサイトに向く条件であり、一般的な複数ページの事業サイトではPersonal以上を比較することになります。CMSで生成するページやシステムページの数え方も、実際の構成を作って確認しておきましょう。

料金は月額だけで比較しない

年間費用は、Studioのプロジェクトプランだけでは決まりません。

• Studioのプラン料金
• 独自ドメインの取得・更新料金
• ビジネスメールの料金
• 有料テンプレート、写真、フォント、動画など
• 外部フォーム、予約、決済、会員機能
• 制作、原稿、撮影、翻訳、保守の費用
• 移行や改修に必要な作業費

年払いの「月額相当」と月払いの請求額を混同せず、契約周期と更新日を確認します。制作費を含む全体はホームページ作成費用・相場もあわせてご覧ください。

STUDIOでホームページを作る手順

1. サイトの目的と要件を整理する

Studioを開く前に、誰へ何を伝えるサイトかを決めます。デザインから始めると、見た目は整っていても必要情報が不足することがあります。

最初に整理する内容は次のとおりです。

• サイトの目的と優先する行動
• 想定する閲覧者
• 必要な固定ページ
• CMSで更新する情報の種類と件数
• 問い合わせなどで取得する情報
• 独自ドメイン、計測、外部サービス
• 公開日、更新担当、承認手順

2. アカウントとプロジェクトを作成する

Studioへ登録し、新しいプロジェクトを作成します。空白から始めるか、テンプレートを利用します。複数人で制作する場合は、個人のアカウントを共有せず、それぞれのアカウントを招待します。

試作プロジェクトと本番プロジェクトを複数作る場合は、どれが正式版か分かる名前を付けます。ドメインや有料プランを誤ったプロジェクトへ接続しないよう注意します。

3. テンプレートまたは基本レイアウトを選ぶ

テンプレートを使う場合は、業種名や写真の印象だけでなく、必要ページ、文章量、CMS、フォームの構成を確認します。購入条件や利用範囲があるテンプレートはライセンスも確認しておきましょう。

空白から作る場合は、最初に次の共通要素を決めます。

• ヘッダーとナビゲーション
• 本文の最大幅
• 見出し・本文・注記の文字スタイル
• 色とボタンのルール
• セクション間の余白
• フッターの情報
• スマートフォンでのメニュー

テンプレート選びの基準はホームページテンプレートの選び方で詳しく扱います。

4. ページ構成とナビゲーションを作る

ページ一覧をもとに固定ページを作り、ナビゲーションへ配置します。ページ名とURLは短く意味が分かるものにし、公開後に何度も変更しないようにします。

事業サイトの例は次のとおりです。

• ホーム
• サービス・商品
• 料金・利用方法
• 実績・事例
• 会社・運営者情報
• よくある質問
• 問い合わせ
• プライバシーポリシー

実績やお知らせをCMSで作る場合は、一覧・詳細・カテゴリなどの関係もここで決めます。

5. デザインと文章を入れる

ボックス、文字、画像などを配置し、ページごとに情報を組み立てます。各ページは一つの主題に絞り、H1に相当する大見出し、その下にH2、H3相当の見出しを順序立てて設定します。

文章は、テンプレートの仮文やAI生成文をそのまま公開せず、実際のサービス、対象者、料金、条件へ置き換えます。画像は権利と利用条件を確認し、必要に応じて代替テキストを設定します。

6. CMSとフォームを設定する

CMSを使う場合は、更新情報の項目をモデルとして定義し、一覧・詳細のデザインと接続します。公開日、カテゴリ、画像、本文など、更新担当者が迷わない項目名にします。

フォームでは入力項目、必須・任意、送信後の表示、通知先を設定し、実際に送信します。個人情報を取得する場合は、利用目的、保存、閲覧権限、削除、プライバシーポリシーを整えます。

7. レスポンシブ表示を調整する

パソコンで作ったレイアウトをもとに、タブレットやスマートフォンなど画面幅ごとの表示を調整します。

特に確認するのは次の点です。

• 大きな見出しが不自然に折り返さないか
• 横並びの項目が狭い画面で重ならないか
• 画像の重要部分が切れていないか
• 本文の文字サイズと行間が読みやすいか
• ボタン同士が近すぎず押しやすいか
• メニューを開閉して各ページへ移動できるか
• 長い表や埋め込みが画面からはみ出さないか

エディターの表示だけでなく、実際のスマートフォンでも確認します。

8. SEO・ドメイン・計測を設定する

ページタイトル、説明文、URL、検索・共有時に使う画像など、Studioで利用できる設定をページごとに入力します。見出しの構造、画像の代替テキスト、内部リンクも本文制作と合わせて整えます。

独自ドメインを使用する場合は対応プランを契約し、ドメイン側のDNSを設定します。Google AnalyticsやGoogle Tag Managerなどを利用する場合は、対応プランと現在の設定方法、Cookie等への対応を確認します。

9. テストして公開する

プレビューだけでなく、公開URLで次を確認します。

• パソコン・スマートフォンの表示
• メニュー、ボタン、本文リンク、ロゴの動作
• フォーム送信、完了表示、通知メール
• 料金、住所、連絡先、営業時間の正確性
• CMS一覧と詳細の表示、並び順
• 非公開ページ、テストデータ、仮文章があるかどうか
• 独自ドメイン、SSL、計測タグ
• ページタイトル、共有時の表示

公開後の修正は、影響範囲を確認してから反映します。大きな変更前は、利用できるバージョン履歴の期間も確認しておきましょう。

デザイン・CMS・フォーム・SEO設定

デザインはルールを先に決める

Studioは自由なレイアウトを作りやすい反面、ページごとに文字サイズ、色、余白がばらばらになることがあります。最初に共通ルールと再利用する部品を決めます。

最低限そろえる項目は次のとおりです。

• 本文、見出し、注記の文字スタイル
• メイン・補助・背景・文字の色
• 本文幅とセクションの上下余白
• 通常ボタン、重要ボタン、テキストリンク
• カード、一覧、画像の比率
• ヘッダー、フッター、スマートフォンメニュー

見た目を独自にするために読みやすさを犠牲にしないよう、色のコントラスト、文字サイズ、キーボード操作、リンクの識別も確認します。

CMSは更新する情報から逆算する

CMSモデルは、デザインより先に「何を入力し、どう一覧化し、どう探すか」を決めます。

例えば事例ページなら、次の項目が候補です。

• 事例名
• 業種・カテゴリ
• 課題
• 対応内容
• 成果
• メイン画像
• 公開日
• 関連サービス

カテゴリや日付を単なる文章にせず、並べ替えや絞り込みに使える項目として設計すると運用しやすくなります。一方、モデル数、アイテム数、共同編集の権限はプラン条件を確認します。

フォームは送信後の運用まで設計する

問い合わせフォームを置く場合、入力欄だけでなく、送信後の処理を決めます。

• 誰が回答を閲覧できるか
• どのメールアドレスへ通知するか
• 何営業日以内に返信するか
• 迷惑送信や誤送信へどう対応するか
• 回答をいつまで保存し、どう削除するか
• 上限到達時に受付がどうなるか
• プライバシーポリシーで何を説明するか

公開前に異なる端末とメールアドレスでテストし、通知が迷惑メールへ入らないかも確認します。

SEO設定は検索意図と本文が中心

StudioにSEO設定項目があっても、入力するだけで上位表示されるわけではありません。

• 検索する人の疑問に合うページを用意する
• ページごとに主題を分ける
• タイトルとH1を内容に合わせる
• 見出しで情報を順序立てる
• 関連ページを内部リンクでつなぐ
• 画像を軽くし、表示を確認する
• 公開後にクロール・インデックス状態を確認する
• 古い情報を修正する

CMSページでは、同じタイトルや説明文が大量に作られないよう、項目との接続を確認します。不要なテストページや重複ページを公開しないことも重要です。

STUDIOのメリット

コードなしで自由度の高いレイアウトを作りやすい

ボックスレイアウトや画面幅ごとの調整を視覚的に行えます。一般的なテンプレートの枠だけでは表現しにくいサイトでも、デザインの意図を反映しやすい方法です。

公開環境と制作機能が一体になっている

別のレンタルサーバーへCMSをインストールせず、作成したプロジェクトをStudioから公開できます。サーバー側の細かな初期設定より、構成、文章、デザインへ集中しやすくなります。

固定ページとCMSを同じデザインで扱える

案内ページだけでなく、実績、お知らせ、スタッフなど、繰り返し更新する情報をCMSとして管理できます。更新担当者は決められた項目へ入力でき、一覧・詳細のデザインを揃えやすくなります。

共同制作を進めやすい

公式にはリアルタイム共同編集や権限管理が案内されています。デザイン、原稿、確認を複数人で進める場合、ファイルを何度も送り合う工程を減らせます。

無料で実際の操作を確認できる

Freeプランでエディター、CMS、フォーム、公開状態を試せます。有料契約前に、自分のサイトに近い1〜2ページを作り、スマートフォン表示と更新作業まで体験できます。

契約前に確認したい注意点

ページ数とCMS上限

プランごとにページ数、CMSモデル、フォーム回答、履歴などの上限があります。特にMiniはページ数が少ないため、ページ一覧を先に作ってから選びます。

CMSは「モデル数」と「登録できる情報の数」を区別し、一覧、詳細、カテゴリなどがどのように数えられるか確認します。上限へ近づいた場合のプラン変更と費用も確認しておきましょう。

デザインの自由度には学習が必要

コードを書かなくても、Webレイアウトの知識が不要になるわけではありません。親子関係、幅、高さ、余白、整列、画面幅ごとの変化を理解しないと、修正時に崩れやすくなります。

自由に配置する前に、公式の基本操作とレスポンシブの考え方を学び、共通部品を使います。複雑な動きや装飾を増やすと、確認端末と保守範囲も増えます。

外部機能の要件

予約、決済、会員、複雑な検索などは、Studio標準機能だけで完結しない場合があります。外部サービスを埋め込む・連携する場合は、次を確認します。

• Studioのプランと外部サービスの料金
• スマートフォン表示と読み込み速度
• Cookie、個人情報、利用規約
• 障害時の問い合わせ先
• データの保存先と出力方法
• 外部サービス終了時の代替手段

見た目として埋め込めるかだけでなく、業務全体が完了するかをテストします。

サービス移行とデータ管理

Studioは公開基盤を含むクラウドサービスです。別のCMSやサーバーへ移る場合、現在のデザイン、CMS、フォーム、設定を同じ状態で移せるとは限りません。

公式の現在の書き出し・移行機能を契約前と移行前に確認し、少なくとも次の元データは手元でも管理します。

• ページ原稿と見出し構成
• 元画像、ロゴ、動画、PDF
• ページとURLの一覧
• CMSへ登録した情報
• フォーム回答の保存・出力方法
• ドメイン、メール、計測の契約情報
• 外部サービスのアカウント

サービス変更時にデザインを再構築する費用と期間も想定しておくと、長期的な比較ができます。

ドメイン・メール・契約名義

独自ドメインとビジネスメールは、Studioのサイト公開とは別に管理する項目があります。ドメインの取得先、登録名義、更新料金、DNS、移管方法を記録します。

制作担当者だけが契約情報を持たず、事業者側でも管理できる状態にします。プランを解約・変更するときは、サイト、ドメイン、メール、外部サービスへの影響を分けて確認しておきましょう。

料金・仕様の変更

クラウドサービスの料金、プラン名、上限、機能は変更される可能性があります。公開後も、契約更新前に料金表とお知らせを確認し、現在のページ数、CMS、フォーム回答、必要機能がプラン内に収まっているか確認します。

STUDIOが向く人・向かない人

Studioが向きやすい人・サイト	別の方法も比較したい人・サイト
コードなしでデザインを細かく調整したい	テンプレートの差し替えだけで最短公開したい
デザインと公開環境をまとめたい	サーバーやソースコードを自社で管理したい
実績などをCMSで更新したい	大量記事や複雑な分類・承認が中心になる
デザイナーと運用担当が共同作業したい	独自のサーバー処理や高度なシステムが必要
小〜中規模のブランド・事業サイトを作りたい	大規模EC、会員、予約を一体で構築したい
Freeで操作を試してから決めたい	サービス移行時の再構築を避けたい

Studioは「簡単なツール」というより、コードを直接書かずにWebデザインを組み立てる環境として考えると特徴を理解しやすくなります。デザインの判断を減らしたい人はテンプレート型サービス、自由な開発とデータ管理を求める人はWordPressや個別開発も比較します。

Wix・WordPressとの違い

比較項目	Studio	Wix	WordPress（設置型）
公開環境	Studioに含まれる	Wixに含まれる	自分でサーバーを用意
編集の特徴	デザインツールに近い視覚編集	AI・テンプレート・視覚編集	テーマ・ブロック・管理画面
コード	基本不要	基本不要	基本操作は不要だが管理知識が必要
CMS	Studio CMS	Wixの各種コンテンツ機能	投稿タイプなどを幅広く構成可能
機能追加	標準機能と外部連携	アプリ、予約、ECなどが豊富	プラグインと個別開発
技術保守	基盤はStudio側	基盤はWix側	本体・テーマ・プラグインなどを管理
デザイン自由度	視覚的に高め	エディターの範囲で高め	テーマ・コードにより幅広い
移行	現在の出力・移行条件を確認	WixサイトはWix上で運用	サーバー・データを管理しやすい
向く状況	デザイン性とCMSを両立したい	機能をまとめて手軽に追加したい	拡張性・所有・運用の自由度を重視

StudioとWixは、どちらも公開環境を含むサービスですが、Studioはレイアウト設計とCMS、WixはAI・テンプレートと予約・ECなどを含む幅広いサービス機能が比較点になります。詳しくはWixでホームページを作成する方法もあわせてご覧ください。

設置型WordPressは、自分でサーバーを用意し、CMS、テーマ、プラグインを管理します。自由度と移行性を得やすい一方、更新、バックアップ、セキュリティなど技術保守の範囲が広がります。詳しくはWordPressでホームページを作成する方法で解説します。

ツール名だけで決めず、必要ページ、更新方法、機能、デザイン、担当者、3年程度の総費用、移行条件を表にして選びます。CMS・ノーコードでホームページを作る方法とホームページ作成ツール・ソフトの比較もあわせてご覧ください。

STUDIOのよくある質問

STUDIOとStudioは別のサービスですか

別サービスではありません。現在の公式ブランド表記は「Studio」です。過去の記事や検索語では「STUDIO」という大文字表記も広く使われています。

Studioは無料でホームページを公開できますか

FreeプランでStudioのサブドメインを使った公開ができます。独自ドメイン、アクセス解析などの一部機能、上限を超える運用には有料プランを確認します。

独自ドメインで公開する最安プランはどれですか

2026年7月17日時点の公式料金表では、Miniから独自ドメイン公開に対応しています。ただし、Miniは2ページと404ページというページ数条件があります。必要ページが多い場合はPersonal以上と比較してみましょう。

Studioでブログを書かずに会社サイトを作れますか

作れます。ホーム、サービス、会社概要などを固定ページで制作できます。実績やお知らせのように繰り返し更新する情報だけCMSを使うことも、CMSを使わず固定ページだけで構成することもできます。

StudioのCMSは何に使いますか

実績、お知らせ、スタッフ、物件、メニューなど、共通項目を持つ情報を追加・更新する用途に使います。モデル数やアイテム数、必要な一覧・詳細ページを設計し、プラン上限を確認します。

StudioならSEOに強いホームページになりますか

ツールだけで検索順位は決まりません。検索意図に合う内容、サイト構成、タイトル、見出し、内部リンク、表示、インデックス確認、継続的な更新が必要です。必要なSEO設定をStudioで行えるかも確認します。

StudioからWordPressへ移行できますか

移行先でページやテーマを再構築する工程を想定します。文章、画像、CMSデータなどの現在の出力方法を確認し、ドメイン、URL、検索評価、フォーム、計測の移行計画を立ててください。

Studioは初心者でも使えますか

コードなしで操作できますが、レイアウト、余白、文字、レスポンシブなどWebデザインの基本は必要です。Freeプランで実際のページを作り、更新を担当する人が操作できるか確認してから選びます。

関連ページ

• ホームページ作成ツール・ソフトの比較
• Wixでホームページを作成する方法
• WordPressでホームページを作成する方法
• CMS・ノーコードでホームページを作る方法
• ホームページ作成費用・相場
• ホームページテンプレートの選び方

参考情報

• Studio「料金プラン」：https://studio.design/ja/pricing（確認日：2026-07-17）
• Studio「デザインエディター」：https://studio.design/ja/editor（確認日：2026-07-17）
• Studio「CMS」：https://studio.design/ja/cms（確認日：2026-07-17）