知らなきゃ損!? 無料ツールSTUDIOでWebサイト制作のコツ

誰でも無料で簡単にホームページが作れるSTUDIO。
だけど、手を動かす前に知っておきたいコツや、どんなサイトにSTUDIOが向いているのか、など制作前に知っておくと良いこともあります！
この記事では、STUDIOを使ったことのない方に向けてSTUDIOがどんなものなのか、本当に簡単にサイト制作ができるのか？などをお伝えしていきます。

​​参考 >> STUDIO公式サイト 

この記事はこんな方にオススメ！

• まずは無料で作成できるホームページを持ちたい
• 簡単なら自分でホームページを作成したい
• 洗練されたデザインのホームページが欲しい
• レスポンシブとかよく分からないから自動的にやって欲しい

STUDIOって何？

STUDIOとは、デザインから公開までをワンストップで完結できるホームページ制作のプラットフォームです！
サイト構築に必要な知識がない人でも簡単にホームページを作成することができ、サーバーをレンタルする必要もありません。

STUDIOの特徴とは？

1番の特徴は、ノーコードで直感的な操作でホームページ制作ができることです。

本来ホームページを作成するには、HTMLやCSSなどの知識が必要です。
でもSTUDIOなどのノーコードの作成ツールでは、これらの知識がない人でもホームページを制作できるんです。

Wixやペライチなどのノーコードのホームページ作成ツールにも同じことが言えますが、その中でもSTUDIOは自由度の高いデザインが実現できます。

STUDIOを使うために必要なコストって？

料金プラン、気になりますよね。STUDIOの料金プランは下記の通り、FREEプラン、BASICプラン、PROプランの３つが用意されています。

当たり前ですが毎月の料金がアップするごとに手厚いサービスを受けることができる仕組みとなっています。

無料のFREEプランと、有料のBASIプランC・PROプランの主な違いとして下記の3点が挙げられます。

• 独自ドメインを使うことができるか？
• STUDIOのバナーを非表示にすることができるか？
• 外部Apps(例: Google Analyticsやサーチコンソール)と連携できるか？

FREEプランでもデザイン的な制限がないのは魅力的と言えます。

また、FREEプランで表示される画面左下のstudioのバナーですが、他のホームページ制作ツールに比べてスタイリッシュで、大きさも目立たないので表示されていてもあまり気にならないですね。

STUDIOの使い方はどうすれば覚えられる？

Googleアカウントでログインするだけですぐに使えるようになるSTUDIO。
いきなり使い始めるのではなく、まず作成方法をやデザイン機能について知りたい場合は公式ガイドが参考になります。
ビデオ形式で分かりやすく、体系的にまとめられていてとても便利です！

STUDIOで制作する時の注意点

使い方のガイドを見るよりとにかく触ってみたい！手を動かしたい！という方はGoogleアカウントさえあればすぐにサイト制作が始められます。
ログインして色々触ってみましょう。

私もまずは触ってみて使い方を覚えたいタイプなのですが、作り始める前に知りたかった・・という注意点があるのでご紹介します。

PC以外の状態で編集したもの

デザインしたものがそれぞれのデバイスでどんな感じに表示されるかをすぐに確認ができて便利なSTUDIO。

タブレットサイズ、スマホサイズなどがワンクリックで選べます。

PCサイズでの編集が基準となって、他のデバイスでの表示に反映されます。

PCサイズ以外の状態で、全デバイス共通の設定を変更してしまうと・・そのサイズのデバイスでしか反映されません。
つまり、スマホサイズで確認中に余白の調整をしたり、画像サイズの変更をした場合、スマホサイズのみで適用される余白や画像サイズとなります。
これをわかっていないと作成作業の手戻りが発生することになるかもしれません。
（テキストの変更や画像の挿入などは、PCサイズ以外の時に行ったものも他サイズで反映されます。）

こちらについて分かりやすく記載されているものがあるので気になる方はSTUDIOの公式サイトを見てみてくださいね。

>>　STUDIO公式サイト

フォントについて

STUDIOはGoogleフォントと連携しているので、900種類以上のフォントが気軽に使いたい放題です。
サイトのデザインに合うフォントを画面上で試行錯誤しながら選ぶことができます。
とても手軽だし魅力的ですが、便利さとひきかえに気をつけないといけないことが・・。

一度使ってみたフォントは、使用するフォントとしてそのまま残り続けることになるのです。

GoogleフォントはWebサイト表示時に読み込まれますが、試行錯誤の結果使用しなかったフォントまで一緒に読み込まれてしまいます。
そうすると表示スピードにも悪影響ですよね。

日本語フォントの場合は漢字もあるため容量が大きく、特に注意が必要です。
使わないフォントは、スタイルバー上のフォントを選ぶところの×マークで削除できるので、消しておきましょう。

STUDIOのメリット7選

無料で使えるFREEプランにもSTUDIOはメリットがいっぱいです。一つずつ説明します。

洗練されたデザインのテンプレートが用意されている

飲食店やフィットネスジム、フォトグラファー、ホテルなどさまざまな業種別テンプレートやブログ用のテンプレートまで、36個のオシャレなの無料テンプレートが用意されています。（2021年8月現在）

見てるだけでも楽しいし、サイト制作にとても参考になるデザインが豊富です。
全くの白紙からデザインするのが難しい・・という方は、好きなテンプレートを選んでテキストや画像を入れ替えれば良いので、０からデザインするよりかなりハードルが下がりますね！

白紙の状態からも制作できる

上述の通りSTUDIOにはテンプレートも用意されていますが、何もない白紙の状態からデザインすることもできます！
まっさらな状態からデザインするよりは、フレームだけでもあったほうがいいな、という方には

• The BASIC ポートフォリオ
• The BASIC コーポレート
• The BASIC ブログ

の３つのフレームが用意されているので、画像やテキストを入れて作成していくことができます！

Unsplashの画像をSTUDIO内で検索、配置できる!

素材サイトを開いて画像を検索してダウンロードして・・・そんな手間はSTUDIOでは不要です。

素敵な画像がいっぱい見つかるフリー素材サイト、Unsplashの画像がSTUDIO内で使えます！
STUDIO内でキーワード検索してデザインに合った画像をクリックするだけでサイトの中に使うことができます。

もちろん自分で用意している画像もアップロードして使うことができますよ。

画像の使い方はこちらにも記載されています。

>> STUDIO公式サイト

無料プランでも勝手にSSL化

通常のサイト制作であれば自分でSSLの設定が必要ですが、STUDIOでは何もしなくても勝手にSSL化してくれます。

SSL化されていないサイトだと「保護されていません」とアドレスバーに表示されてしまいます。
勝手にSSL化してくれるのはメリットしかないですよね。

レスポンシブ対応が簡単にできる

studioでは、デバイスの大きさごとにレスポンシブ対応をさせることが簡単にできます。

PCで見た時、タブレットやスマホで見た時のサイトについて、それぞれに最適なデザインにしてあげることをレスポンシブ対応といいます。

レスポンシブ対応をさせるには、ブレイクポイントと呼ばれる切り替えポイントを設定する必要があります。
STUDIOでは以下の写真のように基準（PC）、タブレット、モバイルとブレイクポイントがあらかじめ設定されています。
例えばモバイルをクリックすると瞬時に横幅がスマホサイズに変化するので、すぐにデザインが確認でき、モバイル用に余白の調整や画像の並びなどの設定が可能です。

また、画面左右のハンドルを使いデザインエディタのキャンバスサイズを変更することもできるので、３つのブレイクポイント以外のサイズでも確認ができます！

わからないことを質問できる環境

STUDIOは直感的な操作が魅力ではありますが、最初は慣れが必要かもしれません。
とは言っても、基本的な操作方法がわからないという場合は公式ガイドを見たりヘルプページを見たりして解決できると思います。

それでもうまく行かない時や何らかのエラーが発生してしまい自分で解決できない時は、ログイン後のマイページの右下にある”？マーク”をクリックするとチャットから質問をすることができます。

私も一度、公式ガイドを見ても分からない疑問点があったのでチャットから質問したことがありますが、1日で解決できました！
対応も親切かつフレンドリーで良かったですよ。（FREEプランでの利用です。PROプランでは、優先サポートが受けられるようです。）

>> STUDIO公式ガイド

>> STUDIO公式YouTube

ワンクリックで公開できる

通常のサイト制作であれば、レンタルサーバーの契約をしてソフトウェアのインストールやHTML・CSSのコーディングをしたりといった作業がありますが、STUDIOでのサイト制作であればそれらの作業は不要！

ページを制作したら「公開」ボタンを押すだけですぐに公開できます。

そして公開後の管理についても、WordPressのようにバージョンアップアップをしてセキュリティ対策などをしなくてはならないという作業が不要なのは大きなメリットです。

STUDIOにデメリットはある？

メリットとデメリットはセットであることが多いですよね。納得のいくサイトを作るためにも、STUDIOデメリットと言える点が少しあるので、一つずつ説明します。

FREEプラン・BASICプランではブログが5記事までしか公開できない !

下記の通り「CMS（計5記事まで）」となっています。
CMSとは（Contents Management System：コンテント マネジメント システム）のことで、ブログもCMSの一つです。

2020年6月にリリースされた「STUDIO3.0」から新たにCMS機能が追加され、WordPressのようにダッシュボード上でデータを入力することで定期的に更新する必要のある動的ページ(例: ブログ、ポートフォリオ)の作成が出来るようになりました。

これからブログをたくさん書きたい！という方はPROプランを選ぶ必要があります。
ただ、PROプランでも1,000記事まで公開という制限があり、現在のところ広告を貼ることもできないようです。

ボックス構造の理解が必要

STUDIOではボックスを積み上げたり並べたりして、その中にテキストや画像などを配置していく仕組みです。
複雑なデザインにも対応できるようになっていますが、ボックスという概念について理解する必要がありります。
CSSの知識が全くない場合、最初は少し苦戦するかもしれません。

ボックス構造の説明はSTUDIO公式サイトでとても分かりやすく解説されています。

>> STUDIO公式サイト

スマホやタブレットから編集ができない

STUDIOは、WordPressのようにスマホアプリがあるわけではないので、スマホやタブレットからはデザインの編集はできません。

なので、STUDIOを使ってサイト制作を自分でしてみたい場合はPCからの操作が必須となります。

chrome以外のブラウザから編集できない

STUDIOのデザインエディタ画面（編集画面）は、PCのGoogle Chromeのみに対応しています。

いつもはSafariやFirefoxといったGoogle以外のブラウザを使っているけど、STUDIOを使ってサイト制作をしたいと思っている方はGoogle Chromeをインストールしましょう。

まとめ　STUDIOでのサイト制作の向き・不向き

STUDIOってどんなもの？サイト制作する場合のメリット・デメリットなどについて簡単に説明しました！
最後に私なりに思うSTUDIOでのホームページ制作が向いているケース・向いていないケースをまとめます。

○ STUDIOに向いている

• とにかく無料で洗練されたデザインのホームページが作りたい
• ブログ機能はなくてもよい、もしくは５記事まで公開できればOK
• レンタルサーバーやドメイン取得などの手間を省きたい
• 急いでホームページを作成したい
• 自分で更新作業はしたいけど、セキュリティ面のことはやりたくない

× STUDIOに向いていない

• ブログを頑張りたい！
• レンタルサーバーと契約しているから使いたい
• STUDIOでのサイト制作方法について、本で学びたい（比較的新しいプラットフォームのためか、私は本がは見つけられませんでした）
• 将来的にWordPressでホームページを作成する必要が出てきた時に、ゼロから作成する必要がある

まだSTUDIOを試してみたことない方は、ぜひ一度試してみてくださいね！

>> STUDIOを無料で始める