今一番熱いノーコードのWeb制作ツールである「STUDIO」！
純日本製のノーコードツールで、まだまだ歴史は浅いものの、その直感的な操作性とデザインの自由度で
圧倒的な勢いでユーザー数やサイト数を伸ばし続けています。
コーディングとはまた別の選択肢として、興味をお持ちの方も多いのではないでしょうか…！
ただ、このようなお悩みはありませんか？
STUDIO興味あるけど、どうやって勉強したらいいんだろう？？
基本的な操作まではわかったけど、実案件はどれぐらいのスキル感が必要なのかな…
ぶっちゃけSTUDIOは基本的な操作なら、Web制作の知識がない方でも１・２日あれば基本的な操作は身につくと思います。
しかし、実際にSTUDIOに触れた方ならお分かりいただけると思うのですが、
「基本的な操作を覚えただけの状態」から、
「自分１人で実案件をこなせるスキル感」までにはかなり乖離があります。
そこで、今回は現在STUDIOを中心に実際にWeb制作の案件を行っている僕が
「実践的なSTUDIOの学習方法」をご紹介します！
今回の記事をご覧いただければ、ただただ「STUDIOで見様見真似で制作ができる」から、
「実案件もこなせるSTUDIOスキル」の身に着け方をご理解いただけると思います…！
それでは一緒に「実践的なSTUDIOスキルの身に着け方」を見ていきましょう～！
基本的なHTML・CSSの知識を身に着ける
ノーコードであるSTUDIOですが、基本的なHTML・CSSの学習はマストです！
先ほどもお伝えしたように、STUDIO自体はコーディングの知識がない方でも
基本的な操作方法を身に着けることは可能です。
しかし、それでは今回のブログのテーマでもある「実践的なSTUDIOスキル」とは異なります。
なぜならSTUDIOは、HTML・CSSで用いられる「BOXレイアウト」という構築方法を採用しているため
やはり基本的なコーディングの考え方がないと、表現や操作に限界があるし、
本当の意味で理解しているわけではないので「応用」ができません。
STUDIOはノーコードツール中でもこのBOXレイアウトを用いてるという点で
他のツールより1段階上のレベルでの制作が可能になっているわけです…！
STUDIOの特徴については、詳しくはこちらのノーコードツールの比較記事をご覧ください！
一見遠回りに思えるかもしれませんが、HTML・CSSの学習もしっかりするのが一番の近道です。
学習としてはProgateなどでHTML・CSSの部分を2・3周すれば十分です。
書籍やYouTubeでもいいでしょう。とにかくさらっとでいいのでHTML・CSSの基礎はここでしっかり身に着けておきましょう。
ただ一つ注意！「やりすぎ」は禁物です！
今回のテーマはあくまでもSTUDIOですので、Progateを５周もしたり、道場に何回もチャレンジすることは不要です。
個人的な境界としては、「マージンとパディングの違いが明確にわかる」ぐらいで十分だと思います！
ある程度身についたと思ったら、サッサと次のセクションに向かいましょう！
UdemyでSTUDIOの基本操作を学ぶ
基本的なHTML・CSSの知識を身に着けたら、
次はSTUDIOの操作方法を学んでいきます！
STUDIOの操作を学ぶ上でおススメの教材は断トツで、
こちらの「おたろうさん」という方が出されているUdemy教材！
動画教材でSTUDIOの基本的な使い方と実用例を網羅的にマスターできます！
個人的にうれしかったのが、このテクニック(操作)を使えば、よく見るようなこんなデザインができますよーと
いうことまで教えてくれる点！
これがあるからめちゃくちゃ実践的なんです…！
STUDIOを一から短期間で学びたいという方にはマジでおススメです。
ぶっちゃけ、この教材を完走できれば「STUDIO」の操作に関してはほぼほぼ間違いないと思います。
※ではなぜ「この教材だけで完璧！」とはならないのかは次のセクションでご紹介します…！
初級がSTUDIOの特徴や基礎的な操作、
中級がアニメーションやフォームや基本的なCMS(ブログ)機能について、
上級が実際にSTUDIOのテンプレを元にした実践課題をやっていきます！
そしておススメは上級の最初の方までをサラッとやってみる感じです！
上級の最初のSTEPが、実際におたろうさんが画面共有をしながら教えてくれるのですが
それがめちゃくちゃ勉強になるんです…！
なのでそこまでやってから、次のステップにいってみましょう！
テンプレートを活用して「実践的な設計」を学ぶ
UdemyでSTUDIOの操作を身に着けたら、
ここから今回のブログのテーマである「実践的なSTUDIOスキル」を学んでいきましょう！
その答えはずばり、「STUDIOのテンプレート」を活用すること！
STUDIOは白紙の状態から一からプロジェクトを作成するほかに、
「テンプレート」があらかじめ数十種類用意されてあります。
STUDIOのテンプレートは他のノーコードツールに比べて数は少ないものの「質」がかなり良く、
そのテンプレートの画像やテキストを置換するだけで、一瞬でかなりレベルの高いサイトが作成できます！
その質の高さは、きっと「これがテンプレート？」と疑ってしまうレベルです（笑）
そして今回そんなSTUDIOのテンプレートを用いて、実践的なサイトの設計を学んでいきます。
STUDIOのテンプレートは全てデザインエディタ(管理画面)を開くことができ、
実際にどのような設計でそのデザインが構築されているのかを見ることができるのです。
恐らく、上記ステップのUdemyをご覧いただいた方なら、
テンプレートのデザインエディタを見ながらなら、PCのデザインの再現は何となくならほとんどできるはずです。
ただし、それを自分で考えて、レスポンシブまで考慮した「きれいな設計」まで行うのはなかなか難しいのではないかと思います。
だからこそ、ここで身に着けたいのは、そうした「実案件までを意識した実装方法」です。
実際にテンプレートのデザインエディタを見てみることで、
「あ、ここをPXで指定すると、レスポンシブが聞きくなるな」とか、
「このデザインはこんな風に実装しているのか」や、
「ここはマイナスマージンをうまく使っているのか…」
といった発見があると思います。そしてそれこそがSTUDIOでの実案件をこなす上で重要になってきます…！
Udemyで基本的な操作方法を身に着けたうえで、
テンプレートが実際にどのような感じに構築されているのかを見て学んでいきましょう！
個人的なポイントは以下の３点です。
- ボックスの縦、横幅のauto指定
- アニメーションの設定方法
- レスポンシブまで考慮したデザイン設計
このあたりはUdemyだけだとカバーできない範囲かなぁと個人的に思うので
ぜひSTUDIOのテンプレートを活用して身に着けちゃってください…！
ここでは、数あるSTUDIOのテンプレートの中から、僕がおススメのものを4つ紹介します！
STUDIOのテンプレートは海外のサイトを意識したものが多いのですが、
ここでは日本語のサイトの中から、特に学習におススメのものを選んでみました！
①THE COFFEE
まず一つ目が仮想のコーヒー豆サブスクサービスのLPである「THE COFFEE」のテンプレート！
シンプルな構成のため、STUDIOの設計方法を学ぶ第一歩にピッタリです！
複雑なデザインや機能もないため、STUDIOの模写の一歩目としてはちょうどいいレベル感だといえます！
しいて言えば右横の固定配置とフェードアップのアニメーションぐらいだと思います。
逆に言えば、デザインエディタを参考にしているにも関わらず、再現に難航するようでしたら、
もう一度Udemyの教材を振り返った方がいいもです…！
ぜひSTUDIOテンプレート模写の第一歩目として活用してみましょう～
②Good Small Company
二つ目が仮想の老舗工務店のデモサイトである「Good Small Company」！
模写でもいいのでこのレベルのサイトが構築できるようになれば、実案件でも十分やっていけるはずです。
固定配置やマイナスマージンといった構成面での学びはもちろん、
お問い合わせフォームやCMS(ブログ機能)も実装されており、かつ、それらがかなりシンプルな設計のため
「複雑すぎてよくわからん…」とならないちょうどいいレベルと言えるでしょう（笑）
デザイン的にもかなり完成度が高いため、
文字や画像を置換して、そのまま自分の制作物としてポートフォリオに追加するのも
十分アリだと思います…！
③La Prima Pagina
お次に紹介するのは仮想のイタリア料理店サイトの「La Prima Pagina」です。
項目としては「LP」として登録されていますが、形的には一枚もののスタイリッシュなサイトとなっています。
このテンプレートは「固定配置」の使い方を学ぶのにピッタリと言えるでしょう。
一見すると、「これどうやって構成されてるんだろう？」と思うようなレイアウトが、
固定配置を用いることでスマートに実装されています。
個人的に「固定配置」をマスターすることでSTUDIOで表現できるデザインの「幅」は一気に広がると考えます！
ぜひ、このテンプレートで固定配置を自由自在に扱えるようになっちゃいましょう…！
④MEDIA TEMPLATE “OH!”
最後にご紹介するのは「MEDIA TEMPLATE “OH!”」です！
こちらはSTUDIOのテンプレートの中で追加されてから一番新しいものです。
その分、デザイン的にも機能的にもかなりゴリッゴリのため、難易度は高めだと思います（笑）
このテンプレートで学べるのは、なんといってもSTUDIOの「CMS機能」です。
STUDIOはWordPressのようにブログ機能が使えるのですが、このテンプレートではそのCMS機能を
「これでもか」というほどフル活用して、めちゃくちゃリッチなブログサイトを構築しています。
このテンプレートのデザインエディタ、そしてCMS管理画面を理解できれば、
STUDIOのCMSは全て理解して使いこなせるといっても過言ではありません。
記事ごとにカラーを指定して、それを表示させるといった方法などは正直言って感嘆の一言です（笑）
またローディングアニメーションなど、STUDIOの基本機能には無いようなリッチなアニメーションも実装されているため
アニメーションの実装方法の勉強にもなるかと思います。
ぶっちゃけ、かな～り難しいです（笑）
難易度高めのテンプレートとなっていますが、ぜひ挑戦してみてください…！
実案件を見据えたメンターをつける
HTML・CSSの知識を身に着け、
Udemyで操作方法を学び、
テンプレートを活用して実践的な制作スキルを身に着けてきました！
ここまでくれば、STUDIOを用いた実案件は問題なく行えるぐらいのスキルを身に着けているといっても過言ではありません！
その上で、最後に「＋α」でおススメするのが
「実案件を見据えたメンターをつける」ということです。
ここまでのステップで実案件をこなせるだけの「制作スキル」は身についたかと思います。
しかし、実際の案件は「制作する」というだけではなく、
そもそもの案件を獲得するところ、クライアントとの商談、案件の進行、納品といった
様々な工程が発生します。
そうした、純粋な「制作」以外の部分は、
なかなか教材などでは学ぶことが難しいものです。
そうした中でおススメなのが、既にSTUDIO案件をこなしている「先人」を
メンターとしてつけることです…！
ググっても出てこないような内容でも、
実際にSTUDIOを用いた案件を行っている先輩に聞けば一瞬で解決するということ非常に多いです。
では、どこでメンターを探すのがいいのでしょうか？
もしあなたの知人やコミュニティにSTUDIOのプロがいればお願いしてもいいかもですが、
僕のおススメは「MENTA」というサービスです！
MENTAは「教えたい人」と「学びたい人」を結びつけるサービスです。
学習相談、就職・転職相談、ポートフォリオ…など、自由にプランを組み立てて相談することができます。
買い切り、月額(サブスクリプション)など、自分の都合にあった方法でメンターをつけることができちゃうんです…！
MENTAの魅力は約3000人ものメンターの中から、
あなたが悩んでいることをダイレクトに相談して、マンツーマンで解決までたどり着くことができる点！
スクールなどの企業ではなく、個人のメンターと直契約するため比較的リーズナブルに教えてもらうことができます。
STUDIOについて教えてくれるプランも多くあるので、ぜひあなたに合ったメンターをみつけちゃいましょう！
ちなみに、もちろん僕もSTUDIOメンターとして出品しております！（笑）
今回のブログ内容を元にしたSTUDIOの学習方法アドバイスはもちろん、
案件の取り方や「STUDIOの特徴」を活かした商談の進め方、
実装方法についてのご相談や、納品のサポートまで…！
「STUDIO案件」のまさに０～１０までサポートさせていただきますので、
もしお困りの際は、ぜひぜひMENTAからご連絡いただければと思います！
まとめ
「実践的なSTUDIOスキルの身に着け方」は以上になります！
いかがでしたでしょうか…？！
小手先ではなく、実際に「案件をこなせる」ようになることをテーマに
STUDIOの学習方法を紹介してまいりました…！
STUDIOに限らずノーコードツールは、どうしても「手抜き」や「簡単に制作できる」という
イメージが付きやすいのではないかと思います。
ですが、実際はそんなことは決してありません。
STUDIOで言えば、今回ご紹介したようにしっかりとHTML・CSSの知識を身に着け、
動画教材で基本操作を身に着けたうえで、テンプレートまで活用する…。
そこまでしないと、「継続的に」「ある程度の値段で」案件をこなしていくのは難しいのではないかと個人的には思います。
その上で先人をメンターとして何でも聞ける状態を整えておくと、さらに盤石といった感じです…！
だからこそ、しっかりとスキルを身に着けた人は、
「なんかノーコード使えばサクッと簡単に稼げるって聞いたから」といった
楽観的な方々とは明らかに差別化できるし、「勝てる」わけです…！
STUDIOを他のスキルと「掛け合わせ」て、更に活かすためのロードマップはこちら！
あなたのSTUDIOでの案件獲得のために、今回の記事が少しでもご参考になればこれ以上のことはありません！
ぜひSTUDIOを極めて、自由自在にサイトを作っちゃってください～
それでは今回の記事は以上になります！
もし良ければ感想をツイートとかしていただけると嬉しいです！
では、次の講義でお会いしましょう～