Studioでできること〜始め方と超基本の解説〜

記事内に商品プロモーションが含まれる場合があります

この記事の操作画像は、記事作成・更新時点（2024〜2025年）のものです。現在はメニューの位置や名称が異なる場合があります。現在のエディタでは追加・レイヤーは左ナビゲーション、ボックスや文字の設定は右パネル、画面幅の切り替えは下部ツールバーで確認できます。

「Studioって何ができるの？導入メリットは？」という疑問にお答えします。また、会員登録方法や、つまづきやすい「Studio操作の考え方の基本」をはじめての方向けに丁寧に解説します。

Studioを検討中・はじめてみたい方、ちょっと難しくて挫折したけどリトライしたい方、ぜひこの記事を読んでいただけると嬉しいです。

1.Studioでできること・導入メリット

Studioは、コードを書かずにホームページを作成できるツールです。

どんなWebサイトが作れる？

こちらの公式サイトに事例がまとまっています。すごいサイトがたくさんあります…！

また、ブログのようなCMS機能も使えるので、「お知らせ欄のみ現場担当者に更新してほしい」といった分業も可能です。

誰に使われている？

Studioは、使いやすいのに本格的なWebサイトが作れることから、幅広いユーザーに使われています。

大手企業から中小企業のホームページや求人ページなどの重要なページも、Studioで作られていることがあります。

また、Webサイトの制作会社やフリーランスがクライアントワークに使うことも多々あります。それだけ「本格的なサイトも作れる」ということですね。

どんなメリットがある？

Studioには、「ノーコードでWebサイトを作れる」以外にも以下のようなメリットがあります。

自社内でWebサイト作成を完結でき、経費削減になる
サイト更新の工数が減り、迅速に情報更新できる
サーバー運用やSSLはStudio側が提供
日本製のサービスなので、関連情報を日本語で得やすい

Webサイトって、外注するととんでもなく値段が高かったりしますよね。「仕方なくインスタアカウントしか持っていない」という企業さんやショップさん、個人事業主さんもいるかと思います。

Studioを使えば、難しい知識がなくても本格的なホームページが作れるので、簡単なページなら自分で作れますし、「社内のデザインチームにStudioを使ってもらう」という手もあります。

また、「このページのここの数字を変えたい」というときに、コードを読むのではなく表示画面で見たままの状態で修正できるので、修正作業も簡単です。そのため、「明日までに直さないと！」といった緊急事態にも対応しやすいです。

さらに、サーバーを外部で借りる必要がなく、Studio上でデザインを作ったらそのまま公開できるので、とても手軽です。サーバー運用やSSLはStudio側が提供します。ただし、アカウント管理、公開内容、埋め込む外部コードなどは利用者側でも確認が必要です。

また、Studioは日本のサービスなので、しっかりしたサポートが日本語で受けられます。

「これってどうやるんだろう？」と思って検索したときに、日本語でたくさん情報が出てくるのも嬉しいですね。

有料プランじゃないとだめ？

無料でもホームページは作れますが、もちろん有料プランでしかできないことは多々あります。

2026年9月29日に確認したFreeプランの主な条件は次のとおりです。利用する機能や最新の条件は公式料金表で確認してください。

無料プランでよい場合

公開ページ数50ページ以内、ストレージ容量5GB以内
フォーム回答の閲覧上限100件で足りる
Studioのサブドメインで公開する
「Studio」のバナーが表示されても構わない

一方、次のような機能や上限が必要な場合は、対応する有料プランを検討します。複数ページや外部サービスの利用だけで、一律に有料となるわけではありません。

有料プランにするべき場合

フォーム回答の閲覧上限やストレージ容量を増やしたい
「Studio」のバナーを表示したくない
独自ドメインで公開したい
ページのheadやbodyへカスタムコードを追加したい
無料プランの公開ページ数を超えるサイトを作りたい
利用したい連携機能に有料プランが必要と案内されている

まずは無料プランで操作性などを確認して、いいなと思ったら有料プランに切り替える、といった使い方でもよいかと思います。

Studioでできないこと

カート機能などが必須なオンラインショップは、もっと適した他のサービスがあります。（BASEがおすすめです）

Studioには標準の買い物カート機能はありませんが、外部ECサービスの購入ボタンなどを埋め込む方法はあります。それから、サイト本体のHTMLやCSSを直接編集したり、サイトのコードをエクスポートしたりすることはできません。基本のデザインはStudioの編集画面で操作します。

EmbedボックスではHTML・CSS・JavaScriptを埋め込めます。ページのheadやbodyへ追加する「カスタムコード」は有料プランの機能です。標準機能でできない表現を加えたい場合は、目的に応じて使い分けます。

ドラッグ＆ドロップで簡単！というわけではない

Studioは本格的なサイトをノーコードで作れるツールではあるのですが、デザインツール初心者さんには正直言って難しい部分もあります。

Studioでもドラッグ操作は使えますが、PowerPointやCanvaと同じ感覚で自由に置くだけではなく、要素の親子関係・整列・余白を意識して組み立てる必要があります。

下の記事で「Wixとはなにか？」等解説しているので、気になったら見てみてくださいね。

2.Studioの会員登録

なお、下の記事では一緒に操作して実際に簡単なWebページが作れるチュートリアルをしています。この記事を読んだらぜひやってみてくださいね！

まずはStudio公式ページを開き、右上の「ログイン・新規登録」のボタンをクリックします。

英語表記になっている場合は、右上の言語選択で「日本語」にしましょう。その後、Googleアカウントなどでログインするか、メールアドレスとパスワードを登録します。

登録すると、利用目的を聞かれるので選択しましょう。

職種も聞かれるので、自分の職種を選択します。

以上で会員登録は完了です。公式のチュートリアルをうけることができるので、やってみましょう。

3.Studioの操作と考え方の基本

それでは、まずはStudioの操作の基本と、初心者さんがつまづく原因となるStudioの考え方の基本を解説したいと思います。

Studioの考え方の基本

ドラッグ操作だけで思いどおりに配置しようとすると、「思っていたのと違う」と感じることがあります。まずボックスの親子関係と整列の仕組みを押さえましょう。

Studioでは、「ボックスレイアウト」という「箱を並べる」「箱の中に箱を入れる」という手法でWebページを作っていきます。

例えばこのページでは、赤(ヘッダー)と緑(About)のボックスが縦に並び、緑のボックスの中に黄色、黄色の中にさらに青…というように、ボックスが並んだり、重なりあって構成されています。

この「箱を並べる」という方法では、親のボックスとの関係や整列の設定を意識するのがポイントです。

この図は、ボックス内で使う基本の9通りの整列位置です。余白の調整や絶対位置などの設定で、ほかの位置にも配置できます。

では、このような半端な場所に置きたいときはどうすればよいのでしょうか。

この練習では「大きな箱を２つ並べて（赤と青）、その箱の中の中央にパーツを置く」という方法を使います。箱の中央はパーツを置くことができますよね。

このように、自由な場所にパーツを置くためには、枠となる箱を増やしてみる、または箱の余白やパーツの余白を調整するなど、ちょっとした工夫が必要となります。

「この場所にパーツを配置するにはどうするか？」と考えていくのがボックスレイアウトの基本です。慣れればできるようになっていくのと、自分の思った場所にキレイに配置できたときにはとても気持ちいいので、ぜひ一緒に頑張ってみましょう！

Studioの編集画面の基本

考え方の基本を押さえたところで、ここからはStudioの実際の画面を見ながら解説していきます。

新規作成する

まずはデザインを新規作成しましょう。

Studioの新規作成のボタンは、マイページの右上にあります。

テンプレートも選べますが、「空白からはじめる」をクリックしましょう。

続いて、ページのタイトルをつけます。あとで変更も可能です。

これで、新規の真っ白なデザインを、Studioの編集画面を開けました。

ちなみに一度ホーム画面に戻ったあと、作成途中のデザインに再度アクセスするには、マイページのプロジェクトを確認しましょう。

マウスをのせると右半分がエディターのリンクになっているので、クリックすればデザインを開くことができます。

下の方にある一覧も、マウスをのせるとボタンが表示されるので、クリックすればそのデザインを編集画面で開くことができます。

続いて、画面の操作で押さえておくべきポイントを、よく使う基本的なものにしぼって説明します。

パーツを追加する

まず、デザイン上になにかパーツを追加したいときは、左メニューから行います。「＞」で一覧を開けるのでクリックしてみましょう。

旧画面では上の「追加」タブで一覧を開きます。現在は左ナビゲーションの追加パネルから、追加できる要素を確認します。

ボックス（枠）やテキスト、画像などを、ここから追加していきます。

レスポンシブ切り替え

Studioでは、パソコン画面サイズが基準になっています。PC用にデザインを作ったあと、スマホ表示の画面幅ではどうなるかを確認し、デザインが崩れるところを修正する、という流れになります。

パソコン画面とスマホ画面の画面幅の切り替えは簡単です。

旧画面ではデザイン外をクリックすると、上に画面幅を切り替えるボタンが表示されます。現在は下部ツールバーでブレイクポイントや表示幅を切り替えます。

パーツを装飾する

パーツを追加しただけでは、モノクロのただの文章のような寂しい画面になってしまいます。ボックスの背景色を変えたり、文字の色や大きさを変えたりして装飾してみましょう。

試しに「セクション」を追加してみます。あとでテキストなどを入れる「箱」となる部分ですね。

旧画面では上のメニューで色などを変更できます。現在は選択した要素の設定を右パネルで変更します。

本来であれば、装飾するにはコードを書かなければならないところ、Studioであればクリックしていくだけで装飾ができるので、とても手軽ですね。

続いて、テキストを追加してみましょう。

テキストを追加すると、下にくっつくので、ドラッグでセクションの中へ移動させます。

テキストは、テキストの「枠」と「文字」で構成されていて、装飾もそれぞれ変更することができます。

枠は最初、文字にぴったりのサイズなので、大きくしてみると違いがわかります。旧画面では上のメニュー、現在は右パネルでサイズを調整します。

旧画面では上の「ボックス」タブが枠の設定です。現在は右パネルで背景色やサイズなどを変更します。

旧画面では「テキスト」タブが文字の設定です。現在は右パネルで文字の色・フォント・サイズなどを変更します。

このように、テキストなどのパーツを追加したときは、その「枠」の編集なのか「文字」の編集なのか、を注意して切り替えられるようにしましょう。

レイヤーを使う

個人的にめちゃくちゃお世話になり、かつStudioを使いこなすうえで必須なのが「レイヤー」の機能だと思っています。

レイヤーは左側のメニューから開くことができます。下の方の直にレイヤーを開くボタンが便利です。

「レイヤー」というのは、デザインの階層構造のリストです。「どのパーツがどの箱に入っていて、どの箱がどのように並んでいるのか、あるいは重なっているのか」などが一覧になっています。

たとえば、このようにセクション（箱）とテキスト（中身）がデザイン上にのっていると、レイヤーは左の一覧のように表示されます。

もう少しわかりやすい例で見てみましょう。

「ひとつめ」の文字が入ったピンクのボックスと、「ふたつめ」の文字が入ったグレーのボックスを上下に並べてあります。レイヤーでもピンクのボックスが上、グレーのボックスが下に並んでいます。

このとき、レイヤーの表示を見てみると、「Section(箱)」同士はピンクのラインで揃っていますが、「T(文字)」は緑のラインのように１字下がりになっているのがわかります。

この「１字下がり」になっているのは、「その前の行の箱の中に入っている状態」という意味です。逆に、「頭が揃っている状態（ピンクのライン）」は、「上下並び（あるいは横並び）になっている状態」という意味です。

ピンクのラインで揃っているSectionのボックスは、このように上下に並んでいます。（同じ階層）

１字下がりになっているテキストは、その上のSectionのボックスの中に入っています。(ひとつ下の階層)

このように、レイヤーと実際のデザインの関係がどうなっているのかがスルスルっと頭に浮かぶようになると、Studioをサクサク使えるようになる思います。（というか少し勉強すればコーディングもできるようになるかと思います）

下の記事で「Wixとはなにか？」等解説しているので、気になったら見てみてくださいね。

ここまで読めたら、簡単なWebページを一緒に作ってみましょう！下の記事で初心者向けに、実際の操作画面つきで丁寧に解説しているので、一緒に操作して、ぜひ一度つくってみてください。