「Webディレクターになるにはどうしたらいいのか?」
Webディレクターに興味がある人の誰もが気になるところ。
そこで今回は、元Webディレクターの僕の経験も踏まえて、未経験からWebディレクターになるのに最も再現性の高い方法を解説します。
Webディレクターを目指している人はぜひ参考にしてください!
Webディレクターとは
WebディレクターとはWeb制作現場の責任者です。
簡単に言えば、Webサイト作りに関わる仕事で、WebデザイナーやWebエンジニアとチームを組んで、チームを指揮し、Webサイトを完成させることがミッションの仕事です。
Webディレクターの仕事内容
Webディレクターの仕事内容の具体例がこちら。
・クライアントの要望をヒアリングする
・ヒアリング内容を要件定義・仕様書に落とし込む
・市場調査や競合調査を行い、方針・企画を練る
・企画内容を提案書にまとめ、クライアントに提案・プレゼンし、受注を目指す
・Webサイトを作るのに必要な工数を洗い出し、見積書を作る
・納期から逆算してスケジュール表を作る
・制作担当者を割り当てる(外注先を選定する)
・ワイヤーフレームを作り、Webデザイナーにデザイン指示を出す
・上がってきたデザインを確認し、クライアントに提案・確認する
・Webデザインの完成図が固まったら、Webエンジニアにコーディング指示を出す
・コーディングが上がってきたら、デザインチェックとデバイスチェックをする
・Webページの原稿に不備がないか、文字校正する
・クライアントにWebデザインを提出して最終確認を行い、問題がなければ公開する
・Webサイト公開後のページ更新、アクセス解析など運用を行う など
WebディレクターはWeb制作のどこまでを担うか担当プロジェクトによって異なります。
例えば、
・新規制作&公開までのパターン
・既存サイトの運用のみのパターン
・新規制作&公開&運用のパターン
などがあります。
また、Webディレクターは会社によって業務範囲がWebデザイナーやWebエンジニア、Webライターの領域まで担う場合もあります。
→WebディレクターがWebデザインやコーディング、ライティングを掛け持ちすることがあります。
Webディレクターに必要なスキル・知識
Webディレクターに必要なスキル・知識は、専門スキルとヒューマンスキルの2種類があります。
専門スキル
・Webの仕組みに関する知識
・Webデザインの知識
・プログラミングの知識
・マーケティングの知識
・アクセス解析の知識
・ライティングの知識
・動画制作の知識
・Web広告の知識
・メルマガの知識 など
ヒューマンスキル
・コミュニケーション力
・調整力
・ヒト・モノ・カネのマネジメント力
・交渉力
・提案力
・ドキュメント作成力
・パワポ、エクセルのスキル
多いですよね、、。
でも大丈夫。
最低限のWebデザインの基礎知識と、社会人経験があれば Webディレクターに必要なスキルの最低ラインはクリアです!
![](https://tenshokublog.net/wp-content/uploads/2023/07/web-director-skill-160x90.jpg)
Webディレクターの魅力・やりがい
Webディレクターの魅力・やりがいは7つあります。
1. 様々なWebサイトを手掛けられる
2. 年収が高い
3. サイト完成時に達成感がある
4. 成果が出ると嬉しい
5. 感謝されると嬉しい
6. 成長を実感できる
7. 未経験でもなれる
Webディレクターに向いている人
Webディレクターに向いている人とは・・・?
それはズバリ!WebサイトやWebサービスが好きな人です。
Webディレクターは覚えることが多いし、社内外の多くの人と連携しながらプロジェクトの進行管理を行います。
クライアント対応に神経をすり減らしたり、予期せぬトラブル対応に追われたり、納期前の残業で体力が削られたり・・・と、タフな場面も多い仕事。
なので、大前提としてWebサイト・Webサービス作りの仕事が好きじゃないと続けるのも苦痛になるからです。
Webディレクターの向き不向きについて、以下の記事では15の具体的な特徴から解説しています。
![](https://tenshokublog.net/wp-content/uploads/2023/06/web-director-muiteiru-160x90.jpg)
Webディレクターになる方法
Webディレクターになる方法は7つあります。
1. Webデザイナーからなる
2. エンジニア、WebマーケターなどのWeb系職種からなる
3. 独学でWebデザインを勉強してからなる
4. スクールでWebデザインを勉強してからなる
5. 事前学習せず完全未経験からなる
6. 社内異動してなる
7. アルバイトから始める
未経験からWebディレクターになるなら、独学かスクールでWebデザインを勉強してからなる方法が最も早いです。
WebデザイナーやWebエンジニアなどの職種を挟むとどうしても時間がかかってしまう。
また、事前学習せずにWebディレクターに応募するのは無謀だし、社内異動でWebディレクターになるのも可能性として低い。
アルバイトから始めるのも、単純作業しかやらせてもらえずスキルや経験がつかないのでおすすめしません。
Webディレクターになるための独学・勉強ロードマップ
1. Webデザインの基礎知識を学ぶ
まずはWebデザインの基礎を学びましょう。
なぜなら、Webディレクターはクライアントの要望をヒアリングする時、企画を考え提案する時、Webデザイナーやエンジニアに仕様を説明する際、デザインやコーディングの品質チェックする際など、あらゆる場面でWebデザインの知識が必要だから。
Web制作を学べる教材はいくらでもありますが、僕のおすすめは次の3つです。
・いちばんよくわかるWebデザインの基本きちんと入門:Webデザインの基礎を1から学べるベストセラー本。概要を掴むように読む。
・Progate:HTMLとCSSコースは全てやる。JavaScriptとjQueryも一通りやって雰囲気を掴めればOK。
・今さら人に聞けないWebの仕組み:Web全般の基礎知識を学べるブログ記事。全16記事、空き時間で読んでおくと良い。
この段階のゴールはWebサイトの仕組みを理解し、Webデザインの理論やコーディングの概念を知ること。
実際にどのようなプロセスを経てWebサイトが作られているのかをイメージできるようになるのが目標です。
※暗記や、プログラミングできるようになる必要はないです
2. 実際にWebサイトを作ってみる
Webデザインについて何となくイメージがついたら、実際にWebサイトを作りましょう。
知識だけでなく、実際にWebサイトを作ることでよりWebサイトを作るまでの理解が深まります。
自分が「良いなこのサイト」と思うホームページやブログなどから1つ選んで、レイアウトやデザインを真似して(完コピはNG)、ここまでの学習で覚えた知識をフル動員して作ってみるのが良いです。
Webサイトの作り方は、Webの知識がなくても作れる簡単な方法から、プロレベルのカスタマイズができる方法までさまざまありますが、ここでは3つの方法を紹介します。
1. WordPress
2. Jimdo、Wix
3. note
上から順番におすすめです。
Webディレクターを目指すなら現場でもよく使われるWordPressで作ることを強く勧めます。
いきなりWordPressは難しそう・・・、という方は、一つ目のサイトは練習がてらJimdoかWixで作ってみてください。
WordPress【オススメ度★★★】
1番おすすめなのはWordPressでのWebサイト作り。
WordPressは世界中のWebサイトの1/3がWordPressでできているくらい有名なCMS。(CMSは簡単にWebサイトを作る/運用できるシステムのこと)
しかも実務で運用する/構築する/カスタマイズすることが多い最も実践的なWebサイトが作れます。
WordPressでWebサイトを作ることで、ドメインとレンタルサーバーの契約から、サーバーにWordPressをインストールすること、デザインテーマの設定、レイアウトの細かいカスタマイズなど、実務さながらの経験が身に付きます。
エックスサーバー(独自ドメイン永久無料特典)で始めるのがおすすめです。
僕も使っています。
・エックスサーバー

Jimdo、Wix【オススメ度★★・】
続いておすすめなのはJimdo、Wixなどのホームページ作成ツールを使ったWebサイト作り。
サーバー、ドメインなどの面倒な契約なしに、会員登録するだけで十分なWebサイトを作ることができるので始めてWebサイトを作るのにおすすめ。
しかも、お試しするだけなら無料プランでも十分。
テンプレートからデザインを選んで、欲しいパーツを積み木のように組み合わせて作るイメージ。
かなり簡単にできるのでホームページ作りの雰囲気を掴むのに良いです。
※ただし、Webディレクターの実務ではこれらのホームページ作成サービスを使う機会はほぼないので、実戦向きではない点が欠点です。
あくまでエントリーレベルのイメージを掴むための利用として、次のステップとしてWordPressで作ることを目標にしましょう。
note【オススメ度★・・】
noteは会員登録だけで使えるブログ。
難しい知識が不要で、シンプルに始めやすいのがメリット。
スマホでも始めることができます。
ただし、機能がシンプルにテキストだけ、といった感じ。
デザインや広告、サイトのカスタマイズ性能などの機能がほとんどありません。
noteを使えばWebライティングの練習になります。
ただ、Webデザインや、サイト設計、SEO、アクセス解析、広告出稿などのスキルアップには不向き。
なので、noteを使う場合は本当にWeb自体が初心者で、ページを投稿するのに慣れる練習程度。
最終的にWordPressでWebサイトを作ることを目標にしてください。
※もちろんWebライティング、マーケティングの練習には合います
3. Webサイトを運用する
Webサイト/ブログを作ったら、運用してみることが大事。
Webサイトを作ったことで、既に、全く知識のない人と比べたら天と地の差があります。
ここから先は運用して「Webサイトを作って運用して月間〇〇PVまでなりました」と言えることを目指すとグッド。
その際、ただ闇雲に日々の日記を書くなどではあまり意味がないので、目的を持って運用してください。
サイトのコンセプト/テーマを決め、SEO対策、Webライティングなどを勉強しつつ、最低3か月、できれば1年は続けるとベストです。
サイトを始めていきなりアクセスが来ることはまずないですし、記事を書いたり継続更新しながらデザインや文章、集客、アクセス解析などを色々と試行錯誤する過程が何より大事だからです。
TwitterなどのSNSも並行して運用したり、Google広告やSNS広告を少額で試してみると効果的です。
サイト/ブログを運用しながらPDCAを回してサイトを改善していく。
その結果をまとめて提出できればWebディレクターはすぐ目の前です。
SEOの勉強におすすめな本
・沈黙のWebマーケティング:Webデザイン、Webマーケティング、SEO対策などをマンガで勉強できる
・沈黙のWebライティング:SEOに強いWebライティングについてマンガで勉強できる
独学が難しい人はスクールに通おう
独学するのが難しい人や、最短でWebディレクターになりたい人は、Webディレクター講座があるスクールで勉強するのが近道です。
WebディレクターコースなどWebディレクターに特化した講座を選んだり、WebデザインやWebマーケティングに興味があればそちらを勉強するのもおすすめ。
スクールによっては、学習時間の確保や年齢などの条件を満たすことで就職サポートが付いてくるスクールがあります。
未経験から早く就職したい場合は就職サポート付きのスクールを選ぶと良いです。
未経験からWebディレクターになるための転職活動のポイント
未経験からWebディレクターになるためには、まずは、ここまで紹介してきた経験&実績作りの内容をポートフォリオにまとめること。
合わせて、人事に刺さる志望動機を用意すること、面接で熱意を伝えることが重要です。
ポートフォリオの作り方
![](https://tenshokublog.net/wp-content/uploads/2023/02/web-marketer-portfolio-4-160x90.png)
志望動機の書き方・伝え方
![](https://tenshokublog.net/wp-content/uploads/2023/06/web-director-shibodoki-mikeiken-160x90.jpg)
面接対策
![](https://tenshokublog.net/wp-content/uploads/2023/06/web-director-mensetsu-160x90.jpg)
未経験からWebディレクターになった僕の経験談
僕は31歳のときに法人営業職からWebディレクターになりました。
個人ブログをきっかけにWeb制作の世界に興味を持ちWebディレクターを目指しました。
Jimdoで就活ノウハウブログを作って、100記事程度投稿、Twitterも運用。
あとはPhotoshopを触ってみる、なんかをやりましたね。
転職活動ではそれらをポートフォリオにまとめて、150社ほど応募。
内定もいくつかもらいましたが、最後は知人紹介の会社に入社しました。
僕の詳しい転職エピソードはこちらの記事にまとめています。
![](https://tenshokublog.net/wp-content/uploads/2023/06/web-director-mikeiken-30-160x90.jpg)
まとめ:Webディレクターになるには準備が大事!
Webディレクターになるには何よりも準備が大事。
Webディレクターは実力主義だから。今回紹介した勉強方法を参考に、まずは経験を作ってください!
自分の経歴でWebディレクターは向いていそうか?転職エージェントに相談してみるのも手です。
![](https://tenshokublog.net/wp-content/uploads/2024/05/web-director-site-agent2-320x180.jpeg)