こんにちは！フリーランスWebディレクターのショーへーです。
この記事では、『HTML/CSSの基礎を覚えたレベル』の人が、Webサイト制作で月数万のの副業収入を得るための方法を紹介していきます。
なお
- 「もっと基礎からしっかり学びたい」
- 「Web制作会社に転職したい」
- 「フリーランスに挑戦したい」
など、より高い目標をお持ちの方は、オンラインスクールも運営してますので、よかったら見てみてください( ^ω^ )
それでは本題をどうぞ！
index
【まえがき】知っておくべき「現在のレベル感」
この記事の対象読者は↓のLPを自力で作れるくらいの方です。
HTML/CSS/Bootstrapの基礎は理解しており、『シンプルな構成の1ページサイトなら見本があればゼロからでもコーディングできる』というレベル感ですね。
このくらいのレベルの方をターゲットに、レバテックやMidworksなどのフリーランスエージェントを紹介し、
「登録しておけば勝手に案件が入ってきます！」
みたいなこと書いてる記事をよく見かけますが、無理です。断言します。
そういうのはただのアフィリエイト目的の記事なので信用しちゃダメ。
少し厳しい話ですが、フリーランスエージェントから流れてくる案件に、今くらいのスキルで作業可能な仕事はまずありません。独学でもサイト制作はできるようになりますが、数ヶ月独学で頑張ったくらいではスキル的にも経験的にも大別するとまだ「未経験」です。（プログラミングスクール卒業生なども基本的に同じです）
企業がわざわざエージェントに求人を出してる理由は、社内の開発力不足をおぎなったり、教育にかかるコストをカットしたいから。
求めてるのは経験年数2~3年以上のスキルを持った、現場で通用する専業プログラマーです。
登録したところで企業から声がかかることはないですし、自分にはできない案件情報メールが延々と届き続けるだけなので、登録する必要ありません。
それなのに、「まずはエージェントに登録しましょう」的なことを書いてる記事が多すぎてタチが悪い。
アフィ報酬目的で適当なこと言うの、ホント良くないと思うんだよな…。
ちょっと話が逸れました。本題に戻ります。
本来であれば、今のスキルセットでコーダーとして仕事をするには全然期間が足りません。言ってもまだ1ヶ月弱の学習期間ですし。
副業としてクラウドソーシングで案件を探すのであれば、ギリギリ可能な案件も見つかるかもしれませんが、それでもまだ早いです。
コーダーにはjavascript・jQueryの知識、フォトショ・イラレなどのデザインツールの知識も必要です。
データファイルからピクセル単位で正確にコーディングするのもまだ難しいと思いますし、実務レベルの凝ったデザインになるとコーディングの引き出しが足りないはずです。
では、現在の『超初心者のコーディングスキル』で月5万を稼ぐにはどうすればいいんでしょうか。
そこそが裏技の正体なのですが、ポイントは以下の2点です。
✔︎超初心者のコーディングスキルで月5万を稼ぐためのポイント
- HTMLテンプレートを利用すること
- LP制作案件を『もらう』のではなく、商品として『販売する』こと
具体的に見ていきましょう！
『HTMLテンプレートを使ってみよう＋自分のポートフォリオサイトを作ろう①』
『HTMLテンプレートを利用する』のHTMLテンプレートとは何か、どう使うものなのかから解説していきます。
Themeforestというサイトを使ったこと、ありますか？（↑の写真のサイト）
WordPressテーマ、Webサイトテンプレート、動画素材、音源素材、写真素材など、Web関連にまつわる様々なものが販売されている海外サイトです。
このサイトでは、HTML/CSS/Bootstrapを使った様々なテンプレートも販売されています。
テンプレートは安いもので2$（220円）から購入できます。
例として、こちらのLPをご覧ください↓
「カッコいいLPだな」と思われる方が多いと思うんですが、このLPの完成版HTML・CSSは、テンプレートとして販売されています。
つまりコーディングはもう完了した状態のものが販売されているので、購入して写真とテキストを入れ替えればすぐLPとして使えます。
ちなみに、このLPの全ファイルが含まれているテンプレートがこちら↓
canvas
850以上のHTMLテンプレートが入っており、16$（1800円）です。2000円以下です。
さっきのLPが2000円！！安い！！
と思われた方、そうじゃないですよ。
他にも850個の完成されたテンプレートが入ってて、2000円です。
商用利用可なので、サイト制作に利用するのももちろんOK。
※1サイトにつき1ライセンス必要なので、テンプレートを使ってサイト制作するときは毎回買ってくださいね！
情報をまとめると、こういうことです↓
- すでにHTML/CSSが組まれており
- アニメーションも付いていて
- 写真とテキストを入れ替えれば使えるオシャレなテンプレートセットが
- 2000円足らずで買える
これは使わない手はないと思いませんか？
専業コーダーはまだ厳しくても、写真やテキストの入れ替えはもちろん、ちょっとHTMLやCSSをいじってカスタマイズするくらいはもう余裕ですよね( ^ω^ )
テンプレートを利用すれば、今のスキルで十分カスタマイズが可能です。クオリティの高い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ですね。
もちろん、他にも追加したいパートがあれば積極的にカスタマイズしてみてください( ^ω^ )
カスタマイズではそこまで苦戦しないと思うんですが、テキストを考えたり写真を差し替える方に時間がかかると思いますw
3日ほどを目安として、ポートフォリオサイト完成を目指してみてください👍
次の記事はこちら↓
