今回は、これまで私がYoutubeやブログで発信してきたSTUDIO講座を本記事でまとめております。
「STUDIOでWEBサイトを作りたい!」
「STUDIOでこんな機能を作りたいけど、どうしたら良いのかな?」
「色んな講座があって、結局どれを勉強すれば良いかわからない」
こういった疑問や不安をこの記事を読めば、解決できます。
STUDIOは、コーディング経験がない方でも簡単にWEBサイトを作れる無料のサービスなので、WEB制作初心者の方でも利用できます。ご安心下さい。
ちなみに、この記事を書いている私は、STUDIO関連の案件を50個以上こなしてきました。
かなり多くの経験があるので、信頼担保に繋がるのかなと。
本記事は、随時アップデートしております。
「STUDIOでわからないことがあればこの記事!」と思ってもらえるような記事を目指していきます。
Contents
初心者にもわかりやすいSTUDIO講座まとめ

それでは、初心者にもわかりやすいSTUDIO講座をご紹介していきます。
本記事では、今のご自身のSTUDIOスキルに合った講座を受講して頂くことをオススメします。
以下の3つに講座を分けて紹介してます。
① 超初心者向け講座 | STUDIOを全く使ったことがない人向け |
---|---|
② 初心者向け講座 | STUDIOの使い方がわからない人向け |
③ 中級者向け講座 | STUDIOの便利な機能を知りたい人向け |
また、ブログの作成方法や案件対応向けの講座も紹介してますので、ご確認ください。
① 超初心者向け講座
まずは、「超初心者向け講座」を紹介します。
この講座が参考になるのは、以下のような疑問をお持ちの方です。
「そもそもSTUDIOって何?」
「STUDIOで何ができるの」
「どうやってSTUDIOでサイトを作るのかイメージがつかない」
このような悩みを持っている方は、これからご紹介する2つの講座を受講するだけで、以下のような状態になります。
- STUDIOがどんなサービスかわかる
- WEBサイトを作り、WEBサイトをネットに公開するまでの流れがわかる
それでは、超初心者におすすめの講座を2つ紹介します。
①-1 (001)STUIDIOでWEBサイトを作ってみよう!

講座内容:「STUDIOとは?」、「STUDIOの環境構築」、「ツールの使い方」の解説
受講方法:Youtube
講座の解説動画はこちら。
①-2 (002)STUIDIOでWEBサイトを作ってみよう!

講座内容:「STUDIOの基本動作」、「編集画面」、「公開までの流れ」の解説
受講方法:Youtube
講座の解説動画はこちら。
② 初心者向け講座
次に、「初心者向け講座」を紹介します。
初心者には、以下の講座をおすすめします。
②-1 ファーストビューの作成方法
②-2 アニメーションの使い方
②-3 アンカーリンクの設定方法
②-4 お問い合わせフォームの作成方法
それでは、「初心者向けの講座」を紹介します。
②-1 ファーストビューの作り方

講座内容:「ファーストビューの作り方」の解説
受講方法:Youtube(オススメ)、ブログ
②-2 アニメーションの使い方

講座内容:「アニメーションの使い方」の解説
受講方法:Youtube(オススメ)、ブログ
②-3 アンカーリンクの設定方法

講座内容:「アンカーリンクの設定方法」の解説
受講方法:Youtube(オススメ)、ブログ
②-4 お問い合わせフォームの作成方法

講座内容:「お問い合わせフォームの作成方法」の解説
受講方法:Youtube(オススメ)、ブログ
③ 中級者向け講座
次に、「中級者向け講座」を紹介します。
中級者には、以下の講座をおすすめします。
③-1 STUDIOに独自ドメインの設定
③-2 Googleアナリティクスの設定
③-3 アコーディオンメニューの作成
③-4 ハンバーガーメニューの作成
③-5 リッチテキストの紹介(テキストの一部のみのスタイルの変更)
③-6 SEO対策を行う方法
③-7 レスポンシブ対応を楽にする3つのコツ
③-8 画像や文字の自動スクロール機能の作成
それでは、「中級者向けの講座」を紹介します。
③-1 STUDIOに独自ドメインの設定

講座内容:「STUDIOに独自ドメインの設定方法」の解説
受講方法:Youtube(オススメ)、ブログ
③-2 Googleアナリティクスの設定

講座内容:「Googleアナリティクスの設定方法」の解説
受講方法:Youtube(オススメ)、ブログ
・Youtube版はこちら ⇨おすすめ
③-3 アコーディオンメニューの作成

講座内容:「アコーディオンメニューの作成方法」の解説
受講方法:Youtube(オススメ)、ブログ
③-4 ハンバーガーメニューの作成

講座内容:「ハンバーガーメニューの作成方法」の解説
受講方法:Youtube(オススメ)、ブログ
③-5 リッチテキストの紹介
講座内容:「リッチテキスト(テキストの一部のみのスタイルの変更)」の解説
受講方法:Youtube
・Youtube版はこちら
③-6 SEO対策を行う方法を紹介

講座内容:「SEO対策を行う方法」の解説
受講方法:Youtube
③-7 レスポンシブ対応を楽にする3つのコツを紹介

講座内容:「レスポンシブ対応を楽にする3つのコツ」の解説
受講方法:Youtube
③-8 画像や文字の自動スクロール機能

講座内容:「STUDIOで画像や文字の自動スクロール機能」の解説
受講方法:Youtube(オススメ)、ブログ
④ブログの作成
また、STUDIOではブログも作成できます。
以下の2つの動画で丁寧に解説しておりますので、気になる方はどうぞ。
④-1 (PART ①)STUDIOでブログを作成しよう

講座内容:「(パート①)STUDIOでブログを作成しよう!」の解説
受講方法:Youtube
・Youtube版はこちら
④-2 (PART ②)STUDIOでブログを作成しよう

講座内容:「(パート②)STUDIOでブログを作成しよう!」の解説
受講方法:Youtube
・Youtube版はこちら
⑤ STUDIOで案件を対応される方向け
最後に、STUDIOで案件を対応される方向けに、STUDIOでWEB制作を行う際の案件の進め方や案件対応で使えるテンプレートを紹介してます。
⑤-1 STUDIOでWEB制作を行う際の案件の進め方

講座内容:「STUDIOでWEB制作を行う際の案件の進め方」の解説
受講方法:Youtube
・Youtube版はこちら
⑤-2 案件対応で使えるおすすめのテンプレート3選

講座内容:「STUDIOでおすすめのテンプレート」の紹介
受講方法:Youtube、ブログ
まとめ

今回は、初心者にもわかりやすいSTUDIO講座を、以下の3つに分けてご紹介しました。
① 超初心者向け講座 | STUDIOを全く使ったことがない人向け |
---|---|
② 初心者向け講座 | STUDIOの使い方がわからない人向け |
③ 中級者向け講座 | STUDIOの便利な機能を知りたい人向け |
ぜひ、今回ご紹介した講座を受講してSTUDIOスキルを伸ばしていきましょう。