Web業界に転職する方法!Web業界の仕事、必要スキル、学習方法を解説

スポンサーリンク
この記事は約15分で読めます。

ECサイトやSNS、オウンドメディアなど、話題のWeb業界。

僕は31歳のときに未経験でWeb業界に転職し、客先常駐社員として2社でWeb制作の現場を経験しました。

当時の常駐先は大手ITソリューション会社と大手ITメーカー。
1社目はWebディレクターを1年間、2社目はWebディレクターがメイン、Webデザイナー・フロントエンドエンジニアを兼任という形で1年間働きました。

そして、2020年10月に33歳で未経験でWebマーケターに転職し、現在に至ります。

そこで今回は、Web業界を目指している人や、副業やフリーランスでWeb業界の仕事を考えている人に向けて、Web業界の仕事内容や必要スキル・知識について詳しく話したいと思います。

未経験からWeb業界で働くために必要な学習方法も紹介しますので参考になれば嬉しいです。

Web業界に転職する方法!Web業界の仕事、必要スキル、学習方法を解説

スポンサーリンク

Web業界とは?

Web業界はIT業界の一部で、インターネット上で便利なサービスを提供する業界です。

企業のホームページから、YouTube、Twitter、Instagram、Facebook、TikTokなどのSNS、Amazonや楽天市場などの通販サイト、食べログや転職会議などの口コミサイト、ProgateやUdemyなどのeラーニングサービス、ランサーズやクラウドワークスなどのスキルシェアサービスなど多岐に渡ります。

また、比較的ベンチャー企業が多い業界でもあります。

スポンサーリンク

Web業界の仕事内容と必要なスキル・知識

Web業界の仕事について、職種ごとの仕事内容と、働く上で必要なスキルや知識を詳しく紹介します。

スポンサーリンク

Webデザイナー

Webデザイナーの仕事内容

Web業界の仕事で一番ピンとくるのはWebデザイナーではないでしょうか。

Webデザイナーは、Webサイト・Webサービスのユーザーが使う画面(ユーザーインターフェース)をデザインする仕事です。

ユーザーが使うWebサイトを、パソコンとスマホのそれぞれについてデザインします(PC、スマホの両対応したデザインをレスポンシブデザインと言います)。

最近はパソコンよりもスマホ利用ユーザーが多いため、スマホ前提としたデザインを作るケースも多いです。

Webデザイナーは、サイトのデザインのイメージ(現場ではデザインテイスト・デザイントンマナなどと呼ばれます)だけではなく、ユーザーが使いやすい設計・迷わない設計・サイトを訪れたユーザーの満足度を高めるデザイン(UI・UXデザインという)を理解したデザインをすることが大事です。

デザインを作るツールは、Photoshopを使って作るのが一般的で、ロゴや図形などでIllustratorを併用する感じです。
最近はプロトタイプ制作として、Adobe XDを使うようにもなりました。

また、Webデザイナーはデザイン完成図の作成だけではなく、HTML・CSS(・JavaScript)を使用したフロントエンド制作(後述のフロントエンドエンジニアの仕事内容を参照)まで担当することもあります。
これらのコーディングスキルがあると強いです。
フロントエンド制作を効率的にするデザインができるとプロジェクトをスムーズに進行できます。

Webデザイナーに必要なスキル・知識

  • Photoshop …デザインカンプ、画像の編集、サムネイル画像、バナー作成など使う機会が多い。マスト。
  • Illustrator …ロゴやアイコン作成などで使用。画像の切り出しなどの作業もあり。使えると良い。
  • Adobe XD …プロトタイプ制作ツール。Webサイトの構成案作りから使うことも。使えると良い。
  • HTML …HTML5で構築ができること。
  • CSS …CSS3が書けること。フレームワーク「Bootstrap」は使う案件が多いため使えると良い。
スポンサーリンク

Webエンジニア

Webエンジニアの仕事は大きく分けると、フロントエンドエンジニアとバックエンドエンジニアの二つに分類されます。

フロントエンドエンジニアの仕事内容

フロントエンドエンジニアは、HTML、CSS、JavaScriptを使用したユーザー操作画面を構築する仕事です。

Webデザイナーが作ったデザイン完成図(デザインカンプと呼びます)を元に、HTML・CSSといった言語でWebサイトを作ります。
HTML・CSSだけで構築する仕事はコーダーと呼ばれることがあります。

パソコンとスマホに対応させるレスポンシブ対応は必須スキルといって良いでしょう。

また、JavaScriptを使用してWebサイトに動きをつけます。

画像が切り替わる「スライダー」、スマートフォン向け「ハンバーガーメニュー」(ページ上部にある「三」の形をしたデザイン)、タップすると開閉する「アコーディオンパネル」、ページをスクロールするとフワッと現れる「トップへ戻るボタン」、タブ切り替えなどを実装します。

フロントエンドエンジニアに必要なスキル・知識

  • HTML …HTML5を使用した構築ができること。
  • CSS …CSS3が書けること。フレームワーク「Bootstrap」を使う現場が多い。ブラウザごとの表示差異をなくす対応、拡張CSSのSassが使えると良い。
  • JavaScript …ライブラリ「jQuery」やフレームワーク「React・Vue・Angular」などは案件により異なる。
  • WinMergeなどの差分チェックツールが使える
  • Git …中規模〜大規模案件でのバージョン管理に使用。現場による。

バックエンドエンジニアの仕事内容

バックエンドエンジニアは、Webサイトの申し込みフォームや、会員登録システム、管理者向けのデータベース画面といったシステム開発をする仕事です。

主にPHP、Ruby、Node.js(サーバーサイドのJavaScript)、Pythonなどのプログラミング言語が用いられます。

データベースと連携する技術も多く、MySQLなどのデータベースを扱うスキルが必要です。

バックエンドエンジニアに必要なスキル・知識

バックエンドエンジニアは、案件によってPHP、Ruby、Node.js、Pythonなど、主となるスキルが大きく変わります。
そのため、目指しているWebサービスに応じて必要スキルを調べるのが良いです。

※また、バックエンドエンジニアは僕の専門外のため、概要説明になってしまっています。スミマセン。

スポンサーリンク

Webディレクター

Webディレクターの仕事内容

Webディレクターはプロジェクトを進める司令塔のようなポジションです。

クライアントの要望を聞いて、フォーム開発の有無やCMS(クライアントで簡単に更新できる機能)などの仕様を決めたり、Webサイトの設計書(構成案)を作ります。

大規模案件だとコンペとなることもあり、その場合は提案書をパート別に分けて、複数人がかりで100枚を超える提案書に仕上げるなんてこともあります。

また、工数や予算を算出してスケジュールを組み、アサインするメンバーや外注先を決めて、プロジェクトの進行管理を行います。

提案が通り、仕様が固まったら、案件が動き出します。

まずはWebデザイナーにWebサイトの設計書やクライアント要望のトンマナに沿ってデザイン案を作ってもらいます。
A案・B案といったデザインを2案作って、クライアントにデザインの方向性を確認することが多いです。
パソコン版だけデザインを作り、スマホ版のデザインについてはWebサイト構築時に確認となるケースが多いです。

デザインが決まったら、フロントエンドエンジニアにWebサイトを構築してもらいます。

納品前の品質チェックもWebディレクターの仕事です。
デザイン通りにWebページが作られているか、デバイスやブラウザごとのWeb上での動きやスマホデザインは適切か、リンク先は間違いないか、パラメータタグは適切か、titleやdescriptionの記述は適切か、ソースコード上でエラーは出ていないかなどのチェックを行います。

Webディレクターは複数のプロジェクトを同時に進めることが多いです。

クライアントとの要件定義や提案、交渉などをメインで担当するWebプランナーというポジションがある場合があります。
また、大規模な現場だと、複数のWebディレクターを統括するプロジェクトマネージャーを立てることもあります。

WebデザイナーやWebエンジニアからWebディレクターになる場合が多いですが、僕のように未経験から転職できる場合もあります。

Webディレクターに必要なスキル

  • サーバーやドメインに関する知識
  • FTPが使えること。WordPressなどのCMSが更新できること
  • WordPressやMovable TypeなどのCMSに関する知識
  • UI・UXなどデザインに関する知識
  • Google Chromeなどのデベロッパーツールを使用したデバッグ手法が分かる
  • フロントエンド開発の概要が分かる
  • フォーム開発や会員システム開発などのバックエンド開発の概要が分かる
  • 文字校正
  • WinMergeなどの差分チェックツールが使える
スポンサーリンク

Webマーケター

Webマーケターの仕事内容

Webマーケターは企業の売上やブランディングに直結する仕事です。

Googleなどの検索エンジンからの自然検索での流入を増やすSEO、Webサイトのアクセス解析、LP(ランディングページ)の最適化、フォームの最適化、SNS運用、Web広告やSNS広告などの手法を使って、集客、ブランディング、売上につなげます。

最近では、自社メディアを使ったブログ発信など、コンテンツマーケティングが重視されています。

Webマーケターに必要なスキル

  • キーワード選定やサイトの評価を上げるSEOに関する知識
  • Google Analyticsでのアクセス解析
  • Search Consoleに関する知識
  • ヒートマップを用いたサイト改善に関する知識
  • ブログ運用、SNS運用に関するノウハウ
  • Google AdWordsやFacebook広告、インスタグラム広告、ツイッター広告など広告に関する知識
  • その他、ユーザーニーズを調査したりコンテンツ作りに関する知識
スポンサーリンク

Web業界で働くには何から始めたら良いのか?

Web業界の仕事は広く、職種間の境目があいまいな場合も多いです。

例えば、Webデザイナーがフロントエンド構築まで担当するケース、逆にフロントエンドエンジニアが画像編集などを任される場合や、Webディレクターがデザインやコーディングまで担当するケースなど、職場や案件によってさまざま。

そのため、目指したい職種+Webに関する広い基礎知識を持っておくと役に立ちます。

僕がオススメするのは、次のステップです。

レベル0

インターネットやサーバーやドメインのこと、HTML・CSS・JavaScriptなどの技術など、Webの仕組みを理解しましょう。

今さら人に聞けないWebの仕組みがわかりやすくまとまっていてオススメです。
2021年現在、全12話が公開されていますので、すべて読みましょう。
内容が理解できるまで2〜3回読むと概要が掴めて良いと思います。

レベル1

HTML、CSSを使ったWebサイトの作り方を理解をする。

ProgateのHTML & CSSコースを一通りやってみることでWeb制作の基本が分かると思います。

この段階では、Web制作に関わる技術がどう使われているのか、制作時の雰囲気を掴むようにすると良いです。

完璧は目指さず、ある程度理解できたら次のステップに進みましょう。

レベル2

JavaScriptやGoogle Chromeのデベロッパーツールの使い方を理解する。

こちらもProgateを利用すると良いです。

JavaScriptコース、jQueryコース、検証ツールの使い方が参考になります。

HTML、CSSよりもレベルが高く難しく感じる場面も多いと思います。

完璧ではなくて良いのでこちらも技術の理解や雰囲気を掴むようにすると良いです。

レベル3

独自ドメインとサーバーを契約して、Webサイトの公開スキルを習得する。

※サーバーは次のステップを見越してWordPress対応のものを選びましょう。

ドメイン取得はお名前.com、サーバーはエックスサーバーがオススメ。

FTPはFileZilla(WindowsならFFFTP、WinSCPもあり)などの一般的なFTPソフトを使えばいいです。
FTPについてはHTMLの書き換えは難しくない? FTPを使って更新してみようで流れが分かると思います。

まずはProgateの学習で作ったサンプルをサーバーにアップして公開してみましょう。

この段階から、ポートフォリオ作りを意識していきましょう。
これまでに学習してきた内容をアレンジする形で自分で一から作ると良いです。

不明なところはググって調べたり、一つ前のステップに戻って学習し直すなどしながら、着実に前に進んでいきましょう。

ロゴや画像作成をすることでWebデザインスキルを身につけたり、Webサイトを構築してフロントエンド開発スキルを身につけるなどを実践していきます。
Adobeを契約してまずはPhotoshopの使い方を覚えると良いです。

Photoshopの使い方はゼロからのPhotoshopの使い方が分かりやすくまとまっていてオススメです。

Webサイト構築では、BootstrapやjQueryを使うとより実践的です。

レベル4

レベル4では、CMSを使えるようにしましょう。

まずはCMSの代表であるWordPressをインストールして、テーマを選びブログサイトを作ります。

Google AnalyticsやSearch Consoleなどの基本的な設定やフォームの設置、プラグインの選定など、Webサイトを構築しましょう。

実際にブログ投稿をすることで得られることが多いので、週1回の投稿を半年くらい続けてみるといいです。

Google AnalyticsやSearch Consoleの使い方にも慣れておくと色々と役立ちます。

レベル5

レベル5では、目指すキャリアを決めて、そこに向けた成果物を作っていきましょう。

Webデザイナー・フロントエンド開発向け
WordPressで自作のテーマを作ってみるのがオススメ。

WordPressの自作テーマを作ることで、Webデザイン、フロントエンド開発、PHPなどの総合的なスキルが身につきます。

Adobe XDを使ってWebサイトのデザインの設計書(構成案)作りからはじめて、Photoshopでデザインカンプを作成。
HTML・CSS・JavaScriptなどの仕様を決めて、WordPressのテンプレート化(PHP)をする。
ここまでするとスキルがグッと上がります。

WordPressのテーマ作りについては学習テキスト『WordPressデザインブック』がオススメです。

フロントエンドエンジニアを目指す場合、上記に加えて、目指すサービスに合わせてReact・Vue・Angularなどを学習すると良いです。
また、バージョン管理用にGitも勉強しましょう。

Webマーケター向け
マーケティングの視点を持ったコンテンツ作りをすることが大事です。

コンテンツ作りに関しては『沈黙のWebマーケティング』『沈黙のWebライティング』が非常にオススメです。

最低でも半年、長くて1年のブログ運営をしてみましょう。
運用していく中でGoogle Analytics、Search Consoleといったアクセス解析・キーワード解析ツールの基本操作ができるようにすると良いです。

広告運用を目指す場合、Google Adwords、Twitter広告、Facebook広告などにミニマムの金額で実際に出稿してみましょう。

Webディレクター向け
Webディレクターの場合、レベル5はフリースキル枠です。
自分の志向に併せて各職種のスキルを習得すると良いと思います。

※Webディレクターはここまでの知識・スキルは求められないケースが多いですが、自己学習でWebデザイン・フロントエンド開発・Webマーケティングのスキルを深堀りしておくことで仕事の質が断然高まります。より大きな仕事を任せてもらえるケースも有り、キャリアアップにつながるので学習を進めて損なしです。

進め方の補足

学習期間は3ヶ月〜1年くらいを想定して、基礎から積み上げていくのが良いです。

ここで紹介した内容はWeb全般について、基礎知識と視野を広げるための方法です。
目指す職種に応じて取捨選択したり、職種に拘った技術をつけるなどアレンジしてみてください。

スポンサーリンク

Web業界に入るための転職方法

まず、未経験でもWeb業界に入ることは十分可能です。
僕自身、31歳でWebディレクター、33歳でWebマーケターになりました。

未経験からWeb業界に転職する際の心得を紹介します。

履歴書作成の心得

履歴書は基本ルールに沿って書けば問題ないです。
写真はスピード写真でも良いので好印象のものを使用します。

志望動機は、Web業界・Web職種に興味を持った理由を必ず盛り込みましょう。

職務経歴書作成の心得

職務経歴書は過去の経験職種からWeb業界に活かせる強みをできるだけ書くことが重要です。
また、未経験でも「スキル欄」や「自主制作作品欄」を使ってアピールします。

技術スキルを書く
Webデザイナー、Webエンジニア、Webディレクターなど、応募職種に併せて必要なスキルを具体的に、できるだけ多く書きましょう。
具体例は各職種の仕事内容、必要なスキル・知識項をご確認ください。

ヒューマンスキルを書く
Web業界の仕事は、提案力、予算の見積もり力、スケジュール調整力、外注コントロール、交渉力、企画力、提案力、マネジメント力なども大きなアピール材料になります。

特にWebディレクター、Webプランナーなどの企画、提案、調整力が求められる仕事ではアピール度が大きいです。

ポートフォリオを準備するときの心得

ポートフォリオは、企画力、デザイン力、開発スキル、Webマーケティングに関するスキルなどを示す重要書類です。

未経験でWeb業界に入るには、ポートフォリオはマストと考えましょう。

作品は資料にまとめるだけでなく、独自ドメイン、サーバーを契約して作品をアップしておいて、その作品のURLを記入することでより実力を評価してもらえるようになります。

そのWebサイト(Webサービス)を作ろうと思った背景、Webサイトのテーマ、デザインの意図、UI・UXなどサイト制作において工夫した点、使用した言語・フレームワーク・ライブラリ、フロントエンド構築時に気をつけた点などを盛り込むといいです。

学習初期のクオリティの低い作品、学習サイトで作ったものをそのまま載せる、別サイトの単なる模写などはNG。
アピールどころか、創意工夫のなさ・スキルの低さを露呈してしまうだけなのでやめましょう。

ポートフォリオの作り方を合わせてご覧ください。

Web業界の転職に効果的なポートフォリオの作り方!基本から解説!
Web業界の転職のマストアイテム『ポートフォリオ』の作り方を解説します。ポートフォリオは単なる作品の羅列ではなく、プロセスが分かるように具体的に書くのがポイント。受かるポートフォリオ作りをしましょう。

応募するときの心得

応募する求人は、本命企業だけではなく、できる限り多くの求人に応募しましょう。
未経験可能な求人はすべて応募し、プラスして経験者限定の求人でも気にせずに応募しましょう。

経験者限定求人でも、タイミングやポートフォリオ、履歴書などどこかで引っかかり面接に進める場合があります。

応募は数をこなすことが大事です。
未経験なので、書類選考は「通ったらラッキー」くらいの気持ちでいると精神的に安定します。

Web業界に強い転職サイトや転職エージェントを中心にどんどん応募しましょう。

Web業界に強い転職サイト
Green
WantedlyWeb業界に強い転職エージェント
Geekly
ワークポート

スポンサーリンク

さいごに

Web業界の仕事や現場で必要とされるスキルや知識について紹介しましたがいかがでしたか?

Web業界は広く、職種も多いです。
また、仕事はメインとなる職種に加えて周辺知識も必要です。

そのため、はじめのうちは特定の職種に固執するのではなく、Webデザイン、Webフロントエンド構築、マーケティング、アクセス解析など、広く知識・スキルを身につけることを目標にするといいと思います。

その上で、自分の興味のある職種や向いている職種を決めていくのがオススメです。

同じWebの仕事で働く仲間が一人でも増えたら嬉しいです。

未経験からWeb業界へ転職したい人はこちらの記事をぜひご覧ください。

未経験からWeb業界への転職を目指しているあなたに伝えたいこと