見出し画像

STUDIO完全攻略ロードマップ

ほうた

こんにちは！NoCodeエンジニアのほうた（@Houta_NoCode）です！

今回は初心者がSTUDIOでWeb制作をできるようになるまでの最短の勉強手順である「STUDIO完全攻略ロードマップ」を解説していきます！
この通りに勉強すれば、最短でSTUDIOを習得することができます！

僕がなぜこのような記事を書こうと思ったかというと、STUDIOを効率よく勉強したいけど勉強方法が分からないという人をたくさん見てきたからです。

現在、STUDIOは公式の方々が分かりやすい日本語教材をたくさん出してくれているため、どんどん勉強しやすい環境が整ってきています。しかし、「どのようにして勉強すればいいか」について書かれている記事は少ないため路頭に迷っている人がいるのも現状です。

なので、どうすれば解決できるのかな？ということを考えた結果。。。

俺が書けばいいやん！ってことになりました(笑)

ということでめちゃくちゃ時間をかけて書きました(笑)

完全攻略ロードマップと言っているだけあって、初心者だけでなくSTUDIOを勉強するすべての人にとって参考になるように作ったので、ぜひ最後まで見てみてください！

０．初めに

STUDIOでWeb制作をしていく上で「どれくらい綺麗なサイトをNoCodeだったら作れるの？」という質問をよく聞くので、以下にSTUDIOで作られたWebサイトを貼っておきます！
これらを見ることで「NoCodeでこんなWebサイト作れるんや！」って感動すると思います！少なくとも僕はめっちゃ感動しました！(笑)
本当に素晴らしいサイトばかりなので是非みてみてください！

また、以前にSTUDIO DESIGN AWARDというガチガチのデザイナーさんたちが競うSTUDIOのコンテストがあったのですが、その作品集を以下に貼っておきます！
もちろんここに載ってるWebサイトは、日本最高峰のSTUDIOで作られたWebサイトになります！このサイトもSTUDIOで作られています！

そしてNoCodeを学んでいく上では、NoCodeの概要やメリット、上手く利用する方法なども知っておいた方が良いので、NoCodeについてまとめた記事も貼っておきます！

では、STUDIOを学んでいきましょう！！！

1．最初はIT用語をチェック！

最初はよく使われるIT用語をチェックしましょう！
ただ、初めに見てもよく分からないと思うのでざっと目を通すだけでOKです！10分くらいみたら次にいきましょう！

2．初心者が最初に見るべき教材

最初は以下の教材から始めてみましょう！

この教材では、STUDIOの概要説明からSTUDIOの使い方までの基本的なところが全て記載されています！
僕が知る限り、一番分かりやすいSTUDIOの解説資料になっているので、これから始めればつまずくところを最小限に抑えて勉強を開始できると思います！

ちなみにスライドもSTUDIOで作られているので、どのようなサイトを作れるのかということを体験を通して知ることができます！

また、以下にプロジェクトの設定方法に関する記事も貼っておきます！
これを見ることによって、STUDIOの言語設定や画面の表示設定、料金の支払い方法などを知ることができます！この段階ではあまり知らなくても良い情報もあるのでそこはさらっと飛ばしてください！(笑)

３．Twitterで有益なアカウントをフォローしよう！

これから本格的にSTUDIOを習得しようと思っている人はこの先、絶対に情報収集が不可欠になってきます！なのでSTUDIOについて有益な情報を発信しているアカウントを今のうちからフォローしておきましょう！

以下に「STUDIOを勉強するならフォロー必須のTwitterアカウント！」という記事を貼っておきます！
これらのアカウントさえフォローしておけばSTUDIOの重要な情報は網羅されるので必ず全員フォローしておきましょう！

また、NoCodeはGoogle拡張機能を使うことによって効率よく作業できるようになることもあるので、以下に「NoCodeを使うならインストールすべきGoogle拡張7選！」という記事を貼っておきます！

４．実際にWebサイトを作ってみよう！

ここまでやったら、以下の動画を参考に実際にWebサイトを作ってみましょう！

これらの動画は実際にSTUDIOでWebサイトを作る様子から公開するまでを見ることができるので、めっちゃ参考になります！

注意点としては、たまに難しいIT用語がでてくるのでそこは調べながら進めていくことになります。初めは慣れないIT用語でつまずくこともありますが、勉強していくにつれて克服できるので気にせずいきましょう！

また、先日にアップデートが行われ、レスポンシブ対応の機能がさらに実装されました！その機能の詳細に関する記事を以下に貼っておきます！
この時点ではまだ便利な部分が分からないこともあると思うので、概要だけ把握しておけば大丈夫です！

また、実際にWebサイトを作るときには「ショートカットキー」を上手く使えば効率よく作業を行うことができます！
以下にショートカットについて説明した記事を載せておくので事前に見ておいてください！

そしてWebサイトの公開については、詳しくこちらのサイトで説明されているので見てみてください！
この時点では説明が難しい部分もあるので、そういったところはしっかり飛ばして大丈夫です！

５．アニメーションを使ってみよう！

次はアニメーションについて学んでいきましょう！

これらの動画を見ることによって、アニメーションの基礎から応用まで学ぶことができ、非常に分かりやすい動画になっています！
概要欄にはそれらのアニメーションコース用サイトのリンクが貼られているので、実際に体験することもできます！

これから学べることを応用するだけで多くのアニメーションを使えるようになるのでしっかりマスターしてほしいと思います！

また、以下にはTwitterでも紹介したぷにゅさんのnoteを貼っておきます！
この方はアニメーションを中心に有益なnoteを書いてくれていてめっちゃ有益です！これからもnoteを更新していくみたいなので是非見てみてください！

また、こちらにはアニメーションデザインについてまとめられているサイトを貼っておきます！真似するだけでデザインを学べてしまうのでこちらも本当に有益です！なのでアニメーションをしっかり学びたい人は是非見てみてください！

６．CMS機能を使ってみよう！

次はCMS機能について学んでいきましょう！

いやそもそもCMSってなんやったっけ？って思う人もいると思うので、そんな方は以下のサイトを調べてみてください！

これらの動画を見てCMSを理解することによって、ブログサイトをしっかり作ることができるようになります！

ブログサイトはWeb制作をする上でも使われることがよくあるので非常に重要な機能なるので、これらもしっかり扱えるようにしておくと良いと思います！

また、CMS機能のさらに深い内容については以下のサイトから学ぶことができます！なので一度目を通してみてください！

７．フォーム機能を使ってみよう！

次はSTUDIOで使えるフォーム機能について学んでいきましょう！

これらの動画を見ることによって、フォーム機能を使いこなすことができるようになり、スプレッドシートとの連携まで学ぶことができます！

フォーム機能もやはりWeb制作する上では不可欠な機能になってくるのでしっかり扱えるようにしておきましょう！

STUDIOって日本製NoCodeツールなだけに機能の解説を日本語でしてくれるのは本当に最高だなとしみじみ思いますね〜。世界一日本に優しいNoCodeツールですね(笑)　ただの独り言です(笑)

８．STUDIOのTipsを学ぼう！

次はSTUDIOのTipsについて学んでいきましょう！

これらの動画を見ることによって、重要な機能の実装方法をしっかり学ぶことができます！これらのTipsは本当に役に立つのでしっかり扱えるようにしておくと良いと思います！

STUDIOってこういったところまで公式の方が出してくれているのがめちゃくちゃありがたいですね(笑)

また、以下に他の方達が出してくれているTipsを共有しておきます！
これらも非常に参考になるので是非見てみてください！

また、以下にはSTUDIOのLive PreviewでFeedBackもらうことができる方法について解説しているツイートを貼っておきます！

9．デザイン機能を使いこなそう！

次はSTUDIOのデザイン機能をひたすら学んでいきましょう！

このサイトは、STUDIOのデザイン機能を網羅しているサイトになります。よってこれまでに勉強した内容と被っているところもあります。
なので自分が知らない情報のところだけをピックアップして調べていくことをおすすめします！

10．全体的な機能をマスターしよう！

次はSTUDIOの機能を網羅していきましょう！

このサイトは、STUDIOの全体的な機能を網羅しているサイトになります。よってこれまでに勉強した内容と被っているところもあります。
なので先ほどと同様に自分が知らない情報のところだけをピックアップして調べていくことをおすすめします！

１１．よくある質問で学ぼう！

次はSTUDIOによくある質問を見て、学んでいきましょう！

このサイトには「よくある質問」つまりSTUDIOを使っている人たちが悩みがちな部分をピックアップして解決法を載せてくれています！
なのでここを見ることによって将来的に自分がつまづくであろう部分を先に解決することができます！

１２．STUDIO公式のSlackに入ろう！

実はSTUDIOには公式のSlackが存在します！なのでそこに入りましょう！

ここではお知らせやイベント情報を知れるだけでなく、質問や不具合の問い合わせなどもすることができます！なのでここまできてどうしても分からないところや、不具合っぽいものがあれば質問して解決していきましょう！

こうやってユーザー側に手厚いサポートをしているところもSTUDIOの良いところだなとしみじみ思います(笑)

一つ注意点なのですが、このSlackではしっかり調べたり考えたりしたけど、それでも分からないときにだけ質問をしてください！
このSlackは無料で展開されていることもあり調べたら出てくるような質問をしてしまうと、答える側の負担がどんどん増えてしまいます！相手が自分に時間を作って返信してくれているという自覚を持って質問してくれたらと思います！

１3．noteを使ってひたすら学ぼう！

ここではSTUDIOの有益情報が載っている記事を紹介していきたいと思います！

13.1　ぷにゅさんのnote

まずはアニメーションのところでも紹介したぷにゅさんのnoteです！タイトル的にまとめておいた方が良いと思ったのでもう一度貼っておきます！

13.2　はるかなさんのnote

次は、はるかなさん(@harukana_8)のnoteです！
(５．アニメーションについて学ぼう！のところで紹介したアニメーションデザインについてまとめてくださっている方です！)

この方のnoteは実際にSTUDIOで案件を取っている人目線で書かれており、細かい部分にまで説明されているので非常に有益なnoteになっています！
また、デザイン関連のnoteも参考になると思うので、STUDIO関連の記事だけでなく是非そちらも読んでみてください！

そしてこの方の有益なnoteの中でも、STUDIOで案件を取るなら絶対に読んでおくべき！というnoteを以下に貼っておきます！
これを見るだけで案件のWeb制作から納品までの流れがかなりイメージできるようになるので超有益です！

また、YouTubeでもSTUDIOの解説動画をだしているのでそちらも見てみてください！

以上になります！

最後に

「STUDIO完全攻略ロードマップ」はどうだったでしょうか？

この通りに勉強すれば必ず圧倒的に効率よくSTUDIOを習得することができます！

なかなかボリュームはあると思いますがコーディングと違ってSTUDIOであれば、本気で勉強すれば1ヶ月ほどでかなり上達すると思うので諦めず取り組んでほしいと思います！

今後もNoCodeの有益な情報をTwitterやnoteで発信していくので、是非フォロー&いいねしていただけると幸いです！

皆さんがSTUDIOを使いこなせるようになることを心から応援しています！

最後までお読みいただき本当にありがとうございました！

この記事が気に入ったらサポートをしてみませんか？