WEB制作学習に悩む人WEB制作を始めたけどコーディングが難しい…
教材も何をすればいいのかわからない
はやく学習を終えて稼いでみたい
とし誰でも簡単にノーコードWEB制作を最短習得できる本記事のロードマップがおすすめです。僕は学習開始3ヶ月で月売上30万円を達成しました!
この記事では、
ノーコードWEB制作を独学・最短期間で学習する方法について、初めての方にもわかりやすく解説します。
・会社に頼らず、自分自身の力で稼げるWeb制作スキルがほしい！
・仕事や育児をしながら、副業でWeb制作ができるようになりたい！
・スクールやセミナーに行くための時間や、お金の余裕がない！
そう思う方は多いのではないでしょうか？
ご安心ください。Web制作スキルはスクールに通わずとも、独学で習得は可能です。
ただ、最短で効率良く実務に繋がるスキルを習得したい！
という方は本記事をご覧ください。独学と比較すると圧倒的に効率的です。
独学したい！という方へ向けた本記事のロードマップでは、
筆者がこれまで200名以上のWeb制作収益化を支援してわかった効率的な学習方法を共有します。
「Webサービス」「書籍」を中心に、独学でノーコードWeb制作スキルを習得できます。
スクールに通うことなく自宅でできるため、
経済的にも負担が少なく、時間がない人にもおすすめできる学習方法です。
ノーコードWeb制作に必要な
「HTML」「CSS」「WordPress」の
学習方法をお伝えします。ぜひ参考にしてください。
本ロードマップは最短で副業から稼げるWeb制作スキル獲得を目的とした内容です。
顧客との直請け取引に対応可能なスキルが身に付きます。
ただし、Web制作会社との下請け取引や、転職のためのエンジニアスキルを突き詰めたい方はさらに学習が必要です。その点はご理解ください。
あなたが最短最速で、稼げるWEB制作者になれるよう、順番に記載していきます。
それでは、いってみましょう！
【結論】本Web制作学習ロードマップの教材一覧
学習金額を知りたい人のためにこの記事で紹介する有料教材を一覧でまとめました。
こちらの教材に加えて、後述の無料教材を組み合わせてロードマップとしています。
【一覧】有料教材のみ
- Webサービス｜Progate ※月額1,078円
- 書籍 ｜1冊ですべて身につくHTML & CSSとWebデザイン入門講座 ※約2,500円
- 書籍 ｜1冊ですべて身につくWordPress入門講座 ※2,200円
【一覧】有料・無料教材の全体ロードマップ
無料教材も含めてロードマップ形式で一覧にしました。
こちらを一通り順を追って学べば、制作案件を自分でこなせるスキルを最短で身につけることができます。
本ブログ内でも学習に活用できる記事があるので、合わせてご活用ください
学習時間は約100時間です。
WEB制作スキルを習得するには一般的には500時間以上かかると言われており、最短最速で実務スキルを身につけられます。
これらの教材を上から順にこなしていけば、
HTML,CSSの基礎を踏まえてWordPressカスタマイズまで、
完全独学で、案件対応ができるレベルまで学習することができます。
もし僕がいま、ゼロからノーコードWeb制作を学習するならこの順番でやります。
※今後も良い教材が出てきた場合は定期的に更新していきます
それでは、教材の紹介は以上です。
以下から流れに沿って、詳しい解説をしていきます。
【はじめに】Web制作学習の全体像を把握しよう！
【大前提】学習のコツ。Web制作はカンニングOKです
Web制作の学習は、途中で分からないことも多く発生します。
ぼくも星の数ほど頭を悩ませた経験があります。
そのように、
実際の作業で手が止まってしまった場合に解決する流れをお伝えします。
それは、
- Googleで調べ抜いても分からなければ回答を見る。
- 回答を見ながら手を動かす
- 先に進む
この３つを繰り返すことです。
先日、WEB制作会社で20年以上働いている方と会話する機会があり
その方ですら
「どんな案件であれ、常にググってます」とお話していました。
WEB制作・プログラミングは、20年実務をしている方でも常に調べながらの作業するほどのものなので、
学習中は分からないことだらけで当然です。
気にせず、答えを見ながら手を動かして進めていきましょう！
手を動かし続ければ、だんだんと理解できるようになっていきます。
Web制作の案件対応に必要なものは「サーバー」「ドメイン（URL）」「Webサイト」
インターネット上において、
ドメイン(URL)はWebサイトがインターネット上のどこにあるかを判別する住所のような情報で、
サーバーはWebサイトをアップロードして保存しておく倉庫のような場所です。
Webサイトはプログラミング言語とCMSを使用して作成するコンテンツのことです。
制作物であるWebサイトはインターネット上にポートフォリオとして掲載しておきましょう。
Web制作学習に必要なプログラミング言語の種類
プログラミング言語は現在、
一定のユーザー数がいるもので250種以上、 その派生言語を含めると1000種以上あるといわれています。
Web制作をするにあたり、全てを学ぶ必要はなく、特定の言語だけで大丈夫です。
また、前提の知識ですが、HTML,CSSは正式にはプログラミング言語ではありません。
プログミング言語の定義は簡単に説明すると「動作処理が行われるもの」です。
HTMLは文字情報を出力するもの。
CSSはHTMLを装飾するためのもの。
それぞれ、プログラミング言語とは違います。
※勘違いしやすいので注意！
初心者でweb制作を学び始めるとき、まず最初に学ぶことはHTML・CSSからです。
ノーコードWEB制作とコーディングWEB制作のメリット・デメリット
ノーコードWEB制作と、コーディングWEB制作のメリット、デメリットをそれぞれお伝えします。
ノーコードWEB制作のメリット
- 高いコーディングスキルを習得する必要がないので学習コストが低い
- コードを書かず素早く高品質な構築ができるため、開発速度が速い
- 開発時間やリソースが少ないため、低コストで済む
ノーコードWEB制作のデメリット
- ノーコードツールごとにデザインや機能に制限があるのである程度カスタマイズに制限があること
コーディングWEB制作のメリット
- コードを直接編集できるため、独自のデザインや機能を実装する制作において高度なカスタマイズが可能
- 手作業でコードを書くことで、パフォーマンスやセキュリティを高度に最適化できる
コーディングWEB制作のデメリット
- 手作業で大量のコードを書くため、開発期間は長く、制作コスト・学習コストがかかること
どちらにも長所と短所があります。
だからこそ、
クライアントの希望に当てはまるものを提案してあげれば良いのです。
「ノーコードでいいよ」というクライアントは沢山います。
実際にスモールビジネスや個人事業主、中小企業などのクライアントには、
ノーコードによるWEB制作は非常に需要が高いです。
本ロードマップを学習することにより、
ノーコードWEB制作に需要があるクライアントを対象に価値提供ができるようになります。
ノーコードWEB制作のツール種類
WordPress、Studio、Wix、ペライチ、Webflowなどが有名です。
なかでも、僕はWordPressでの制作をおすすめしています。
理由は、
WordPressは世界のWebサイトの40%以上を占めるほどメジャーで、
クラウドソーシングなど仕事を獲得できるサイトでも最も案件数が多いからです。
WordPressはテーマというテンプレートがあり、
見た目の違うデザインを簡単に作ることができます。
テーマは無料・有料ともに無数に豊富にあります。
無料テーマでも十分ですが、
例えば有料テーマでは「SnowMonkey」や「Swell」などおすすめも沢山あります。
またはWordPressサイトに様々な機能を付け加えるプラグインの一つである
「Elementor」を使うことでも、
ドラッグ&ドロップで簡単にコーディングなしでWEBサイトが制作できます。
もちろん、
部分的にコードを編集して見た目や機能のカスタマイズも柔軟に可能です。
仮にコーディングの学習経験がある人は、構築があまりに簡単すぎて驚くはずです。
ノーコードWEB制作で案件対応で必要なこと
手軽にできるノーコードWEB制作ですが、
当然ながら、プロとして仕事を受けるには学習が必要です。
とはいえ、
ノーコードWEB制作は学習期間が短く済むのも大きな特徴です。
一般的なWEB制作の学習ロードマップは、
実務レベルのコーディングスキルを身につけるために、
500時間から1000時間は学習する必要があると言われてます。
コーディング学習では「デザインカンプ」というWEBサイトデザインを
コーディングで制作する学習が手作業でコードを打ち込むため、難易度が高く、時間がかかるからです。
僕はWEB制作を学習した当初、600時間以上は学習しました。
さらに、下記のWEB制作のロードマップ記事で紹介をしたように
最短最速で学習期間を省略しても300時間が限界です。
ただし、今回のノーコードWEB制作５ステップでは、
ノーコードの実務案件に特化して、素早く実務に取り組めるようになるために
HTML,CSS,WordPressの基礎知識を最短最速「100時間」で習得できるロードマップにしました。
この程度の時間なら、
土日平日に1日3時間〜5時間学習すれば、1ヶ月前後で習得できますよね？
普通に会社員をしていて、
1ヶ月ほどで月の給料が5万円〜30万円上がることはあり得ません。
これほど短期間でこのような金額を稼げるスキルを習得できるとは、革命的ですよね。
ぜひ集中して、短期間で学習を終えられるようにしていきましょう！
ノーコードWeb制作のおすすめ学習ロードマップ
①基礎を「Progate (プロゲート)」で学ぶ
まずはWeb制作が自分の肌に合っているかどうかを確かめることです。
そこで少しでも「楽しい」「できそう」と思えることが一番大切です。
その確認のため、オススメはProgate(プロゲート)です。
加えてWeb制作に必要なスキルの概要を幅広く学ぶことができます。
アプリ版でHTML/CSSを体験してみよう！
Progate(プロゲート)にはアプリ版(iOS,Android)とWeb版があります。
最初はアプリ版(iOS,Android)からのスタートがオススメです。ゲーム感覚でプログラミングを体験することができます。
アプリ版(iOS,Android)はWeb版と比べて体験できる講座に限りがあります。
しかし、それでもHTML/CSS基礎を体験することができます。
ある程度やってみて「楽しい」「できそう」という感覚を身につけたら、Web版もチャレンジしてみましょう。
Progate Web版でHTML,CSSを学習しよう！
Web版ではWeb制作で必要なHTML,CSS を一通り学習することができます。
無料版ではそれぞれの言語の初級編までの学習となります。
本ノーコードロードマップではPrpgateは初級HTML,CSSの学習で完了して大丈夫です。
Progateは遊べば遊ぶほどレベルが上がっていくので、楽しみながら進めることができます。
ただし、
レベル上げに夢中になりすぎると何回も周回してしまい時間の浪費にも繋がります。
Web版の周回は多くても1回で十分です。
それと,
Rubyなど開発系の言語は触らないようにしましょう。
Web開発系に転職を目指しているなら話は別ですが、Web制作では活用する機会がないので時間がもったいないです。
PHPやJavaScriptに関しても同様です。
Webコーダーを目指すなら別ですが、ノーコードWEB制作で稼ぐことを目標としているなら不要です。
Progateで学習するのはHTML,CSSのみで大丈夫です。
慣れずに手が止まることも多いはずですが、
分からない場合は答えを見ながら、それぞれ初級編までサクサク完了しましょう！
Progateをする目的は、これから学ぶ言語をなんとなくでも理解することです。
スピード感を持ち進めていきましょう。
次からは実際にWeb上にサイトを制作するための言語・フレームワークの学習に入っていきましょう
②HTML&CSSを学ぶ
HTMLとは
HTMLはHyper Text Markup Language(ハイパーテキストマークアップランゲージ)の略で、
Webサイトの土台を作る言語となります。
Webサイトは、HTMLでマークアップされ、見た目が決まってきます。
CSSとは
CSSはCascading Style Sheets(カスケーディングスタイルシーツ)の略でWebサイトのレイアウトを作る言語です。
HTMLだけで作られたサイトは読みにくいですが、
文字の色や背景の色など、CSSを加えることで美しい見た目に変えることができます。
今後学ぶ言語の「すべての基本」となるのがHTMLとCSSです。
多くの人が1番最初に始めるのがHTML&CSSでもあり、Web制作をする上では、必ずクリアするべき言語と言えます。
HTMLは、まったくの初心者であっても繰り返し学習すれば理解できます。継続して学習していきましょう。
書籍教材
HTML & CSSとWebデザインが基礎から一気に学べる本。
手を動かし、作りながら学び、Webサイトができあがる体験ができる書籍です。
この一冊の学習を終えると制作実績にもなるサイトを制作できます。
わからなければ答えを見ながらで良いので、手を動かしながら一通り学んでいきましょう！
「1冊ですべて身につくHTML & CSSとWebデザイン入門講座」
この本の応用編にあたる書籍教材もありますが、実務で使用しないような内容も多いため購入せず大丈夫です。
この一冊で、普段から活用するHTML&CSSの基礎は完全網羅できます。
③WordPress(ワードプレス)を学ぶ
いよいよWeb制作学習の総仕上げ！WordPress学習へ入っていきます。
ここを終えると数多くのWeb制作案件にアプローチすることができるようになります。
WordPressについて知識がない方のために簡単に説明します。
WordPressとは
WordPress(ワードプレス）は、
「無料」「高機能」「カスタマイズ自由」のコンテンツ管理システム（CMS）です。
世界にあるWebサイトの43%(2023年現在)はWordPressで作られています。
これだけ浸透しているからこそ、
Web制作ではWordPressのスキルを身につければ応募できる案件も数多くあります。
WordPressは無料で使えるツールながら、機能面が優秀です。
簡単にブログ作成やサイト更新が行えるため企業のホームページとして使用される機会も多くあります。
また、その利便性から個人でブログやECサイトを開設する人も多くいます。
他にもメリットは多く、複数の人で編集したり、スマホからの編集が作業が可能。
そのため、効率的にサイト作成ができるのも大きな魅力です。
他のブログサービスやホームページ制作サービスと比べると、
「記事が書きやすい」「操作が簡単」「管理画面が見やすい」などの特徴があります。
アクセス数の確認もしやすいので運用管理もしやすく、サイトの管理が負担になりません。
さらにプラグインを組み込むことで、より利便性の高いWebサイトの制作が可能になります。
プラグイン導入で実現できることの事例※一部
- SEO対策
- SNS連携機能
- サイトマップ自動生成
- アドセンスとサーチコンソールの管理
- サイトの表示速度高速化(画像ファイルの圧縮、キャッシュ化など)
- コメントスパムを防ぐ機能
プラグインを導入するでWebサイトの利便性が格段に向上します。
WordPressのテーマ選びとプラグインの使い方
WordPressはテーマ選びとプラグインの使い方によって、
ブログサイトやECサイト、企業のコーポレートサイトなど、どんなWebサイトでも制作できます。
テーマは無料、有料の2パターンがあります。
無料のテンプレートを使う場合には注意することがあります。
海外のWordPress無料テーマを選ぶ場合、
英語だとデザインが美しく見えていたものが、
日本語表記にした途端、イメージが大きく変わってしまうことがあります。
また、無料テーマによっては細かい作業や、カスタマイズが反映されないものもあります。
ある程度凝ったWebサイトを作成したい場合は、有料のテンプレートを使うのがお勧めです。
プラグインに関しては、手軽にWebサイトの機能を拡張するものが数多くあります。
「動画を埋め込む」「お買い物機能を付ける」「お問い合わせフォームを作る」など様々なことができます。
なかには日本語に対応していないプラグインもあるため、
導入前に「日本語対応になっているか否か」を必ず確認しましょう。
数多くあるプラグインですが、
ウイルスの感染を防ぐためにも、公式のプラグインを導入することをお勧めします。
営業先に応じてWordPress(ワードプレス)で習得すべき内容が変わる
WordPressは案件の種類が豊富にあります。
営業先が多くあるというとこは、求められるスキルも変わってきます。
つまり、自分がどこを営業先にしたいかによって『最終的に習得すべきスキル』が変わるということです。
下記は参考ツイートです。
顧客と直取引であれば「WordPressテーマのカスタマイズ」や「ローコードによる制作」が実務で必要最低限なレベル。本ロードマップの学習を終えればひとまず十分です。
時間は限られているので、自分が目指す方向性を意識して効率的に学習していきましょう。
④WordPress(ワードプレス)学習の手順
WordPressを学習するときのおすすめの手順「１」〜「３」をご紹介します。
- 1.書籍教材「1冊ですべて身につくWordPress入門講座」
- 2.WordPressテーマ SnowMoneky でローコードのサイト制作スキルを習得
SnowMonkeyで綺麗なWebサイトを作る方法（初級編）
SnowMonkeyのサイトをカスタマイズする方法（中級編）
【簡単2ステップ】SnowMonkeyでsass（scss）を使う方法
「１」はWordPress学習の基盤です。
ここまで学習を終えたら、営業先に応じて「３」「４」を進めましょう。
「２」を習得すれば、顧客との直取引（対面営業やクラウドソーシング）での案件対応が可能になります。
ここで営業に踏み出すスタートラインに立ったと思ってください。
次から詳しく紹介していきます。
1.書籍教材
WordPressをコーディングなし。ノーコードで作成する方法を身につけることができます。
あまりに構築が簡単で驚くと思います。
コーディングなしでもノーコードでWebサイト構築ができる、ということを肌で身につけましょう。
実際の案件対応においても、
ノーコードのみで作成したWebサイトで満足してくれるクライアントは数多く存在します。
書籍の後半にはWordPressオリジナルテーマの制作の実践もあり、
手を動かしながらゼロからのWordPress制作も習得することができます。
この書籍を終えることにより、簡単なWebサイト制作の案件を受注、対応することもできるようになります。
2.としブログ(本ブログ) ローコードによるサイト制作スキルを習得
SnowMonkeyを用いたローコード制作を学習します。
ローコードとはWordPressの既存テーマを使用しつつ、見た目をCSSで調整して制作することです。
ゼロからコーディングでサイト制作をする必要がなく、少ない制作時間でデザイン性の高いサイトを構築することができます。
こちらに関しては本ブログでオリジナルのサイトとデザインカンプを公開しています。
下記の3記事を順にこなしていけば大丈夫です。
お疲れ様でした！
ここまで学習を終えれば、十分にエンドクライアントの案件対応ができるレベルになっています。
仕事や育児など日々の活動の合間でも効率的に学習できる環境を整えて、スピード感を持って学習を進めていきましょう！
【まとめ】ノーコードWeb制作学習ロードマップで使用した教材一覧
このロードマップで紹介した教材を一覧でまとめました。
- Webサービス｜Progate
- 書籍 ｜1冊ですべて身につくHTML & CSSとWebデザイン入門講座
- 書籍 ｜1冊ですべて身につくWordPress入門講座
- Webサービス｜としブログ
SnowMonkeyで綺麗なWebサイトを作る方法（初級編）
SnowMonkeyのサイトをカスタマイズする方法（中級編）
【簡単2ステップ】SnowMonkeyでsass（scss）を使う方法
学習時間目安は100時間です。
一般的にはWEB制作は習得するまで500時間以上かかると言われています。
ノーコードWEB制作がいかに早く習得できるかがご理解いただけると思います。
学習を終えたら【案件獲得】
学習が完了したらいよいよ案件獲得するべく、営業のスタートです！
当ブログにも営業活動に役立つ記事をご用意していますので、URLリンクを貼っておきます。
ゼロイチ突破にご活用ください。
応援しております！
クラウドソーシングのプロフィールの作り方
クラウドソーシングの提案文・応募文の書き方
セールスコーチングのススメ
【公式LINE】WEB営業支援コードスルー(CodeThrough) 募集の際は告知します。
自宅でも、旅行先でも、育児の合間でも、
好きな場所と好きなタイミングでオンラインで稼げるWEB営業スキルがあったら、嬉しいと思いませんか？
コードスルー（CodeThrough）は
『リモートWEB営業を習得して自宅でも旅行先でも、会社員月給以上を安定的に稼ぐ』が
コンセプトの営業支援コーチングコミュニティです。
参加メンバーの支援初月の平均売上達成額は月30万円。ゼロイチ突破率は100％。
独立初月に170万売上、兼業新卒3か月目で売上192万など、数多く方が壁を越えてきました。
コードスルーの応募は公式LINEから受付しています。
ご興味ある方はLINE登録いただき、連絡をお待ちください^^
下記の参考記事もご参照ください。
ここまでお読みいただきありがとうございました！
今後も有益な記事を追記していくので、よろしくお願いします。