Progateでweb制作案件受注するまでの勉強法を解説

本記事は、「Progateでプログラミングを勉強して、web制作案件を受注したい方」に向けて書きました。「プログラミング初学者には、Progateがおすすめ!」というのをよく聞くと思います。

実際にどのように勉強すればweb制作案件を受注できるのか、具体的に解説しますのでぜひ読んでみてください。

web制作案件受注するレベルとは?

そもそもweb制作案件を受注するには、どれくらいのレベルが必要なのでしょうか。結論から言うと、オリジナルサイト制作・サイト模写ができるレベルです。

オリジナルサイトは自分の名刺がわり、いわゆるポートフォリオとして使えるものです。これがあると「自分はこのようなサイトを作れます。」というように、クライアントに自分のスキルレベルを示すことができます。

サイト模写は、HTML, CSS, jQueryで静的ページの模写ができるくらいです。静的ページは、HTMLファイルで作成したサイトのことで、いつでも同じ内容が表示されるものです。

それに対し動的ページは、掲示板や会員サイトなどのユーザーによって異なるページが表示されるものです。

静的ページを作るのに必要なのはHTML, CSS, jQueryで、PHPや他の言語は必要ありません

多くのプログラミング学習者が模写しているのは以下のページです。

isara.life(https://isara.life/)

このサイトの模写ができれば案件受注ができるレベルです。ただしこのサイトは、初めて受注する仕事にしては難易度が高めなので、初案件はこれより簡単なものにしましょう。

プログラミング初心者がweb制作案件受注するまでの勉強時間

人によりますが、目安としては約半年くらいです。早い人で3ヶ月ほどで受注できる人もいますが、長い人だと1年くらいかかります。

これはあくまで目安なので、半年はかかるつもりで焦らずに勉強していきましょう。

Progateで課金必須?

結論から言うと、有料プランへの課金が必須です。無料プランでは、初級編と他のコースを少ししか学習できません。

そのため、プログラミングのさわりの部分しか学べず、案件受注できるレベルには足りません。有料プランになることで、実践を想定したプログラミング学習ができます。

Web制作案件を受注してお金を稼ぎたいという方には、有料会員になることをおすすめします

Progateで勉強すべきコース ←勉強すべき理由を解説

Web制作案件受注のためにProgateで勉強すべきコースは、以下の3つです。

  • HTML
  • CSS
  • Query

HTML

HTMLは、テキスト(文字)を表示するための言語です。サイトの大まかなレイアウトを作ることができます。

CSS

CSSは、デザインをつけるために使用する言語です。背景の色や、文字の色、太さ、フォントなどを指定することができます。

HTMLとCSSをやれば、画像やテキスト、色などwebサイトの基本的なレイアウトを作ることができます。

jQuery

jQueryは、自分のサイトにアニメーションなどの動きをつけることができる言語です。スマホのサイトで、画面右上にある3本線のハンバーガーメニューを押すと、メニューが降りてくるようなものを作れます。

Progateで習得できるスキルの限界

Progateで習得できるのは以下のスキルです。

  • HTMLでサイトのレイアウトを作る
  • CSSで色やフォントの指定
  • 余白の調整
  • ボタンの作成
  • リンクの位置
  • 画像の挿入
  • お問い合わせフォームの実装
  • レスポンシブデザイン
  • メディアクエリ

Progateではこれらを習得できますが、Progate上に出てくるレベルのサイトを作るレベルにしかなれません。

上にも書いたようにweb制作案件を受注するためには、オリジナルサイト制作やサイト模写ができるレベルになる必要があります。

Progateでの勉強の限界

結論から言うと、Progateで学んでも案件受注はできません。Progateでできるのは、プログラミング初心者から脱初心者できるくらいです。

Web制作の案件を受注するには、Progateを終えた後も他の勉強をする必要があります。Progateの後の学習には、Udemyがおすすめです。ここからは具体的に、Udemyで学習すべきコースを紹介します。

Udemyで勉強すべきコース ←勉強すべき理由を解説

未経験からプロのWebデザイナーとして働けることがゴールの完全マスターコース

学習内容は以下です。

  • Webサイト制作の一連の流れを理解できるようになる
  • 実践的なWebサイトのコーディングができるようになる
  • 実践的なWebサイトグラフィックデザインができるようになる
  • Photoshopで、バナーやフライヤーが作れるようになる
  • HTMLとCSSができるようになる

過去1100名以上のスクール卒業生を輩出したNEST Schoolという企業が作ったコース。
全部で467レッスンもあるボリューミーなコースです。

全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としていて、
WordやインターネットくらいしかPCを使ったことがないという方でもわかりやすいように作られています。

Webに関する知識、Photoshop、Webのグラフィックデザイン、HTMLとCSS、実践的なコーディングなど、Webデザイナーとして働いたり、自分1人でサイトを作り上げるのに必要な全てが含まれています。

HTML5+CSS3 手を動かしてマスターするWEBデザイン/プログラミング動画講座

学習内容は以下です。

  • コースの履修終了後にすぐにWEB業界で戸惑うことなく活動できる知識と技術を教えてもらえる
  • html5とCSS3に準拠したWEBページを、ソースコードを書いて制作することができるようになる
  • WEBサイトの基本的なしくみと、HTMLファイル、CSSファイルの役割が理解できサイトコーディングの基礎ができる
  • 高レベルのデザインのトップページの他、サブページを含むサイトを実際に作り、すぐにWEBサイトを構築できる力が身につく

HTML5とCSS3を使ってWEBサイトページを制作するために必要なことを学ぶことに特化した講座です。実際に手を動かしてコードを書き、ひとつのサイトを制作することを通して身につけることができます。

この講座を修了すると、最新のHTML5とCSS3に準拠したWEBページを、ソースコードを書いて制作することができるようになり、WEBデザイナーとして仕事をするのに必要なスキルが確実に身につきます。

文系でも解る!WordPressの基礎の理解と、独自デザインをWordPress化にする

学習内容は以下です。

  • WordPressの基礎が解るようになる
  • WordPressでオリジナルテンプレートを作れるようになる
  • ポータルサイト等の情報サイトを自分で作れるようになる
  • PHPなどのプログラミング言語に興味が湧く
  • 普段見ているホームページの仕組みがわかるようになる
  • 自分のオリジナルのサービスを始めたくなる

WordPressはいわゆるウェブサイトのテンプレートのようなものです。WordPressを使ってウェブサイトを作ることで、ウェブサイトのレイアウトなどを簡単に編集することができます。

独学で100冊以上もの参考書や、さまざまなホームページを見ながら勉強した講師が苦戦したところなどを、わかりやすく噛み砕いてレクチャーしてくれます。

この講座を修了すると、Wordpressというサービスを理解し、自力でオリジナルのWordpressのホームページを開設するまでの力を身につける事が可能になります。

Udemyがあればプログラミングスクールは不要

Udemyで学習をすれば、プログラミングスクールに通う必要はありません。

理由は以下の3つです。

  • プログラミングスクールほど料金がかからない
  • 自分の伸ばしたいスキルに合わせて教材を選べる
  • 講師に自由に質問ができる

プログラミングスクールほど料金がかからない

Udemyの最大のメリットは、高品質なコースを低価格で受講できることです。頻繁にセールを行っていて、そのタイミングを狙えば1000~2000円くらいで購入できます。

技術書は1冊3000円くらいするので、本を買うよりも圧倒的に安くてコスパ最強です。

自分の伸ばしたいスキルに合わせて教材を選べる

二つ目のメリットは、その網羅性です。

Udemyは世界最大級のオンライン学習サービスで、その講座数は膨大です。自分のレベルに合わせて、学習したい講座を選ぶことができます。英語の講座もあり、海外の講座を受ければ最新の情報を得られるのも良いです。

講師に自由に質問ができる

プログラミングスクールと同様、講師に質問をすることもできます。わからない部分があっても安心して学習できますね。

【まとめ】progateを勉強後Udemyで勉強が最速でweb制作できる

本記事では、「Progateでweb制作案件受注するまでの勉強法」について解説しました。Progateでプログラミングの基礎を学習した後は、UdemyでWeb制作の一連の流れを学ぶのが最速です。

Udemyでの学習を終えれば、web制作案件を受注できるくらいのレベルに到達できるでしょう。案件を受注するために、まずはProgateのHTMLコースから少しずつ進めていきましょう。

コメント