この記事では、ノーコードツール「STUDIO」を使って、コードを一切書かずにホームページを公開するまでの手順を、実際の操作に沿って解説します。WordPress版と同様、記事を上から順番に追えば「実際にページが公開できる状態」まで進めることを目標にしています。
所要時間の目安：30分〜1時間程度
必要なもの：メールアドレス（Googleアカウントでも登録可）
かかる費用の目安：無料プランなら0円。独自ドメインを使う場合は有料プランへの切り替えが必要（料金は変更されることがあるため公式サイトで要確認）
全体の流れ
- STUDIOにアカウント登録する
- プロジェクトを作成する（テンプレートまたは白紙）
- ドラッグ＆ドロップでトップページを編集する
- 必要なページを追加し、リンクを設定する
- 公開する
STEP1：アカウントを登録する
- STUDIO公式サイト（studio.design）にアクセスします。
- 「無料で始める」などのボタンから、メールアドレスでの登録またはGoogleアカウント連携で登録します。
- メール認証（登録メールアドレス宛ての確認リンク）がある場合は、メールを確認して手続きを完了させます。
STEP2：プロジェクトを作成する
- ログイン後のダッシュボードから「新しいプロジェクト」を作成します。
- テンプレート一覧から、作りたいサイトの雰囲気に近いものを選ぶか、「白紙から作成」を選びます。初めての方はまずテンプレートを使うのがおすすめです（完成形のデザインをベースに微調整できるため）。
- プロジェクト名を入力して作成を確定します。エディタ画面が開きます。
STEP3：ドラッグ＆ドロップでトップページを編集する
STUDIOのエディタは、画面上の要素（テキスト・画像・ボタンなど）を直接クリックして選択し、内容や位置を変えられる仕組みです。
- テキストを変える：対象のテキストをダブルクリックして直接入力します。
- 画像を変える：画像をクリックし、左側のパネルから別の画像をアップロード・差し替えします。
- 要素を移動する：要素をクリックして選択した状態で、ドラッグして位置を調整します。
- 要素を追加する：左側のパネルからテキスト・画像・ボタンなどのパーツをドラッグして配置できます。
まずはテンプレートのテキストや画像を、自分のサイトの内容に差し替えていくだけでも、それらしいページが完成します。
STEP4：必要なページを追加する
- 左サイドバーの「ページ」タブを開き、「＋」ボタンから新しいページを追加します。
- ページ名とURL（スラッグ）を設定します。
- トップページと同様の手順で、テキスト・画像を配置してページを作成します。
- ヘッダー部分のナビゲーションメニューに、作成したページへのリンクを追加します。
STEP5：公開する
- 画面右上の「公開」ボタンをクリックします。
- 無料プランの場合、「xxxx.studio.site」という形式のサブドメインで公開されます。
- 独自ドメインで公開したい場合は、有料プランへのアップグレードと、別途取得した独自ドメインの接続設定が必要です。
無料プランと有料プランの違い
STUDIOは無料プランでも一通りのページ公開ができますが、実際にビジネスで使う場合は有料プランへのアップグレードがほぼ必須になります。まずはプランごとの違いを整理します。
| 項目 | Free（無料） | Mini | Personal | Business |
| 月額目安（年払い） | 0円 | 約590円〜 | 約1,190円〜 | 約3,980円〜 |
| 独自ドメイン | 使用不可（studio.siteのサブドメイン） | 使用可 | 使用可 | 使用可 |
| ページ数 | 最大50ページ | 2ページ＋404ページ（LP向け） | 150ページほど | 300ページほど |
| CMSアイテム数 | 100件まで | – | 1,000件ほど | 5,000件ほど |
| 月間Visitor数 | 2,000まで | プランにより変動 | 2万ほど | 40万ほど |
| STUDIOロゴ表示 | あり | なし | なし | なし |
| 301リダイレクト・権限管理 | なし | なし | なし | あり |
| 向いている用途 | 操作感を試す | LP・1ページ完結のサイト | 個人・小規模サイトの標準 | 企業サイト・チーム運用 |
※メモ：このサイトを含め、筆者（もとや）はいつも「Personal」プランで作成しています。個人・小規模なコーポレートサイトやポートフォリオなら、ページ数・CMSアイテム数・Visitor数のどれも十分な上限があり、価格も押さえられるので、迷ったらまずPersonalを選んでおくのが安全です。Businessは301リダイレクトや権限管理など、複数人での運用が必要になってから検討すれば十分です。
※価格・仕様は変更されることがあります。最新の情報は必ずSTUDIO公式サイトの料金ページでご確認ください。
有料プランにアップグレードするメリット
無料プランでも公開自体は可能ですが、以下のような理由から、ビジネス用途では有料プランへの切り替えが強く推奨されます。
1. 独自ドメインで信頼性が上がる
無料プランの場合、URLは「xxxx.studio.site」という形式になります。名刺や掷機などでURLを掲載する際、サブドメインだと「仕事として本気度が低い」「一時的なサイトではないか」と受け取られやすくなります。独自ドメイン（例：yourname.com）を使えるようになると、企業・尋席を問わず信頼性が大きく向上します。
2. STUDIOのロゴが消える
無料プランで公開したサイトには、ページ下部などに「Made with STUDIO」のような表示が付きます。企業サイトやポートフォリオとして真剣に運用するなら、この表示はない方がプロフェッショナルな印象になります。
3. ページ数・CMSアイテム数の上限が増える
無料プランは50ページまでですが、Personalプラン以上にすると150ページほどまで拡張できます。また、ブログや実績一覧などをSTUDIOのCMS機能（記事をデータベース形式で管理し、テンプレートに自動反映させる仕組み）で運用する場合、無料の100件ではすぐに上限に到達しやすく、継続的に情報発信するサイトでは有料プランが必要になります。
4. アクセス増加時も安心できる
無料プランの月間Visitor数上限（2,000ほど）を超えると、サイトの表示に制限がかかる場合があります。SNSで拡散されたりメディアに取り上げられたりすると、一時的にアクセスが集中することがあります。Personalプラン以上にしておけば、こうしたアクセス増加時も安心して運用できます。
5（上位プラン）. SEO資産を引き継ぐ機能が使える
さらに上位のCMS・Businessプランでは、既存サイトからの乗り換え時に重要な、301リダイレクト機能（古いURLから新しいURLへ自動的に誘導し、検索エンジンの評価を引き継ぎやすくする機能）や、複数メンバーでの権限管理など、チームでの運用に向けた機能が充実しています。小規模な個人サイトでは必須ではありませんが、企業サイトを受注する場合は知っておきたい機能です。
どのタイミングでアップグレードすべきか
- まずは無料で試す：初めてSTUDIOを使う方は、無料プランで操作感を確かめてからで問題ありません
- 実際に公開・集客する段階でアップグレード：名刺やSNSにURLを載せる、取引先に共有するといった、対外的な利用が始まるタイミングで切り替えるのが目安です
- ブログや実績を継続的に更新するなら早めに：CMSアイテムが増えてから慢てて切り替えると、データ移行の手間が増えることがあります
ここまででできること
この手順をすべて終えると、以下の状態のホームページが完成します。
- インターネット上に公開されている
- トップページと必要なページが作成されている
- ナビゲーションから各ページに移動できる
よくあるつまずき
テンプレートを変えたら作った内容が消えた
別のテンプレートに変更すると、それまでの編集内容は引き継がれません。テンプレートは最初にしっかり選んでおくのが安全です。
公開ボタンを押しても変化が反映されない
ブラウザのキャッシュが原因のことがあります。キャッシュを削除して再読み込みするか、数分待ってから確認してください。
無料プランでの制限は？
ページ数や機能に一定の制限があります。独自ドメインでの公開や、より多くのページを作りたい場合は有料プランへの切り替えが必要です。最新のプラン内容は公式サイトでご確認ください。
まとめ
STUDIOでのホームページ作成は、テンプレートをベースにすれば、コード知識なしでも短時間で公開まで進められます。まずはこの記事の手順で「初期段階」を完成させ、その後少しずつデザインを調整していくのがおすすめです。
WordPressで同じようにホームページを作る手順は、別記事で詳しく解説しています。
コメント