前回の記事【結論】未経験の初心者がIT業界に転職する方法は3つ【最短】でご紹介したうちの一つ。HTMLコーダーになる方法を詳しくご紹介いたします。
始めに言っておきます。確かにweb系の仕事の中でHTMLコーディングは一番難易度が低いです。
ただしそれは簡単という意味ではなく、やることはめちゃめちゃたくさんあります。それでは順を追って説明しますね。
1.HTML&CSSの勉強
ここはもう既にしている方も多いかもしれないですね、HTMLコーディングをするならまずはここから始めなければいけません。
今は無料で入門編を勉強できるサイトが多いのでそちらを利用してみるのが手っ取り早いです。HTMLを無料で学習できるサイトを試してみた記事もありますので参考にしてみてください。
個人的なお勧めとしては入門編の書籍も一冊やってみると良いと思います。私も一冊試しに勉強してみました↓
何冊もやる必要はないですし、いつまでもオンライン学習する必要も無いので、基本が一通り終わったら次のステップへうつりましょう。
2.模写コーディングで練習
ここがもう既に最初の壁として超えるのが大変と感じる人も多いです。
こういった具合ですね。
一般的には模写コーディング、と言われる既存のサイトを真似て実際に作ってみる作業がおすすめされています。
ただこれ、実際にどのサイトをやろうかなと思って探してみると色々ありすぎて迷った挙句にまたあしたでいいやーってなっちゃうんですよね。
超重要ポイント
模写コーディングでサイトを作れるようになっても実は全く仕事はできません。なぜなら実際の仕事はPSDやAIで出来上がったデザインカンプの通りにコーディングすることが求められるからです。
各要素の幅や高さ、要素間の余白（マージン）の抽出、使われているフォントからフォントサイズの把握、使用されているカラーコードの特定等々。
これらをデザインカンプから取り出す作業が必要になるんです。つまりそれらの最低限それらのソフトを使える必要があるんです。
なので模写コーディングの時点から、無料で配布されているPSDデザインなどを元にコーディングを行うことをおすすめします。こうすれば一石二鳥で最短です。
3.PSDデザインカンプからコーディング
一番メジャーなのはフォトショップで作られたPSDファイルによるデザインカンプからのコーディングでしょう。
そしてフォトショップはもちろん有料ソフトです、7日間は無料体験もありますがその期間に終わらせるのはまず無理でしょう。
最低でも月額980円（税込だと1058円）、しかもこれを年間縛りで支払わなければいけません。つまり12カ月分で12696円。
年間の途中解約は残り期間の利用料金×50%の支払いが必要になるようです（規約が変わるかもなのでリアルタイムでご確認ください）
つまりそれだけ支払ってもそれ以上稼ぐ！という気持ちがなければこのお金を出すという一歩が踏み出せないということで一つの壁になってくるでしょう。
PSDのデザインカンプからコーディングに必要な情報を抜き出す具体的な手法は別途記事にする予定です。
4.AIデザインカンプからコーディング
さて、PSDだけでも最低年額12696円の出費になるにも関わらず、さらに昨今ではAIファイルでデザインカンプが上がることも多いのです。
AIはイラストレーターというソフトで、こちらは月額最低でも2480円（税込2678円）もちろん年間縛り有りで12カ月払うと32136円。
年間縛りのない月プランでいこうとするとなんと月額3480円（税込3758円）かかります。これは5万円クラスの依頼をこなすことができなければ赤字になりますよね。
はじめはAIでデザインが渡される案件は敬遠するというのも一つの手かもしれませんが、いずれ必要にはなるスキルでしょうね。
AIのデザインカンプからコーディング行うのに必要な情報は基本的にはPSDの時と同様です、こちらも別途記事にする予定です。
5.AdobeXDデザインカンプからコーディング
PSDとAIだけならまだしも、最近ではAdobeXDというソフトでデザインが上がってくることも出てきました。
XDは無料プランもあるので、そちらを利用すれば無料の範囲であれば利用することが可能です。
やることは他と同じ、XDで出来たデザインカンプからコーディングを行う方法は以下の記事です。
6.ポートフォリオサイトの作成
PSD、AI、XDすべてのデザインカンプからコーディングを行えるようになった！これでもまだ仕事を取るには足りません。
仕事に応募する際にはほぼ確実に作品集（ポートフォリオ）を求められます。とはいえPSD、AI、XDのデザインカンプからコーディング練習したサイトをそのまま実績として利用すればいいのでそこは楽です。
あとはポートフォリオサイトのトップページだけ作って、それらの作品の紹介とリンクを設置すればOKですね。
そしてポートフォリオのサイトさえも「ポートフォリオ webデザイン サンプル」等で検索すればPSDファイルなどでデザインファイルが無料で配布されていますので好きなものを利用すればOKです。
ポートフォリオは画像やPDFにして提出というスタイルもあるようなんですが、個人的には実際のサイトにアクセスしてもらって動きもみてもらった方がいいと思います。
こだわる発注者であればさらにそこからソースコードを読んで発注するかを決めると思うんですよね、コードを見て判断したい時に画像やPDFだけで送ってくる応募者って即脱落だと思うので。
ポートフォリオ試しに作成してみたので以下の記事も参考にしてみてください。
7.JavaScript&jQueryの学習・実践
準備は整った！いえいえ、その程度の準備はライバルの誰しもがしています。そしてライバルは既に多数の実績を持っていますし、この時点では発注者があなたを選ぶ理由が無い状態です。
そこで他との差別化を図るためにJavaScriptやjQueryの学習をおすすめします。
スライドやカルーセル、モーダルといった動きのあるwebサイトを作ることができるようになり、他との差別化がはかれます。
動きのあるwebサイトは作成した側が満足するだけで、利用者は動きなんて求めていないと私は思っていますが…見た目かっこよく思えるのは事実です。
どんな動きをつければいいんだろうと思った場合は、「jQuery 実例」などで検索してサンプルを見てみると良いです。
ちなみにJavaScriptやjQueryの入門編も、HTMLを学んだprogateやドットインストールなどで入門編は無料で学習できるのでまずはそこから始めてもいいです。
8.BootStrap&HTML5も学ぶ
さらに他との差別化を図るためにBootStrapやHTML5も始めちゃいましょう。
BootStrapはどちらかといえばデザインより、なぜかBootStrapを利用するよう指定してくるクライアントもいます。
HTML5は動きのあるページ向け、canvasを利用したアニメーションなどが比較的簡単に実装可能なので、動きのあるwebサイトで他との差別化をはかるのに役立ちます。
例のよってこれらもある程度はオンライン学習サイトで無料で学習可能です。が実践編が欲しいので自分で調べるか本で参考事例を探すなどの行為は必須になりますね。
9.クラウドソーシングで仕事を取る
※企業に就職することが最終目標の方はこのステップは飛ばしても次のステップにうつってもOKですが、実務経験としてあると転職にも有利です。
ここまで準備ができたらあなたにもクラウドソーシング等を利用して仕事が取れる可能性があります！
ただ先ほども書きましたが既に実績が多数あるライバルが同じ仕事に応募するわけです、あなたが発注する側でも実績0の新人より実績のあるベテランを選びますよね。
そこで先ほどのJavaScript・jQuery・HTML5を利用した動きのあるwebサイト作成技術も合わせてアピールしてみてください。
例えば以下の様な提案文はどうでしょう？
htmlのコーディングのお仕事をメインに活動させて頂いております。
ポートフォリオは以下になります。
<ポートフォリオトップページのURL>
ご予算50000円ということですが、こちらまだクラウドソーシングでのお仕事は駆け出しの為、初回25000円で受けさせて頂ければと思います。
もちろん値引きをしたからといって仕事に妥協はいたしません。納期も2週間以内に上げさせていただきます。
またポートフォリオの以下サイトのようなjQuery・HTML5を利用した動きのあるwebサイト作成も得意としております。
<ポートフォリオの実際に動きのあるページのURL>
もしご要望がありましたらこのような動きの実装を無料で一点追加サービスさせていただきます。
是非ご検討ください。
もし安く仕上げたい、かつ動きのあるwebサイトは別途見積もりで高額になるので諦めていた…というクライアントであれば刺さる可能性があります。
このようにお仕事を頂く際は発注者があなたを選ぶ理由を作って、それをアピールするようにすると良いでしょう。
初回半額はやりすぎかもなので20%～30%引きとかでもいいかもですね、クライアントとの実績ができれば通常金額でもあなたを選んでくれるようになるはずです。
発注者もまた一からちゃんと仕事ができるかわからない相手を選ぶより、一度取引をしたあなたを選ぶ方が安心できますからね。
10.求人を探す
HTMLコーダーの求人募集はデザインもできるwebデザイナー兼HTMLコーダーの募集が多い印象です。
正社員を目指すのならやはりデザインからできるスキルは今後必要になってくるでしょう。
もちろん正社員としての募集もありますので、逐一求人を探すのは大事ですが、契約社員やアルバイトといった形でHTMLコーダーのみの募集もあるので経験を積みたければそちらに応募するのも有りかと思います。
企業で経験させてもらえれば先に紹介したクラウドソーシングで仕事を取ることもより容易になるでしょう。
コーダーとして契約社員orアルバイト＋副業でクラウドソーシングでコーディング案件をこなす、といった稼ぎ方も良いでしょう。
HTMLコーダーとして仕事を探す方法は長くなるのでまた別記事でまとめさせていただきます。
まとめ
以上、未経験からHTMLコーダーになる方法をご紹介いたしました。HTMLコーディングを行い仕事を取ってお金を頂くことは結構大変ですよね。
ただ在宅で出来てスキルさえ身についてくれば高額案件もこなせる夢があるのも事実。
企業に就職して経験を積んだ後にフリーランスになり多くの金額を稼いでいる方が多い分野です。
無謀な退職はおすすめしませんが、そんな夢を目指す方はここで紹介させていただいた方法を一つの参考に頑張ってみてください！
※こんなにたくさん勉強することがあるなんて無理…と絶望してしまった場合はスクールの利用を行うのも良いでしょう。基本的なことは勿体ないので独学で済ませておいてほしいですが、一人では限界がある部分は教えてもらうのが一番早いのも事実です。