【実体験】Web制作未経験から独学で仕事をとるまでの全行程【4か月】

こんにちは、Kosakuです。

Webサイト制作の知識が0の状態から4か月、独学で学習を続けたところ、ついにクラウドソーシングでコーディングのお仕事を受注することができました!

今回は、実際に僕がクラウドソーシングでコーディング案件を獲得するまでの4か月間で勉強した全てのことを書いていきます。

この方法で勉強すれば必ず仕事をとれるとは限りませんが、独学でWeb制作を勉強しようと考えている人は参考にしてみてください。

1.ProgateでHTML/CSS/jQueryの基礎を習得

Webサイトを作るためには最低限「HTML/CSS」というものを学ぶ必要があるとのことなのでまずはこれらを学びました。

HTML/CSS、その他にもWeb制作に必要な知識を学べるのがProgateというサイトです。

https://prog-8.com/

Progateでは様々なプログラミング言語を学ぶことができますが、その全てがWeb制作に必要というわけではありません。

僕はWeb制作に最低限必要な以下の言語を学習しました。

・HTML
・JS(ES6)
・jQuery

これらの講座を上級編まで全て学習しましょう。

一通り学習するとWeb制作に必要な知識の基礎が身に付きます。

もっと基礎が学びたければ、Progate以外の他のサービスで勉強してみるのもいいと思います。有名どころだとドットインストールというサイトがあります。

HTML/CSS/jQueryについてProgateの内容を7割理解したと感じたら次のステップへ進みましょう!

補足情報

以下のサイトでは、HTML/CSS/jQueryなどがそれぞれ何の役割があり、関係性がどうなっているのかが宇宙一分かりやすく説明されているので初心者のかたにはぜひ読んでみて欲しいです。(WordPressが何なのかはこの段階ではわからなくても大丈夫です!)

【イラスト解説】WordPressでweb制作をするまでを宇宙一わかりやすく解説してみた

 

Progateで出てこない超必須CSSプロパティ「Flex-box」を習得

ProgateではCSSを学ぶことができますが、Progate内では触れられないCSSプロパティもたくさん存在します。その中でも、真っ先に覚えるべきプロパティが「Flexbox」です。

以下のページでかなり詳しく説明されているのですが、(今後何度も見ることになると思うのでブックマーク必須です)

日本語対応!CSS Flexboxのチートシートを作ったので配布します

簡単に説明すると、要素を横並びにする際に使用するプロパティです。

Progateでは横並びにする際に「float」を使っていたかと思いますが、「Flexbox」を使うとその簡単さにビックリすると思います。めちゃくちゃ使用頻度の高いプロパティなので、絶対に使えるようになっておきましょう。レスポンシブデザインにも「Flexbox」が役に立ちます。

2.模写コーディングで実践的なサイト制作を勉強

Progateで基礎を学んだので次は実際にサイトを作る勉強をしました。

といっても、いきなり0からサイトを作成するのは無理だと思います。(デザインとかも必要になるし)

そこで、既存のサイトをまるまるコピーしたサイトを作成する「模写コーディング」をおこないます。

模写コーディングのやり方は以下の記事に詳しく書きました。

【初心者向け】Webサイトのコーディング勉強法【Progateの次のステップ】

僕は以下の3つのサイトの模写をおこないました。

模写1:iSara

参考サイト:iSara[イサラ]|バンコクのノマドエンジニア育成講座

難易度:★★☆☆☆

初心者の模写コーディングによくオススメされています。アコーディオンメニューやお問い合わせフォームなど、基本的なLP(ランディングページ)に使われる要素がたくさん入っていて、複雑なレイアウトもないため最初の模写コーディングに適していると思います。

模写2:PAS-POL

参考サイト:PAS-POL -旅のモノづくりブランド-|TABIPPO

難易度:★★★☆☆

こちらもよくオススメされていて模写した人も多いのではないでしょうか。全体の構成としてはシンプルですが、ページトップのメインビジュアルの画像のレスポンシブ時の動きが死ぬほど難しいです…!!

僕は途中であきらめて答えをみながら作ったのですが、それでも完全な動きは再現できませんでした。

どうしても出来なければ次に進みましょう。

模写3:Asoview

参考サイト:asoview!(アソビュー)|レジャー・遊び・体験の予約サイト

難易度:★★★★☆

たしかPinterestで「旅行 LP」と調べて出てきたサイトです。PAS-POLよりもレイアウトが複雑になった感じがしました。CSSの疑似要素がたくさん出てきます。僕はレスポンシブ化は完ぺきにはできませんでした。

いくつかのサイトを模写したら次のステップに進んでみましょう。

3.Wordpressの勉強その1:教本でテーマ作成の基礎を習得

HTML/CSSでサイトを作れるようになったので、受けられる仕事の幅を広げるためWordpressを使ったサイト制作を学ぶことにしました。

WordPressとは、Webサイトを簡単に作ることができる仕組みのことです。

WordPressの案件を扱えるようになると提案できる案件の数も増えて単価もHTML/CSSコーディングのみのものより高い場合が多いので、余裕があるなら学習するのがオススメです。

補足情報

WordPressはPHPという言語を使用して作られているので、PHPを学んでからWordpressを勉強することで理解が深まります。PHPはProgateで学ぶことができます。

WordPressの勉強方法ですが、僕は「本格ビジネスサイトを作りながら学ぶ WordPressの教科書

」という本を使用しました。

この本は実際にWordpressを使ってビジネスサイトを作っていくという内容になっていて、第2章までの知識を使えば簡単なWordpressテーマが作れます。(テーマが何なのかはこの本を読めばわかります)

2章まで終えたら次のステップに進んでも大丈夫です。3章以降は余裕があったらやればいいと思います。

4.WordPressの勉強その2:以前作ったサイトをWordpress化

本格ビジネスサイトを作りながら学ぶWordPressの教科書を2章まで終えたので、実際にWordpressを使ってサイトを作ってみました。

僕がWordpress化したのは模写コーディングで作成した「PAS-POL」のサイトです。

PAS-POL(模写)のWordpressテーマ化では以下のような実装をおこないました。

  • トップページに新着記事、新商品を表示
  • 各ページのトップ画像を管理画面から変更可能にする
  • カスタム投稿として「商品」を追加
  • 投稿タイプ毎のアーカイブページ作成

本家のサイトを見てなるべく近いものを作りましょう。

ただ、Wordpressの教科書で書かれていることだけでは全ては実装できません。Wordpressの教科書は書かれたとおりに進めていけばサイトを作れますが、ここでは本に書かれている関数の中身を調べたり、自分がやりたいことを実現するための関数を調べる必要があります。

わからない関数がでてきたら、わかるまで調べましょう!
その関数の引数、戻り値でどのような情報を受け渡しているのかを理解するのがポイントです。
検索力が試されます。頑張りましょう…!

補足情報

WordPressでサイト制作をするためにはサーバーを借りるかローカルでWordpressを使えるようにローカルで環境の構築をする必要があります。
実際の案件でもローカルで環境を構築することになるのでここでやり方を覚えましょう。
「Wordpress ローカル 環境構築」といったキーワードで調べてみてください!

5.クラウドソーシングのプロフィールと提案文を作成、初受注!?

模写コーディングをいくつか終えたので、それを実績としてコーディングのお仕事を探し始めました。

コーディングの実績が少ない初心者は、クラウドソーシングで仕事を探すことになると思います。

クラウドソーシングサイトはいくつかありますが、とりあえずは以下の有名な2サイトに登録すればオッケーです。

クラウドワークスとランサーズで仕事(案件)を受注までは以下のような流れなっています。

1.クライアントが案件を掲載する
2.その案件に対してこちらが「提案」という形でメッセージを送る
3.クライアントが提案やプロフィールを見ていいなと思った人にお仕事を依頼する

つまり、案件を受注するためにはクライアントに選ばれるようなプロフィールと提案文を用意する必要があります。

僕は以下のサイトとnoteをかなり参考にさせていただきました。

【クラウドワークス 】初心者向け!超簡単にできる5つのテクニックで受注率を一気に上げよう!

https://note.mu/4_r_r_s/n/n86e664dce95c?scrollpos=x3sPE

そしてこれらのサイトの書き方を参考に提案を5、6件したところ、初の受注をいただくことができました…!

ですが!

実は、最終的にこの案件はクライアント都合で途中終了となってしまったのでノーカウントとしました…笑

しかし、提案方法を学ぶだけで一気に受注できる確率があがることは確かです。

ここからは、いい案件を見つけたら提案を続けつつ次のステップに進みましょう。

6.ポートフォリオサイトの作成

初受注した案件がなくなってしまったため、いろいろと提案しつつ受注率を上げるための武器として「ポートフォリオサイト」を作成しました。

ポートフォリオサイトとは、自分の作品などをインターネット上で公開しているホームページのことです。

僕のはこんな感じ→http://kosaku-t.work/

ポートフォリオサイトがあると、文章よりも効果的にスキルや実績などを効果的に伝えることができます。

作り方など詳しくは以下のサイトなどを参考にしてみてください。

ポートフォリオサイトの作り方【営業の成果を爆上がりさせる!】

完成したポートフォリオサイトをクラウドワークスなどのプロフィールに追加し提案を続けているとついに…

7.初受注!Wordpress制作案件

ここまでのステップ終え、ついに初受注をいただくことができました!

初のお仕事はデザインデータをもとにHTML/CSSコーディングをおこないWordpress化するといったものでした。

ここまででProgateを始めてからちょうど4か月、1日の勉強時間は平均して5時間弱といったところです。提案は13件おこないました。

補足.そのほかの勉強(XD、Sassの習得)

補足として、案件をとることには直結はしないけれど初受注までに勉強していて役にたったことを紹介します。

無料のデザインツール、Adobe XDの使い方を習得

Adobe XDはデザインツールで、ポートフォリオサイトをデザインするときに使用しました。
初受注した案件のデザインデータもXDにて支給されました。XDは無料で使用できるので覚えて損はないでしょう。

僕はUdemyの以下の動画で学びました。

誰でもかんたんに学べるAdobe XD入門講座

CSSを効率的に書ける!Sass(SCSS)の習得

SassとはCSSを効率的に使うための言語です。

CSSを書くのが面倒すぎたのでなんとかしたいと思いSassを学びましたが、これが便利すぎました。

Sassを使うと、CSSのコーディング時間が半分ほど短縮されます。

他にもいろいろと便利なことができるので、使い方や導入方法など調べて使ってみてください。

CSSのコーディングスピードが数倍上がると思います。

関連記事:【Saas入門】Sassって何が便利?Sassでできることの紹介

まとめ:独学でもWeb制作の仕事をとるのは可能

以上が、僕がWeb制作の知識がない状態から独学で仕事をとるまでにおこなった全てのことです。

独学でWeb制作を学んでいる人に、多少なりとも参考になれば幸いです。

最後まで読んでいただきありがとうございました!

コメントを残す

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