ノーコードツールSTUDIOについて#3「STUDIOの勉強方法」

STUDIOの勉強方法STUDIO

こんにちは! STUDIOに特化してWebサイト制作をしているたくみです。

ノーコードでWebサイトが制作できるツール”STUDIO”についてブログで紹介しています。

 

※これまでの記事はこちら

STUDIO
「STUDIO」の記事一覧です。

 

今回のテーマは「STUDIOの勉強方法」です。
STUDIOの勉強方法

STUDIOはノーコードツールですが、最初は見慣れない画面とその操作方法に戸惑うこともあるでしょう。

でも大丈夫! これからご紹介する方法で、STUDIOを勉強してください!

□本記事がおすすめな人
・STUDIOを勉強したい人
・STUDIOの勉強を始めたが、ステップアップの仕方が分からない人

本記事では、無料で学べる方法と有料で学べる方法をご紹介します。

では、始めます。

STUDIOの勉強方法~無料編~

無料で学ぶ方法は3つご紹介します!

最初に言っておくと、次の方法です。

★無料で学ぶ方法
①公式YouTube
②テンプレート活用
③公式コミュニティ

それぞれ順番に説明していきます。

公式YouTube

STUDIOを提供しているSTUDIO株式会社は、YouTubeの公式サイトでSTUDIOに関して発信しています。

公式YouTubeには、0からサイトを制作していく手順を説明している「チュートリアル」や、各パーツごとに機能を説明している動画があります。

そのため、STUDIO初学者はYouTube動画から勉強を始めることがおすすめです!

YouTubeで「STUDIO Japan」と検索しても表示されますが、STUDIOのアカウント画面から観ることもできます。

STUDIOのアカウントを制作すると、ダッシュボード画面に「使い方を学ぶ」という項目があります。

STUDIOのアカウント画面

こちらの「機能・シーンから探す」で各カテゴリーを選択すると一連の動画にリンクしているので、順番に観ていきSTUDIOについて知っていきましょう!

 

公式YouTubeを観た後は、実際にSTUDIOでサイトを作成してみましょう!

…というのはまだハードルが高いと思うので、次はSTUDIOで作られたテンプレートに触ってみましょう!

テンプレート活用

テンプレートはサイト制作を効率化させるためのものですが、勉強にも非常に有効です。

★テンプレートを活用した勉強方法
・サイトを一つ作るために必要な構成(ページやセクション)を学ぶ
・STUDIOのボックスレイアウトを学ぶ
・各セクションの作り方(余白やテキスト、画像のサイズ)を学ぶ

テンプレートの構造はデザインエディター画面から見ることができますが、実に多くのことが学べます。

 

このテンプレートは○ページで構成されていて、このページはセクションが○個あって、このセクションで使われているボックスは○個の階層で構成されていて…

といった具合に、一つのテンプレートから得られる情報はかなりの量です。

STUDIOは無料テンプレートだけで数十個あるので、その数だけあなたの教材です。

ぜひ色々なテンプレートを活用してSTUDIOの操作方法を勉強しましょう!

STUDIOの公式コミュニティ

学びの場として、公式コミュニティものぞいてみてください。

STUDIO Community

 

STUDIOの公式コミュニティは次の7つのスペースグループに分かれています。

【Welcome】
ルールや各スペースの説明など、コミュニティ全体の案内があるグループ。

【Official】
STUDIOの公式サイドから、お知らせやイベントの情報、そのほか不具合情報などの案内があるグループ。

【Product】
STUDIOの機能改善に関するリクエストなどを受け付けているグループ。

【Communication】
STUDIOユーザーが活発に交流しているグループ。
サイト制作のお仕事募集や、STUDIOの実装に関するTipsなどはこのグループから案内されている。

【Q&A】
ここもSTUDIOユーザーの投稿が多いグループ。STUDIOの使い方に関する質問や疑問を投稿されている。

【Member’s Community】
フリーランス専用や制作会社専用のプライベートスペース。閲覧には公式より招待される必要あり。

【Learning】
STUDIOの使い方動画を閲覧できるグループ。動画内容は公式YouTubeと少し異なる。

コミュニティの投稿を見たり、オンラインイベントに参加したりすることは多いに勉強になります。

実装方法がわからない場合も、コミュニティ内で解決方法が掲載されていることもあるので、こまめにチェックするのがおすすめです。

 

以上がSTUDIOを無料で学ぶおすすめの方法です。

これだけでも多くのことが学べます。しかし、もっと深く学びたい!という人のために、
次は有料で学ぶ方法についてご紹介していきます。

STUDIOの勉強方法~有料編~

有料で学ぶ方法は2つご紹介します!

★有料で学ぶ方法
・Udemyで動画学習をする
・MENTAでメンターを見つける

それぞれ解説していきます。

Udemyで動画学習をする

一つ目はオンラインプラットフォームのUdemyです。

買い切り型のコンテンツで、様々なジャンルが販売されておりその数は200,000を超えます。

その中で、STUDIOに関する教材も販売されており、おすすめの教材は次の2つです。

①ノーコードで超速WEB制作 STUDIO学習完全パック(初級編・中級編・上級編)

https://www.udemy.com/course/studio-complete-pack/

②ノーコードで超速WEB制作 STUDIO学習アドバンスパック(発展編・実践編)

https://www.udemy.com/course/studio-advance-pack/

こちらの教材は“おたろう”さんという、STUDIOでのWebサイト制作者によって作成されています。
私はある程度STUDIOを勉強してからこの教材を知ったので、②の発展編だけ購入しました。
すでに知っている内容もありましたが、サイト制作のマナーや時短方法なども知ることができ、いまでも時々見返しています(①は購入していませんが、レビューや各章のタイトルから判断しておすすめしておきます)。
Udemyはセールを頻繁にやっているので、購入するなら絶対にセール時にしましょう!
上記2つの教材も通常は¥27,800のところ、セール時には¥1,200で購入できます。

※Udemyにはこの2つ以外にも、STUDIO教材はあります。ぜひ自身で探してみて気になる教材があれば選んでみてください!

MENTAでメンターを見つける

二つ目は“MENTA”を活用して、勉強のメンターを見つけることです。

MENTAは「教える人」と「学ぶ人」、それぞれが存在する学びのプラットフォームです。

STUDIOを教わりたい人はSTUDIOのメンターを探して、チャットかビデオ通話で教わることができます。

メンターによって単発の相談や月額サポートなど提供プランが異なるため、自分の課題を解決できるメンターを選びましょう。

Udemyの場合、買い切り型のコンテンツで自分のタイミングで学ぶことができる点が長所です。

MENTAの場合は、勉強していてわからない点を相談できる点や勉強のロードマップを質問できる点が長所と言えるでしょう。

それぞれに良さはあるので、STUDIOについて勉強したい人は利用してみてはいかがでしょうか。

以上で有料で学ぶ方法のご紹介を終わります!

 

STUDIOの勉強方法はわかったけど…

ここまで無料・有料それぞれで学ぶ方法をご紹介してきました。

いかがだったでしょうか?

STUDIOを勉強する方法はわかったけど、そもそもホームページの作り方がわからないな。

 

STUDIOの編集画面で表示される単語の意味がよくわからないわ。

こういったお悩みをお持ちの方はいるでしょうか。

これらのお悩みは、実際にWeb制作に関する知識がない人がSTUDIOを使用したときに聞いた話です。

STUDIOはノーコードのWeb制作ツールです。つまり、コードを書く技術がなくてもWebサイトが作れます。

でも、そもそもWebサイトがどのような構成で作られているか知らないとサイトは作れないですよね?

テンプレートがあるため、構成を知らない人でもサイトを作ることはできます。

しかし、それぞれのパーツがどのような機能を果たしているか、この効果はどのような役割があるのか、その理解をしておくとWebサイトの制作はグッと変わります

そのため、ここからはほんの少しだけ「発展編」としてコードを書いてWebサイトを作る方法、つまり、プログラミングの勉強方法をご紹介します!

※別にそれはいいや!という人は以上で終了です!

ここまで読んでいただきありがとうございました!

興味ある人は続きをご覧ください!

発展編~プログラミングの基礎を学ぼう~

勉強する方法はただ一つ!

Progateに1ヶ月だけ課金して、STUDIOを使用するのに必要な部分だけだけサクッと学びましょう!

Progateって何か知ってる人!

はい!Progateは初心者向けのプログラミング学習サイトです!
内容は各プログラミング言語に分かれており、最初にプログラミングを勉強するにはもってこいです!

 

その通り!

プログラミングの勉強をする多くの人が活用する、まさにWebサイト制作の登竜門と言えるでしょう!

Progateで勉強する内容は次のレッスンです!

・HTML&CSS 初級編
・HTML&CSS 中級編
・HTML & CSS Flexbox編 (余裕があれば)
・jQuery 初級編
・jQuery 中級編

とりあえずWebサイトの見た目がどのように作られているか、HTMLとCSSをという2つの言語を勉強して学びましょう!

そして余裕があれば、jQueryでWebサイトのアニメーションを付ける方法について知りましょう!
(STUDIOは設定一つでアニメーションが設定できるため、ほんと余裕がある方のみで良いと思います。
コードを書く場合はこんなふうに作っているんだと、なんとなく理解するだけで大丈夫です。)

これらの内容を学ぶ場合は、有料会員になる必要があります。

長期間契約のほうが月額あたりの金額は安くなりますが、学ぶ人は1ヶ月だけの契約にしましょう。

あくまでもWebサイト制作の理解を深めるために、Progateを活用しましょう。

ProgateでWebサイト制作の基礎を学んだ後でSTUDIOに戻ると、サイトの構成や専門用語の意味が理解できるようになっているでしょう。

最後に

STUDIOの勉強方法について書きました!

いかがだったでしょうか。

無料編で扱ったように、STUDIOは無料でも充分な内容を学べます。

学んだ上でSTUDIOについてもっと学びたいという人は、有料編でご紹介した方法もぜひ試してみてください。

そして僕もまだまだ勉強中なので、他におすすめの勉強方法があれば教えてください!

お問い合わせはこちら

最後まで読んでいただきありがとうございました!

「もっとSTUDIOについて知りたい」
「実装について相談したい」

など思われた場合は、下記リンクより受け付けているのでお気軽にご相談ください!

お問い合わせはこちら

最後まで読んでいただきありがとうございました。
また次の記事でお会いしましょう。

 

コメント

タイトルとURLをコピーしました