くまだどうも、くまだです。
Web制作の案件をする際に、「どれくらい勉強したら案件ができるのだろうか？」という不安があるかと思います。
というのも、私もいまいちそのレベル感がわからなくてずっと「Web制作の勉強をしていつまでも案件をやろうとしない」ということがありました。
不安は今でもずっとあるんですけど、やってみて初めてわかるものもありますし、インプットばかりしていて、いつまでも仕事できないようではしょうがないです。
個人的に思うレベル感は、最低でも以下のようなものができたらいいかなと考えています。全部できたら最高ですが、全部が全部できないのもあると思います。
もちろん下のは案件によります。
- HTML、CSS(Sass)でデザインカンプどおりコーディングできる
- ハンバーガーメニュー、アコーディオンメニュー、タブ、ブログカードなど、Webサイトで使われるような動き・パーツを実装できる
- レスポンシブでコーディングできる（モバイルファースト）
- JavaScriptやjQueryで動きを付けられる
- 静的サイトから基本的なWordPress化できる
- カスタム投稿、カスタムフィールド、カスタムタクソノミーが実装できる
- 納期までに作りきる
案件獲得前にやったことの記事はこちらです。
Web制作案件のレベル感： HTML、CSS(Sass)でデザインカンプどおりコーディングできる
デザインカンプどおりコーディングできるというのは、これは最低限です。（ピクセルパーフェクトできればもっといいです。）
ピクセルパーフェクトとまではいかないまでもデザインカンプと大きく違うようなコーディングをしないようにすることが大事です。HTML、CSSを使ってのコーディングで、CSS設計や設計の手法は何だっていいんですが、できるならばFROCSSとかBEMとかそういうものが使えるとなお良いかもしれません。
Sassも使えたら便利なので、HTML、CSSである程度できるようになったらSassも覚えてみるといいでしょう。
WordPress化できなくとも静的サイトのコーディングの仕事もあります。
Web制作案件のレベル感：Webサイトで使われるような動き・パーツを実装できる
Webサイトでよく見られるようなパーツ・動きなども実装できるといいです。例えば下記のようなもの。
- ハンバーガーメニュー
- コンタクトフォーム
- 左右交互レイアウト
- タブメニュー
- アコーディオンメニュー
- プルダウンメニュー
- ブログカードレイアウト
- トップに戻るボタン
- スライドショー
- スリックなどプラグインを使っての実装
上記に挙げたものは一例にすぎませんが、そういったものを作れるといいかなと思います。もちろん何も見ずにつくれればいいですが、実際はなかなか難しいのでググリまくって実装できればだいじょうぶです。
Web制作案件のレベル感 ：レスポンシブでコーディングできる（モバイルファースト）
レスポンシブもできたらモバイル（SP）ファーストで作れるといいです。
こちらはデザインカンプが PC から先にきてSPが後、ということもありますが、、 その場合であってもモバイルから作れるような感じで作っておくといいですね。
PCから書くのと、SPから書くので全体的な記述量がSPの方が少なくて済むので、SPから書くやり方に慣れていくのがいいかなと。
さらに、どんな端末幅でもコンテンツが大幅に崩れたりコンテンツ同士が被ったりしないようにもしましょう。
基本的に、Chrome,Safari,Fairfox,Edgeで確認するようにします。（PC、iphone,Android実機確認必須）
Web制作案件のレベル感 ： JavaScriptやjQueryで動きを付けられる
私はJavaScriptが苦手なのでたいしたことはできないのですが…。
クリックしたら動きがつくとか、コンテンツが消えたり現れたりとか、そういったぐらいの動きは出来るようになっておくといいです。CSSやSassでアニメーションを作って、JavaScriptと組み合わせて（発火点として）も良いです。
例え苦手であってもググれば結構何とかなることも多いです。
Web制作案件のレベル感：静的サイトから基本的なWordPress化できる
静的なサイトから WordPress化できるといいです。
用意された静的サイト（既存サイト含む）をWordPress 化するという案件もありますし、最初から静的サイトをコーディング→WordPress化というのもありますし、両方できておくといいです。
基本的なWordPress化は、例えばheader.php,footer.php,functions.php,コンテンツのphpなどにテンプレート化できることです。下層ページもある場合も当然ありますからそちらも同様にやります。
静的サイトのコーディングしかできないのと、WordPress 化までできるのとでは単価が違うので、WordPress化まできるようになっておくと良いでしょう。
（でも個人的には静的サイトのコーディングがしっかりできてからのほうが良いと思ってます）
Web制作案件のレベル感： カスタム投稿、カスタムフィールド、カスタムタクソノミーが実装できる
必須ではないですが、こちらもできたらいいなっていう感じです。
カスタム投稿は、通常投稿や固定ページでの投稿以外のオリジナルの投稿ページのようなものです。
カスタムフィールドは、記事タイトルや本文以外に任意で設定したフィールドのことです。（独自の情報を追加できる）
カスタムタクソノミーは、オリジナル項目、カスタムカテゴリーのようなイメージです。
WordPress 化できるのと、こちらのカスタム系が使えるのとでは、WordPresでできることの違いがめちゃくちゃあります。カスタム系ができるといろんなことができるので、こちらも覚えておくといいかなと思います。
Web制作案件のレベル感：納期まで作りきる
当たり前といえば当たり前の話。
下請けの場合もそうなんですが、「〇〇日までに作って」といわれるので、それまでに何としても完成させて納品することです。
案件の期間も内容やクライアントによっていろいろなパターンがあります。下記は私が過去にやった案件パターンの例です。
- WordPressの既存サイトに、固定1ページ追加案件が3~4日
- 静的サイト5ページをデザインから制作案件で2週間
- デザインからWordPress化まで5ページ制作案件が1か月
- 静的サイト7ページコーディング案件が約1週間
- 静的サイト1ページコーディングが即日納品案件
などなど。
また提出後も修正がある場合があるので、実際には納期ギリギリに提出ではなくて、1～2日ぐらいは早めに提出できるといいかなと思います。ギリギリだとちょっと心の余裕がないからしんどいです笑
自分のスピード感がわからない、という場合だったら、例えば模写でもいいから自分で納期を設定してやってみるといいです。ただし、納期がゆるゆるだと緊張感がないので、ちょっと自分の今のスケジュールだときついかな～ぐらいの期間で設定してみるといいです。
というわけで、ざっくりまとめてみました。
ここまで読んでくださりありがとうございました。