Studioでサイトを作りたいけれど、使い方がよくわからない。
そんな方に向けて、アカウント登録からサイト公開までの全手順を5ステップでまとめました。
制作会社として多数のStudioサイトを手がけてきた視点から、初心者がつまずきやすいポイントも交えて解説します。
目次
まずは無料の資料でご検討ください
サイト制作の無料資料を受け取るステップ1：アカウント登録と初期設定
Studioの利用はアカウント登録から始まります。
公式サイト（studio.design）にアクセスし、Googleアカウントまたはメールアドレスで無料登録してください。
登録が完了すると、ダッシュボードが表示されます。
ダッシュボードでは、新規プロジェクトの作成や既存プロジェクトの管理ができます。
まずは「新しいプロジェクトを作成」をクリックしましょう。
テンプレートを使う方法と、白紙から作る方法の2つがあります。
初心者にはテンプレートからのスタートがおすすめです。
テンプレートを選ぶ際は、自分の業種や目的に近いものを選ぶと、構成やレイアウトの調整が最小限で済みます。
テンプレートの選び方について詳しくは「Studioテンプレートの選び方と無料・有料の使い分け」をご覧ください。
ステップ2：エディタ画面の見方を覚える
プロジェクトを作成すると、Studioのエディタ画面が開きます。
Studioのエディタは、大きく分けて3つのエリアで構成されています。
左パネル（レイヤー・ページ管理）
画面左側には、ページの一覧とレイヤー構造が表示されます。
レイヤーパネルでは、ページ上の要素が入れ子構造（ボックスの親子関係）で並んでいます。
要素の選択や並べ替えはここから操作するのが確実です。
中央エリア（デザインキャンバス）
中央がデザインを編集するキャンバスです。
要素をクリックして選択し、ドラッグで位置を調整できます。
テキストはダブルクリックで直接編集できます。
右パネル（スタイル設定）
選択した要素のスタイル（色、サイズ、余白、フォントなど）を右パネルで調整します。
CSSの知識がなくても、視覚的にデザインを変更できるのがStudioの強みです。
ステップ3：基本操作をマスターする
Studioの操作は「ボックス」を理解することがカギです。
すべての要素（テキスト、画像、セクション）はボックスとして配置されます。
ボックスの追加と操作
ボックスを追加するには、画面上部の「+」アイコンをクリックします。
テキストボックス、画像ボックス、空のボックスなど、種類を選んで配置してください。
ボックスは別のボックスの中にドラッグすることで、入れ子構造（親子関係）にできます。
この親子構造がレイアウトの基本です。
たとえば「横並びのカード3枚」を作る場合、親ボックスをFlexboxの横並び設定にし、中に3つの子ボックスを入れます。
テキストの編集
テキストボックスをダブルクリックすると、文字を直接編集できます。
フォント、サイズ、太さ、色、行間は右パネルで調整してください。
Studioでは日本語のWebフォント（Noto Sans JPなど）が無料で使えます。
フォントの統一はサイト全体の印象を大きく左右するので、最初に決めておくのがおすすめです。
画像の挿入
画像ボックスを追加したら、右パネルの画像設定からファイルをアップロードします。
ドラッグ&ドロップでも画像を直接配置できます。
画像のサイズは「Object Fit」設定で、ボックスへの収まり方（Cover / Contain）を指定できます。
ファイルサイズが大きすぎると表示速度に影響します。
1枚あたり500KB以下を目安に、事前に圧縮しておきましょう。
リンクの設定
ボタンやテキスト、画像にリンクを設定するには、要素を選択して右パネルの「リンク」欄にURLを入力します。
ページ内リンク（アンカーリンク）も、リンク先に「#セクションID」を指定すれば設定できます。
ステップ4：ページ構成とレスポンシブ対応
操作の基本がわかったら、ページの構成を組み立てていきましょう。
ヘッダーとフッターの作り方
ヘッダーとフッターは、Studioの「シンボル」機能を使って共通パーツにするのが基本です。
シンボルにすると、1箇所を編集するだけで全ページに変更が反映されます。
ヘッダーには、ロゴ、メニュー、問い合わせボタンを配置するのが一般的です。
セクションで構成を作る
ページは複数のセクション（大きなボックス）を縦に積み重ねて構成します。
たとえばコーポレートサイトであれば、以下のような構成が一般的です。
- ファーストビュー（メインビジュアル + キャッチコピー）
- 事業内容・サービス紹介
- 実績・事例
- 会社概要
- 問い合わせ導線
各セクションの背景色を白とグレーで交互にすると、区切りが明確になり読みやすくなります。
CMS機能でお知らせやブログを作る
Studioには簡易的なCMS（コンテンツ管理）機能があります。
お知らせや実績紹介など、同じレイアウトで繰り返し投稿するコンテンツに向いています。
CMSの設定方法や設計の考え方は「StudioのCMSで作れるものと設計の勘所」で詳しく解説しています。
レスポンシブ対応（スマホ表示の調整）
Studioではエディタ上部のデバイス切替ボタンで、PC・タブレット・スマホの表示をそれぞれ確認・調整できます。
PC表示で作ったあと、スマホ表示に切り替えて文字サイズや余白を調整してください。
スマホではボックスの並びが自動で縦積みになることが多いですが、意図通りになっていない場合は手動で調整が必要です。
横並びのカードが潰れていないか、テキストがはみ出していないかを必ず確認しましょう。
制作会社の現場では、PC版を作り込んだあとにスマホの調整に予想以上の時間がかかるケースが多いです。
レスポンシブの確認は後回しにせず、セクションを1つ作るごとにチェックするのが効率的です。
ステップ5：サイトを公開する
デザインが完成したら、サイトを公開しましょう。
公開の手順
エディタ右上の「公開」ボタンをクリックするだけで、サイトがインターネット上に公開されます。
無料プランの場合、URLは「○○.studio.site」の形式になります。
独自ドメイン（例：example.co.jp）を使いたい場合は、有料プランへのアップグレードが必要です。
独自ドメインの設定方法は「Studioで独自ドメインは使える？設定方法や料金プランをわかりやすく解説」を参考にしてください。
料金プランの選び方
Studioには無料プランと複数の有料プランがあります。
個人や小規模事業者であれば「Starter」プラン、企業サイトであれば「Business」プランが目安です。
各プランの違いは「Studio料金プランを徹底比較」で詳しくまとめています。
公開前に確認すべきこと
公開ボタンを押す前に、最低限チェックしておきたい項目があります。
- 全ページのスマホ表示を確認したか
- リンク切れがないか
- 問い合わせフォームが正常に動作するか
- ページタイトルとメタ説明文を設定したか
- OGP画像（SNSシェア時のサムネイル）を設定したか
特にメタ情報の設定は、検索結果に直接影響します。
公開後の初期設定（GA4やSearch Consoleの導入）については「Studioでサイト公開後にやること」もあわせてご覧ください。
Studioを使うときに知っておきたい3つの注意点
1. できること・できないことを先に把握する
Studioはノーコードツールとして非常に高機能ですが、すべてに対応しているわけではありません。
たとえば、ECカート機能や会員制サイトの構築には対応していません。
作り始めてから「できなかった」と気づくと、大きな手戻りになります。
事前に「Studioのできること・できないこと丸わかりガイド」で確認しておくと安心です。
2. SEO対策は自動では行われない
Studioにはページタイトルやメタ説明文の設定機能がありますが、入力しなければ空のままです。
検索エンジンに正しく評価されるには、各ページごとにキーワードを含んだタイトルと説明文を設定する必要があります。
StudioのSEO設定については「StudioはSEOに弱い？言われる理由と上位表示するための設定方法」が参考になります。
3. デザインの自由度が高い分、迷いやすい
Studioは細かいデザイン調整が可能な反面、選択肢が多く迷いやすいツールでもあります。
フォントや配色の組み合わせに正解はありません。
競合サイトや同業他社のデザインを参考にしつつ、まずはシンプルな構成で完成させることを優先しましょう。
完成度を追い求めて公開が遅れるよりも、「60点で公開して、あとから改善する」方が結果的に早くゴールに近づけます。
自分で作るか、制作会社に依頼するかの判断基準
Studioは操作性に優れたツールですが、サイト制作にはデザインや構成の知識も必要です。
自分で作るのに向いているのは、次のようなケースです。
- ページ数が少ない（5ページ以下）
- デザインにこだわりが少なく、テンプレートで十分
- 制作に時間をかけられる
一方、制作会社への依頼が向いているのは以下のケースです。
- 企業の顔になるコーポレートサイトをしっかり作りたい
- 問い合わせや採用など、成果につなげたい
- レスポンシブ対応やSEO設定まで含めてプロに任せたい
- 公開後の更新・運用サポートも必要
制作代行であれば、デザインの質やSEOの初期設定、公開後の運用まで一括で対応できます。
GAMADASでは、Studioを使ったサイト制作代行を行っています。
テンプレートを土台にしたコスト効率の高い制作が可能です。
制作代行の進め方や費用感については「Studio制作代行の料金プランと依頼の流れ」をご覧ください。
まとめ
Studioの使い方を5ステップで解説しました。
- アカウント登録と初期設定
- エディタ画面の見方を覚える
- 基本操作（ボックス・テキスト・画像・リンク）をマスターする
- ページ構成とレスポンシブ対応
- サイトを公開する
Studioはノーコードでありながら、自由度の高いWebサイトが作れるツールです。
まずはテンプレートを選んで触ってみることが、最短の上達法です。
操作に慣れてきたら、CMS機能やアニメーションなど、より高度な機能にも挑戦してみてください。
