近年、スタートアップから大企業、官公庁に至るまで、多くの企業でノーコードツールのSTUDIOが活用されています。NOROSHI Partnersでも、STUDIOを活用して多くのWebサイトを制作してきました。こちらの記事では、STUDIOを活用しているWeb制作会社の視点から、STUDIOの導入を検討されている方に向けて、STUDIOの特徴やメリット・デメリットについて解説しました。

ノーコードツールSTUDIOとは？

STUDIOとは、Webサイトを制作できる日本発のノーコードツールです。STUDIOは、ノーコードでオリジナルデザインを実装でき、制作後も運用しやすいため、スタートアップから大企業、官公庁に至るまで、数多くの企業で導入されています。

(画像：STUDIO公式HP)

これまでは、本格的なWebサイトの多くがコーディングをして制作されてきました。しかし、近年では、STUDIOでも十分複雑なデザインや機能を実装することができ、制作後の運用もしやすいため、本格的なサービスサイトやコーポレートサイトでもSTUDIOが活用されるケースが増えています。

STUDIOの導入にあたり、メリットやデメリット、導入前に確認しておくべき項目などをまとめた資料をご用意しました。STUDIOを使ったサイト制作を検討している方は、ぜひ下記リンクから参考資料をご覧ください。

※ 参考資料：STUDIO導入完全ガイド

STUDIOを導入するメリット

• オリジナルデザインを実装できる

• 制作と保守・管理のコストを抑えられる

• 制作後の運用がしやすい

• SEO対策も十分に可能

• 日本語に対応しており、チャットサポートも充実

• 外部ツールとの連携で本格的なサイト運用も可能

1. オリジナルデザインを実装できる

STUDIOの最大の特徴は、ノーコードでオリジナルデザインを実装できることです。多くのノーコード制作ツールでは用意されたテンプレートを編集してサイトを作成するのが一般的ですが、STUDIOではゼロから独自のデザインを実装できます。

コーディングをしてサイトを制作するのと比較すると、一部STUDIOの基本機能では実装できない機能やデザインが存在しますが、多くの場合、外部ツールとの連携や一部のカスタムコードの埋め込みによって、実装が可能です。

2. 制作と保守・管理のコストを抑えられる

コーディングの工数を削減できる

STUDIOを導入するメリットとして、実装にかかるコストを抑えられることが挙げられます。Webサイト制作の一般的な工程としては、「要件定義→ワイヤーフレーム制作→デザイン制作→実装（コーディング）→公開」となりますが、STUDIOを活用することで、実装部分の工数を抑えることができます。制作を外部の制作会社に依頼する場合も、コーディングと比較して実装部分の工数を抑えられるため、比較的コストを抑えられます。

保守・管理のコストを抑えられる

また、STUDIOを活用すれば、サイトの保守、管理にかかるコストを大幅に削減できます。STUDIOで制作したサイトは全てSTUDIOのサーバー上で公開され、更新や公開もワンクリックで行うことができます。別途レンタルサーバーを用意する必要はありません。さらに、STUDIOはログインをするだけで、常に最新のプロダクトを利用できるため、バージョンアップデートに合わせたメンテナンスやプラグインの更新といった保守・管理の作業も必要ありません。

3. 制作後の運用がしやすい

直感的な操作ができるUI

STUDIOで制作したサイトは非常に運用がしやすい点も大きなメリットの一つです。簡単なレイアウトの変更やライティングの変更は、非デザイナーの方でも直感的に操作が可能です。

初心者でも編集が怖くないコンテンツ編集モード

さらに、STUDIOではコンテンツ編集モードが提供されており、この機能を使えば、レイアウトやレスポンシブ設定を崩す心配なく、サイト内の画像やテキストを直感的に編集できます。そのため、最初の制作はプロのデザイナーや制作会社に依頼し、制作後の運用を自社で行うのがおすすめです。

使いやすいCMS機能

また、STUDIOはCMSにも対応しており、ブログやニュースなどの更新が必要なサイトの運用にも適しています。STUDIOのCMSは、管理画面が非常に分かりやすく、初めての方でも簡単に運用できます。STUDIOのCMSの特徴としては、主に下記の点が挙げられます。

• 使いやすい管理画面

• リアルタイムで共同編集が可能

• 公開予約が可能

• コレクション（記事のキュレーション）が可能

• 権限管理（ライター権限など）が可能

• WordPressからのアイテムの移行機能

※ 参考記事：STUDIO CMSの特徴と使い方を解説！コンテンツの入稿方法から料金まで

4. SEO対策も十分に可能

「STUDIOはSEOに弱いのではないか」と考える方もいますが、STUDIOでも十分にSEOの対策が可能です。SEO対策では、質の高いコンテンツ、被リンクなどの外部対策、HTMLタグの構造などの内部対策が重要です。

WordPressと比較すると、設定できることは少ないですが、STUDIOでも、各種HTMLタグの設定はもちろん、サイトマップや構造化データにも対応しており、十分な内部対策を行うことができます。その上で、質の高いコンテンツや外部対策を行うことで、STUDIOで制作されたサイトでも十分に検索エンジンで上位表示を狙うことが可能です。STUDIOで設定できる主な内部対策は下記の通りです。

• ページ設定（タイトルやディスクリプションなど)

• HTMLタグの設定

• 404ページの設定

• サイトマップの送信

• 画像の代替テキストの設定

▼ ページ設定(タイトルやディスクリプションなど)の実際の画面

※ 参考記事：ノーコードツールのSTUDIOはSEOに弱い？STUDIOで設定すべきSEO対策一覧

5. 日本語に対応しており、チャットサポートも充実

STUDIOは日本発のサービスであり、日本語に対応しています。また、チャットサポートも充実しており、日本語でのサポートを受けることが可能なため、安心して導入することができます。

6. 外部ツールとの連携で本格的なサイト運用も可能

STUDIOは多くの外部アプリケーションと連携することができ、本格的にサイトを運用する企業にも活用できます。Google AnalyticsやGoogle Search Consoleなどのアクセス解析ツールはもちろん、広告運用時のコンバージョンタグ設置やカスタマーサクセスツールとの連携も可能です。

▼ STUDIOと連携できるApps一覧

・Google Analytics
・Google Tag Manager
・Google Search Console
・Google reCAPTCHA v3
・Facebook Pixel
・HubSpot Tracking(Beta)
・Intercom
・チャネルトーク

また、カスタムコード機能を活用することで、上記のサービス以外にも様々なサービスとの連携が可能です。カスタムコード機能は、<head>への記述と<body>へのカスタムコードの埋め込みに対応しており、各種MA（Marketing Automation）ツールやヒートマップツールなど様々なツールと連携が可能です。そのため、本格的なマーケティングにも十分に対応したサイトを制作できます。

※ 参考記事：STUDIOに埋め込める外部サービス一覧〜動画やSNSから日程調整まで〜

STUDIOを導入するデメリット

• 機能に一部制限がある

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

• 使いこなすのに一定の学習期間が必要

1. 機能に一部制限がある

STUDIOはデザインの自由度が高く、多くの機能を提供していますが、コーディングする場合と比較すると全ての機能を実装することはできません。例えば、ページネーション機能やCMSの人気記事の抽出などは、現時点ではSTUDIOでは実現できない機能です。そのため、制作したい機能の中に、STUDIOでは実装できない機能が含まれていないかを制作前に確認しておくと安心です。

現状、STUDIOの基本機能では実装が難しい機能は下記の通りです。

機能面

• ソースコードの編集ができない

• ログイン機能を実装できない

• カートや決済機能を実装できない

デザイン・CMS

• アコーディオンを実装できない

• ページネーションを実装できない

• パララックスデザイン

• CMSで人気記事の抽出等ができない

※ただし、STUDIOの基本機能では実装できない機能も外部ツールと組み合わせたり、カスタムコード機能を用いてソースコードを埋め込むことで実装できる場合があります。

※ 参考記事：ノーコードツールSTUDIOではできないこと

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

①で説明した機能の制限と重なる部分もありますが、STUDIOではソースコードを直接編集できません。そのため、ゼロからコーディングする場合と比較すると、実装できる機能やデザインに制限があります。

ただし、2023年6月にカスタムコード機能がリリースされ、<head>への記述と<body>へのカスタムコードの埋め込みに対応しました。そのため、STUDIOの基本機能だけでは実装できないアニメーションやデザインも、一部カスタムコードを埋め込むことで実装ができる場合があります。

3. 使いこなすのに一定の学習期間が必要

STUDIOはノーコードでサイト制作が可能なツールですが、wixやペライチなどのノーコードツールと違ってデザインの自由度が高い反面、一定の学習期間や経験が必要となります。特に、複雑なデザインや各種デバイスサイズへのレスポンシブ対応などは、ある程度の経験が必要です。そのため、STUDIOでの制作経験のあるメンバーがいない場合は、最初の実装はプロのデザイナーやSTUDIOに対応している制作会社に依頼するのもおすすめです。

STUDIOの使い方

STUDIOは、サイトデザインを編集するための「デザインエディタ」と、サイトの公開設定やCMSの管理を行う「ダッシュボード」の2つの主要な管理画面から構成されています。デザインエディタは主にデザイナーが、ダッシュボードは主にサイトの運営者が使用します。ダッシュボードでは、ブログやニュース記事などCMSの更新や、メンバーの招待、サイトの公開設定などを行うことができます。

デザインエディタ

ボックスレイアウト

デザインエディタでは、ページやテキスト、画像等のボックスを組み合わせて、サイトのデザインを実装します。STUDIOではボックスレイアウトが採用されており、1つのボックス内にさらにボックスを配置し、それらを敷き詰めてデザインを制作します。デザインエディタの各機能の詳細は、以下の記事で解説しましたので、あわせてご覧ください。

※ 参考記事：ノーコードツールSTUDIOの使い方を制作会社が徹底解説！

レスポンシブ対応

レスポンシブ対応とは、ウェブサイトやアプリケーションのデザインが、さまざまなデバイスや画面サイズに適応し、見やすく表示されるように調整することです。他のノーコードツールでは、ブレイクポイントを一つしか設定できなかったり、細かいレスポンシブの設定ができない場合もありますが、STUDIOでは、最大5つのブレイクポイントを作成でき、画面幅に応じて細かいレスポンシブ設定が可能です。詳細な設定方法やコツは下記の記事で解説しましたので、あわせてご覧ください。

※ 参考記事：STUDIOのレスポンシブ対応の基本とコツを徹底解説！

アニメーション

STUDIOではデザインエディタ上で各種アニメーションを設定することが可能です。特定の要素の上にマウスカーソルが移動したときに動作するホバーアニメーションや、ページやコンテンツが表示される時に動作する出現時アニメーションを設定できます。トランジション、トランスフォームといった設定を組み合わせることで、一般的なWebサイトに求められるアニメーションは十分に実装が可能です。詳細な設定方法やポイントを下記の記事で解説しましたので、あわせてご覧ください。

※ 参考記事：STUDIOのアニメーションの基本からポイントや事例までを徹底解説！

ダッシュボード

ダッシュボードでは、サイト全体の設定やCMSの運用、メンバーやフォームの管理を行います。

ホーム

ホーム画面では、独自ドメインの接続やカバー画像などの公開設定、サイトマップの送信、メンバーの招待や権限管理、外部サービスとの連携などを行うことができます。

※ 参考記事：独自ドメインのサイトをSTUDIOのサーバーで公開するまでのステップと注意点を解説！

CMS

CMSでは、構築したCMSへのアイテムの追加や編集を行います。CMSの管理画面は非常にわかりやすく、誰でも簡単に運用することができます。

フォーム

フォームでは、STUDIOで制作したフォームに送信された内容を確認できます。フォームごとに入力内容の検索機能や、「未対応」「対応中」「完了」いったステータス管理機能があり、多くのお問い合わせにも漏れなく対応できます。

※ 参考記事：STUDIOのフォーム機能を徹底解説！Zapierの自動返信設定から埋め込み可能なツールまで

プラン＆お支払い

プラン＆お支払いで、プランの契約や変更等の手続きを行います。支払いオーナーの権限を持ったユーザーのみが操作できます。

STUDIOの料金・プラン

現在、STUDIOでは次の4つのプランが提供されています。（2023年5月の料金体系変更後）

基本的には、CMS公開アイテム数・月間PV数・フォームの送信数に応じてプランをアップグレードする必要があります。基本的には、LPなどのCMSを使用しないサイトでは「Starterプラン」、CMSを活用したサービスサイトやコーポレートサイトなどは「CMSプラン」で運用を開始するのがおすすめです。

▼ 年払いの料金表

(画像：STUDIO公式HP)

STUDIOでサイトを公開するために必要な費用は、基本的に「STUDIOの利用料金」と「ドメインの取得・更新料金」です。追加でレンタルサーバーを契約する必要はありません。

ただし、外部ツールとの連携が必要な機能を実装する場合は、外部ツールの利用料金が別途必要になることもあります。例えば、自動返信メールにはZapierの有料プラン、背景動画の埋め込みにはVimeoの有料プランが必要です。

※ 参考記事：STUDIOの料金・プランの選び方を徹底解説！連携可能な外部サービスの料金まで

STUDIOでの制作を制作会社に依頼する場合の料金相場

また、STUDIOでサイトを制作する際に、STUDIOでの制作に対応している制作会社に依頼するかを検討している方もいるでしょう。STUDIOはノーコードツールとはいえ、独自のデザインを自由自在に実装できるようになるためには、一定の学習期間と経験が必要になります。そのため、早く制作したい方やデザインにこだわりたい方などは制作代行会社に依頼するのがおすすめです。

STUDIOの制作代行会社の料金の相場ですが、独自デザインの１ページのLPで20〜30万円程度、一般的なコーポレートサイトなど3〜5ページのサイトで30〜50万円程度、より大規模なサイトになると50〜150万円程度になります。こちらの料金はあくまで、目安ですので、まずは制作会社に見積もりを依頼しましょう。

※ 参考記事：STUDIOの制作代行会社の料金相場と依頼するメリット・デメリット

STUDIOで作られたサイト事例

実際に弊社がSTUDIOを活用して制作したサイト事例をご紹介します。CMSを用いて本格的に運用をしているサービスサイトから、デザインやアニメーションにもこだわったコーポレートサイトまで様々なサイトをSTUDIOで実装可能です。弊社にご依頼いただいたサイトは基本的には全てSTUDIOで実装しています。

NOROSHI Partnersサービスサイト

弊社が運営するNOROSHI PartnersのサービスサイトもSTUDIOで実装されています。STUDIOのCMSを活用して、ご覧いただいているブログ記事や、制作実績、ニュースなどを運用しています。

大谷石のカネホンコーポレートサイト

日本遺産にも登録されている採石場の壮大な風景や、KANEHONのものづくりへのこだわりを海外の方にも体感してもらえるよう、Vimeoと連携し背景動画を用いたダイナミックなサイトをSTUDIOで実装しました。また、英語との言語切り替え機能も実装しました。

制作実績詳細はこちら

ペネトレイトコーポレートサイト

不動産総合ソリューションを提供されているペネトレイト様のコーポレートサイトのデザインからSTUDIO実装までを担当しました。こちらのサイトもSTUDIOを活用することで約1ヶ月程度での公開を実現しました。

制作実績詳細はこちら

※ 参考記事：STUDIOで作られたサイト事例紹介！

他の制作ツールとの比較

Webサイトの制作ツールとして代表的なWordPress、Wix、ペライチとSTUDIOの違いについて解説します。それぞれのツールで特徴やできることに違いがあるため、各ツールの特徴を比較した上で、適切なツールを選ぶことが重要です。

WordPressとSTUDIOの比較

(画像：Wordpress公式HP)

WordPressは、オープンソースのコンテンツ管理システム（CMS）であり、世界中のウェブサイトの約40%が利用している（2021年度時点）非常に人気のあるプラットフォームです。多くのテンプレートやプラグインが提供されており、これらを活用することで、コーディングの専門的な知識がなくても、Webサイトを制作できます。STUDIOとWordPressを様々な観点から比較し、表形式でまとめました。

上記の比較表を踏まえて、STUDIOとWordPressそれぞれに向いている人の特徴は下記の通りです。

STUDIOがおすすめな人

• 保守・管理コストを抑えたい

• 素早く制作したい

• エンジニアの工数を節約したい

• 高品質なデザインを実現したい

STUDIOは、WordPressのような更新作業やバックアップ作業が必要ないため、保守・管理にかかるコストを抑えることができます。また、ノーコードでオリジナルデザインを実装できるので、エンジニアの工数をかけずに、デザイナーがデザインから実装までを一気通貫で対応できます。

WordPressがおすすめな人

• 社内にエンジニアがいる

• カスタマイズ性の高いデザインや機能が必要

• 多機能なWebサイトを構築したい

WordPressはプラグインが豊富で、独自のデザインや機能を追加できるため、自由度の高いサイト構築が可能です。社内にエンジニアがいれば、独自のデザインや機能を追加でき、より高いデザイン性や機能性を持ったサイトを制作できます。

各項目についてのより詳細な比較は、下記の参考記事をご覧ください。

※ 参考記事：STUDIOとWordPressの違いを徹底比較！どちらを選ぶべきかを解説

WixとSTUDIOの比較

(画像：Wix公式HP)

STUDIOと同じノーコードツールとして、代表的なツールとしてWixが挙げられます。Wixは、イスラエル発の世界的に有名なノーコードツールです。Webサイトやオンラインストア、ブログなどを簡単に作成することができます。Wixの特徴は、その機能の豊富さです。eコマース機能や会員限定ページ、予約機能、チャットサポートなど、一通りの機能が揃っており、すべての管理がWixのプラットフォーム上で行えます。また、Wixはテンプレートも充実しており、ご自身でサイトの立ち上げを行うのに適しています。STUDIOとWixを様々な観点から比較し、表形式でまとめました。

上記の比較表を踏まえて、STUDIOとWixそれぞれに向いている人の特徴は下記の通りです。

STUDIOがおすすめな人

• オリジナルデザインで本格的なサイトを制作をしたい

• シンプルなUIで直感的な操作や運用がしたい

• 日本発のサービスで安心して導入したい

STUDIOはWixと比較して、デザインの自由度の高さが特徴です。オリジナルデザインを自由に実装できるので、本格的なサイト制作にも対応できます。また、CMS等の管理画面も洗練されており、非デザイナーの方にとっても使いやすいです。また、日本のサービスなので、国内の導入社数が非常に多く日本語でサポートを受けられるのも魅力的です。

Wixがおすすめな人

• ECやログイン機能を含むサイトを制作したい

• デザインにはそこまでこだわりがない

• テンプレートを用いて学習時間をかけずに自分で作りたい

Wixは、Web周りの様々な要素を一括管理したい人に特におすすめのWebサイト制作ツールです。Wixでは、サイトの制作・運用をはじめ、ドメインやメールアドレス、EC機能など、Webサイト運営に必要な機能を一元管理できます。また、テンプレートの数が豊富で、学習コストも低いため、ご自身で簡単なサイトを立ち上げるのにも適しています。

各項目についてのより詳細な比較は、下記の参考記事をご覧ください。

※ 参考記事：ノーコードツールのSTUDIOとWixを徹底比較！

ペライチとSTUDIOの比較

(画像：ペライチ公式HP)

ペライチの特徴としては、テンプレートを活用することで、簡単にWebサイトを制作できることが挙げられます。そのため、非デザイナーの方が、テンプレートを活用して、とにかく早くサイトを公開したい場合などにおすすめです。一方、独自デザインを実現したい場合やよりページ数の多い本格的なWebサイトを制作したい場合などは、デザインの自由度に長けたSTUDIOを活用するのがおすすめです。

まとめ

ここまで解説してきたように、STUDIOではデザインの自由度が高く、十分に本格的なサイトを制作できる上に、運用にかかるコストを抑えられるなどの様々なメリットがあります。