STUDIOを使ってみた!コードいらずでサイトをデザインできるツール

自分自身でサーバーとかを借りてWEBサイトを立ち上げるのは知識と労力が必要となってくるんですが、そこらへんを取っ払ったサービスの1つSTUDIOで真面目に遊んでみました。

この「STUDIO」は、最近よくあるサイトのデザインを自分でカスタマイズできるサービスではあるんですが、デザインのうえでは一味違うんですよ。

何が違うのかというと、サイト制作経験者が「おっ!?」と言いたくなるような内容にも関わらず、デザインが好きな未経験者でも扱えるようになっている自由さ

コードが難しくて分からないけど「デザインは好き!」という人には、「STUDIO」が向いているかもしれません。

STUDIOの基本情報

まず最初に言っておくことが、「STUDIO」は日本製。そのため、日本人にとっては安心して使えるサービスです。

studio

売り文句は、「コードを書かずに、WEBサイト制作を完結」

もちろんコードを書ける人は書いてもイイんですが、基本的に「テンプレート」を選んで、「文字」と「画像」をカスタマイズして、好きなように「配置」や「大きさ」も変更できるデザインツールです。

料金プラン

何より、こういったサービスで一番気になる部分は「料金」ですよね?

STUDIOの料金プラン
  • 無料プラン
  • 月額9$プラン
  • 月額27$プラン(未定)

料金プランは、3つ…とういうかこの記事を書いている時点では、実質2つのプランを選ぶことができます。

最初は無料プランを選んでいたとしても途中で「月額9$プラン」へ変更できるので、ちょっとでも気になった私みたい人は無料プランから始めてみると良いんじゃないでしょうかね

無料プランの内容

無料プランは、基本的に「STUDIO」で用意されているほとんどのツールを使える内容となっています。

無料プランで使える機能
  • デザインツールの全機能
  • リアルタイムライブプレビュー
  • 共同編集機能
  • 無制限のチームメンバー
  • 無制限のプロジェクト数
  • 無制限のページ数
  • サブドメイン公開機能

デザインツールの全機能

見たまんまなんですが、「STUDIO」でデザインするうえでの機能を全て利用することができます。

リアルタイムライブプレビュー

公開する前に、現在カスタマイズしている内容をプレビューすることができます。もちろん、すでに公開していたとしてもプレビューとしてカスタマイズ中の内容で確認できます。

共同編集機能

これがスゴイところなんですが、複数のメインバーでページを編集することができます

無制限のチームメンバー

共同編集するメンバーを、無制限で招待することができます。これは、スゴイ!

無制限のプロジェクト数

公開する前のサイトを「プロジェクト」として扱うことができるのですが、これも無制限!

無制限のページ数

なんと、ページ数も無制限!

サブドメイン公開機能

ここが「無料プラン」の部分になるんですが、ドメインは「◯◯.studio.design」というサブドメインになります

サブドメインだとしても、無料でサイトを公開できちゃうんだからスゴイ!

月額9$プランの内容

有料プランともなると、本格的なサイトとして運営が可能になります。

月額9$プランで使える機能
  • 無料プランの全機能
  • STUDIOバナーの非表示
  • 独自ドメインの接続
  • Appsの使用

STUDIOバナーの非表示

無料プランを利用してサイトを公開すると、PCでもスマホでも画面の左下に「STUDIO」のバナーをず〜っと追いかけてきます。

これを消したいという人は、有料プランへ変更する必要があります。

独自ドメインの接続

無料プランではサブドメインでのサイト公開となりますが、有料プランでは「独自ドメイン」を設定することが可能

もちろんドメインは自分自身で契約する必要があるので、「お名前.com」「ムームードメイン」などを利用すると良いんじゃないでしょうか。

というのも、公式で設定の仕方が公開されているので、独自ドメインをどこで契約するのか迷っている人は「お名前.com」「ムームードメイン」だと安心だと思います。

参考 独自ドメインの接続方法STUDIO | Help Center

Appsの使用

この項目はザックリと「Apps」としか表向きは書いてありませんが、「Googleアナリティクス」「Googleタグマネージャー 」「Googleサーチコンソール」といった上級者向けのツールと連携させることができるようになります

SEOとか分析をしたい人は、有料プランにすることをオススメします。

そもそもコードが必要ないとは?

冒頭に「コードが書かずに」というフレーズを出したんですが、そもそもどういったコトなのかですよね?

「HTML(マークアップ言語)」「CSS(スタイルシート言語)」と言われるサイトを構築するのに必要な言語を必要としないで、ドラッグ・アンド・ドロップでサイトの構成を作ることができます。

感覚で作り込める

通常WEBサイトでは幅や高さを数字で設定しますが、大きくしたい画像があれば画面上で枠を動かすだけで変更ができてしまいます

studio

もちろん上部にあるメニューバーには数字を入力する項目もあるので、最終的には数字で整理するのも良いかもしれないですね。

レスポンシブに対応

昔はネットといえばPCで見るしかなかったんですが、今はスマホで見られることも考慮しないといけない時代。そのため、PCでもスマホでも見やすく表示させるようにサイトを作る必要があります。

…が、「STUDIO」では基本的なレスポンシブ対応が標準装備となっているので安心です

しかも、デバイズ毎に表示を変えることも簡単にできるのもスゴイところ。

studio

PCでは左側に表示、スマホでは中央に表示なんてことも設定が可能です。

ボタンの設置も簡単

よく「詳細はこちら」などのボタンを見ると思いますが、こういったボタンも簡単に作成可能。色も自分が好きに設定できるので、デザインすることだけに集中できます。

もちろん「影」をつけて浮いたようにすることもできるので、デザインの幅も広がります。

マップやYoutubeの設置も可能

「Googleマップ」「Youtube」といった店舗・企業サイトには不可欠なものも、1クリックで設置が可能。

studio

WordPressでさえ一手間必要なんですから、1クリックで設定できるのは素晴らしいです。

STUDIOの気になるポイント

WEBサイト制作会社やコーダー目線で言ってしまったらキリがないので、あくまで普段からサイトを作らないような人向けにきになるポイントを紹介してみましょう。

自由すぎるが故に

コードとは無縁な人でも、自由にデザインできる「STUDIO」。がしかし、普段からデザインとは無縁すぎると何をどうしたら良いのか分からなくなるかもしれません

コードが何かを分からなくても、デザインの知識やセンスがあると「STUDIO」はより活きます。

バックアップができない

この手のサービスには言えることですが、バックアップができません

そのため1人で作業する時にはあまりないかもしれませんが、複数人で作業をする場合には何を変更・削除したのかを把握しておく必要があります。

ブラウザはChromeのみ

「STUDIO」を使うには、ブラウザの「Chrome」で作業をする必要があります。そのため、別のブラウザを普段から使っている人には、ちょっと面倒かもしれませんね。

参考 Google ChromeGoogle Chrome

ブログ機能

2019年2月時点ではまだ対応予定となっていますが、ブログ機能を付ける場合には「月額27$プラン」を契約する必要があります。

もしブログ機能をしっかりと活用したいという場合には、別のサービスやWordPressとかも視野に入れても良いような気がします

STUDIOに登録してみよう

「STUDIO」の登録方法はとても簡単で、メールがあればすぐに完了します。

STEP.1
studio

まずは「STUDIO」にアクセスして、「無料ではじめる」をクリック。

STEP.2
studio

そして、「名前」「メールアドレス」「パスワード」を入力して「メールアドレスで登録」。または、「Facebookで登録」を押せば登録は完了となります。

めっちゃ簡単ですよね。登録したメールアドレスに届いた内容を見ても「承認」などもないので、本当にこれだけで登録は完了です。

STUDIOでサイトを作成してみよう

登録が済んだら、さっそく自分でサイトを作成してみましょう。

ログインすると、「ようこそ、STUDIOへ」という画面が出てきます。慎重な人は、「STUDIOを学ぶ」や「ビデオコース」から行っても良いでしょう。

studio

「ぶっつけ本番!」という人は、「新規プロジェクト作成」から入ってみてください。

studio

すると、全くの白紙から始めることもできますし、下へスクロールして「テンプレート」を選んでから調整することもできます。

studio

さいごに

「STUDIO」についてチラッと触れてきましたが、ちょっとでも気になったら無料なんで利用してみると面白いと思います。

ちなみに、私が「STUDIO」で作ってみたサンプルサイトはこちら

studio

https://befriendtimes.studio.design/

使い方や操作方法などは、次の記事で紹介します!

STUDIOの使い方を解説!次世代デザインツールを使ってサイトを作ろう!