Web制作やWebデザインの学習を開始された方・開始しようとされている方が、
最初に見つけるべきものが「ロードマップ」です！
参考となる方を決め、その方が示す手順に沿って学習や営業などを進めていくことで、
我流で進めていく以上にスムーズに成果を上げる手助けをしてくれます！
ただ、Web制作系のロードマップを探してみて、こんな印象を持った方も多いのではないでしょうか？
色んな人のロードマップ比べてみたけど、同じようなロードマップばっかりだな…
「コーディングを極めたら後はWeb制作会社へ営業」っていうのばかりで、他のものもみてみたいなぁ
そうなんです。今のWeb制作界隈では
WordPress化できるまでコーディングができるようになったら、とにかくWeb制作会社へ営業して継続案件をもらう
的なものが主流になっていて、僕が見る限りほとんどが上記のものをベースとしているように思います。
もちろん、これは大正解の選択肢の一つですし間違いではありません。
実際にこのロードマップで成功されている方々も、僕はたくさん知っています。
ただ、今回選択肢の一つとして、上記のものとは全く異なる「やまひこ流」のロードマップも公開させていただくことで、
より今後Web制作を始める方の、選択肢が増えればいいなと考えております！
ちなみにJavaScriptやPHPの学習はでてきません（笑）
もちろんあるに越したことはないのですが、今回のロードマップに必須ではないです。
また今回ステップごとに分けているので、「あ、自分はこの段階からだな」と思えば、
そこからでも大丈夫です！
例えば、既にコーディングの知識がある方でしたら、①の「HTML・CSSの基礎を学ぶ」の部分は省いていいでしょうし、
デザイナーとして活動されている方なら、⑤の「デザインを学ぶ」を飛ばしてもいいでしょう…！
もちろん、これから0からロードマップの完走を目指される方は、
①から順を追ってステップアップしていくことで、
確実に1つずつロードマップをたどることができるようになっています！
ご自身に合わせてご活用いただき、少しでもご参考になれば嬉しいです！
それでは一緒に「ノーコード×ローコード×Webデザイン」のロードマップを見ていきましょう！
⓪初めに
「見ていきましょう！」とか言いつつ申しわけないのですが、
最初に少しだけ僕の自己紹介と、今回の記事についての紹介をさせていただきます！
まず、僕「やまひこ」は2022年4月から新卒で社会人となったばかりで、
この記事を執筆している2022年6月時点で、まだ社会人になって3ヶ月ほどです。
そして大学4年(2021年)の5月から学習を始めたWeb制作が有難いことに軌道に乗ってきて、
今だと副業で安定して月10万円ほどを稼げています。
そして、僕はあくまでも副業としてなのでこれぐらいを無理せずに稼げているという感じですが、
今回のロードマップを参考にしていただければ、正直もっと上げることはいくらでも可能だと思っています。
なので、僕の場合は、今回のロードマップを「1年間」をかけてたどり着き、「副業で月10万円」という感じですが、あなたの活用方法次第で「3ヶ月ほど」で「フリーランスで月50万円以上を稼ぐ」ことも可能です！
そうした意味では、とても汎用性の高いロードマップなのではないでしょうか…！
僕はWeb制作を始めてから、上記のWeb制作界隈で主流となっているロードマップには従わず、
割と自分の楽しいこと・したいことを優先してきました。
そしてそれである程度の結果がでてきて、
今では有難いことに多くの方にご相談をいただくことも多くなってきました。
そしてご相談をいただく中で、僕のような感じの「ローコード・ノーコード」を軸としたロードマップが
無いことに気づきました。
なので、今回自分で作っちゃいましたという感じです（笑）
ちなみに後から改めて紹介するのですが、
ノーコードは「STUDIO」、ローコードは「SnowMoneky」を代表として進めていきます！
そしてそして最後に大事なポイントを一点…！
今回のロードマップは実は、このブログだけで完結するわけではありません。
というのも、ここで一つ一つのSTEPを全部細かく説明しようとするとめっちゃくっちゃ長くなるからです（笑）
なので今後随時、他の記事で１つずつ補足をしていきます。
また僕のTwitterでも日々、このロードマップに沿った内容を発信しておりますので、
合わせてご確認いただければと思います！
とは言いつつも、今回の記事そのものが大きな指針にはなるのは間違いありません！
「随時、他の記事で補足する」とか言いながら、この記事だけでも１万字以上の大作となるぐらいには
しっかり書き込んでいるので、ぜひご覧いただければと思います！
紹介は以上です！
それでは、前置きが長くなってしまいましたが
今からロードマップを１から解説させていただきます！一緒に完走目指して突き進みましょう～
①HTML・CSSの基礎を学ぶ
ノーコード・ローコードでのWeb制作でも、HTML・CSSの学習はマストです。
ネットだと「ノーコード・ローコードだからコードは必要ない！」という意見もたまに見ますが、
個人的にはそれは間違いだと考えます。
なぜなら、HTML・CSSの基礎が身についているからこそ、
ノーコード・ローコードでの制作の「幅」が広がるからです。
もちろん、コーディングを知らなくてもチュートリアル動画や操作方法が書いたブログを見れば
最低限の制作は可能です。
ですが、それでは案件としてお金をもらっていくのは難しいです。
どうしてもHTML・CSSの基礎が身についてないと表現や操作に限界があるし、
本当の意味で理解しているわけではないので「応用」ができません。
一見遠回りに思えるかもしれませんが、HTML・CSSの学習もしっかりするのが一番の近道です。
そしてもう一点お伝えしたポイントとして、
すでに今まである程度コーディングをされてきた方は、このセクションは飛ばすことができます。
詳しくはまた別記事で説明させていただきますが、上記の理由で、
ノーコード・ローコードを選んだからと言って、「今までのコーディングの勉強が無駄になる」というようなことは一切ありません。
むしろ今までコーディングをしてきたからこそ、ノーコード・ローコードの制作の幅が広がると考えます。
話が少し逸れてしまいましたが、まずはHTML・CSSの学習がマストで必要です！
学習としてはProgateなどでHTML・CSSの部分を2・3周すれば十分です。
書籍やYouTubeでもいいでしょう。とにかくさらっとでいいのでHTML・CSSの基礎はここでしっかり身に着けておきましょう。
ただくれぐれもやりすぎは禁物です！
なぜなら目的はHTML・CSSでの静的サイトを作るわけではないからです。
ある程度身についたと思ったら、さっさと次のセクションに移動しましょう！
②STUDIOを学ぶ
ノーコード×ローコードでのロードマップ、まずは「ノーコード」からです。
ノーコードでのWeb制作ツールはWIXやペライチなど色々ありますが、
僕のおススメは断然「STUDIO」です。
STUDIOは純日本製のツールで、ノーコード界ではまだまだ歴史は浅いですが、
そのユーザビリティとクオリティの高さから、今最も勢いのあるノーコードツールといっても過言ではありません！
詳しくは以下の「ノーコードツール比較検証記事」をご覧ください！
ということで、「デザインの自由度」と「機能性」という点でここではSTUDIOの学習をしていきます。
そして、ここでお伝えしておきたいポイントは、
「今までコーディングをしてきた方こそ、STUDIOを一度試してみて欲しい」ということです！
STUDIOで用いられている「ボックスレイアウト」はHTML・CSSの考えをもとに設計されています。
だからこそ、今までのコーディングが無駄になるのではなく、
むしろコーディングの知識があることで、習得も早いですし、デザインの幅が広がっていく感じです！
また、今回のロードマップの①から沿って行われている初心者の方にとっては、
STUDIOの操作を学ぶことで、よりHTML・CSSの知識が身につくのでおススメです！
さて、肝心の学習方法はどうするかというと、おすすめはUdemyの動画教材です。
そしてUdemyで、というかSTUDIOの学習教材で圧倒的な人気があるのが「おたろうさん」という方のこちらの講座↓
おススメのUdemyのSTUDIO講座を見る
こちらの講座ではSTUDIOの基本的な操作方法から応用方法までを丸っとわかりやすく教えてくれます！
個人的にうれしかったのが、このテクニック(操作)を使えば、よく見るようなこんなデザインができますよーと
いうことまで教えてくれる点！
これがあるからめちゃくちゃ実践的なんです…！
STUDIOを一から短期間で学びたいという方にはマジでおススメです。
ちなみに、上記Udemyを含むより詳しいSTUDIOの学習方法についてはこちら…！
小手先ではない「実案件を見据えた」STUDIOスキルの身に着け方について紹介しております！
③STUDIOのテンプレートを元にデモサイトを作成する
STUDIOの基礎がある程度できるようになったら、STUDIOのテンプレートを活かしていくつかサイト・LPを作ってみましょう！
STUDIOに元々あるテンプレートを使用して、画像や文字を自分好みに変えてデモサイトを作成していきましょう。
STUDIOのテンプレートはレベルが高いため、かなり見応えがいいのができます！
もちろんそのままだとまずいので、自分なりにアレンジしてみましょう。
STUDIOのテンプレートがどんな設計でできているかも学べるため、STUDIOへの理解も深まります！
2～3個ほど、自分でクライアントの設定を作って、デモサイトを作成してみましょう。
で、一点アドバイスもさせていいただきますと、このデモサイトはクライアントに自分のスキル感を見せるものなので、
文章は「テキストテキストテキストテキスト」などはやめてしっかりそれっぽいものを書きましょう！
画像もです！STUDIOはデモで使用できる画像が本当に豊富ですが、
外国人の方がメインで、日本人を想定したサイトだと合わないことも多いです。
しっかりフリー画像サイトでそれっぽいものをいくつか取ってきてアップロードして使用してみましょう！
そういった細かいこだわりや徹底が、案件獲得につながりますよ…！
テンプレートを元にデモサイトをいくつか作成すれば、STUDIOの仕様についてかなり理解できているはずです！
もし余裕があれば、この段階でSTUDIOで自分のポートフォリオサイトを作ってみるのもありです！
今まで作成したデモサイトを並べたり、お問い合わせフォームや自分の経歴などを記載していきます。
もちろんポートフォリオサイトもいい感じのテンプレートがSTUDIO内にあるので簡単に作成できます！
④LancersにSTUDIOでスキル出品
STUDIOである程度ホームページやLPが制作できるようになったら、Lancersでスキル出品をしてみましょう！
ここで僕がスキル出品をおススメする理由は、「待ちの営業」だからです。
この待ちの営業の体制を構築できるかどうかが、今回のロードマップ完走のためにかなり重要になります！
よく言われているクラウドソーシングでの公開案件での応募も一つの選択肢であるのですが、
公開案件に数十件応募しても、選ばなければそれは「0」です。
ですが、スキル出品は一回すれば、その時点で一つ案件を獲得できる可能性がる
「導線」を増やすことができます。
毎日数時間、公開案件や制作会社メールをされているのでしたら、
そのうちの30分間を使ってスキル出品をしてみましょう！
ただもちろん、これだけをやればいいというわけじゃないです！
0→1達成のためにとにかくまずは案件を獲得することが大切です。
公開案件や制作会社への提案と並行して、待ちの営業をやっていくことで効果は2倍です！
そして、スキル出品をされるときにはこちらを参考にされてください！
以前僕が書いた記事なのですが、こちらでLancersスキル出品の詳しい方法や注意事項、
そもそもなぜLancersが熱いのかまで解説しています！
Lancersスキル出品の実際の画面を用いながら、
わかりやすく1つ1つのステップに分けて解説しております…！
ちなみにこちらの記事ですが、なんとLancers公式にも認めていただいたので
かなり自信があります…！（笑）
また、上記記事に合わせてこちらのコンテンツもおススメです！
僕の記事は割とスキル出品の出し方という「0→1」の部分にフォーカスしているのですが、
上記の教材は、スキル出品を出してからの「運営方法」にフォーカスされたコンテンツ。
こちらの教材を見て、実際に1ページ目に表示されたという方や問い合わせが増えたという方も
いるのでマジでおススメです！
「待ちの営業」を行う上では、いかに上位表示をキープするかが重要になってきます。
僕もしっかりと拝見させていただきましたが、かなりLancersスキル出品アルゴリズムの本質的なところまで
記載されていました。ご一読の価値はかなりあると思います…！
あとこの教材を駆け出しの方におススメしたい理由は「特典」です！
ホームページ制作用テンプレ資料として、ヒアリングシートや議事録テンプレート、サーバードメイン作成手順書など
なんと豪華特典が10個もついているため、これさえあれば受注後のクライアントワークは怖くありません！
また「待ちの営業」自体はLancersでなくても可能です！
むしろ導線を増やすという意味では、色んなサービスに待ちの営業を仕掛けておくべきでしょう。
そういった意味で「待ちの営業」と言えば！で、CMでもおなじみなのが「ココナラ」です！
ココナラもLancersの出品と同じく、一回出品してしまえば、待ちの営業が構築できます。
そしてココナラでアカウントを運用される場合はこちらの教材がおススメ！
こちらも先ほど紹介した教材と同じく、ココナラのアルゴリズムにかなり迫った内容になっています！
ちなみに僕自身もこちらの教材の通りに実践することで、ココナラは「プラチナランク」まで行きました…！
Lancersでもココナラでもいいので、とにかく「待ちの営業」を攻略して、
営業の自動化を達成していきましょう…！
⑤デザインの勉強
LancersでSTUDIOのスキル出品までできたら、ここで「デザイン」の勉強を入れてみてもいいでしょう！
最初に少しお断りをしておくと、今回のロードマップでいう「デザイン」は
一からホームページのデザインを作成して、Webデザインのみで案件をいただけるような
レベルのデザインスキルではありません。
なぜなら、僕自身がデザインを学んだきっかけが「STUDIOと相性よさそうだな～」という感じのため、
「Webデザイン単体の案件を取るぞー！」という感じじゃないからです。
デザイン一本のスキルというよりは、あくまでもノーコード・ローコードに活かすための
デザインスキルを身に着けるという感じです！
その分、がっつりとではなく基礎的な部分だけを抑えるという感じでも大丈夫なのがミソだと思います…！
ただの基礎的な部分だけであったとしても、今回のロードマップにおいては
デザインの相性がローコード・ノーコード、特にSTUDIOには抜群です。
ローコードにおいても、テンプレートを使用するからデザインの知識はあまり必要ないと思ったら大間違い。
デザインの知識があるかないかで、そのサイトのクオリティは格段に違ってきます。
※「ローコード制作におけるデザインの重要性・勉強方法」については、ここで語ると長くなりすぎるので、
また別記事でご紹介します！
そのため、足し算ではなく、掛け算のようにあなたの価値やできる案件は跳ね上がっていきます…！
デザインを自分で作成して、そのデザインを自分で実装できるという「一気通貫」の制作スタイルは
案件単価を高くできますし、特にエンド営業においてはとてもメリットになります。
では、どうやって学習していくかというかというと、ここも基礎的な部分さえ身につけばよいので、
あなたのご予算に合わせて書籍や動画教材などでいいのではないかと考えています。
そもそもがここまで、HTML・CSSの学習やSTUDIOでのデモサイト作成などで基本的なWebデザインの
イメージはある程度身にもついてるのではないでしょうか。
なので、「Webデザインを学ぶといえば！」でよく候補に挙がりがちな「デイトラのデザインコース」などは不要です。
デイトラのデザインコースは10万円近くと、この段階でお支払いするのはかなり高めですしね（笑）
デザインの基礎だけ学んで、案件の中で身に着けていきたいと考えている方には少し過剰かもしれません。
そこまでの金額を支払わなくても、Udemyでもかなり高評価のWebデザイン講座があるため、
そうしたものもありかもですね…！
あなたに合った方法でここではWebデザインを学んでいきましょう！
⑥SnowMonkeyの学習
ノーコードのSTUDIOがある程度使えるようになったら、次はローコードです！
ここで言うローコードは「WordPressのテーマをカスタマイズして制作する」ことを指します。
一からコーディングをするわけではなく、既にある程度完成されたテンプレートを、
お客さんの要望に合わせてコードでカスタマイズしていきます！
ある程度コードは記載していくということで「ノー(無い)」ではなく、
「ロー(少ない)」コードという感じですね。
そして、色々なテーマがある中で今回おススメするのは、
純日本製の高品質な有料テーマである「SnowMonkey」です…！
SnowMonekyの特徴を簡単に紹介すると以下になります。
- シンプルで誠実感のあるデザインが得意
- カスタマイズ性が高い
この辺はまた別の記事で詳しく紹介していければと思います…！
SnowMonekyの魅力はまだまだありますよ～（笑）
ここで一点確認です。
もしかしたら、この時点でもう既にSTUDIOで案件を獲得している方もいるかもしれません。
そしてそれ以上にまだ「0→1」達成できてい方もいるかと思います。
でもご安心を！
先ほども記載したように、STUDIOだけではなくSnowMonekyまで提案できる選択肢に
なることで効果は絶大になります。
ということで、ここからSnowMonkeyの学習をしていましょう。
ただ残念ながらSnowMonkeyは先ほどのSTUDIOのように、「これさえやっておけばいい！」みたいなUdemyはでていません。
→【2022年11月更新】なんとやまひこ本人がSnowMonkeyのUdemy講座を出しました！
SnowMonkey入門用のUdemy講座
第一弾はSnowMonkeyとはという概要から提案方法までをギュッとつめたパッケージになります！
今後はさらに応用的なカスタマイズも学べる講座も開講予定なのでお楽しみに！
ではどうするかというと、おススメはいくつかのデモサイトを実際に作成してみることです。
SnowMonkeyを用いたデモサイト制作を解説した記事がいくつかあるので、
そちらをもとにいくつか作ってみて操作感を学びましょう！
以下が個人的におススメ記事になります。
とくに3つ目の猫専門プロシッターのデモサイトはかなりクオリティが高く、そのまま
クライアント様に制作物としてお見せしても高評価をいただけそうです…！
その他、公式サイトのフォーラムやYouTubeも良い教材です！
SnowMonkeyの学習については、僕自身も今後、なにか僕なりの方法を記事にまとめて紹介していきます！
ちょっとだけ僕の考えをお伝えすると、
一概にスノモンは「デザインと相性が悪い」と言われているのですが、実は僕は違うと思っています…！
そのあたりも含めて今後発信できればと思います（笑）
⑦提案・商談を「ノーコード×ローコード」で攻める
SnowMonkeyである程度できるようになったら、
SnowMonkeyでのWebサイト制作もLancersスキル出品をしましょう。
ここでSTUDIO・SnowMonkeyでそれぞれ出して、公開案件にもしっかり応募していれば
ある程度返信やお問い合わせがくるようになります！
そしてSTUDIOとSnowMonkey両方を使用できることの強みを活かして、
ガッツリ案件を取りに行きましょう。
手法としては、ずばり「比較」です！
STUDIOでできることとSnowMonkeyでできることをそれぞれ把握して提案時に使い分けます！
具体的な商談の進め方や戦略・意識すべき所などは、また別記事にまとめようと思います…！
この辺も、今後実際僕が商談で使用している商談資料を用いたロープレ動画や
商談資料をコンテンツとして発信できればと考えています。
ちなみに僕が所属している「Codolife」というフリーランスが数百人単位で在籍している
コミュニティ内では、上記の内容の企画を既に行っていて、
有難いことにこのように大変ご好評をいただくことができました…！
近々、まとめてコンテンツとして販売できるかと思うので少々お待ちください！
ちなみに商談の進め方において、現時点で一番おススメなのは以下の教材です！
著者のゆとまるさんは、商談成約率90％越えのバケモノのような方です（笑）
その驚異的な数字をたたき出している営業ノウハウがすべて詰まっているので、これから商談していくという方には
めちゃめちゃ心強いと思います！
ぶっちゃけこの教材一読すれば、まだ商談未経験の方でも、一気にプロレベルの商談へ飛び級できますね…。
ノーコード×ローコードでの提案にぜひ合わせて活かしていただければと思います！
⑧案件に全力対応して継続案件も狙う
ここまでいかがでしたでしょうか？！
①～⑥をここまでしっかり行った方は、必ず多かれ少なかれ案件が取れているはずです。
ここから先はより楽になっていきます！
そして一つ一つの案件を丁寧にこなせば継続案件が狙えていきます。
実際僕が今営業0で活動できているのは、継続案件が多いからです。
では、継続案件をもらうためには
- 即レス
- 丁寧な対応
- 言われたことだけではなく選択枝を提示する
といったように、割と当たり前のことだけです。
兼業で即レスが難しい場合は、休憩時間に「いついつまでに返信します」と
するだけでもかなり印象が違ってきます！
今やっている案件を一つ一つしっかりとこなすことで信頼が生まれます。
待ちの営業と継続案件の2つの軸をしっかり行っていくことで案件の自動受注化が達成できます。
一点、僕からおススメできるポイントとしては、
当り前かもしれませんが、やりとりはビジネス感があるよりも、
多少フランクな方がお客さんとは仲良くなりやすいです。
その結果、継続案件ももらいやすくなります。
少し厳しいことを言うと、ビジネス感バシッと出して継続案件がもらえるのは、
「スキルが圧倒的に高い人」だけです。
スキル的には自信が無くても「この人とのお仕事はやりやすいな」「こちらのことを考えてくれているな」と
思ってもらえれば継続して取引してくれます…！
僕は最初のメッセージだけしっかり書いて、後はお客さんの感じにもよるけど
割と砕けたメッセージを送っています。
！と（笑）とか。
そしてそっちに変えてからの方が、お客さんと仲良くできてコミュニケーションもしやすいし、
継続でご依頼いただけることも増えたのでおススメいたします…！
何より「またこの人に頼みたい！」と思われれば無敵です。
自分だったら、スキル面以外で「どんな人とお仕事をしたいか」を考えてみましょう…！
まとめ
やまひこ流の「ノーコード×ローコード×Webデザイン」のロードマップは以上になります！
いかがでしたでしょうか…？！
自分がどのようにしてここまで来たのかを考えながら、そして遠回りしてきた部分は省いて、
ロードマップを構築してみました！
もちろん100%ではないのですが、個人的にはかなり「再現性が高い」と考えています…！
※ここから少し宣伝が入るので、「必要ないよ！」という方は、
「宣伝終わり」の部分までスクロールしてください（笑）
…ちなみに最後にその再現性をより高めるための宣伝を少しさせてください！！
最近、有難いことに多くの方にご相談を受けることが多くなってきました。
その内容はシンプルにSTUDIO・SnowMonkeyでの不明点といったものもあれば、
今回のように「コーディングをずっとしてきたけど、ローコード・ノーコードにも興味があって…」といったような
方向性そのもののようなご相談まで。
そこで、今回のロードマップをもとにした、やまひこ流の「マンツーマンコンサル」を
手探りでプレスタートしていこうと思っています…！
名付けて、「やまひコンサル」（笑）
こちらは有料にはなってしまうのですが、今回のロードマップの完走をマンツーマンでアシストします！
シンプルなご相談はもちろん、
STUDIO・SnowMonkeyの提案や案件についてのご質問、
先ほど紹介したような、商談のロープレや、僕が普段使用している商談資料のご提供、
またLancersスキルパッケージ添削やサムネイル添削などと、
我ながら、盛りだくさんの内容にするつもりです！
今回の記事は、先ほどもお伝えしたように、今後色々な記事を補足説明として、
追加してくことで完成するのですが、
その一つ一つの考えやノウハウ自体は、もう既に僕の中では確立しています…！
なので、そうしたまだお伝えしきれていない部分も手取り、足取り
サポートさせていただきます…！
少しでもご興味をお持ちいただいた方は、詳細をお伝えいたしますので、
ぜひTwitterのDMまでご連絡ください～
宣伝終わり
僕は割と誰かのロードマップを参考にしてきたというよりは、
自分の好きな方・楽しそうな方を選んできました。
そして今結果として、あまり他に同じような方がいない唯一無二のポジションを獲得することができました。
そこから有難いことに、たくさんの方にご相談をいただけて、
こうして自分なりのロードマップを発信することまでできています。
僕なりのロードマップが少しでも、この記事を最後まで読んでいただいた方の
お力になれればこれ以上のことはありません…！
そして、最初にも申し上げたように、このロードマップをこれで完成ではありません。
あくまでも大まかな流れの説明ではありますので、
今後補足記事を追加・またTwitterで情報を発信していきます！
というわけで、今後とも仲良くしていただければ幸いです！（笑）
それでは今回の記事は以上になります！
もし良ければ感想をツイートとかしていただけると嬉しいです！
では、次の講義でお会いしましょう～