CODE

【30日】未経験からコーディングの副業で月5万を稼ぐためのステップ

こんにちは!フリーランスWebディレクターのショーへーです。

初見の方は、概要ツイートと過去の課題をまとめたモーメントを貼っておくので、こちらをご覧ください↓

【まえがき】知っておくべき「現在のレベル感」

30DAYSトライアルもいよいよ大詰めですね。これまでやってきた内容をざっくり纏めるとこちら↓

  • Progate HTML/CSS初級~上級編(道場コース含む)
  • VScode・拡張機能の導入
  • Chromeのインストールと検証の使い方を学習
  • ドットインストールBootstrap入門(全22回)
  • YoutubeでHTML5/CSS3/Bootstrap4 を使ったLP制作 × 2

この量の課題を20日足らずでやりました。毎日仕事終わりや学校終わりに勉強されてた方は本当にすごい…!

これまでは「知識0」を「1」にするためのスキルアップ目的の課題が中心でしたが、ここからは『制作物としてアウトプットすること』を目的にした課題です。

いまDAY17までを終えられてる方は、『シンプルな構成の1ページサイトなら、見本があればゼロからでもコーディングできる』レベルになっていると思います。

このくらいのレベルの方をターゲットに、レバテックやMidworksなどのフリーランスエージェントを紹介し、

「登録しておけば勝手に案件が入ってきます!」

みたいなこと書いてる記事をよく見かけますが、無理です。断言します。

そういうのはただのアフィリエイト目的の記事なので信用しちゃダメ。

少し厳しい現実的な話ですが、フリーランスエージェントから流れてくる案件に、今くらいのスキルで作業可能な仕事はまずありません。独学でもサイト制作はできるようになりますが、数ヶ月独学で頑張ったくらいではスキル的にも経験的にも大別するとまだ「未経験」です。(プログラミングスクール卒業生なども基本的に同じです)

企業がわざわざエージェントに求人を出してる理由は、社内の開発力不足をおぎなったり、教育にかかるコストをカットしたいから。

求めてるのは経験年数2~3年以上のスキルを持った、現場で通用する専業プログラマーです。

登録したところで企業から声がかかることはないですし、自分にはできない案件情報メールが延々と届き続けるだけなので、登録する必要ありません。

それなのに、「まずはエージェントに登録しましょう」的なことを書いてる記事が多すぎてタチが悪い。

アフィ報酬目的で適当なこと言うの、ホント良くないと思うんだよな

ちょっと話が逸れました。本題に戻ります。

 

本来であれば、今のスキルセットでコーダーとして仕事をするには全然期間が足りません。言ってもまだたったの20日間ですし。

副業としてクラウドソーシングで案件を探すのであれば、ギリギリ可能な案件も見つかるかもしれませんが、それでもまだ早いです。

コーダーにはjavascriptjQueryの知識、フォトショ・イラレなどのデザインツールの知識も必要です。

データファイルからピクセル単位で正確にコーディングするのもまだ難しいと思いますし、実務レベルの凝ったデザインになるとコーディングの引き出しが足りないはずです。

では、現在の『超初心者のコーディングスキル』で月5万を稼ぐにはどうすればいいんでしょうか。

それがこの30DAYSトライアルの肝であり、僕が『裏技』と表現した理由です↓

 

ポイントは以下の2点です

✔︎超初心者のコーディングスキルで月5万を稼ぐためのポイント

  • HTMLテンプレートを利用すること
  • LP制作案件を『もらう』のではなく、商品として『販売する』こと

上記のポイントを抑えつつ、DAY18の課題に入っていきましょう!

 

DAY18. 『HTMLテンプレートを使ってみよう+自分のポートフォリオサイトを作ろう①』

『HTMLテンプレートを利用する』のHTMLテンプレートとは何か、どう使うものなのかから解説していきます。

Themeforestというサイトを使ったこと、ありますか?(↑の写真のサイト)

WordPressテーマ、Webサイトテンプレート、動画素材、音源素材、写真素材など、Web関連にまつわる様々なものが販売されている海外サイトです。

このサイトでは、HTML5/CSS3/Bootstrapを使った様々なテンプレートも販売されています。

テンプレートは安いもので2$(220円)から購入できます。

例として、こちらのLPをご覧ください

「カッコいいLPだな」と思われる方が多いと思うんですが、このLPの完成版HTMLCSSは、テンプレートとして販売されています

つまりコーディングはもう完了した状態のものが販売されているので、購入して写真とテキストを入れ替えればすぐLPとして使えます。

ちなみに、このLPの全ファイルが含まれているテンプレートがこちら↓canvas

850以上のHTMLテンプレートが入っており、16$(1800円)です。2000円以下です。

さっきのLPが2000円!!安い!!

と思われた方、そうじゃないですよ。

他にも850個の完成されたテンプレートが入ってて、2000円です。

商用利用可なので、サイト制作に利用するのももちろんOK

1サイトにつき1ライセンス必要なので、テンプレートを使ってサイト制作するときは毎回買ってくださいね!

 

情報をまとめると、こういうことです↓

  • すでにHTML/CSSが組まれており
  • アニメーションも付いていて
  • 写真とテキストを入れ替えれば使えるオシャレなテンプレートセットが
  • 2000円足らずで買える

これは使わない手はないと思いませんか?

 

ここまで30DAYSトライアルを進めて来られた方なら、HTML5/CSS3/Bootstrap4の基礎はバッチリと身についています。

専業コーダーはまだ厳しくても、写真やテキストの入れ替えはもちろん、ちょっとHTMLやCSSをいじってカスタマイズするくらいはもう余裕ですよね( ^ω^ )

そのくらいのチカラは付くように課題を出してきましたからw

テンプレートを利用すれば、今のスキルで十分カスタマイズが可能です。クオリティの高いLPが作れます。

それに写真とテキスト入れ替え+多少のカスタマイズくらいなら、ゼロから作るより全然時間もかからないってことも分かるはず。

副業として続けていけそう…ですよね?

 

ポートフォリオ用テンプレートのダウンロード

それでは、まずテンプレートに慣れるため、そしてサイト制作の受け口を作るため、ポートフォリオ用テンプレートを購入して自分のサイトを作ってみましょう!
(ビジネスサイト制作向きのものは後日紹介します。)

僕が100個ほどの中から、ポートフォリオに良さそうだと選んだテンプレートを4つ紹介しておきます。

———————————-

Arlo – Personal / Portfolio / Resume Template
5$(550円)

 

Taso – Personal Portfolio Template
12$(1320円)

 

Kerri – Responsive Bootstrap 4 One Page Portfolio Template
16$(1760円)僕はこのテンプレが一番好きでした。

 

Void – Onepage Parallax Personal Portfolio Templates
20$(2200円)

———————————-

できるだけ価格帯や雰囲気の違うものをピックアップしました。

まずは好きなデザインのものを選んで、ファイルをダウンロードしてください。

もちろん、どれもHTML5/CSS3/Bootstrapで作られてるので、これまでの学習を活かせます。

 

ポートフォリオサイトを作ってみよう

ファイルのダウンロードが完了したら、解凍し、早速ポートフォリオ作成に取り掛かりましょう!

VScodeで解凍したフォルダを開き、LiveServerを起動しながら、写真やテキストを「自分のポートフォリオサイト用」に置き換えていってください。

✔︎ポートフォリオサイトの構成

  • ファーストビュー(画像)
  • 経歴・自己紹介
  • サービス紹介/スキル紹介
  • 『LP制作 – 30,000円〜』という趣旨の訴求テキストと、お問い合わせへのページ内リンクボタン
    (このパートはコードを書いて追加してください。デザインは自由です。)
  • Works/Portfolio
  • お問い合わせフォーム

構成としては、これだけあればOKですね。

もちろん、他にも追加したいパートがあれば積極的にカスタマイズしてみてください( ^ω^ )

みなさんもうカスタマイズではそこまで苦戦しないと思うんですが、テキストを考えたり写真を差し替える方に時間がかかると思います。

DAY18・DAY19は、この『自分のポートフォリオサイト作成』に当てますので、2日間で完成を目指してみてください。

DAY18はここまで🙇‍♂️お疲れ様でした。

次の記事はこちら↓

【HTMLテンプレートから学ぶ】初心者に最適なコーディングの勉強方法【独学可能】独学で勉強を続けるコーディング初心者の方向けに、HTMLテンプレートを使った効率的なコーディングの学習方法を解説しています。...