初心者でも分かるStudioの使い方｜プロが教える設定手順と事例

「Webサイトを自社で作りたいけど、コードは書けないし難しそう」
「Studioが流行っているけど、本当に自分たちだけで運用できるのか不安」

そんな悩みをお持ちではありませんか。

実は、Studioは直感的に使える便利なツールですが、デザインや構成のコツを知らずに作ってしまうと、いかにも「素人っぽいサイト」になってしまい、企業の信頼を損なう可能性があります。

本記事は以下のような方におすすめです。

Studioのアカウント登録から基本的な操作方法、プロが教える「素人っぽくならない」デザインのコツ、さらには制作事例まで詳しく解説します。

さらに、無料プランと有料プランの選び方や、成果が出るサイト運用のポイントまで網羅的に紹介するので、読み終える頃には自信を持ってStudioでのサイト制作をスタートできるようになるでしょう。

THINkBALは、Studioを活用したWebサイト制作において数多くの実績があり、デザイン制作から公開後のマーケティング運用まで、貴社の課題に合わせたサポートを一貫して提供しています。

まずはお気軽にご相談ください。

>>THINkBALにWeb制作について相談する

「Studio（スタジオ）」は、HTMLやCSSといったプログラミングコードを一切書かずに、直感的な操作だけでWebサイトを作成・公開できる国産のノーコードツールです。

これまで、Webサイト制作といえば「WordPress（ワードプレス）」が主流でしたが、サーバーの契約やセキュリティ管理、専門的なコードの知識が必要といったハードルがありました。

Studioはそれらの面倒な作業をすべて自動化し、「デザインを作る感覚」そのままでWebサイトとして世の中に公開することを可能にしました。

現在では、スタートアップ企業から大手企業のキャンペーンサイト、官公庁に至るまで、幅広いWebサイトがStudioで制作されています。

Studio導入企業一覧はこちら

数多くのWeb制作ツールを扱ってきた現役デザイナーの視点から見ても、Studioには他のツールにはない「圧倒的な強み」があります。

プロが選ぶ理由は主に以下の7点です。

海外製のノーコードツール（Webflow、HubSpotなど）は機能が豊富ですが、管理画面が英語であることが多く、初心者にはハードルが高いのが難点です。

Studioは日本発のツールであるため、管理画面からヘルプページ、チャットサポートに至るまですべて日本語に対応しています。

「英語を翻訳しながら操作する」というストレスがないため、学習スピードが格段に上がります。

パワーポイントやCanvaのような操作感で、画像やテキストをドラッグ＆ドロップして配置できます。

コードを書く必要がないため、エンジニアに依頼せずとも、デザイナーやマーケティング担当者だけでサイトの修正・更新が完結します。

これはビジネスのスピード感を高める上で非常に大きなメリットです。

デザインエディタ機能詳細はこちら

一般的なホームページ作成ツールは、決まったテンプレートの写真と文字を入れ替えるだけのものが多いですが、Studioは「白紙（まっさらな状態）」から自由にレイアウトを組むことができます。

ピクセル単位（1px）での微調整が可能で、ブランドの世界観を妥協することなく表現できます。

Studioには期限なしで使える「Freeプラン」が用意されています。

公開できるページ数や機能に一部制限はありますが、Webサイトの構築から公開までを無料でおこなえるため、まずはリスクなく操作感を試すことができます。

Studioはサーバーやシステムが一体型になっているサービス（SaaS）です。

そのため、WordPressのようにレンタルサーバーを契約したり、セキュリティアップデートを自分で行ったりする必要がありません。

※2025年12月時点の税込価格です。最新情報は公式サイトをご確認ください。

ランニングコストを抑えられるのがStudioの魅力ですが「じゃあプロに制作を依頼したらいくら掛かるの？」と疑問に思う方もいるでしょう。

以下の記事で制作費用の相場について詳しく解説しています。

操作で分からないことがあっても、画面右下のチャットボットからすぐに質問ができます。

有料プランであればオペレーターによる直接サポートも受けられるため、制作中に詰まってしまうリスクを減らせます。

StudioのCMS（コンテンツ管理）機能は、単なるブログ機能にとどまりません。

エディタ上でチームメンバーとリアルタイムに共同編集ができたり、記事の「予約公開」ができたりと、オウンドメディアのチーム運用に必要な機能が揃っています。

既存のWordPressサイトから記事データをワンクリックで移行できる「インポート機能」もあるため、サイトリニューアルのハードルも低くなっています。

Studio CMSの機能詳細はこちら

万能に見えるStudioですが、決して「何でもできる魔法のツール」ではありません。

導入してから後悔しないよう、プロが認識しているデメリット（弱点）も包み隠さずお伝えします。

Studioは独自のプラットフォーム上で動作しているため、制作したサイトのHTMLやCSSファイルを書き出して、そのまま別のサーバーへ移す（エクスポートする）機能はありません。

そのため、将来的にWordPressなどへ引っ越しをする場合は「テキストや画像データを移行し、デザインは移行先で再構築する」という作業が必要になります。

ボタン一つでサイトを丸ごとコピーして移動することはできませんが、記事データの移行ツールや手動での移行をおこなうことで、コンテンツを引き継いでリニューアルすることは可能です。

Studioはあくまで「情報を発信するWebサイト」を作るのが得意なツールです。

このような「システム開発」を伴うサイトには不向きです。

企業サイトとして運用する場合、信頼性の観点から「独自ドメイン」の使用や、Studioの広告バナーの非表示は必須です。

そのためには有料プラン（Starterプラン以上）への加入が必要になります。

月間のアクセス数（PV）が非常に多いサイト（月間100万PV〜など）の場合は、上位プランへのアップグレードが必要になり、コストが上がる可能性があります。

ここからは、実際にStudioを使ってWebサイトを公開するまでの手順を、3つのステップで解説します。

まずはStudioの公式サイトにアクセスし、アカウントを作成します。

「ログイン/新規登録」ボタンをクリックし、メールアドレスやGoogleアカウント、Facebookアカウントで登録をおこないます。

登録は1分ほどで完了します。

ログインすると「新規プロジェクト作成」画面になります。

ここで「新しいプロジェクト」または「テンプレートから始める」を選んでスタートします。

プロジェクトを作成すると、デザイン編集画面（エディタ）が開きます。

Studioの操作で初心者が最もつまずきやすいのが「ボックスモデル」という概念です。

Studioでは、要素を「積み木」のように積み重ねてレイアウトを作ります。

思った場所に配置できないときは、適当に置こうとせず「親ボックス（枠）」の中に「子要素（画像や文字）」を入れるというルールを意識するとスムーズに操作できます。

デザインが完成したら、画面右上にある「公開」ボタンを押します。

サブドメイン（好きな文字列.studio.site）を設定し、保存すれば即座にインターネット上に公開されます。

修正したい場合も、エディタで変更を加えてから「更新」ボタンを押すだけ。

FTPソフトなどを使った面倒なアップロード作業は一切不要です。

Studioは誰でも簡単に作れる反面、デザインの知識がないまま作ると「いかにも素人が作ったサイト」になりがちです。

プロっぽい仕上がりにするための2つのコツを紹介します。

テンプレートは便利ですが、そのまま使うと他社と被ったり、自社のブランドイメージと合わなかったりします。

「フォント（書体）」と「配色（カラー）」を変えるだけでも、オリジナリティがグッと高まります。

PCの画面で完璧に作っても、スマホで見るとレイアウトが崩れていることはよくあります。

Studioは画面上部または下部のアイコンで「PC / タブレット / モバイル」の表示を切り替えられます。

今の時代、閲覧者の6〜7割はスマホからのアクセスです。

「スマホで見たときにどう見えるか」を優先して調整することが、プロ品質への第一歩です。

ここからは、実際にSTUDIOで作成されたサイトの事例を5選ご紹介します。

どれも「これがノーコード？」と驚くようなクオリティです。

どのようなビジネス・企業で活用されているのか、参考にしてみてください。

デザイナーを対象としたコミュニティを展開している「VOGLIO Creative Cafe」のWebサイトです。

静的なデザインが中心ですが、文字がフェードインするように表示されるなど、部分的に動きも取り入れられています。

ランディングページのように、トップページにほとんどの情報を盛り込んでいるのが特徴です。

スクロールしながら、一通りユーザーが情報を把握することができ、分かりやすく理解しやすい設計となっています。

コミュニケーションアプリの「LINE」とも連携していて、よりユーザーが活用しやすいように工夫されています。

インパクトのある人物イラストをトップに配置して、人目を引くデザインが特徴です。

ブルーをベースにした個性的なデザインであり、画像やイラストも豊富に活用しています。

バナーやメニューバーなどが配置されておらず、サイト内のコンテンツに集中しやすい点もポイントです。

複数の画像を自動でスライドしてユーザーに見せたり、イラストに動きをつけたりと、遊び心も感じられるサイトです。

まるでアニメのような壮大なデザインが特徴のWebサイトです。

アクセスすると、画面を覆っていた霧が晴れるようなアニメーションが採用されていて、ユーザーのワクワク感を引き立てます。

茨城の魅力をスマホ画面におさめたように、サイトに表示されているスマホ画面には茨城の風景が映し出されています。

映像が用いられているため、写真よりもよりリアルに魅力を感じられる点がポイントです。

地図の見せ方やキャッチコピーの表示方法などに動きを持たせていて、ストーリー性も感じられるデザインといえます。

企業サイトとしてSTUDIOが活用されるケースも多く「ロゴラボ」はその一例です。

ビジネスサイトとして必要とされるバナーやロゴ、CTA、メニューなども基本に沿って配置されています。

取引先情報は、右から左へ流れるように動きを設けていて、一目で「どのような顧客がいるのか」が分かるように工夫されているのが特徴です。

映像・音声による案内も埋め込みされていて「何を選んだら良いのか分からない」といったユーザーが次のアクションを選択しやすいように配慮されています。

居酒屋のWebサイトとして作成・運用されているWebサイトです。

全体的に表示する情報が絞られていて、シンプルな設計となっています。

しかし、キャッチコピーや紹介文などはフェードインするような動的デザインを採用していて、ユーザーの興味を引くよう工夫されています。

余白も十分にとっていて、すっきりと見やすいデザインです。

料理やお酒の写真も配置されていて、うまくお店の魅力をアピールできています。

Studioは非常に優れたツールであり、操作自体は難しくありません。

しかし「操作ができること」と「成果の出るWebサイトが作れること」は別問題です。

これらを自社だけで完結させるには、多くの時間と専門知識が必要です。

「Studioを使ってコストを抑えたい、でもクオリティや成果には妥協したくない」 そのようにお考えの企業様は、ぜひTHINkBALにご相談ください。

THINkBALでは、コンテンツ制作やマーケティングの知見を活かし「見た目が良いだけでなく、ビジネスに貢献するWebサイト」をStudioで制作いたします。

>>THINkBALにWeb制作について相談する

内部リンク

これからStudioを始める方が疑問に思うポイントをQ&A形式でまとめました。

はい、可能です。

 ただし、画面左下に「STUDIO」というロゴバナーが常に表示されます。

独自ドメインが使えないため、信頼性が重要視される企業の公式サイトとしては推奨されません。

まずは無料で作り込み、公開のタイミングで有料プランに切り替えるのが一般的です。

Starterプラン以上の有料プランで利用可能です。

「お名前.com」などで取得したドメインをStudioに接続して使用できます。

以前は弱点といわれていましたが、現在は改善されています。

 基本的なSEO設定（タイトル、ディスクリプション、hタグ設定など）はすべて可能です。

SEOの強さはツールよりも「コンテンツの質」に依存するため、Studioだから順位が上がらないということはありません。

SEO機能詳細はこちら

公式のYouTubeチャンネルが一番の教科書です。

Studioはアップデートの頻度が高いため、書籍だと情報が古くなってしまうことがあります。

まずは公式YouTubeチャンネルのチュートリアル動画（Studio 使い方 動画などの検索で見つかります）を見るのが、最も分かりやすく確実です。

StudioYouTubeチャンネルはこちら

Studio公式ガイドはこちら

Studioの活用は、専門知識がない方でもコストを抑えてスピーディーにWebサイトを持つための、最も有効な手段の一つです。

しかし「誰でも簡単に作れる」からこそ、ただ作っただけのサイトでは競合他社と差別化できず、期待した成果（お問い合わせや認知拡大）につながらないことも事実です。

最も重要なのは、ツールを使いこなすこと自体ではなく、そのサイトを通じて「誰に何を伝え、どう行動してもらうか」という設計の部分です。

とりあえず形にすることだけをゴールにするのではなく、企業のブランド価値を高め、ビジネスを加速させるためのWebサイト構築を目指しましょう。

この記事で得た知識をもとに、まずは無料で触ってみるもよし、クオリティを求めてプロの手を借りるもよし、自社のフェーズに合った最適なWeb活用への第一歩を踏み出してください。

Studioを用いたサイト制作やリニューアル、デザインのブラッシュアップでお困りのことがあれば、ぜひTHINkBALにご相談ください。

Web制作のプロフェッショナルが、貴社のビジネスゴールに合わせた最適な構成とデザインをご提案いたします。導入支援から制作、公開後の運用まで、成果にこだわったサポートを提供します。

>>THINkBALにWeb制作について相談する