記事内に商品プロモーションが含まれる場合があります
「Studioって何ができるの？導入メリットは？」という疑問にお答えします。また、会員登録方法や、つまづきやすい「Studio操作の考え方の基本」をはじめての方向けに丁寧に解説します。
Studioを検討中・はじめてみたい方、ちょっと難しくて挫折したけどリトライしたい方、ぜひこの記事を読んでいただけると嬉しいです。
1.Studioでできること・導入メリット
Studioは、コードを書かずにホームページを作成できるツールです。
どんなWebサイトが作れる？
こちらの公式サイトに事例がまとまっています。すごいサイトがたくさんあります…！
また、ブログのようなCMS機能も使えるので、「お知らせ欄のみ現場担当者に更新してほしい」といった分業も可能です。
誰に使われている？
Studioは、使いやすいのに本格的なWebサイトが作れることから、幅広いユーザーに使われています。
大手企業から中小企業のホームページや求人ページなどの重要なページも、Studioで作られていることがあります。
また、Webサイトの制作会社やフリーランスがクライアントワークに使うことも多々あります。それだけ「本格的なサイトも作れる」ということですね。
どんなメリットがある？
Studioには、「ノーコードでWebサイトを作れる」以外にも以下のようなメリットがあります。
- 自社内でWebサイト作成を完結でき、経費削減になる
- サイト更新の工数が減り、迅速に情報更新できる
- 知識がなくてもセキュリティ関係が安心
- 日本製のサービスなので、関連情報を日本語で得やすい
Webサイトって、外注するととんでもなく値段が高かったりしますよね。「仕方なくインスタアカウントしか持っていない」という企業さんやショップさん、個人事業主さんもいるかと思います。
Studioを使えば、難しい知識がなくても本格的なホームページが作れるので、簡単なページなら自分で作れますし、「社内のデザインチームにStudioを使ってもらう」という手もあります。
また、「このページのここの数字を変えたい」というときに、コードを読むのではなく表示画面で見たままの状態で修正できるので、修正作業も簡単です。そのため、「明日までに直さないと！」といった緊急事態にも対応しやすいです。
さらに、サーバーを外部で借りる必要がなく、Studio上でデザインを作ったらそのまま公開できるので、とても手軽です。セキュリティ関連もStudio側で対応してくれているので、知識がなくても安心して使えるというのは大きなメリットです。
また、Studioは日本のサービスなので、しっかりしたサポートが日本語で受けられます。
「これってどうやるんだろう？」と思って検索したときに、日本語でたくさん情報が出てくるのも嬉しいですね。
有料プランじゃないとだめ？
無料でもホームページは作れますが、もちろん有料プランでしかできないことは多々あります。
以下にすべて当てはまるなら、無料プランでOKです。
無料プランでよい場合
- ホームページの訪問者数が月間2000人以下
- スクロールして表示していくだけの縦長のシンプルなホームページでいい
- ホームページのURLにこだわらない
- 左下に「Studio」のバナーが表示されても構わない
ただし、たとえば以下のような場合は有料プランにする必要があります。
有料プランにするべき場合
- 訪問者数や問い合わせフォームの利用が多い
- 「Studio」のバナーを表示したくない
- ホームページのURLにこだわりたい
- ホームページに特殊な動きをつけたい
- 複数ページのWebサイト構成にしたい（別ページでメニュー専用ページを開く、など）
- 外部サービスと連携して便利な機能を追加したい
まずは無料プランで操作性などを確認して、いいなと思ったら有料プランに切り替える、といった使い方でもよいかと思います。
Studioでできないこと
カート機能などが必須なオンラインショップは、もっと適した他のサービスがあります。（BASEがおすすめです）
それから、作成したデザインのHTMLやCSSのコードを直接編集することはできません。あくまでStudioの編集画面上で、クリックで操作することになります。
また、複雑なアニメーションなどは難しく、デフォルトの機能でできない場合は有料機能の「カスタムコード」を利用してコードを貼り付ける必要があります。
2.Studioの会員登録
なお、下の記事では一緒に操作して実際に簡単なWebページが作れるチュートリアルをしています。この記事を読んだらぜひやってみてくださいね！
まずはStudio公式ページを開き、右上の「ログイン・新規登録」のボタンをクリックします。
英語表記になっている場合は、右上の言語選択で「日本語」にしましょう。その後、Googleアカウントなどでログインするか、メールアドレスとパスワードを登録します。
登録すると、利用目的を聞かれるので選択しましょう。
職種も聞かれるので、自分の職種を選択します。
以上で会員登録は完了です。公式のチュートリアルをうけることができるので、やってみましょう。
3.Studioの操作と考え方の基本
それでは、まずはStudioの操作の基本と、初心者さんがつまづく原因となるStudioの考え方の基本を解説したいと思います。
Studioの考え方の基本
「ドラッグ＆ドロップの簡単な操作でおしゃれなWebサイトが作れる！」というのは間違いです。「思ってたんと違う…」となりやすいです。
Studioでは、「ボックスレイアウト」という「箱を並べる」「箱の中に箱を入れる」という手法でWebページを作っていきます。
例えばこのページでは、赤(ヘッダー)と緑(About)のボックスが縦に並び、緑のボックスの中に黄色、黄色の中にさらに青…というように、ボックスが並んだり、重なりあって構成されています。
この「箱を並べる」という方法は、デザイン画面上のどこにでも箱を置けるわけではないというのがポイントです。
ボックス内でパーツを置けるのは、この９ヶ所のみです。それ以外の場所には置けません。
では、このような半端な場所に置きたいときはどうすればよいのでしょうか。
答えは「大きな箱を２つ並べて（赤と青）、その箱の中の中央にパーツを置く」です。箱の中央はパーツを置くことができますよね。
このように、自由な場所にパーツを置くためには、枠となる箱を増やしてみる、または箱の余白やパーツの余白を調整するなど、ちょっとした工夫が必要となります。
「この場所にパーツを配置するにはどうするか？」と考えていくのがボックスレイアウトの基本です。慣れればできるようになっていくのと、自分の思った場所にキレイに配置できたときにはとても気持ちいいので、ぜひ一緒に頑張ってみましょう！
Studioの編集画面の基本
考え方の基本を押さえたところで、ここからはStudioの実際の画面を見ながら解説していきます。
新規作成する
まずはデザインを新規作成しましょう。
Studioの新規作成のボタンは、マイページの右上にあります。
テンプレートも選べますが、「空白からはじめる」をクリックしましょう。
続いて、ページのタイトルをつけます。あとで変更も可能です。
これで、新規の真っ白なデザインを、Studioの編集画面を開けました。
ちなみに一度ホーム画面に戻ったあと、作成途中のデザインに再度アクセスするには、マイページのプロジェクトを確認しましょう。
マウスをのせると右半分がエディターのリンクになっているので、クリックすればデザインを開くことができます。
下の方にある一覧も、マウスをのせるとボタンが表示されるので、クリックすればそのデザインを編集画面で開くことができます。
続いて、画面の操作で押さえておくべきポイントを、よく使う基本的なものにしぼって説明します。
パーツを追加する
まず、デザイン上になにかパーツを追加したいときは、左メニューから行います。「＞」で一覧を開けるのでクリックしてみましょう。
上の「追加」のタブをクリックすると、追加できるパーツの一覧が表示されます。
ボックス（枠）やテキスト、画像などを、ここから追加していきます。
レスポンシブ切り替え
Studioでは、パソコン画面サイズが基準になっています。PC用にデザインを作ったあと、スマホ表示の画面幅ではどうなるかを確認し、デザインが崩れるところを修正する、という流れになります。
パソコン画面とスマホ画面の画面幅の切り替えは簡単です。
デザイン外の部分（両サイドのグレーの部分など）をクリックしてなにも選択していない状態にすると、上にボタンが表示されます。クリックすれば切り替えられます。
パーツを装飾する
パーツを追加しただけでは、モノクロのただの文章のような寂しい画面になってしまいます。ボックスの背景色を変えたり、文字の色や大きさを変えたりして装飾してみましょう。
試しに「セクション」を追加してみます。あとでテキストなどを入れる「箱」となる部分ですね。
すると、上にメニューが表示されるので、ここから色などを変更することができます。
本来であれば、装飾するにはコードを書かなければならないところ、Studioであればクリックしていくだけで装飾ができるので、とても手軽ですね。
続いて、テキストを追加してみましょう。
テキストを追加すると、下にくっつくので、ドラッグでセクションの中へ移動させます。
テキストは、テキストの「枠」と「文字」で構成されていて、装飾もそれぞれ変更することができます。
枠は最初、文字にぴったりサイズになっているので、上のメニューでサイズを大きくしてみると、わかりやすくなりますね。
上の「ボックス」のタブが、枠の設定です。背景色を変えたりできます。
「テキスト」のタブが、文字の設定です。文字の色やフォント、サイズなどの変更ができます。
このように、テキストなどのパーツを追加したときは、その「枠」の編集なのか「文字」の編集なのか、を注意して切り替えられるようにしましょう。
レイヤーを使う
個人的にめちゃくちゃお世話になり、かつStudioを使いこなすうえで必須なのが「レイヤー」の機能だと思っています。
レイヤーは左側のメニューから開くことができます。下の方の直にレイヤーを開くボタンが便利です。
「レイヤー」というのは、デザインの階層構造のリストです。「どのパーツがどの箱に入っていて、どの箱がどのように並んでいるのか、あるいは重なっているのか」などが一覧になっています。
たとえば、このようにセクション（箱）とテキスト（中身）がデザイン上にのっていると、レイヤーは左の一覧のように表示されます。
もう少しわかりやすい例で見てみましょう。
「ひとつめ」の文字が入ったピンクのボックスと、「ふたつめ」の文字が入ったグレーのボックスを上下に並べてあります。レイヤーでもピンクのボックスが上、グレーのボックスが下に並んでいます。
このとき、レイヤーの表示を見てみると、「Section(箱)」同士はピンクのラインで揃っていますが、「T(文字)」は緑のラインのように１字下がりになっているのがわかります。
この「１字下がり」になっているのは、「その前の行の箱の中に入っている状態」という意味です。逆に、「頭が揃っている状態（ピンクのライン）」は、「上下並び（あるいは横並び）になっている状態」という意味です。
ピンクのラインで揃っているSectionのボックスは、このように上下に並んでいます。（同じ階層）
１字下がりになっているテキストは、その上のSectionのボックスの中に入っています。(ひとつ下の階層)
このように、レイヤーと実際のデザインの関係がどうなっているのかがスルスルっと頭に浮かぶようになると、Studioをサクサク使えるようになる思います。（というか少し勉強すればコーディングもできるようになるかと思います）
ここまで読めたら、簡単なWebページを一緒に作ってみましょう！下の記事で初心者向けに、実際の操作画面つきで丁寧に解説しているので、一緒に操作して、ぜひ一度つくってみてください。
