「コーディングスキルはないけれど、自分でWebサイトを作ってみたい！」
「手軽にWebサイトを制作できるのが理想だけれど、デザイン性も諦めたくない」
ノーコードでスピーディーにWebサイトが作れるのに、オリジナルのデザインや多彩な機能が実装できるとしたら、最高だと思いませんか？
そのような欲張りな願いを叶えてくれるWeb制作ツールこそ「STUDIO」です。
ただし、STUDIOにもできないことがあります。STUDIOで作ったサイトをより使いやすいものにするためには、デメリットも把握しておかなければなりません。
そこで本記事では、STUDIOの特徴と使い方を紹介します。無料・有料の違いやほかのノーコードCMSと比較したSTUDIOの魅力もわかる内容ですので、まだ使ったことのない方はぜひご一読ください。
STUDIOとは？
STUDIOとは、プログラミング言語不要でWebサイト構築・更新やアプリ開発ができるノーコードCMS（コンテンツ・マネジメント・システム）の一種です。主に、以下のような特徴を備えています。
- 専門知識不要でホームページ制作・管理が可能
- 豊富なデザイン性
- 複数人数で共同作業ができる
- 幅広い料金プラン設定
STUDIOでは、サーバーレスで難しい操作やコーディングは一切いりません。Web制作の知識がなくても感覚的に操作が可能です。また、デザイン性が高く、自由にWebサイトのデザインを構築できます。
ノーコードで利用できるほかのCMSとは異なり、テンプレート・オリジナルデザインどちらにも対応しているところもうれしいポイントです。
STUDIOを活用することで、ノースキルかつシンプルな操作のみでサイトが構築できるようになり、人的コスト削減や開発スピードアップにつながります。
幅広い規模の企業・官公庁でも利用されているだけではなく、個人やフリーランスにも対応できる汎用性の高いシステムです。ユーザーからの注目度・評判も上々であり、今後のさらなるサービス拡大が望まれています。
Webサイトをノーコード制作できるSTUDIOの使い方
STUDIOを利用し、ノーコードでWebサイトを構築する際の基本的な使い方は、次の7ステップです。
- アカウント登録
- チュートリアル
- プロジェクト作成
- デザイン編集
- ドメイン選択
- 確認
- 公開
初心者の方にもわかりやすいよう、各ステップでのポイントやコツも紹介します。
なお、STUDIOの初心者向けの勉強方法についてはこちらの記事で詳しくお伝えしていますので、あわせてぜひご覧ください。
【初心者向け】STUDIOの学習方法｜ノーコードの使い方をマスターするコツと必読本5選
アカウント登録
まず、STUDIOで利用を希望する料金プランを選び、新規登録してユーザーアカウントを作成します。登録方法は以下3通りですので、任意で選択してください。
- メールアドレス
- Googleアカウント
ログインパスワードを設定すれば、登録作業は完了です。
チュートリアル
アカウント登録後、基本機能のチュートリアルを受けるかどうかの案内があります。チュートリアルは、不要な場合には省略しても構いません。チュートリアルが受けられる内容は、以下のとおりです。
- 画像ボックス追加、サイズ調整、画像挿入
- テキスト追加、サイズ設定、文字間隔調整
チュートリアルの内容をマスターすれば、問題なくSTUDIOを使いこなせるようになります。チュートリアル動画はマイページからいつでも閲覧できるため、初心者でも安心です。
プロジェクト作成
続いて、制作予定のWebサイトのプロジェクトを作成します。プロジェクトの作成方法は、大きく分けて以下2つです。
- 白紙から作成
- テンプレートから作成
CMSモデルを利用してWebサイトを構築する場合は「白紙から作成」を選択したあと「CMS Basic」を選びましょう。テンプレートには有料・無料があり、ランキングやカテゴリからも検索できます。
カテゴリは「ビジネス」「ブログ＆メディア」など複数のカテゴリに分かれているため、目的やイメージに合わせて選択してください。
デザイン編集
作成したプロジェクト画面にある「デザインエディタ」から、以下の項目を編集します。
- 表示サイズ
- エレメンツ選択および追加
表示サイズは、デザインエディタの上方にある「レスポンシブバー」から変更できます。なお、STUDIOのデフォルトサイズは、パソコンのデスクトップサイズです。
「ボックス」「画像」「テキスト」などのエレメンツの追加・変更は、デザインエディタの左方にある「エレメンツパネル」から操作できます。
ボックスの内外の余白や角の形を変えたいときは、操作したいエレメンツパネルを選択してクリックもしくはドラッグ＆ドロップするだけでOKです。
「グループ化機能」を使用すれば、レスポンシブバーやエレメンツパネルの編集内容を一括で設定できます。グループ化機能の使い方は、範囲を選択してから右クリックで出現するメニューをクリックしてください。グループ化された内容は「親ボックス」と呼ばれる枠内でまとめて操作できるようになります。
ドメイン選択
サイトのデザインが決まったら、ドメインを選択します。なお、ドメインとはWebサイトの住所といえるものであり、わかりやすくいうと「URL」のことです。
基本的に、STUDIOのサブドメインを使用することになりますが、有料プランでは独自ドメインを設定することも可能です。
確認
Webサイトの機能・デザインの構築作業が終了したら、公開前に閲覧者からどのように見えているかを確認します。STUDIOには「ライブプレビュー機能」がありますので、見やすさや動作をチェックしましょう。
公開
確認を終えれば、あとは公開することでサイト構築が完了です。編集エディタの右上方もしくはダッシュボード内にある「公開設定」をクリックすれば、制作したサイトが外部に公開される仕組みになっています。
Webサイトをノーコード制作できるSTUDIOでできること
Webサイトをノーコードで制作できるSTUDIOでは、無料プラン・有料プランによって設定できる機能が異なります。ここからは、それぞれのできることの違いを解説しますので、プラン選択の際の参考にしてください。
無料プランでできること
STUDIOの無料プランでは、下記7つの機能を使えます。
- オリジナルデザイン
- モーション設定
- SEO対策
- レスポンシブ対応
- iframe機能
- 外部データ連携
- フォーム設置
無料プランだけでも、基本的な機能を搭載したシンプルなサイトなら十分制作が可能です。各機能の詳細をみていきましょう。
オリジナルデザイン
STUDIOの強みは、無料かつノーコードにもかかわらず、Webサイトをオリジナルでデザインできる点にあります。操作も極めてシンプルであり、ドラッグ＆ドロップのみで完了する手軽さも魅力です。
デザイン性の面だけでも、テンプレートをカスタマイズする方式が多いほかのノーコードCMSとは一線を画していることがわかります。
デザインの修正や追加も容易であり、テキストの縦書き・横書きや書体の変更など、デザインにとことんこだわれるノーコードツールです。
モーション設定
STUDIOでは、アニメーションの挿入もコーディングが一切必要ありません。ノーコードの簡単操作で、以下2種類のモーション設定が可能です。
- appear：ページ読込時に動きをつける
- hover：カーソルが置かれたときにアニメーションが起動
モーションはそれぞれ微調整もできるため、ダイナミックなアニメーションから繊細な動きまで、好みに合わせて表現できるでしょう。
SEO対策
STUDIOは、無料プランでも見出しタグの挿入や画像の代替テキスト設定ができることから、サイト構築時に簡単なSEO対策が施せます。
SEOにおいて重要性の高いサイトマップ送信にも対応しており、いかなる状況でも記事内の情報が正確に表示されるため、Webサイトを手軽に最適化できるでしょう。
レスポンシブ対応
STUDIOのデフォルトはパソコン向けの設定になっていますが「レスポンシブ設定」にも変更できます。レスポンシブ設定とは、スマートフォンやタブレットなど画面サイズが小さなデバイス向けの画面表示のことです。
読者のデバイスの画面サイズに応じ、サイトのデザインやレイアウトが自動で最適化される機能を搭載できます。
iframe機能
STUDIOの「iframe機能」なら、外部コンテンツのコードを取得するだけで、Webサイト内へ外部コンテンツを埋め込めます。
iframeとは、特定のページから外部コンテンツにリンクできるように設定する機能です。YouTubeやGoogleフォームなど、さまざまな外部コンテンツを盛り込んだWebサイトを構築できます。
外部データ連携
STUDIOの無料プランでも、一部のRSSやAPIと連携できるようになりました。
例えば、外部サービスの記事リストを埋め込めるため、紐付け先の更新内容がSTUDIOのページに自動で反映されます。
そのほか、noteなどで公開した情報を埋め込むことでブログ更新などのアナウンスも可能になり、より使いやすいノーコードCMSへとアップデートされています。
フォーム設置
さまざまなボックスやパーツを組み合わせてフォームが設置できる機能も、STUDIOなら無料で使えます。問い合わせフォームやサンクスページの設定のほか、問い合わせ時のメール通知なども搭載することが可能です。
なお、フォームから送信できるコンタクト数は、プランによって異なります。
フォーム設置の操作方法は、所定のボックス内にドラッグ＆ドロップするだけで完了です。設定した内容は、ダッシュボードからフォーム名ごとに確認できます。同一名のフォームを複数作成しておけば、それぞれの送信内容が一覧で表示されるため便利です。また、Zapierと連携することで、問い合わせへの自動返信も設定できるようになります。
有料プランでできること
続いては、有料プランに登録するとできるようになる以下3つの機能を紹介します。
- 独自ドメイン取得
- Google Analyticsとの連携
- HubSpot Trackingとの連携
無料プランの機能に加え、さらに使いやすい機能が満載です。それぞれの機能について、くわしくみていきましょう。
独自ドメイン取得
無料プランでは、利用できるドメインはSTUDIOの共有URLのみです。一方、有料プランになると、企業や個人の独自のドメインが取得できるようになります。
独自のドメインが使えることで、検索エンジンからの信頼性を高められ、Webサイトへの流入の増加が期待できるでしょう。
また、独自のドメインであればサーバー変更やWebサイトのリニューアル時にそのまま引き継げる点もメリットです。
Google Analyticsとの連携
STUDIOの有料プランにはGoogle Analyticsと連携できる機能が使えるため、集客効果の分析が手軽にできます。測定IDとトラッキングIDを入力することで、Webサイトや広告のクリック数やCV数などが数値として視覚化される仕組みです。
なお、ユニバーサルアナリティクス（UA、Google Analytics3）は2023年7月1日をもってサポート終了しているため、STUDIOと連携できるのはGoogle Analytics4のみとなっています。
HubSpot Trackingとの連携
STUDIOの有料プランに加入すると、HubSpot Trackingの有料サービスであるトラフィックアナリティクス計測ができるようになります。
ブラウザのCookieにより、サイト訪問者の確認・追跡が可能です。ただし、サポート範囲は連携するところまでとなっているため、使い方など不明点がある場合は別途HubSpot Trackingへ問い合わせてください。
STUDIOではできないこと
ノーコードで幅広い使い方ができるSTUDIOですが、次の4項目は有料・無料を問わずできません。
- コード編集
- 外部フォント新規追加
- ページネーション
- 外部端末からの操作
上記のことができないからといって、Webサイトの制作に大きな影響を与えるほど重大な欠点ではありません。ただ、独自の改変などの特殊な操作をしたい方にとっては目的が達成できない可能性があるため、できないことをあらかじめ把握しておきましょう。
コード編集
STUDIOは、HTML・CSSなどのプログラミング言語を駆使して一からコーディングするテクニカルなサイト構築には対応していません。
基本的に、STUDIOとは元から実装されている機能を挿入していくことでWebサイトを構築するノーコードツールです。
ただし、STUDIOにもついに「カスタムコード機能」が実装され、一部のソースコードが編集できるようになりました。STUDIOのカスタムコードで埋め込めるのは、次の3つの機能です。
- embed
- <head>
- <body>
なお、無料プランではembedのみ、有料プランではとの2つのタグへのカスタムコード機能が追加されます。
タグ内の末尾に独自のHTMLやJavaScriptを埋め込むことで、ローディングアニメーションを変更ができたり、外部ツールと連携させたりすることが可能です。
ただ、すべてのタグが埋め込めるわけではないため、不明点がある場合はあらかじめ問い合わせて確認しておくと安心でしょう。
外部フォント新規追加
STUDIOで使用できるフォントは、デフォルトで実装されているもののみです。外部で取得したフォントのアップロード・インポートには対応していないため、特定の書体を使用したWebサイトを構築する予定の方は注意してください。
とはいえ、STUDIOでは、定番を含む900種類以上ものフォントを無料で使用できます。よほどこだわりがない限りは、外部フォントが使えなくてもさして問題にならないでしょう。
ページネーション
STUDIOは、「ページネーション機能」に非対応のノーコードツールです。ページネーションとは、記事内の情報を複数のページに分割することを指します。
例えば、冒頭に設置されたリンクから各ページへ直接アクセスするリンクは、ページネーション機能があるからこそ設置できる機能です。
STUDIOにはページネーションが設定できないため、情報量の多い記事だと見づらくなりがちです。閲覧時にストレスを与えるWebサイトは読者が離脱しやすいため、PV数が伸びにくくなるおそれがあります。
STUDIOで長文のページを制作する場合は「もっと見るボタン」を設置し、下方へと読み込んでいくように設定することで視覚的に読みやすくする工夫を施しましょう。
外部端末からの操作
STUDIOの動作環境は、パソコンのみです。さらに、Google Chromeのみに対応しているため、利用の際は動作環境に注意してください。また、スマートフォンやタブレットなどを用いて作業することはできないため、STUDIOを社外や屋外などでも利用したいときは、必ずノートパソコンを持ち歩かなければなりません。
顧客の会員登録機能
STUDIOには、利用者の登録機能が実装されていません。
そのため、構築したWebサイト上で会員制のコミュニティを作ることは不可能です。コメント機能や掲示板などコミュニティを形成したい場合は、外部ツールを利用する必要があります。
STUDIOのメリット・デメリット
ここからは、STUDIOで作ったサイトのメリット・デメリットをお伝えします。メリットとデメリットの比較をとおして、STUDIOとはどのような人・ケースに適しているノーコードツールなのかを考えていきましょう。
STUDIOを利用するメリット
Webサイトの構築にSTUDIOを用いれば、以下の3つのメリットが得られます。
- 手軽かつスピーディーにWebサイトを構築できる
- デザイン性が高い
- サポート体制が充実している
STUDIOなら、迅速にWebサイトを構築したい場合やデザインにこだわりたい人など、幅広いニーズを満たせます。また、初心者でも手を出しやすい環境が整備されている点もSTUDIOのメリットのひとつです。
上記の各メリットを、それぞれくわしくお伝えします。
手軽かつスピーディーにWebサイトを構築できる
STUDIOでは、ノーコードの特性を活かしたスピーディーなサイト構築が可能です。コーディングだと時間のかかる機能やデザインの実装も、STUDIOならワンステップです。
また、プランによってはプロジェクトにメンバーを招待できるため、チームメンバーとリアルタイムでの共同編集でさらに効率的な作業が実現します。規模の大きなWebサイトでも、STUDIOを利用することで制作開始から公開までの期間を大幅に短縮できるでしょう。
デザイン性が高い
STUDIOは、無料で使えるハイクオリティなテンプレートや素材が豊富です。課金すればさらにデザイン性が高まるため、デザインに関するおおよその要望は叶えられるでしょう。
また、ノーコードツールであるにもかかわらず、STUDIOはデザインに関する制限が非常に少ないツールです。オリジナルデザインが実装できるうえ、カスタムコードでさまざまなデザインを実装できます。
アニメーションの挿入も可能であり、広告が表示されずスタイリッシュなWebサイトが構築できるため、UXが向上するでしょう。
サポート体制が充実している
STUDIOは、サポート体制が充実したサービスです。チャットサポートやユーザーコミュニティでのFAQサイトのほか、YouTubeなどでもチュートリアル動画が公開されています。
不具合や不明点に関する相談の選択肢が多いため、初心者でも使いやすいでしょう。
なお、チャットサポートへは、STUDIOへログインの上、エディター右下の「？」をクリックするだけで相談できます。
日本語に対応しているのはもちろん、返信も迅速なため使いやすいサポートです。サポートに多く寄せられた改善要望は、高い頻度で更新に反映されるところもユーザーにとってうれしいポイントです。
STUDIOを利用するデメリット
機能が充実しておりさまざまなニーズに対応できる反面、STUDIOの以下の点はデメリットだといえます。
- 無料プランではに制限がある
- 細かな対応できない
- 複数サイト運営には向かない
場合によっては利用が向いていないケースもあるため、デメリットを事前に確認しておきましょう。
無料プランでは機能に制限がある
STUDIOの無料プランでもWebサイトの構築はできますが、有料プランでしか実装できない機能があるのも事実です。たとえば、無料プランでは「STUDIO」のロゴが消せません。
また、システムバックアップ期間はプランによって異なり、無料だと1日しか保存されない点にも注意しましょう。
細やかな対応できない
STUDIOはオリジナルデザインやカスタムコードに対応しているとはいえ、細かいカスタマイズなどは指定できません。同じく、関連コンテンツの自動生成などにも非対応です。
また、通話によるサポートは受けられないため、質問への即時回答は期待しないほうが良いでしょう。
複数サイト運営には向かない
STUDIOでは、1アカウントにつき100件のプロジェクトを作れます。
しかし、1プロジェクトごとに料金がかかる料金体系になっているため、構築するWebサイトの数が増えるほど金銭的な負担が重くなる仕組みです。
よって、複数サイトを運営しようとすると、割高になる点に注意してください。
また、制作したCMSアイテムの公開数にも上限が設定されているため、多くのサイトを運営したい場合は上位の料金プランを検討しましょう。
STUDIOとほかのWebサイト制作ノーコードツールはどう違う？
STUDIOのほか、ノーコードツールの代表格として「WordPress」が挙げられます。
WordPressとは、ソースコードがフリーで公開されているオープンソース型のCMSです。Webサイトのデザインやテンプレートが豊富で操作も容易なことから、個人から企業まで幅広い規模のメディアに対応できます。
世界中で多くのシェアを占めており、Web制作に少しでも携わっているならWordPressを聞いたことがない人などいないほど有名です。
ほかにも「Wix」や「ペライチ」も人気の高いノーコードのWebサイト制作ツールとしてよく利用されています。
STUDIOとほかのノーコードツールが異なるポイントは、以下の3つをみればわかります。
- 機能
- サーバー管理
- セキュリティ対策
各方面から、STUDIOとその他のサービスの相違点に迫っていきましょう。
機能
WordPressは、一部カスタマイズ機能において、HTML・CSSやJavaScriptなどプログラミング言語の知識を要します。対して、STUDIOの基本操作はドラッグ＆ドロップのみであり、非常にシンプルです。
また、Wixはテンプレートしか使えず、ペライチはWebサイトの1ページ分しか作成できない点がSTUDIOと大きく異なります。
さらに、問い合わせフォームが設置できるSTUDIOなら、その他のノーコードツールよりUXの高いWebサイトを構築できるでしょう。
サーバー管理
WordPressをはじめとするその他のノーコードCMSは、ユーザーがレンタルサーバーを選択してカスタマイズする必要があります。
STUDIOは全プラン独自のレンタルサーバーを提供しているため、個別契約が不要です。
また、WordPressでは、バージョンが更新されるたびユーザ各自でのメンテナンスが必要になります。STUDIOならシステムが自動でアップデートされるため、常に最新バージョンを利用可能です。
セキュリティ対策
STUDIOはセキュリティ対策もサーバー側で管理されているため、安全性の高さを誇ります。一方、WordPressは無償で利用できるオープンソースであることから、セキュリティの脆弱性が問題です。
公式サポートがなく、トラブルはすべて自己責任となります。
STUDIOの使い方は簡単！ノーコードで自由にWebサイトを作ろう
STUDIOは、手軽かつスピーディーにWebサイトが制作できるノーコードツールです。制作に必要な工程はわずか7ステップであり、チュートリアルを見れば理解できるでしょう。
できないこともありますが、できることの豊富さを考慮すると、STUDIOが有用なシステムであるのは間違いありません。STUSIOのシステムはユーザーからの改善要望により定期的に見直されているため、今後ますます使いやすいノーコードツールとなっていくことが期待されます。
自分の目的やニーズに応じ、最適な機能が使えるプランを選択してWebサイト構築にぜひチャレンジしてみてはいかがでしょうか。