実務をやったことがない場合、今の自分のスキル感でどのぐらいの案件に対応できるのか不安になると思います。
WordPressを扱えるようになってからでないとWeb制作の案件は請けられない、ということはありません。HTML/CSS, JavaScriptの技術だけでも請けられる案件はあります。
この記事では、コーダーがWeb制作の案件を請けるために必要なレベル感について解説します。
スキル感によって請けられる案件の内容も変わってくるため、自分のスキル感を把握することは重要です。
- 実務をやったことがない人
- 今の自分のスキル感でどこまで案件ができるか知りたい人
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
目次
Web制作の案件ができるレベル感
Web制作の案件ができるコーダーのレベル感は以下の通りです。
- （レベル1）HTMLとCSS、JavaScriptで静的なWebサイトが作れるレベル
- （レベル2）Webサイトにアニメーションを付けられるレベル
- （レベル3）WordPressサイトが構築できるレベル
- （レベル4）GitHubが使えてチーム開発ができるレベル
SassやCSS設計、EJSやPugのようなフレームワークなどは必須ではありませんが、できたほうが効率的な制作が進められるという点では身に付けておくといいでしょう。
GulpやWebpackのようなツールも同様です。使えなくてもHTMLとCSS、JavaScriptだけでWebサイトを制作できますし、ツールが使えればより効率的に制作を進めることができます。
Web制作の学習ロードマップもあわせてご一読ください。
（レベル１）HTMLとCSS、JavaScriptで静的なWebサイトが作れるレベル
HTMLとCSS、JavaScriptで静的なWebサイトが作れるレベルなら、静的なWebサイト制作案件ができます。
ただし、単にHTMLとCSSでコーディングできるだけではなく、レスポンシブができることが前提です。また、Webサイトの頻出パーツである、以下のパーツについても構築できる必要があります。
- ハンバーガーメニュー / メガメニュー
- タブ
- トップに戻るボタン
- アコーディオンメニュー
- スライドショー
- モーダルウィンドウ...etc
これらのパーツの動きを、JavaScriptで実装できるようになりましょう。
仮に「WordPressサイト構築ができない」「Sassを使えない」「アニメーションができない」という場合でも、最低限上記の実装ができれば対応できます。
基本的には、まずここのレベルを目指しましょう。
HTMLとCSS、JavaScriptで静的なWebサイトが作れるレベルまとめ
- レスポンシブでコーディングができる
- Webサイトの頻出パーツを作れる
- 基本的にはここのレベルを目指す
SassやCSS・JavaScript系のフレームワークは？
SassやCSS、JavaScript系のフレームワークなどが使えない場合でも、基本的には通常のHTMLとCSS、JavaScriptで実装できれば対応できます。
CSS設計についても同様で、できないよりはできたほうが効率的に制作を進められます。CSS設計が完璧にできていない場合でも、静的なWebサイト制作案件自体は対応できます。
Sassは必須ではない？
Sassが使えれば変数を使ったり、Sassファイルをパーツごとに分割して管理するなど効率的に制作を進めることができます。実務でもSassを使って作業している人は多いです。
しかし、Sassが使えない場合でもCSSのみで制作を進めることはできます。「Sassが使えればより効率的に制作できる」というだけで、SassができなければWebサイト制作案件ができないというわけではありません。
このように、基本的なWebサイト制作であれば、HTMLとCSS、JavaScriptで構築できれば対応できます。
「WordPressサイト構築までできないとWebサイト制作案件はできない」と思われがちですが、静的なコーディングだけでもできる仕事はあります。
この段階でできる仕事の例
- 既存の静的サイトに新規ページ追加
- 新規サイトを静的で作成
- 既存の静的ページ・サイトを改修、修正
- WordPressサイト構築前提の、静的サイト作成
（技術的には現段階で可能だが、後述するWordPressができないと難しい）
（レベル２）Webサイトにアニメーションを付けられるレベル
GSAPのようなライブラリを使ってWebサイトにアニメーションを実装できるレベルなら、アニメーションの実装が必須な案件を請けることができます。
アニメーションの実装は必須ではありませんが、案件によってはアニメーションが必須なことがあります。そのような案件の場合、対応できるでしょう。
GSAPはJavaScriptが使えるなら、実装はそれほど難しくありません。しかしGSAPを使うためには、JavaScriptの学習が必須となります。
実装するアニメーションの例としては、以下のようなものがあります。
- スクロールしたら画像が動いて見える視差効果（パララックス）
- スクロールしたらテキストや画像がふわっと表示したり、スライドインするアニメーション
- スクロールに応じて、コンテンツが意図した順番通りにふわっと表示するアニメーション
- オープニングアニメーション...etc
ただし、過度なアニメーションはユーザーにコンテンツを読ませる目的とかけ離れ、かえってコンテンツを読みにくくさせてしまう可能性があります。過度なアニメーションは抑えておきましょう。
Webサイトにアニメーションを付けられるレベルまとめ
- GSAPライブラリを使ってアニメーションを実装できる
- GSAPを使ってカスタマイズもしくはオリジナルでアニメーションを実装できる
アニメーション実装の要件がない場合は、実装する必要はありません。要件にあった場合のみ実装するようにしましょう。
複雑なアニメーションを実装する場合、深い知識が必要になります。そのようなアニメーションを実装できると、自然と単価も上がっていきます。
（レベル３）WordPressサイトが構築できるレベル
WordPressサイトが構築できるレベルなら、WordPressサイト構築案件の対応ができます。
WordPressサイトを構築するためには、WordPressタグによる動的処理やPHPの関数、プラグインの設定などさまざまな知識が必要になります。
WordPressサイトを構築する場合、大きく分けて3つの方法があります。下に行くほど難易度が高くなります。
WordPressサイトを構築する方法
- 既存テーマをカスタマイズ（有料テーマ・無料テーマ）
- HTML, CSSで作られた静的データを使ってオリジナルテーマを作る
- PHPで動的にコーディングしながらオリジナルテーマを構築する
WordPressサイトを構築する場合、上記のようにさまざまあるので、それぞれに対応できるようになるといいでしょう。いきなり全てマスターする必要はないので、まずは一つだけできるようになりましょう。
静的なコーディングよりも難易度は高いので、WordPressサイト構築までできると、単価は上がる傾向にあります。
既存テーマをカスタマイズする（有料テーマ、無料テーマ）
Cocoon（コクーン）などの無料テーマや、Snow Monkey（スノーモンキー）などの有料テーマをカスタマイズして構築する方法です。基本的な構成やレスポンシブなどはテーマのほうですでに用意されているので、ゼロから構築する必要はありませんが、テーマごとに設定されているコードやテーマ特有の特徴を理解する必要があります。
WordPressのテーマは種類が多いので、全てのテーマを使えるようになるよりも、特定のテーマに絞って特化してカスタマイズできるようになるといいでしょう。
HTML, CSSで作られた静的データを使って動的にする
HTMLとCSSで作られた静的なデータを元に、WordPressタグによる動的処理やPHPの関数を駆使してオリジナルテーマを制作します。
静的なコーディングをしてからWordPress化していくので工数はかかりますが、基本的な構築方法なので、このやり方を身に付けられるように学習していくといいでしょう。このレベルに到達すれば、基本的なWordPressの仕組みは理解したといえます。
PHPで動的にコーディングしながら構築する
HTML, CSSで作られた静的データを使って動的にする方法に慣れてくると、初めからPHPで動的な処理を記述しながらコーディングできます。
こちらもオリジナルテーマを作成する方法ですが、初めから動的処理を組み込みながら構築するので、静的データを使って動的にするよりも工数を削減することができます。
なお、WordPress化ができるようになると、静的なコーディングでも動的な処理を意識したコーディングができるようになるので、コーディングのスキルも上がります。例えば、記事のタイトルやアイキャッチ画像が記事ごとに変わっても、スタイルが崩れないようにコーディングできるようになります。
WordPressサイトが構築できるレベルまとめ
- 既存テーマをカスタマイズできる（有料テーマ・無料テーマ）
- HTML, CSSで作られた静的データを使ってオリジナルテーマを作れる
- PHPで動的にコーディングしながらオリジナルテーマを構築できる
（レベル４）GitHubが使えてチーム開発ができるレベル
GitHubとはプログラムのソースコードをオンラインで共有したり管理したりできるサービスです。世界中のプログラマーが使用しています。
GitHubが使えると、チーム開発の案件にも対応できます。プロジェクトの規模によっては、一つのWebサイトで10ページ以上の構成になることがあり、複数人で開発することも出てきます。規模が大きくなると、構築に携わる人間も多くなります。
そのような案件のときにGitHubが使えると、複数人で一つのWebサイトを構築するプロジェクトに参加することができます。
GitHubを使うためには、環境構築やコマンドの使い方を覚える必要があります。GitHubを使えるようになったら、チームを組んで複数人で1つのWebサイトを作ることを目指してみましょう。
GitHubが使えてチーム開発ができるレベル
- GitHubの環境構築と基本的なコマンドが使える
- 問題なくチーム開発を行える
- エラーが発生しても対処できる
チーム開発をする場合、誰がどのページを担当するかなど、役割分担を明確にする必要があります。別々の人が同じページやパーツをコーディングしてしまうと、どちらが正しいコードなのか分からなくなってしまうためです。
チーム開発は他の人の進捗も気にする必要があるので、単独で開発を進めるよりも難易度が高いです。
まとめ：自分のレベル感を把握しよう
Web制作の案件ができるレベル感について解説しました。
自分のスキル感を客観的に把握するのは難しいかもしれませんが、スキル感を把握できると、自分がどこまでの案件に対応できるか分かるようになります。自分の対応範囲が分かれば、請けようとしている案件に対応できるのかできないのかも判別できるようになります。
Web制作の案件ができるレベル
- レベル１ HTMLとCSS、JavaScriptで静的なWebサイトが作れるレベル
- レベル２ Webサイトにアニメーションを付けられるレベル
- レベル３ WordPressサイトが構築できるレベル
- レベル４ GitHubが使えてチーム開発ができるレベル
（レベル１）HTMLとCSS、JavaScriptで静的なWebサイトが作れるレベル
- レスポンシブでコーディングができる
- Webサイトの頻出パーツを作れる
（レベル２）Webサイトにアニメーションを付けられるレベルまとめ
- GSAPなどライブラリを使ってアニメーションを実装できる
- GSAPを使ってカスタマイズもしくはオリジナルでアニメーションを実装できる
（レベル３）WordPressサイトが構築できるレベルまとめ
- 既存テーマをカスタマイズできる（有料テーマ・無料テーマ）
- HTML,CSSで作られた静的データを使ってオリジナルテーマを作れる
- PHPで動的にコーディングしながらオリジナルテーマを構築できる
（レベル４）GitHubが使えてチーム開発ができるレベル
- GitHubの環境構築と基本的なコマンドが使える
- 問題なくチーム開発を行える
- エラーが発生しても対処できる
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
