【完全版】WEB制作に必要な９つのスキルと学び方。現場から解説
どうも、トマトと申します。現在WEB制作会社でWEBエンジニアとして働いています、今回はWEB制作に必要なスキルは何か？について現場から新鮮な情報をお届けしたいと思います。
この記事では、WEB制作に必要なスキルと学び方について解説しています。この記事を書いている私自身WEB制作に濃く携わる者であり現場の人間になりますので、記事の質には自信があります。
私が働くWEB制作会社での経験を参考に書いています、一部WEB制作会社や人によって考え方が異なる部分はあるかと思います。あと、ここで紹介したスキルを「全て」覚える必要はありません（WEB制作は基本的に分担制です）
①：HTML（マークアップ）
WEB制作といえばHTML、この業界でご飯を食べる人なら誰しも使える必須スキル。ホームページの構造を作るためのマークアップ言語であり、これだけ覚えておけば簡単なWEBサイトは誰でも作る事ができます。
私も最初はHTMLから勉強した口で、学習コストがかなり低くこれだけなら独学で十分学ぶことができます。ただ、[学習のハードルが低い = 皆使える]ということなので、バイトや就職時に「HTMLが使える！」というアピールには使えません、配送屋さんが「普通免許持ってます！」と言っているようなもの。
学び方について
「ドットインストール」や「プロゲート」を使って基礎を学んだら、既存のサイトをひたすら真似て作ってみる、１週間もあれば余裕で学びきれますし、必要な情報は全てネットで探せば落ちています（ググる力を身に付けよう）
②：CSS（スタイル）
先ほどのHTMLと一緒に学ぶべきこのCSSはホームページの装飾で使います、HTMLだけで作るホームページは洒落っ気がありませんが、そこにCSSを使ったスタイルを施すと今時のオシャレなサイトに生まれ変わります。
CSSは文字色や背景色を変えたり位置を調整する以外にも、最近ではアニメーションを付与する役割も担います、スクロールしたら左や右から要素が飛び出てきたり、マウスアクションで星が流れたり玉を転がしたり色々できるようになっています。
学び方について
先ほどのHTMLと同じ手順でセットで学んでいけばOK、これも必須スキルなので使えて当たり前の感覚てお願いします。CSSアニメーションはクオリティが高いものが作れるならスキルとしてアピール可能です（最近のトレンドです）
③：グラフィック編集（画像加工）
WEB制作においてグラフィック編集はかなり大事で、HTML/CSSを使ったコーディング作業時など、使用する画像素材を自分で加工して使える形にすることが頻繁にあります。
ここでいうグラフィック編集（画像加工）に高度なスキルは必要ありません、WEB制作で使われる画像編集ソフト「Photoshop」の基本的な使い方（リサイズ・切り抜き・文字加工など）を理解していれば大丈夫です、可能であれば「Illustrator」も使えるといいですが必須ではありません（私は使ったことないです）
学び方について
HTML/CSSを使って既存サイトを真似て作る際に使用する画像を編集すればOKです、フリー画像を落としてきてそれを切り抜いて書き出したり、組合わせたりしているうちに覚えます（ソフト動かさないと覚えづらいです）
④：WEBデザイン
WEB制作にはWEBデザインが必須、仕事では必ずといっていいほどデザイナーと一緒に仕事をすることになります。WEB制作における役割分担は「指示を出す人」「デザインを作る人」「デザインを元にホームページを作る人」なので（ざっくりね）その重要度は明らか。
WEBデザインは言わばホームページの設計書でありサイトの良し悪しの決め手となります、がゆえに社内含めクライアントと打ち合わせが一番多い分野でもあります、デザインにも「スマホ用デザイン」「売るためのデザイン」「見（魅）せるデザイン」があり極めるとなるとかなり時間がかかります。
学び方について
私はデザイナーではないのでWEBデザイナーとして働く２人からのアドバイスになります。一人は専門学校（スクール）に通って基礎を学んで、知り合いから仕事を受注して経験を積んで、込み入ったところはWEB制作会社でコーディング（HTML/CSS）しつつ働きながら学んでWEBデザイナーの位置を確立したみたいです。
もう一人は、コーディングを独学しWEB制作会社にバイトで入り、「画像加工」→「アイコン作成」→「バナー作成」→「パンフレット作成」→「サイトデザイン作成」といった感じで小さいところから地道に積み上げて学んでいったみたいです。
⑤：JavaScript（プログラミング）
WEB制作ではJavaScript（以下：JS）を使って「動きのあるサイト」にするのが最近のトレンドです、先ほど少しだけ触れたCSSアニメーションに近いです、複数の円を動かしてお洒落にしたり（サンプル）、線を繋げてマウスアクションで動きを付けたり（サンプル）色々出来ます。
アニメーションに関わらず色々なところで使われるプログラミング言語なので、使えるだけで評価されますし、WEB制作以外にもWEBエンジニアとしても活路を見出せる最強のツールかもしれません、実際に私も仕事でよく使います。
学び方について
これも基礎は「ドットインストール」や「プロゲート」を使って学ぶとして、HTML/CSS/JSのセットで覚えておくのがオススメです。基礎を学んでJSの専用ライブラリ（プログラムをパッケージ化して使いやすくしたもの）をそつなく使えるようなら実務でも活躍できるかと思います。
⑥：PHP&SQL（プログラミング）
先ほど挙げたJavaScriptとは別にサーバーサイド言語であるPHPが使えるとWEB制作では便利です、サイトを制作時によく作るお問い合わせメールフォームもPHPを使って実装する事も多いです。
PHPと一緒にSQLと呼ばれるデータベース系の言語も使えると尚良し、ただ、これに関しては必須ではないかなと、WEB制作レベルでデータベースをゴニョゴニョする機会ってあまりないんですよね、WEBアプリ・ツール制作なら割と使いますが。
学び方について
PHPはプログラミング言語の中でも比較的学びやすく、基礎習得までの手順もJSと同じで大丈夫です、レベルとしてはECサイト（通販サイト）を自作できるくらいですかね、これもネットに全て情報は落ちているので独学で完結可能。
⑦：WordPress（CMS）
ここ最近のWEB制作事情はWordPressと呼ばれるCMS（コンテンツマネジメントシステム）を使った制作が主流で、これを使えば作業工程が減るのでコスト（費用）をかなり抑えられるという背景があります、世界中で作られるサイトの半分以上はWordPressってんだから驚き。
学び方について
実際にWordPressを使ってブログを作ってみるのがオススメ、このブログが良い例です、学んだことは記事にして備忘録に残しています、自分でブログを作るとレンタルサーバーやドメインなどWEBの知識も深まります、これは今でも活きています（ポイントはお金をかけてやること）
⑧：WEBライティング（コンテンツ）
お洒落なサイトを作ってもそれはただの入れ物なわけで、大事なのは中身です、中身とはコンテンツであり文章です、そこで活躍するのがWEBライティングです、サイト内にある文章という文章を考える役割を担います。
といっても、大体はライターの方に外注したりするのでこの記事を読むあなたが今から学ぶことではないかなと、ここではWEB制作にはWEBライティングも深く関わっているんだということを理解しておけば大丈夫です。
学び方について
とりあえず「沈黙のWebライティング」は必読として、一番効果的なのは実際に書くことです。😂、、、私が働く会社にもライター兼コーダーの方がいて、ライターとして独立して辞めてしまったので今はいませんが、その人も書いて修正を繰り返すうちに分かるようになるって言ってました。
先ほど紹介したWordPressでブログを作って、ブログを更新してライティングスキルを身に付ける、これなら色々と学べて効率が良い気がします（まさに私がそのやり方）
⑨：SEO＆WEBマーケティング
サイトはただ作ればいいってものではありません、商品紹介のLP（ランディングページ）ならそこから購買に繋がる工夫が大事、サイトを通して仕事を受注したいなら成約率の高いユーザーに目が届くようにしなければならない。
サイトは誰かの行動を促して初めて価値が生まれます。
学び方について
これも「沈黙のWebマーケティング」がオススメ、このシリーズは初心者でも分かりやすくて本当にオススメ。知り合いのサイト運営を手伝ったり、自分のブログのアクセスを増やす方法を考え実践すると尚良し、そこで結果を出せればそれは客観的に評価できるものとなります。
まとめ
最初に言ったように、今紹介したスキルを全て学ぶ必要はありません（WEB制作は分担作業）、制作会社で働きたいということなら「HTML/CSSと〇〇」の組み合わせで学んでいけば大丈夫です、〇〇の部分以下例。
- CSSアニメーションとJavaScript
- JavaScriptとPHP
- PHPとWordPress
- WEBデザイン
私の場合は「JavaScript」「PHP」「WordPress」が中心ですね、プログラミングに抵抗がない分これ以外のイレギュラーなものにも対応できます、こういったプラスアルファの部分がないとHTML/CSSだけじゃ働けない時代です。
私のスタイルは割とオススメで、WEB制作業界がオワコン化してもプログラミングが出来るので転職が簡単、仕事に困る事がありません、やろうと思えば在宅で働けるしフリーランスにもなれる。
以上、おつ。
他の人が読んでいる記事
飲食→派遣→IT系ベンチャーに転職。
本業をベーシックインカムとし、やりたい事に挑戦するWebエンジニア。