ノーコードでWebサイトを作れると聞いてSTUDIOを開いてみたものの、真っ白な画面の前で何をすればいいのか分からず閉じてしまった。そんな経験を持つ方は少なくありません。
STUDIOの使い方でつまずく原因は、操作方法ではなく「ボックス」という考え方を知らないことにあります。逆にここさえ理解すれば、あとは同じ操作の繰り返しでサイトが組み上がっていきます。
この記事では、STUDIOの使い方を初心者の方向けに、プロジェクトの作成から公開までの流れに沿って解説します。つまずきやすいポイントと、その回避方法もあわせてまとめました。
始める前に押さえたい「ボックス」の考え方
すべては箱の入れ子でできている
STUDIOで作るページは、大小の箱を積み重ねたり、箱の中に箱を入れたりして構成します。テキストも画像もボタンも、どれかの箱の中に置かれる形になります。
「この要素はどの箱の中にあるのか」を意識できるようになると、思った位置に置けない問題はほぼ解決します。逆にここが曖昧なままだと、要素をドラッグしても意図しない場所に飛んでしまいます。
箱には「並び方」と「余白」を指定する
箱の中に複数の要素を入れると、縦に並べるか横に並べるかを指定できます。さらに、箱の内側の余白と、要素同士の間隔を数値で決めます。
この3つ（入れ子・並び方・余白）が、STUDIOの操作の大半を占めます。見た目を直したいときは、まず「どの箱の設定を変えるべきか」から考える癖をつけましょう。
紙に長方形を描いて、ページ全体をどう箱に分けるか先にスケッチしておくと、画面上で迷う時間が大きく減ります。ヘッダー・メインビジュアル・本文・フッターという大きな箱から描き始めてください。
スケッチ用には方眼のノートを1冊用意しておくと、箱の大きさや比率をそろえて描きやすくなります。
手順1：プロジェクトを作る
アカウント登録とプロジェクト作成
STUDIO公式サイトからアカウントを作成し、新しいプロジェクトを立ち上げます。白紙から始めるか、用意されているテンプレートから始めるかを選べます。
初めての場合は、テンプレートから始めて構造を観察するのがおすすめです。完成しているサイトの箱の入れ子を見ていくと、自分で組むときの手本になります。
Freeプランで最後まで作れる
記事執筆時点の公式の料金ページでは、Freeプランでもページ数50・CMSモデル3件・ストレージ5GBまで利用できます。小規模なサイトであれば、無料の範囲で公開まで到達できます。
ただし、独自ドメインの接続とSTUDIOバナーの非表示は、Mini以上の有料プランで対応する形です。料金は改定されることがあるため、契約前に公式ページで確認してください。
手順2：レイアウトを組む
大きな箱から作る
いきなり細部を作らず、ページを縦に区切る大きな箱から配置します。ヘッダー、メインビジュアル、サービス紹介、お問い合わせ、フッターといった単位です。
それぞれの箱に背景色を仮で入れておくと、境界が見えて構造を把握しやすくなります。仮の色は後から消せばいいので、遠慮なく使いましょう。
中身を入れていく
大きな箱ができたら、その中にテキストや画像を入れていきます。ここでも、まとまりごとに箱を作ってから中身を入れると、後から位置を調整しやすくなります。
要素を1つずつ絶対位置で置いていくと、画面幅が変わったときに崩れます。面倒でも、まとまりごとに箱を作る習慣をつけてください。
幅の指定を使い分ける
箱の幅は、固定の数値で決める方法と、親の箱に対する割合で決める方法、中身に合わせて自動で決まる方法があります。画面幅が変わっても崩れないサイトにしたいなら、割合と自動を中心に組むのが基本です。
手順3：レスポンシブ対応を整える
ブレイクポイントごとに調整する
STUDIOでは、パソコン・タブレット・スマートフォンといった画面幅ごとに表示を切り替えられます。編集画面の上部で表示幅を切り替えながら、それぞれのレイアウトを整えていきます。
スマートフォン表示で確認する項目
- 横並びの要素：パソコンで横に並べた3つの要素が、スマートフォンでは縦に並ぶよう変更する
- 文字サイズ：パソコン向けの大きな見出しは、そのままだと画面からはみ出す
- 余白：左右の余白が広すぎると、本文が読みにくくなる
- 画像の高さ：横長の画像は、縦長の画面では小さくなりすぎることがある
パソコン表示を完成させてから、スマートフォン表示を整える順番が作業しやすいです。両方を同時に作ろうとすると混乱します。
画面幅に応じて並び方が切り替わる仕組みは、CSSのレイアウトの考え方とよく似ています。HTMLとCSSの基本を扱った本を手元に置いておくと、設定の意味を理解しやすくなります。
手順4：CMSでブログやお知らせを作る
公式が案内している流れ
記事を更新できる仕組みを作りたい場合は、CMS機能を使います。STUDIOのヘルプセンターでは、次の流れが案内されています。
- CMSダッシュボードを開いて機能を有効化する：白紙から始めるか、テンプレートや既存データの読み込みを選ぶ
- CMSモデルを作る：「記事」のようなコンテンツの枠組みを定義する
- CMSアイテムを追加する：1本ごとの記事にあたるデータを追加し、本文を入力する
- CMSプロパティを追加する：タイトルやカバー画像といった関連情報の項目を用意する
- 動的ページを作って紐付ける：デザインエディタで動的ページを追加し、ボックスに各プロパティを割り当てる
- アイテムの公開ステータスを変更する：「公開中」に切り替える（未来の日時を指定した予約公開も可能）
モデル・アイテム・プロパティの関係
用語が分かりにくいので整理しておきます。モデルが「記事という型」、アイテムが「1本ごとの記事」、プロパティが「記事が持つ項目」という関係です。
表計算ソフトで言えば、モデルがシート、アイテムが行、プロパティが列に当たります。この対応で考えると、設定画面の意味がつかみやすくなります。
手順5：公開する
サブドメインで公開する
デザインが完成したら、公開の操作に進みます。STUDIOのサブドメインを設定すれば、その場で公開できます。修正した内容も、公開の操作をするたびに反映されます。
独自ドメインを接続する
自分で取得したドメインで公開したい場合は、有料プランに切り替えたうえでドメインを接続します。ドメイン側の設定変更が必要になるため、手順はヘルプセンターの案内に沿って進めてください。
公開後は、編集画面のプレビューではなく実際のURLをブラウザで開いて確認しましょう。編集画面では動いていたリンクや動きが、公開後の環境では想定と違う挙動になることがあります。スマートフォンの実機確認も忘れずに行ってください。
初心者がつまずきやすい場面と対処法
要素が思った場所に置けない
ほとんどの場合、入れ子の階層が原因です。置きたい場所の親になる箱を選び直してから配置すると解決します。階層はレイヤーの一覧で確認できるので、迷ったらそこを見ましょう。
画面幅を変えるとレイアウトが崩れる
幅を固定の数値で指定している箇所が原因になりがちです。割合指定や自動指定に変更すると、幅の変化に追従するようになります。
余白が思い通りにならない
箱の内側の余白と、要素同士の間隔は別の設定です。「箱の内側を空けたいのか、要素の間を空けたいのか」を区別すると、どちらを触るべきかが分かります。
フォントの見え方が違う
使用しているフォントが環境によって置き換わることがあります。日本語のWebフォントを指定しておくと、閲覧する端末による差が出にくくなります。
公開前に確認しておきたいこと
ページごとの設定を埋める
デザインが完成しても、ページの設定が空のままでは検索結果やSNSでの見え方が整いません。ページタイトルと説明文は、ページごとに個別に設定しておきましょう。SNSでシェアされたときに表示される画像も、指定しておくと印象が変わります。
リンク切れとフォームの動作を確認する
ボタンのリンク先が未設定のまま公開されている、というのは非常によくある見落としです。すべてのボタンとナビゲーションを一度クリックして、意図した場所に飛ぶかを確認してください。
問い合わせフォームを設置した場合は、自分宛てにテスト送信して、通知が届くかまで確かめます。フォームが動いていないサイトは、問い合わせが来ていないのか届いていないのかも分かりません。
表示速度に配慮する
写真をそのままアップロードすると、ファイルサイズが大きくなり読み込みが遅くなります。掲載する大きさに合わせて縮小し、圧縮してからアップロードしましょう。画像1点の削減が、ページ全体の体感速度に効いてきます。
効率よく習得するために
小さいサイトを1つ作り切る
解説を読み込むより、3ページ程度の小さなサイトを完成させる方が理解は進みます。自分のプロフィールサイトや、架空のカフェのサイトなど、題材は何でも構いません。
完成まで持っていく過程で、一通りの機能に触れることになるため、記憶に残りやすくなります。
デザインの基礎を並行して学ぶ
操作を覚えても、余白や文字サイズの判断ができないと仕上がりは変わりません。『ノンデザイナーズ・デザインブック』のような基礎書を1冊読んでおくと、箱の設定を触るときの根拠ができます。
配色に悩むことが多いなら『配色アイデア手帳』、レイアウトの引き出しを増やしたいなら『あるあるデザイン』のような事例集が手元にあると便利です。
作業環境を整える
編集パネルとプレビューを同時に見る作業が多いため、画面が狭いと効率が落ちます。ノートパソコン1台での作業に窮屈さを感じているなら、27インチのWQHDモニターを1枚追加するだけで作業のしやすさが変わります。
長時間の細かい操作が続くので、手首への負担を減らすトラックボールマウスや、角度を調整できるノートパソコンスタンドもあわせて検討する価値があります。
よくある質問
Q. HTMLやCSSの知識は必要ですか？
コードを書く必要はありません。ただし、箱の入れ子や余白の考え方はCSSの構造とよく似ているため、基本を知っていると習得が早くなります。知らない場合でも、操作しながら自然に理解できる範囲です。
Q. 作ったサイトを他のサーバーに移せますか？
移せません。STUDIOで作ったサイトはSTUDIO上で運用する前提です。将来的に別の環境へ移す可能性があるなら、この点を踏まえて選択してください。
Q. 通販サイトは作れますか？
本格的なEC機能は標準では備わっていません。外部サービスと組み合わせて対応する形になりますが、実現できる範囲には限りがあります。商品数が多い通販サイトは別の手段を検討する方が現実的です。
Q. 複数人で編集できますか？
プランによってメンバーの招待に対応しています。人数の上限はプランごとに異なるため、チームで運用する場合は公式の料金ページで条件を確認してください。
Q. 作成中のサイトを他人に見せられますか？
公開すればURLを共有できます。仕上げ前の段階で関係者に確認してもらいたい場合は、サブドメインで一度公開して共有し、指摘を反映してから独自ドメインに切り替えるという進め方ができます。
まとめ
STUDIOの使い方は、ボックスの入れ子・並び方・余白という3つの概念を押さえることから始まります。ここを理解したうえで、大きな箱から順に組み、レスポンシブを整え、必要ならCMSを設定して公開する。この流れが基本の型です。
操作を暗記するより、小さなサイトを1つ完成させる方が着実に身につきます。Freeプランで最後まで作れるので、まずは3ページ程度のサイトを題材に手を動かしてみましょう。
あわせてデザインの基礎書を1冊読み、作業環境を整えておくと、上達の速度は目に見えて変わってきます。
