【初心者用】Studioの使い方｜ノーコードツールStudioの基本操作を解説

「Webサイトを作りたいけどコードが書けない」
「ノーコードツールのStudioを始めたばかりで操作方法がわからない」
そんな方も多いのではないでしょうか。

Studioは、直感的な操作で本格的なWebサイトが作れるノーコードツールですが、初めて使う方にとっては機能が多く戸惑うこともあるでしょう。

この記事では、Studio初心者の方でも理解できるよう、基本操作から実践的な使い方まで、わかりやすく解説します。

この記事を読めば、Studioの基本操作をマスターし、自分でWebサイトを作成できるようになります。

【初心者もできる】Studioの使い方

Studioは、コードを書かずにWebサイトを作成できるノーコードツールです。

初心者でも直感的な操作で本格的なWebサイトが作れるのが特徴です。

まずは基本的な使い方から見ていきましょう。

アカウントの登録

Studioを使い始めるには、まずアカウント登録が必要です。

STEP 1

Studio公式サイトにアクセスし、「無料ではじめる」をクリック

STEP2

以下のいずれかの方法でアカウントを作成

• Facebookアカウントで登録

• Googleアカウントで登録

• メールアドレスとパスワードで登録

STEP3

登録完了後、ダッシュボード画面が表示される

★Studioの動作環境は、PCのGoogle Chromeブラウザ（最新バージョン）が推奨されています。

レスポンシブバーを合わせる

Studioでは、PC・タブレット・スマートフォンなど、様々な画面サイズに対応したデザインを作成できます。これを「レスポンシブデザイン」と呼びます。

STEP 1

デザインエディタ下部のレスポンシブバーを確認

STEP2

デザイン確認したい画面サイズに合わせて選択

• デスクトップ：890px〜1920px

• タブレット：691px～990px

• モバイル：361px～690px

STEP3

各画面サイズごとにデザインを調整

★最初にデスクトップサイズでデザインを作り、その後タブレット、モバイルの順に調整していくのがおすすめです。

エレメンツパネルから必要な要素を追加

Studioでは、左側のエレメンツパネルから様々な要素をドラッグ＆ドロップで追加できます。

STEP 1

左側パネルの「追加」タブをクリック

STEP 2

• ボックス：レイアウトの基本となる四角形の枠

• テキスト：文字を入力するための要素

• 画像：写真やイラストを表示する要素

• その他：動画、アイコン、フォームなど

STEP 3

追加した要素のサイズや位置を調整（レイヤータブで確認）

★ボックスを先に配置し、その中にテキストや画像を入れていく「入れ子構造」で作るとレイアウトが崩れにくくなります。

セクションの編集方法

Webサイトは通常、複数のセクション（区画）で構成されています。
Studioでは、セクションごとに編集を行います。

STEP 1

編集したいセクションをクリックして選択

STEP 2

右側のメニューから編集オプションを選択

• サイズ：幅や高さを調整

• 背景：背景色や背景画像を設定

• 余白：内側・外側の余白を調整

STEP 3

必要に応じてセクション内に要素を追加

★セクションには「最大幅」を設定できます。1280pxなどに設定すると、大きな画面でも見やすいレイアウトになります。

画像やテキストの挿入方法

Webサイトに画像やテキストを追加する方法を見ていきましょう。

▼画像の挿入

STEP 1

左側パネルの「追加」→「画像（Image）」を選択

STEP 2

以下のいずれかの方法で画像を追加

• 「ファイルをアップロード」をクリックして自分のパソコンから画像を選択

• 「画像を検索（Search）」をクリックして無料素材を検索

• すでにアップロードした画像を選択

STEP 3

画像のサイズや表示方法を調整（右側のボックスタブを選択）

• フィット：ボックスに合わせて画像をリサイズ

• フィル：ボックスを画像で埋める（一部切れる場合あり）

• オリジナル：元の画像サイズで表示

▼テキストの挿入

STEP 1

左側パネルの「追加」→「テキスト」を選択

STEP 2

テキストボックスをクリックして文字を入力

STEP 3

右側パネルからテキストのスタイルを調整

• テキスト：書体を選択

• サイズ：文字の大きさを調整

• 色：文字色を変更

• 太さ：文字の太さを調整

• 整列：左揃え、中央揃え、右揃えなどを選択

★見出しには大きめのフォントサイズ、本文には読みやすいサイズを選びましょう。一般的に、見出しは24px以上、本文は16px程度が読みやすいとされています。

プレビューで確認して公開する

デザインが完成したら、プレビューで確認し、問題がなければ公開しましょう。

STEP 1

上部右側パネルの「公開」ボタン横の「プレビュー」ボタンをクリック

STEP 2

各デバイスサイズでの表示を確認

• デスクトップ

• タブレット

• モバイル

STEP 3

問題がなければ「公開」ボタンをクリック

STEP 4

公開設定を選択

• 無料プラン：studio.designのサブドメインで公開

• 有料プラン：独自ドメインで公開

★公開前に必ずリンクの動作確認やスペルチェックを行いましょう。

Webサイトの編集・更新をする

公開後も、必要に応じてWebサイトを編集・更新できます。

STEP 1

Studioにログインし、編集したいプロジェクトを選択

STEP 2

デザインエディタで必要な変更を加える

STEP 3

変更内容を確認し、「公開」ボタンをクリック

STEP 4

「更新を公開」を選択して変更を反映

★大きな変更を行う前には、「バージョンを保存」しておくと安心です。問題が発生した場合に以前のバージョンに戻すことができます。

Studioの基本操作

Studioをより効率的に使うための基本操作を解説します。

ページ・モーダルの追加

複数ページのWebサイトを作成する方法を見ていきましょう。

▼ページの追加

STEP 1

左側パネルの「ページ」タブをクリック

STEP 2

「+」ボタンをクリックしてページを追加

STEP 3

画面右側、ページ名とパス（URL）を設定

• ページ名：管理用の名前（例：会社概要）

• パス：URLの一部（例：/about）

▼モーダルの追加

モーダルとは、ポップアップ表示される小さなウィンドウのことです。

STEP 1

左側パネルの「ページ」タブをクリック

STEP 2

「+」ボタンをクリックし、「モーダル」を選択

STEP 3

モーダル名を設定

★ページ間のリンクは、要素を選択し、右側パネルの「リンク」から設定できます。

例）「HOME」ページのテキスト「詳細を見る」にリンクを貼りたい場合

1. 「詳細を見る」を選択後、右側タブの「設定」をクリック

2. 「リンク」の検索欄で「モーダル」を検索し、選択

ボックスの追加

ボックスはレイアウトの基本となる要素です。効果的な使い方を見ていきましょう。

STEP 1

左側パネルの「追加」→「ボックス」を選択

STEP 2

ボックスをドラッグ＆ドロップで配置

STEP 3

上部メニューからボックスのスタイルを調整

• サイズ：幅と高さを設定

• 背景：色や画像を設定

• 枠線：太さや色を設定

• 角丸：角の丸みを調整

• 影：影の効果を追加

STEP 4

必要に応じてボックス内に他の要素を追加

★ボックスを入れ子構造にすることで、複雑なレイアウトも実現できます。

コンポーネント化

繰り返し使用する要素は「コンポーネント」化すると効率的です。

STEP 1

コンポーネント化したい要素を選択

STEP 2

右クリックして「コンポーネントを作成」を選択

STEP 3

コンポーネント名を入力して作成

STEP 4

左側パネルの「コンポーネント」タブから再利用可能

★ヘッダーやフッター、お問い合わせフォームなど、サイト内で共通して使う要素はコンポーネント化すると便利です。

リンク設定

ボタンやテキスト、画像などにリンクを設定する方法です。

STEP 1

リンクを設定したい要素を選択

STEP 2

右側パネルの「設定」から「リンク」をクリック

STEP 3

リンクタイプを選択

• ページ：サイト内の他のページへのリンク

• URL：外部サイトへのリンク

• メール：メーラーを起動するリンク

• 電話：電話をかけるリンク

• ファイル：PDFなどのファイルをダウンロードするリンク

STEP 4

必要に応じて「新しいタブで開く」にチェック

★外部サイトへのリンクは、セキュリティとユーザビリティの観点から「新しいタブで開く」設定にするのがおすすめです。

アニメーション設定

アニメーションを追加すると、サイトに動きが生まれ、ユーザーの注目を集めることができます。

STEP 1

アニメーションを設定したい要素を選択

STEP 2

右側パネルの「変形」タブをクリック

STEP 3

アニメーションタイプを選択

• 初期表示：ページ読み込み時のアニメーション

• スクロール：スクロールに連動するアニメーション

• ホバー：マウスオーバー時のアニメーション

• クリック：クリック時のアニメーション

STEP 4

アニメーションの詳細設定

• 効果：フェード、スライド、拡大など

• 方向：上、下、左、右など

• 速度：アニメーションの速さ

• 遅延：開始までの遅延時間

★アニメーションは控えめに使うのがコツです。多用すると読み込みが遅くなったり、ユーザーの気が散ったりする可能性があります。

Studioのテンプレートの使い方

Studioには多数のテンプレートが用意されており、ゼロからデザインするよりも効率的にサイトを作成できます。

テンプレートの選び方

STEP 1

新規プロジェクト作成時に「テンプレート」タブを選択

STEP 2

用途や業種に合ったテンプレートを探す

• コーポレートサイト

• ランディングページ

• ポートフォリオ

• ブログ

• ECサイト など

STEP 3

テンプレートのプレビューを確認

STEP 4

気に入ったテンプレートを選択して「このテンプレートを使う」をクリック

★無料テンプレートと有料テンプレートがあります。有料テンプレートはより高度なデザインや機能が実装されていることが多いです。

テンプレートのカスタマイズ

テンプレートを選んだ後は、自分のブランドや内容に合わせてカスタマイズします。

STEP 1

テキストを自分のコンテンツに置き換える

STEP 2

画像を自社の画像に差し替える

STEP 3

色やフォントをブランドに合わせて変更

STEP 4

不要なセクションを削除したり、必要なセクションを追加したりする

★テンプレートの基本構造を大きく変更すると、レスポンシブ対応が崩れる可能性があります。できるだけ元のレイアウト構造を活かしてカスタマイズするのがおすすめです。

Studioでできること

Studioは多機能なツールで、様々なWebサイト制作ニーズに対応できます。
主な機能を見ていきましょう。

ノーコードでフォームの作成

問い合わせフォームなどを簡単に作成できます。

STEP 1

左側パネルの「追加」→「フォーム」を選択

STEP 2

フォームをドラッグ＆ドロップで配置

STEP 3

フォーム項目を追加・編集

• テキスト入力

• メールアドレス

• 電話番号

• チェックボックス

• ラジオボタン

• プルダウン など

STEP 4

送信先メールアドレスや自動返信メールの設定

★必須項目には「必須」マークを付けると、ユーザーが入力漏れを防げます。

記事の制作や公開

ブログ記事などのコンテンツを作成・公開できます。

STEP 1

左側パネルの「ページ」タブから記事用のページを作成

STEP 2

記事のレイアウトを設計

STEP 3

テキストエディタで記事を執筆

STEP 4

画像や動画を挿入して記事を充実させる

★記事ページはテンプレート化しておくと、新しい記事を追加する際に効率的です。

CMSを利用しての記事作成

CMSを使うと、複数の記事を効率的に管理できます。

STEP 1

ダッシュボードから「CMS」を選択

STEP 2

「コレクション」を作成（例：ブログ記事）

STEP 3

必要なフィールドを設定

• タイトル

• 本文

• アイキャッチ画像

• カテゴリ

• 公開日 など

STEP 4

記事データを入力

STEP 5

デザインエディタでCMSリストを配置し、記事一覧や詳細ページをデザイン

★CMSを使うと、デザインと内容を分離できるため、記事の追加や更新が容易になります。

外部プラットフォームとの連携

Studioは様々な外部サービスと連携できます。

STEP 1

右側パネルの「設定」→「連携」を選択

STEP 2

連携したいサービスを選択

• Google Analytics

• Google Tag Manager

• Facebook Pixel

• Mailchimp など

STEP 3

必要な情報（トラッキングIDなど）を入力

STEP 4

連携を有効化

★外部サービスとの連携により、アクセス解析やマーケティング施策の効果測定が可能になります。

Googleアナリティクスの導入

Webサイトのアクセス解析を行うためのGoogle Analyticsの設定方法です。

STEP 1

Google Analyticsでアカウントを作成し、トラッキングIDを取得

STEP 2

Studioのダッシュボードから「設定」→「解析」を選択

STEP 3

Google Analyticsのトラッキングコードを入力

STEP 4

設定を保存して有効化

★Google Analytics 4（GA4）を使用する場合は、測定IDを入力します。

Studioでできないこと

Studioは多機能ですが、一部の高度な機能には対応していません。
制限を理解しておきましょう。

ソースコードを編集できない

Studioはノーコードツールのため、HTMLやCSSなどのソースコードを直接編集することはできません。

▼制限点

• カスタムHTMLの挿入は限定的

• CSSの直接編集不可

• JavaScriptの直接記述不可

▼代替案

• HTMLウィジェットを使用して一部のHTMLコードを挿入

• カスタムコードブロックを使用（一部のプランで利用可能）

• 外部サービスの埋め込みコードを活用

★高度なカスタマイズが必要な場合は、開発者と協力するか、別のプラットフォームの使用を検討しましょう。

大規模ECサイト構築は不向き

多数の商品を扱う大規模なECサイトの構築には向いていません。

▼制限点

• 大量の商品データ管理が難しい

• 複雑な検索・フィルタリング機能の実装が困難

• 在庫管理システムとの連携が限定的

▼代替案

• Shopify、BASE、STORESなどの専用ECプラットフォームを使用

• Studioはコーポレートサイトやランディングページとして活用し、ECサイトは別システムで構築

★少数の商品を扱う小規模なオンラインショップであれば、Studioでも十分に対応可能です。

高度なバックエンド処理はできない

データベース処理や複雑なサーバーサイド処理には対応していません。

▼制限点

• サーバーサイドのプログラミング不可

• 複雑なデータ処理不可

• APIの作成不可

▼代替案

• 外部APIサービスとの連携

• Zapierなどの連携ツールを活用

• バックエンド処理が必要な部分は別システムで構築

★フロントエンド（見た目や基本的な機能）はStudioで、バックエンド（複雑な処理）は別システムで、という組み合わせも効果的です。

StudioでWebサイトを作るなら、格安で高品質ならプロの業者に依頼するのがおすすめ！

実は、当サイトを運営しているラシン株式会社は、Studio社公式のStudio Gold Experts認定企業であり、700サイト以上の制作実績No.1を誇ります。
多彩な業種で培ったノウハウをもとに、成果につながるWebサイトを提供してきました。

私たちが届けるのは、単なる「見た目が良いサイト」ではありません。
新規顧客の獲得、販路拡大、人材採用強化など、確かな成果を生む運用支援を行います。

そして、ホームページ制作をきっかけに企業のDX推進全体を加速させること。
それが私たちラシンの使命です。

不確実な時代でも前進を続けられるよう、信頼できるパートナーとして伴走します。
制作や運用、集客施策を私たちにお任せいただければ、貴社は本来の業務に集中できます。

まずは、お気軽にお問い合わせください。

※この記事の情報は2025年10月時点のものです。Studioの機能やインターフェースは随時アップデートされる可能性がありますので、最新情報は公式サイトでご確認ください。