Web制作でいらないスキルって何！？
私はもうコーディングを仕事にして6年経ちますが、この6年でコーダーに求められるスキルセットは以前より多くなっていると感じると共に、
逆に「もういらないもの」も存在するなぁと感じています。
今はWeb制作の勉強方法のノウハウも広まって、色んな立場の人が、色んなことを言っていますが、
「このスキルはWeb制作では必須！」と言われても、あなたには不要の可能性もあります。
勉強すべきことは無限にあるのに、そこに時間をかけて勉強して時間を溶かすのは、嫌ですよね？
今回私が話していくのは、よくある「jQueryの知識が必要です」とか「Railsの勉強は必要ないです」とか、そういうレベルではなく、一歩先を行った話をします。
Web制作コーダーとして、企業とコーディングの仕事をする際に、周りと差をつけやすい有用なスキルと、逆に不必要なスキル
こういった観点に絞った話になるので、
コーディングをメインにバリバリ稼いでいきたいっす！！
こういった方には、今回の内容を見ていただくことで、学習の遠回りをすることがなくなると共に、どこまで学習すればいいのかも分かるようになるので、
ぜひ最後まで見てほしいと思います。
特に今回紹介する差がつけられるスキルは、昨今学習者が多いにも関わらずここまでできていない人が多いので、今から身につけられれば結構いいところまで行くと思います。
この記事を書いたのは
しょーご（@samurabrass）
当ブログ「しょーごログ」の運営者。2018年からWeb制作・フロントエンドエンジニアとして主にWordPressでのサイト制作やシステム開発のフロントエンドを担当。同時にブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行い、スクール講師を4年以上している経験を活かした分かりやすい記事制作を心がけている。
＼現役エンジニアのレビュー付き／
実践レベルのコーディング課題公開中
- デザインカンプからのコーディングを経験したい
- 現役エンジニアのレビューを受けてみたい
- 即戦力級のポートフォリオを用意したい
2024年にデザインを完全リニューアルしています！
コーディングに自身をつけるにはプロからのレビューを貰うのが必須なため、制作会社も利用するレビューツールで添削をしています。
Web制作学習ロードマップにも取り入れているため、学習終了まで迷わず進むことが可能です。コーディングを本気で仕事したい方はぜひご活用ください！
＼無料の入門編から本格企業サイトまで／
Web制作で当たり前に必要なスキル
ここはどのサイトでも書いてあることなので、簡単にまとめる程度にします。
この程度のことはできておくのを前提に、今回は話を進めていきます。
- HTML/CSSでデザインカンプからのコーディングができる
- jQueryやJSで動きをつけられて、ライブラリも導入できる
- WordPressでオリジナルテーマが作れる
- Sassを使える
- サーバーにサイトを公開できる
これらが最低限できた上で、その先の話をここからしていきます。
Web制作であると差がつけられるスキル
差がつけられるスキル❶セマンティック・コーディングの知識と実践
このブログでは何回も言及していることですが、正しくHTMLタグを使い分けることは、コーディングを主戦場にする以上、めちゃくちゃ大事です。
例えばこちらの２つのコーディングを見比べてほしいんですが、明らかに右のセマンティックコーディングの方が、
各HTMLタグの意味がパッと見て分かるので、サイトの構造も把握しやすいですよね？
ポイントを言語化すると、
- header、footerタグ
- navタグで主要なナビゲーションの位置を指定
- リストにはliタグ
- メインコンテンツにはmainタグ
- 各セクションにはsectionタグ
- section内の見出しにはhタグ
このようにセマンティックなコーディングは機械が読みやすいだけでなく、人間にとっても読みやすい上にすぐ実践できるので、
コーダーなら当たり前のようにできてほしい技術です。
う〜ん、でもこれぐらい誰でもできるのでは？
とよく私の記事を見てくださるような方は思われるかもしれませんが、全くそんなことはありません笑
これは言うか直前まで迷ったんですが・・・もう数年経ったので時効とさせてください笑
以前メガベンチャーでバックエンドエンジニアをされてた方のHTMLを引き継いだことがあるんですが、そのときはdiv以外のタグをほぼ見ませんでしたw
もちろんその方はフロントエンド初心者だったのもありますが、現場レベルでもセマンティックでないコードは意外にあるというのは事実だと思います。
システム開発案件だと、バックエンドの方がフロントも書いてる時に遭遇しますかね。
ここで、簡単にセマンティック・コーディング上重要なタグを、実際の使用例の画像と共に、まとめてみます。
| HTML要素 | 説明 |
|---|---|
| article | 内容が完結・独立したコンテンツを表す。記事など。 |
| aside | メインコンテンツとの関連性が低く、補足的な情報であるセクションを表す。 |
| main | 文書の主要な内容を表す。1ページに一つまで。 |
| nav | ナビゲーションリンクであることを表す。主要なリンクに使う。 |
| section | 文書のまとまりを作るための汎用的なタグ。見出しを持つことを推奨。 |
意識すれば今日から実践できるレベルの話なので、是非コーディングする際は徹底していただければと思います。
詳しくは以前出した「Web制作の実案件やスクール課題でよく指摘されるミスと解決方法を徹底解説！」で解説しているので、そちらを見てみてください。
hタグの正しい使い方なども解説しています。
差がつけられるスキル❷Gulp,Webpackなどのビルドツール
まずはこちらのグラフを御覧ください。
こちらはastro、esbuild、gulp、vite、webpackの5つの、ここ二年間の使用率の推移になるんですが、現状トップはwebpackになっています。
こう見るとwebpackもgulpも緩やかに下降し始めてるのが分かりますかね？
え！？じゃあどっちもオワコン化してるってこと！？
と思われるかもしれませんが、Web制作の業界に限って言えば、どちらも全然現役で使われています。
このグラフはフロントエンド開発なども入ってくるので、Web制作業界の現状とはちょっと違っていますね。
確かにGulpに関しては古くなってきてて、新規プロジェクトでは採用されにくく、どちらかと言うと保守運用などで触る機会の方が多いかもしれませんが、
それでもWeb制作案件では出くわす可能性は全然あります。
また、Webpackに関してはWeb制作会社も全然使っている状況です。
むしろ先程のグラフで上がってきているesbuildやViteを導入している制作会社の方が国内では少ない印象ですね。どちらかと言うとアプリ開発向けですからね。
実務では自分でビルドツールを使う機会もあれば、先方から開発環境を共有してもらって、そこで開発する機会もあるので、
高度な処理をさせるよりも、理想を言えばGulpもWebpackも両方とも簡単に仕組みを理解しておいて、動かせる状態にしておくといいかと思います。
できるようにしたい処理
- dart-sassのコンパイル
- ソースマップ作成
- ベンダープレフィックスの自動付与
- メディアクエリを一つに纏める
- ライブリロード
- ローカルサーバー立ち上げ
- キャッシュバスティング
このあたりの処理がかければ十分かなと思います。
GulpやWebpackの学び方としては、私がおすすめしているデイトラWeb制作コース
を受講している人であれば、カリキュラム内にGulpがあるのでそれを行えばいいと思います。
Gulpに関してはネット上に情報が多いので、独学でも問題ないかと思いますが、いろんな人が躓くのがGulpよりもWebpackの方ですかね。
ちょうど分かりやすいブログ記事があるので、こちらを見てもらえれば導入は問題なく行えるかと思います。
ポイントとして、実際の案件でビルドツールが共有される際は、動かし方や処理の意図などがまとまったドキュメントを一緒にシェアされることが多いですが、
基本的な処理を自分で実装できると、それを見て理解できるようになるので、是非両方触ってみてください。
差がつけられるスキル❸CSS設計の実践
CSS設計はマストで必要な知識ですが、有名なのでおそらくこれをご覧になるような方は、既になんらかの設計思想や命名規則を使ったことがあるかもしれないです。
中規模以上のサイトだとよくあるのは、命名規則にBEMを改良したMindBEMding、設計思想にFLOCSSを取り入れる例ですね。
MindBEMdingは、nav__link–activeみたいに命名する規則のことですね。
CSS設計は、例えば私のコーディング練習課題で言えば、「【中級】デザインカンプからのコーディング実践演習」ぐらいの、
デザインカンプからのコーディングを2,3件やってきて、慣れてきたあたりから導入するといいかと思います。
順序としては、まずMindBEMdingを使ってみて、その後に複数ページを構築する段階になってから、設計思想を取り入れてみるといいかと思います。
- OOCSS
- SMACSS
- FLOCSS
様々あります。よく
おすすめの設計思想はどれですか？
と聞かれるのですが、正直万能な設計思想は無いです。
例えばペラページのLPにFLOCSSを導入するのは、オーバースペックだと言えますし、FLOCSSは、class名が長くなりソースコードが見づらくなったり、レイヤー分けに迷うという悩ましいデメリットもあります。
ただ、CSS設計思想の重要な考え方を学べるという点で、個人的には「SMACSS」と「FLOCSS」の２つは学んでおくと、大体どんなプロジェクトでも対応できる肌感があります。
実際の中規模サイト案件のSassのディレクトリ構成を見ると、どちらかの形式が多い印象です。
CSS設計の学び方
書籍でまず考えかたを学ぶのが一番良いかと思います。
読んでほしいおすすめ本は2冊あって、個人的にはこれから紹介する順番に読むとかなり理解が深まるかと思います。
まずは「CSS設計の教科書」を読むのがいいかと思います。
2014年に書かれた本ではありますが、 CSS設計の根幹の部分は今でもこの本が一番分かりやすいので、導入に読む本としては最適です。
ただ具体例が少ない弱点があるので、そこは次の、「CSS設計完全ガイド」で、もう少し実践的な活用例を見ていくことで保管できます。
著者の半田さんは「PRECSS」という設計思想の開発者ですね。
この本ではとにかく実例がたくさん載っていて、Webサイトの各パーツごとBEMやPRECSSだったらどう書くかをたくさん学ぶことができます。
コーディングをしつつ、「CSS設計完全ガイド」を辞書のように引きながら実装することで自分のものにできるので、一回読了したら、デザインカンプからのコーディングと平行して使用するのがいいかなと思ってます。
ポイントとして、実際の制作現場では著名なCSS設計思想をそのまま使うよりも、カスタマイズして使うことが多いです。
よって、各設計に共通している、根本の思想を理解するほうが大事なので、紹介した本を読みつつ考え方をメインにマスターしてもらえればと思います。
また、CSS設計思想については以前動画でも紹介しているので、こちらも後で見てみてください。
差がつけられるスキル❹Git、Githubの理解と実践
GitとGithubを簡単に説明すると、「ソースコードのバージョン管理」を行う技術です。
厳密には、Gitを使って、「Github」「Gitlab」「Bitbucket」といったプラットフォーム上でソースコードを管理します。
なんでGitが必要なんだろう？
と思われるかもしれませんが、バージョン管理をすることによって、
- 以前の状態に簡単に戻すことができる
- チーム開発中に、お互いのコードの変更点を取り入れながら開発ができる
こういったメリットがあります。
Web制作の現場でも使われることがままあるので、まずは個人レベルで使えるようにしておくのが大事かなと思います。
学習して実践するタイミングとしては、デザインカンプからのコーディングに慣れてきたタイミング、私のコーディング練習課題で言えば「【上級】デザインカンプからのコーディング実践演習」、
デイトラをされてる方だったら、カリキュラム内にGit講座があるので、卒業制作をGitで管理しつつ開発すると良いかと思います。
Gitは本来コマンドで操作するんですが、実はこれができる必要はあまりなくて、「SourceTree」などのツールを使えば簡単にGitを使うことができます。
あとは、実際にGitを使う際は、「Github Flow」というシンプルなワークフローを使うのがおすすめです。
基本的にmasterブランチとfeatureブランチしか無くて、機能毎にfeatureブランチを切って開発をして、プルリクエストを出してmasterにマージし、またfeatureブランチを切る運用です。
いや何言ってるか全然わからん！！
と思われたかもなので、Gti学習のおすすめ本を紹介します。こちらを読みつつ、「Github Flowを実践すればいいんだな」と思っておいてくれればいいです。
Git学習のおすすめ本
まずは鉄板の「改訂2版 わかばちゃんと学ぶ Git使い方入門」を読まれるのがいいかと思います。
この本ではマンガ形式で楽しく学べる上に、SourceTreeを使ってGitの超基礎を学べるのがおすすめポイントですね。まずは始めに一冊に読んでほしいです。
もちろんコマンドも一緒に載っているので、両方練習することができます。
その後は、「Gitが、おもしろいほどわかる基本の使い方33」がおすすめですね。
この本では実際にチーム開発をする時にどういったブランチ運用をするべきかなど、わかばちゃん本より一歩進んだ運用について教えてくれるので、
この本を読みつつ実践できるといいかと思います。
差がつけられるスキル❺Photoshopやイラレからのコーディング経験
最近はFigmaデザインが増えてきたように見えて、結構な数のWeb制作会社がまだPhotoshopやイラレでカンプを作って、コーディングしてます。
なので、案件募集や採用文を見ていても、まだまだPhotoshopやイラレからのコーディング経験を求めているところが多いのが現状で、
クラウドソーシングでもデザインはPhotoshopであることが多いです。
まあでも案件でフォトショ、イラレのデザイン来てから勉強すれば問題ないっしょ！
と思われるかもしれませんが、Photoshopやイラレからコーディングするのは、Figmaより結構難しいですし、そういうデザインは納期も短い印象です…
私の場合、最初の制作会社の案件がPhotoshopからのコーディングで、初案件なのに初めてのことが多すぎてもう発狂しそうでした笑
その問題を解決するために、私の方でも「Photoshopデザインカンプからのコーディング練習課題」という難しめの課題を出してます。
練習題材はなんでもいいんですが、とにかく一回はPhotoshopやイラレで作られたデザインからコーディングする経験をしておくのがいいんじゃないかと思いますね。
ぶっつけ本番は結構怖いです。
Adobe CCを最安で契約する方法も解説しているので、こちらで是非準備しておいてください。
Web制作でいらないスキル(あっても微妙)
いらないスキルについてはあまり話されないので、こちらの方が興味ある人は多いかもですね。
いらないスキル❶EJSやPug
EJSもPugもテンプレートエンジンと呼ばれるもので、簡単に言うとHTMLをもっとスマートにかける言語という認識です。
例えばHTMLでこのようなコードがあったとします。
<!DOCTYPE html>
<html>
<head>
<title>User Profile</title>
</head>
<body>
<div id="username"> <!-- ここにユーザー名が表示されます --></div>
<script>
// JavaScriptを使用してユーザー名を設定
document.getElementById('username').innerText = 'ユーザー名';
</script>
</body>
</html>これをejsとpugで記載すると、このようになります。
特にpugで顕著ですが、記述がかなり簡略化されてますよね。
ejsやpugには変数やコンポーネントの概念があるので、例えばヘッダーやフッターなどの各ページ共通のパーツをWordPressのように一括管理できたりして便利です。
ただ、実際に案件で使われているかと言うと、微妙ですね…
一時期私も
pug書くの気持ちえぇ〜！！
ってなってた時期があるんですが、結局自分が書けても、引き継ぐ人がpugを書けなくてプロジェクトの負債になったこともあったので、今はあまり使ってないです。
Webアプリ開発でもPugから乗り換える人が増えてるので、わざわざ新しく導入することは少ないと思います。
いらないスキル❷NoCodeスキル
最初に断っておくと、STUDIOなどのNoCode自体はWeb制作で全然使えます。
特にエンド案件を中心に獲得したいなら、是非学ぶべきだと思います。
ただ、今回の私の話の観点は
コーダーとして、企業とコーディングの仕事をする際に必要、不必要なスキル
なので、この場合は微妙と言わざるを得ないかなと思います。
もちろんNoCodeをゴリゴリ使ってる会社と組む場合はこの限りではないと思いますが、多くの制作会社はコーディング業務をメインに外注したいと思っているので、
NoCodeを勉強するより、目の前のHTML.CSSスキルを固めるのが、コーダーとして制作会社と仕事をする場合は優先されます。
ちょっと余談なんですが、
STUDIOである程度なんでもできるし、コーディングもWordPressを使う必要性があまり無いでしょ！
こう考える実装者が若干増えてきたように感じるので、そのあたりの解説もしています。
いらないスキル❸中途半端なマーケティング知識
Web制作を勉強していると、いろんな誘惑があるせいで、
コーディングだけでなく、マーケティングも勉強しないとなのかな？
と思う方も多いと思います。私も駆け出しのときは意味も無くいろんなマーケティング本を読みまくってました。
ただ、個人的には制作会社と仕事をする場合は、不要と考えてます。
そもそもマーケティングスキルは、自分で売るものがあって初めて上達するものなので、何も持っていない状態で学んでも「猫に小判状態」になるだけですよね。
もちろん、エンド案件の場合はサイトを作るだけでなく、その後の集客や運用まで提案できるようになるのでマーケティング知識も重要なんですが、
制作会社と仕事をする場合は「コーディングスキルとコミュニケーションスキルが全て」なので、
マーケティングを学ぶ時間があれば、CSS設計やアクセシビリティなどをアウトプットしたほうが、数倍効率の良い時間の使い方と言えます。
Web制作での最重要、絶対に必要なスキル
ここまでいろんなスキルの話をしてきましたが、最後に私がWeb制作者に一番重要だと考えているスキルの話をして終わろうと思います。
それは、
デザインカンプを忠実に再現できる、HTML/CSSスキルです。
確かに昨今の初学者に求められるスキルは多様化してきていて、大変です。
ただ、どんなにビルドツールで複雑な処理をさせてようが、JavaScriptで高度な実装ができようが、
デザインカンプ通りにHTML/CSSでコーディングもできないコーダーには、言葉がきつくなり申し訳ないですが、仕事は来ないです。
いや、自分はデザイン通りに既にコーディングできますよ？
と思う方も多いと思いますが、本当に短い納期の中、修正点無く仕上げられる自信はありますか？
拡張機能「PerfectPixel」を使ったピクセルパーフェクトを実践できたことがありますか？
コーディングの発注側目線で一番大きく負担を感じるのは「初稿の時点での完成度が低い」時です。
確実に頭を抱えて、ため息をついてしまう瞬間です。
そういう初稿を出すコーダーは、二回目以降は案件の話がプッツリ来なくなります。
フリーランスはもちろん、副業であっても、安定して案件を取っている制作者のほとんどは紹介や継続で案件を回しているので、
信用が下がるようなコーディングは自分の首を締めることになります。
その悲劇を防ぐためにも、案件前に、プロに自分のコーディングしたものを見てもらうべきだと思っていて、
手前味噌ですが、私の出しているコーディング練習課題では、ただコーディングをするだけでなく、徹底したレビューをつけています。
また、初稿提出前に、配布したセルフチェックポイントをもとに、徹底した確認を行ってもらい、品質管理の意識も高められるように設計しています。
もちろん他の課題でもいいですが、是非プロにちゃんとレビューを受けてから、実務に出ることを推奨したいです。
色々なスキルが求められる時代だからこそ、基礎のHTML/CSSがちゃんと書けることが一番重要であることが伝われば、嬉しく思います。
HTML初心者からWordPress実案件レベルまでのコーディング演習課題を「専用ページ」にて公開しています。
- Figma,Photoshopデザインからのコーディング
- サーバーアップロードでサイト公開
- プロによる最大3回の表示確認特典
- レビュー返しは爆速
- 2024年にデザイン刷新！被らないポートフォリオ
「初級編」は初めてデザインからコーディングする方向け
「中級編」はJavaScriptやjQueryの練習
「上級編」はWordPressの実案件を模擬体験できるレベル感にしています。
中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。
全課題で「実務レベルの、プロの厳しいレビュー」を受けられるようにしています。
また、2024年には随時デザインの刷新をしており、完全リニューアル！！
他者と差をつけられるポートフォリオが準備できます！
制作会社も使用する専用レビューツールで分かりやすく添削していきます！
基本的に「まとめて購入」していただくとかなりお得になります↓
コーディングは書籍だけではなかなか実力がつかないので、実務レベルのレビューを受けて自身をつけたい人は是非挑戦してみてください！
＼課題の購入はこちらから／
ご寄付を頂けると今後の更新の励みになります！
