ZeroPlus Gateについて

\ シェア /

FacBook
Twitter
LINE
はてブ
PPocket
ZeroPlus Media > ITリテラシー > Web制作の案件ができるために必要なコーダーのレベル感とは?

Web制作の案件ができるために必要なコーダーのレベル感とは?

ITリテラシー

2023/11/09

2024/04/08

実務をやったことがない場合、今の自分のスキル感でどのぐらいの案件に対応できるのか不安になると思います。

WordPressを扱えるようになってからでないとWeb制作の案件は請けられない、ということはありません。HTML/CSS, JavaScriptの技術だけでも請けられる案件はあります。

この記事では、コーダーがWeb制作の案件を請けるために必要なレベル感について解説します。

スキル感によって請けられる案件の内容も変わってくるため、自分のスキル感を把握することは重要です。

 

この記事はこんな人に向けて書きました
  • 実務をやったことがない人
  • 今の自分のスキル感でどこまで案件ができるか知りたい人

ZeroPlus Gateについて

プログラミング学習でこのような経験はありませんか?

  1. 目標に向けて何を学べば良いかわからない
  2. 調べても解決策が見つからない
  3. 現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

  1. なんでも相談できる専属メンター
  2. いつでも技術相談ができるプロ講師
  3. 元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐ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制作の学習ロードマップもあわせてご一読ください。

 

(レベル1)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ができないと難しい)

 

(レベル2)Webサイトにアニメーションを付けられるレベル

GSAPのようなライブラリを使ってWebサイトにアニメーションを実装できるレベルなら、アニメーションの実装が必須な案件を請けることができます。

アニメーションの実装は必須ではありませんが、案件によってはアニメーションが必須なことがあります。そのような案件の場合、対応できるでしょう。

GSAPはJavaScriptが使えるなら、実装はそれほど難しくありません。しかしGSAPを使うためには、JavaScriptの学習が必須となります。

実装するアニメーションの例としては、以下のようなものがあります。

  • スクロールしたら画像が動いて見える視差効果(パララックス)
  • スクロールしたらテキストや画像がふわっと表示したり、スライドインするアニメーション
  • スクロールに応じて、コンテンツが意図した順番通りにふわっと表示するアニメーション
  • オープニングアニメーション...etc

ただし、過度なアニメーションはユーザーにコンテンツを読ませる目的とかけ離れ、かえってコンテンツを読みにくくさせてしまう可能性があります。過度なアニメーションは抑えておきましょう。

Webサイトにアニメーションを付けられるレベルまとめ

  • GSAPライブラリを使ってアニメーションを実装できる
  • GSAPを使ってカスタマイズもしくはオリジナルでアニメーションを実装できる
かずき先生
かずき先生

アニメーション実装の要件がない場合は、実装する必要はありません。要件にあった場合のみ実装するようにしましょう。

複雑なアニメーションを実装する場合、深い知識が必要になります。そのようなアニメーションを実装できると、自然と単価も上がっていきます。

 

(レベル3)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で動的にコーディングしながらオリジナルテーマを構築できる

 

(レベル4)GitHubが使えてチーム開発ができるレベル

GitHubとはプログラムのソースコードをオンラインで共有したり管理したりできるサービスです。世界中のプログラマーが使用しています。

GitHubが使えると、チーム開発の案件にも対応できます。プロジェクトの規模によっては、一つのWebサイトで10ページ以上の構成になることがあり、複数人で開発することも出てきます。規模が大きくなると、構築に携わる人間も多くなります。

そのような案件のときにGitHubが使えると、複数人で一つのWebサイトを構築するプロジェクトに参加することができます。

GitHubを使うためには、環境構築やコマンドの使い方を覚える必要があります。GitHubを使えるようになったら、チームを組んで複数人で1つのWebサイトを作ることを目指してみましょう。

GitHubが使えてチーム開発ができるレベル

  • GitHubの環境構築と基本的なコマンドが使える
  • 問題なくチーム開発を行える
  • エラーが発生しても対処できる
かずき先生
かずき先生

チーム開発をする場合、誰がどのページを担当するかなど、役割分担を明確にする必要があります。別々の人が同じページやパーツをコーディングしてしまうと、どちらが正しいコードなのか分からなくなってしまうためです。

チーム開発は他の人の進捗も気にする必要があるので、単独で開発を進めるよりも難易度が高いです。

 

まとめ:自分のレベル感を把握しよう

Web制作の案件ができるレベル感について解説しました。

自分のスキル感を客観的に把握するのは難しいかもしれませんが、スキル感を把握できると、自分がどこまでの案件に対応できるか分かるようになります。自分の対応範囲が分かれば、請けようとしている案件に対応できるのかできないのかも判別できるようになります。

Web制作の案件ができるレベル

  • レベル1 HTMLとCSS、JavaScriptで静的なWebサイトが作れるレベル
  • レベル2 Webサイトにアニメーションを付けられるレベル
  • レベル3 WordPressサイトが構築できるレベル
  • レベル4 GitHubが使えてチーム開発ができるレベル

(レベル1)HTMLとCSS、JavaScriptで静的なWebサイトが作れるレベル

  • レスポンシブでコーディングができる
  • Webサイトの頻出パーツを作れる

(レベル2)Webサイトにアニメーションを付けられるレベルまとめ

  • GSAPなどライブラリを使ってアニメーションを実装できる
  • GSAPを使ってカスタマイズもしくはオリジナルでアニメーションを実装できる

(レベル3)WordPressサイトが構築できるレベルまとめ

  • 既存テーマをカスタマイズできる(有料テーマ・無料テーマ)
  • HTML,CSSで作られた静的データを使ってオリジナルテーマを作れる
  • PHPで動的にコーディングしながらオリジナルテーマを構築できる

(レベル4)GitHubが使えてチーム開発ができるレベル

  • GitHubの環境構築と基本的なコマンドが使える
  • 問題なくチーム開発を行える
  • エラーが発生しても対処できる
ZeroPlus Gateについて

プログラミング学習でこのような経験はありませんか?

  1. 目標に向けて何を学べば良いかわからない
  2. 調べても解決策が見つからない
  3. 現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

  1. なんでも相談できる専属メンター
  2. いつでも技術相談ができるプロ講師
  3. 元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

\ 学んだことをSNSでシェアしよう /

この記事の執筆者

ZeroPlus Media変種部

ZeroPlus Media編集部

ZeroPlusは、「フリーランス特化型プログラミングスクール」です。ZeroPlus Mediaでは、フリーランスとして活躍する際に役立つ有益なプログラミングやWeb制作に関する情報を発信しています。

質問について

ZeroPlus Media読者限定で質問対応をおこなっています。以下の2つの方法で質問を受け付けています。

選べる2つの質問方法

1

Google Foam(テキスト)で質問

mail

フォーム送信

メールで解答

formで質問
2

Google meet(オンラインmtg)で質問

meet

日時選択

メールを受け取る

メールからmtgに参加

meetで質問
ZeroPlus Gateについて

あなたの目的に合わせた2つのサービス

あなたの目的に合わせたZeroPlusの2つのサービス
基礎からフリーランスレベルまで本質的な学びを提供しています

完全無料!30日間で学びきれる
プログラミンスクールZeroPlus Gate

  • お金をかけずに、学習を進めたい
  • Webサイトを作れるようになりたい
  • メンターや講師に質問しながら学習したい

詳しくはこちらから

フリーランス特化型
プログラミングスクール ZeroPlus

  • プログラミング学習で悩んでいる
  • 仲間と一緒に学習したい
  • フリーランスとしての総合的な力を養いたい

詳しくはこちらから