わたしはフリーランスで活動してるWebコーダーですが、実はWeb制作会社に就職したことはありません。HTMLもCSSも独学で学びました。また、仕事をする上で必要なお作法も独学です。
（なので、未経験からフリーのWebコーダーというキャリアになるんですかね…）
いきなりフリーランスということもあり、コーダーになる方法について考えた時間は、普通に働いているコーダーよりも長いんじゃないかなって思います。
そんなわたしの経験を交えながら、Webコーダーとして仕事をするために
- どういったことを勉強すればいいか
- どこまでできるようになればいいか
について紹介していきます。Webコーダーを目指している方にとって役立つ内容になっているはずです。最後の実践までクリアできたら、あなたは今すぐコーダーになれます。
コーダーなるために必要な勉強量
コーダーになるために必要な勉強を項目ごとに並べていこうと思います。１～３までは必須のスキルです。
１、デザインを再現できるスキル
デザイナーさんが作成したデザインカンプをWebサイト上に再現するのがコーダーのお仕事です。ですので、デザインを再現できるスキルが一番大事なスキルになります。
スキルとしては、マークアップ言語と呼ばれる以下の2つを覚える感じですね。
- HTML
- CSS
個人的には、「ドットインストール」という3分の動画でお手軽に学べる無料学習サイトを使って何度も何度も見返しながらサイトを作っていました。
何をやればいいか分からない方は、まずは以下の講義をやってみるといいでしょう。
書籍としては、「これからの「標準」を身につける HTML+CSSデザインレシピ」が個人的にはおすすめです。
ポチップ
本は人によって合う合わないがあるので、本屋の技術書コーナーに行って目についた本をパラパラ見て「良さそう」と思ったものを直感で選ぶといいかと思います。
「１、デザインを再現できるスキル」のゴール
目的はHTMLやCSSでデザインを再現することなので、いつまでも動画を見ていてはいけません。目安としては、簡単そうなWebサイトであれば、何も見ずに（調べるにしても、何を調べれば解決するかがすぐ判断できているレベル）コーディングできるようになっていれば仕事になります。
「簡単なサイトってどんなんの？」って方のために１つの目安として、当ブログ「HPcode」のLPページのようなサイトです。
こういうサイトはインターネット上にたくさんあるので、HTMLやCSSの基礎が理解できたら、ガンガン実践していきましょう。模写コーディングの方法は以下の記事などで紹介しているので参考にしていただければと思います。
２、動きを表現するスキル
ひと昔前ならHTMLとCSSだけできればコーダーとして仕事になっていました。今は違います。全く動きのサイトの依頼はほぼなく、ちょっとした動きであれば余裕で実装できるようなスキルが求められます。
使えるようになっておくべきスキルとしては、JavaScriptとCSSのアニメーションですね。
- JavaScript
- jQuery
- CSS
厳密にはJavaScriptというよりは、コーダーとして最低限で覚えておくべきはjQueryのライブラリの使い方ですかね。
JavaScriptやjQueryの使い方については、毎度おなじみ「ドットインストール」から基礎は学んでおきましょう。
CSSでも動き（アニメーション）は表現できます。transitionとanimationというプロパティですね。手前味噌にはなりますが、以下の記事で紹介しているので、実際に自分でコード書きながら試してみてください！
「２、動きを表現するスキル」のゴール
こちらも闇雲に勉強するのは効率が悪いかもしれませんので、実際にコーディングで求められがちな動きをまとめました。これらの動きをJavaScript（jQuery）やCSSを使って表現できるようになればOKです！
- スムーススクロール
- トップへ戻る（フローティング要素）
- スライダー
- ドロワーメニュー
- モーダル
- パララックス
- アコーディオン
- マウスホバー（アニメーション）
- ローディング画面
- on / offの切り替え
上記の動きを具体的にどう表現するかは、（動きのないCSSも混じっていますが、、、）以下の記事でまとめています。答えから見た方が早い気もするので、どういうjQueryのライブラリ使っているかや、CSSの書き方など、参考にしていただきながら覚えていっていただければと思います。
３、デザインカンプからデータを取得するスキル
コーダーとして会社で働いたことがなかったわたしにとって、知りようがなかったのがここのスキルでした。
（HTMLとCSSでサイトが作れたらコーダーとして仕事できるもんだと思ってた…）
仕事の流れとして、デザイナーさんが作ったデザインカンプをWebサイトとして実現させるのがコーダーのお仕事になります。つまりデザイナー作ったデザインカンプを理解できるスキルが必要ということです。
デザイナーさんは以下のようなツールでデザインカンプを作成します。
- Photoshop
- Illustrator
- XD
- Sketch
そもそも上記のツールをコーダーも持っている必要があります。有料ですが、コーダーとして仕事するために必要な経費として確実に用意しておきましょう（月額5,000円ほど）
「３、デザインカンプからデータを取得するスキル」のゴール
デザインカンプからは以下のような情報が取得できるようになっていればOKです。Adobeツールが有料ということもあり馴染みのない方も多いかもしれませんが、不安を解消するためにも早めに使い慣れておくことをおすすめします…
- 画像の取得
- 文字テキストの取得
- フォント情報の把握
- 色情報の把握
- 幅、高さの把握
- 余白の幅の把握
Photoshopを例にすると、以下の記事のような感じで取得が可能です。
（ツールごとに取得の仕方がちょっと変わるだけで、同様の情報は得られます）
書籍としては、「世界一わかりやすいIllustrator & Photoshop & XD Webデザインの教科書」が、コーダーにとってもこれ以上ない程の最強の1冊でした。
ポチップ
（おまけ）品質をチェックできるスキル
コーダーというポジションはサイトの（細かな）品質を担保する最後の砦だと思っています。というのも、肌感覚にはなりますが、ディレクターもデザイナーも「表向きのデザインが再現できているかどうか」しか見ません。
例えば、閉じタグの数が合っていなかったとしても、ソースコードがぐちゃぐちゃだったとしても、大事な画像でaltがなかったとしても、おおよそは通っちゃいます。
だからコーダーが質を保ってあげなきゃなって、わたしは思うわけです。
（コーダーとしてどうありたいか、みたいなところなので、おまけにしました）
どういうチェックをすべきかは以下の記事でまとめているので、質の高いコーディングを担保したい方は参考にしてみてください！
コーダーとしての腕を試す実践課題
今回わたしが紹介した、
- デザインを再現できるスキル
- 動きを表現するスキル
- デザインからデータを取得するスキル
の3点が問題なくできるようになれば、コーダーとして仕事を受けられるかと思います。でも、実際に仕事を経験してみないことにはできるかどうか不安だ…、って気持ちも分かります。
そんな不安を解消するためのサービスが2つほどあるので紹介しようと思います。お金をもらってコーディングするはずが、お金を払って仕事をさせてもらうというサービスになります笑
要するに、「不安の解消」の対価って感じですね。わたしも仕事したことがなくて不安だったことは実際に利用させてもらってました。
手前味噌で恐縮ですが、わたしも同様のサービス出しています。難易度は最も簡単なので最初のキッカケとしてチャレンジしてみてください！（わたしのサンプルコードもついてきます）
→ Photoshop、Illustrator、XDからのコーディングに慣れよう！
コーダーとしてひと通りの勉強ができたと思ったら、力試し & 不安の解消として、上記サービスを活用してみてください！
※ サービス提供者の方がお亡くなりになられたので、現在はレビューを受けることはできません。
おわり
Webコーダーになるための必要な勉強を洗い出してみました。今コーダーしては仕事しているわたしが必要だと思っている最小限の構成でまとめています。
おさらいすると、以下の３つです。
- デザインを再現できるスキル
- 動きを表現するスキル
- デザインからデータを取得するスキル
基本的には孤独な勉強です。うだうだ考えている暇があったら実際に手を動かしまくることが早く上達するコツですね。コーダーになりたい方は、この記事を見ながら手を動かしまくりましょう！
