プログラミング

【初心者向け】ProgateでWEB制作をするには何から始める?

⏰この記事を読むのにかかる時間⏰: 約847

 

 

ともえ
ともえ
WEB制作のスキルを身に付けたらフリーランスで働けるって聞いたんだけど、プロゲート何から始めればいいんだろう。

どんな勉強の手順を進めばプロゲートでWEB制作のスキルを身に付けられるんだろう??

今回はこのような疑問にお答えしていきます。

 

ともや
ともや

この記事を書いている私は、Progateのレベルは166(サムネイル参照)です。なので一通りはProgateをやっています。

Progateを終えたあとは、DMM WEBCAMPというプログラミングスクールを受講していました。

プログラミングスクールでは、WEB制作の案件をするには何をすれば良いのかを教えていただきました。なので今からWEB制作案件をしたいと考えている人のお役に立てると思い、今回の記事を執筆しています。

 

この記事で得られるもの

初心者がProgateでWEB制作をできるようになるためには、何から始めたらいいのか?

Progateが終わった後は次に何をすればいいの?

これらの内容をご理解頂けるかと思いますm(_ _)m

【初心者向け】ProgateでWEB制作をするには何から始める?

初心者の方がProgateでWEB制作をするには下記の手順で学習を進めると理解しやすいです。

  1. HTML&CSS
  2. Sass
  3. jQuery
  4. Javascript
  5. PHP
  6. Command Line
  7. Git

このような順番で学習を進めていくと理解しやすいかと思います。

下記に画像を添付しましたので参考にしてくださいね。

ともや
ともや
jQueryについては既にオワコンという話題になっていますが、WEB制作では未だに使用する場面があります。

なので、jQueryについては、サラッと「こんなものがあるんだな〜」程度で1周だけ学習しておくのをオススメします。

Progateのスライドは暗記しなくても大丈夫なので、なるべく早く終わらせて、次の学習ステップに進むように心がけてくださいね。(できれば1〜2ヶ月で終わらせたいです。)

Progate終了後には何をすればいい?

Udemyでデザインソフトの使い方を学ぶ

Udemyは動画学習をすることができるサイトです。

Progateではコーディングを学んできましたので、次はUdemyを使ってデザインソフトの使い方を学んでいきましょう。

上記の教材はWEBデザインを学びたいと考えている人であれば大体の人がやっていると思います。上記の教材ではPhotoshopとillustrator、HTML&CSSを学習することができます。

全部で467レッスンありますが、1レッスンが5分程度の長さなので、隙間時間でサクッと学習することができます。

2020/10/09の現在で43111人の方々が受講したレッスンなので、わからない部分はSNSで質問することも可能です。

 

模写をする

Progateで基礎学習を終えたら実際に何か作ってみましょう。

とはいえ、いきなり何かを作ってみましょう。と言われてもどうすればいいのかわからないですよね。

そういったときには、『模写コーディング 初心者 おすすめ』などで検索をかけてみてください。このように検索することで、初心者向けのコーディング材料が見つかりますよ。

模写をする理由としては、デザインの型というか、決まったパターンがなんとなく理解できるようになるからです。

実際に僕が模写したサイトは

・Airbnbという民泊サイト

・EYPメソッドという架空サイト(ねこポンさんというデザイナーが提供しています)

・ISARA(プログラグラミングスクールのLP)

・PASーPOL(スライダー実装でjQueryを学べました)

の模写をしました。

模写をしていた当時のツイートも掲載しておきますね。

 

ポートフォリオを作ってみる

コーディングとデザインソフトの学習を終えたらポートフォリオを作成していきましょう。

1から自分で作るのは大変なので、模写で作成したサイトをアレンジしてみましょう。

初心者が1からデザインを作ったとしても結局デザインは誰かと被ってしまいます。なので、どうせ被るくらいであれば、最初から他のサイトのデザインを参考にしてしまった方が効率よくポートフォリオを作成できます。

そのまま丸パクリすると著作権的にNGなので画像を差し替えたり、色や文字のフォントを変えて、アレンジを加えてくださいね。

営業をするor就職活動をする

ポートフォリオを作り終えたら実際の案件を獲得するか、WEB制作会社へ申し込んで就職活動をしていきましょう。

とはいえ、いきなり実際の案件を獲得するのはとても不安だと思うので、オンラインサロンに入ったり、友人や知人にWEB制作をしている人がいたら案件をもらうなど、困ったときのサポートが求められる状態でWEB制作案件を受けた方が安心だと思います。

実際に私の知っている範囲だと、いきなりフリーランスとして案件を受注する人よりも、WEB制作会社で正社員やアルバイトを1年間してからフリーランスとして活動している人の方が多いです。

WEB制作会社の探し方

WEB制作会社へ就職しようとするときに、おそらく大半の人はウォンテッドリーやGREEN、マイナビなどといった大手のエージェントを使うと思います。

もちろんそのような大手のエージェントを使うことは普通なのですが、私だったらWEB幹事というサイトで住んでいる場所の近くにあるWEB制作会社を検索しますね。

画像転載元:WEB幹事公式サイトより

WEB幹事というのは、お住まいの地域にあるWEB制作会社を検索できるサービスです。

そして検索で表示されたWEB制作会社へ直接お問い合わせをして、「アルバイトでもいいので働かせてくれませんか??」とメッセージを作成して、自分で作ったポートフォリオも添付します。

なぜこんなことをするのかというと、ウォンテッドリーやGREEN、マイナビといった求人媒体に広告を出すには、お金がかかるので資金力が乏しい会社はなかなか求人を出すことができないからです。

そのため、求人には困っているけれども、なかなか求人募集をかけられない企業はたくさん存在します。

なので、ウォンテッドリーやGREEN、マイナビなどの大手のエージェントは使用せずにWEB幹事で直接WEB制作会社を検索して営業をかけていきます。

こうすることで未経験からでもWEB制作会社で実務経験を積むチャンスを掴む確率をグッと上げることができます。

もちろん、WEB幹事で探した企業へ営業をかけても断られる事はあります。

ですが、営業はある程度の数をこなさないといけない部分もあるので、最低でも10社には応募するようにしてみてください。

WEB制作案件を受注するには?

案件をもらう場合でも就職活動と同様です。

求人媒体を使用するよりも、WEB幹事で企業を探して直接お問い合わせをした方が、企業からしたら採用コストが掛からないのでありがたいです。

あと、1つ忘れてはいけないのが、あくまでも自分がデザイン実務が未経験だということです。

デザイン実務未経験なので、あまり好条件を求めすぎないようにした方がお仕事が決まりやすいです。

会社に就職する際は、実際のWEB制作会社の現場で、WEBデザインに必要なスキルを実践で学ぶチャンスだと捉えましょう。

実践でWEBデザインのスキルを勉強をしながら、お金をもらうことができるのでとてもありがたいですよね。

もちろん、家族がいるから収入が少ないと厳しいという人もいるかと思います。

そういった方は、副業でWEBライターをしたり、簡単なWEB制作の案件を受注するなどして収入面の工夫ができるのでいろいろ調べてみてくださいね。

 

まとめ

ここまで読んでいただきありがとうございます。最後に今回の内容をおさらいしていきましょう。

 

この記事の結論

①初心者がProgateでWEB制作をするには何から始める?

・HTML&CSS
・Sass
・jQuery
・Javascript
・PHP
・Command Line
・Git

この順番で学習すると理解がしやすいとお話しをしました。

 

②Progateではコーディングの基礎を学んだあとは、次はUdemyを使ってデザインソフトの使い方を学んでいきましょうというお話をしました。(動画で学ぶことで実際のコーディングの雰囲気を掴むこともできます。)

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース

 

③基礎学習を終えたら模写コーディングをする

④ポートフォリオを作成する

⑤実際の案件獲得するために営業をする。あるいは就職活動をする。

⑥大手の求人エージェントを使うよりもWEB幹事を使ったほうがいい

→求人を出すにも費用がかかるため。直接企業にお問い合わせをした方が企業側からすると費用がかからないのでありがたい。

 

ともや
ともや
以上が今回の記事のまとめとなります。たくさんやることがあって大変だと思います。

ですが、だからこそプログラミング学習は挫折する人が多いと言われています。

私の場合は意志が弱いし、計画を立てたりするのが苦手だったのでプログラミングスクールに通いました。笑

ですが意志の強い人であれば、私のようにプログラミングスクールに通わなくても、今回の内容で紹介した手順でもWEB制作に必要なスキルを身に付けることができます。

なので、プログラミングスクールに通う余裕がない人は、ぜひ今回の内容を参考にしていただければ嬉しく思います。

ともこ
ともこ
もし、今回紹介したような手順で、細かく勉強するのが面倒だと思う人はプログラミングスクールを紹介した記事があるので、こちらも参考にしてみてください。

下記で紹介しているプログラミングスクールは、都市部に住んでいなくても、ご自宅から受講できるスクールを厳選して紹介しているので参考にしていただければと思います。

▼プログラミングスクールのまとめ

北海道(札幌市)で受講可能なプログラミングスクール17選まとめ 今回はこのような疑問にお答えしていきます。 17個あるので必ずアナタのタイプに合ったスクー...

 

▼web制作を学べるスクールまとめ(2020/10/13更新)

【独学が辛くて挫折しそうな人へ】WEBデザインスクール5つ【厳選】 今回はこのようなお悩みにお答えしていきます。 この2つの知識を得ることができるはず...

 

ともや
ともや
それでは今回の内容は以上で終わります。また次回の記事でお会いしましょう。

私のブログでは今回のように人生の選択肢を増やすための情報発信しているのでよかったら別の記事も読んでみてくださいね。

ABOUT ME
ともや
大卒でフリーターを半年したのち、公務員として約2年勤務するも適応障害で退職。 その後は引きこもりニートを1年、転職を4回、短期離職を3回という社会不適合者ぶりを発揮する。このままではマズイと思い本気の転職を決意。現在はホワイト企業の商社で働いている。詳しいプロフィール

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です