このページの本文へ

この春ディレクターになったあなたへ贈る

新米Webディレクターが身につけたい7つのスキル

2013年04月04日 11時00分更新

Web Professional編集部

  • この記事をはてなブックマークに追加
本文印刷
1-1-1.png

「社会人デビューはWebディレクター。でも実はどんな仕事かよく分かっていない……」「Webデザイナーだったけど配置転換でディレクターに。これからどんなことを学べばいいの?」 この春、Webディレクターになった人のために、ぜひ身につけておきたいスキルと知識をざっくりまとめてみました。

1.コミュニケーションスキル

 Webディレクターは、企業によって「企画系」「クリエイティブ系」「システム系」「営業系」などいろいろなタイプがありますが、共通して必要なのがコミュニケーションスキルです。ヒアリング、提案、プレゼンなど、クライアントと受注までに話し合わなければならないことはたくさんあります。受注後は、デザイナー、エンジニア、外注先など、スタッフとのコミュニケーションも重要です。

WebD-M-5.png

Webディレクターがクライアントと上手にコミュニケーションをとるには、2つのポイントがあります。ひとつは、相手の話をよく聞き、要望と担当者のWebリテラシーを把握すること。もうひとつは、担当者のWebリテラシーにあった話し方・伝え方を工夫することです。

WebD-01.png
クライアントと上手にコミュケーションを取るための2つのポイント(『Webディレクション標準スキル152』007より一部抜粋)

 相手がクライアント、スタッフどちらの場合でも、普段からのコミュニケーションは密にしておきましょう。思い違いや勘違いが少なくなりますし、作業の「段取り」を整えたり変更したりするときにも非常に役立ちます

2.ドキュメント作成スキル

 Webディレクターはたくさんのドキュメントを作成しなければなりません。受注までには、ヒヤリングシート、企画提案書、要件定義書、プレゼンテーションスライド、見積書。受注後は、サイトナビゲーション設計書、サイトマップ、ディレクトリマップ、ワイヤーフレーム、議事録、スケジュール進捗管理表、など数え上げればキリがありません。

WebD-M.png

提案前のオリエン、ヒアリングで便利なのが、「ヒアリングシート」。コンセプト、デザイン、システム、プロジェクト管理などで構成されます。クライアントがWebで実現したいこと(サイトの目的)、ターゲットやデザイン、コンテンツの方向性をもれなく正確に把握することで、的確な提案ができます。

WebD-02-2.png
ヒヤリングシートの一部(『Webディレクション標準スキル152』009より一部抜粋)

 ドキュメントは自分自身のメモだけでなく、プロジェクトメンバーと情報を共有したり、引き継ぎの際の資料になったりします。どのドキュメントも、普段からできるだけ詳しくていねいに作成しましょう。

3.プランニングスキル

 多くの場合、クライアントの要望は抽象的で、ヒヤリングを通して具体化していくことになります。たとえば、同じ商品を扱う企業サイトでも、商品の認知を高めたいのか、商品を売りたいのかによって、用意するコンテンツはまったく異なります。的外れな提案にならないように、Webサイトの具体的な目的をクライアントとしっかり共有し、目的に沿った企画を考えましょう。

WebD-M.png

実際のサイト制作では、クライアントとユーザーの目的が達成されるコンテンツが求められます。ありがちなのが、「コンセプトありき」で目的を後付けにしてしまったパターン。あくまでも、クライアントとユーザーの目的を達成することを前提に、コンセプトを考え、コンテンツを企画しましょう。

WebD-03-2.png
クライアントとユーザーの目的を合致させて、コンセプトと掛け合わせたコンテンツ(『Webディレクション標準スキル152』033より一部抜粋)

 幅広い視点を取り入れるために、アイデアは1人で考えるだけではなく、ブレーンストーミングやバズセッションなどの手法も活用して効率よく引き出します。

4.プロジェクト管理スキル

 実際の制作が始まってからのWebディレクターの大きな仕事が、プロジェクト管理。 適切なスキルを持つメンバーをアサインし、必要なタスクを洗い出し、納期に遅れないように日々の進捗を追っていきます。

WebD-M.png

進捗管理でよく使われるのが「ガントチャート」と呼ばれるスケジュール表。タスクリストをもとに工程を細かく書き出し、開始・終了日や担当者を割り当てます。日々の進捗管理では進捗率を%で記入し、現在の進捗状況を更新していきます。

WebD-04-2.png
ガンチャートの例(『Webディレクション標準スキル152』057より一部抜粋)

 スケジュールだけでなく、コストの管理もプロジェクトを進めるうえでは大事な仕事。リソースヒストグラム(工程に対して必要な人員数を記載した表)をもとに、工数ベースで内部見積もりを作成し、実績との差異がないか確認しながら進めます。

5.テクニカルスキル

 サーバーやネットワークなどのインフラ、HTML/CSSやJavaScriptなどのフロントエンド技術、データベースなどのサーバーサイド技術など、Webサイトにはさまざまな技術が使われています。実際の構築や実装はエンジニアの仕事ですが、Webディレクターも、エンジニアとテクニカルタームを使った打ち合わせができる程度の知識は必要です。

WebD-M.png

ネットワーク機器を選択する場合、Webディレクターは、アクセス量、データ量、障害復旧などの予測や方針を策定し運用を想定し、エンジニアと運用情報を共有することで、エンジニアは的確な機器を選択できる。

WebD-05.png
ネットワーク機器の選択(『Webディレクション標準スキル152』096より一部抜粋)

 最近では、HTML5やCSS3などの新しい技術や、クラウドなどの新しいサービスも登場し、実際の案件でも使われるようになってきています。新しい技術を知らなければ新鮮な提案もできないので、日進月歩のWeb技術についても目を配るようにしましょう。

6.デザインスキル

 見やすく、読みやすい、使いやすいWebサイトを作るには、デザインの知識が必要です。いわゆる見た目のデザインだけでなく、「アクセシビリティ」「ユーザビリティ」など、Webデザインならではの知識も求められます。デザイナーとのコミュニケーションのためにも、基礎的なデザインの知識は身に付けたいところです。

WebD-M.png

Webサイトの印象を大きく左右する「色」。色は赤や黄などの色味の違いを示す「色相」、色の鮮やかさを示す「彩度」、明暗の違いを示す「明度」からなる「色の3属性」と、「トーン(色調)」によってコントロールします。言葉の意味を知っていれば、「彩度を上げて」「明度を下げて」といった具合にデザイナーに指示を出せるようになります。

WebD-06.png
色の三属性とトーン配色(『Webディレクション標準スキル152』049より一部抜粋)

 また、一般的なWeb制作会社では、Webディレクターがサイト設計を担うことがよくあります。使いやすいナビゲーション設計を考えたり、分かりやすいサイトマップやワイヤーフレームを描いたりするのもディレクターに必要なスキルです。

7.マーケティングスキル

 Webサイトは完成してしまえばおしまいではなく、公開してからが本当のスタートです。ほとんどの企業がWebサイトを持っている現在では、WebディレクターがSEO(検索エンジン最適化)やリスティング広告を提案したり、メールマーケティングやクロスメディアプロモーション、ソーシャルメディアマーケティングに携わったりするケースもあり、Webマーケティングのスキルは武器になります。

WebD-M.png

インターネット広告といえば今ではリスティング(検索エンジン連動型)広告が思い浮かびますが、ディスプレイ広告やメール広告、ストリーミング広告など、さまざまな種類があります。クライアントに聞かれても慌てないように、基本的な種類は押さえておきましょう。

WebD-07-2.png
Web広告の主な定型広告(『Webディレクション標準スキル152』114より一部抜粋)

 各種施策を実行したら、アクセス解析ツールを導入して効果を測定し、改善が必要なところを洗い出しましょう。A/Bテストによるコンテンツの検証、LPO(ランディングページ最適化)、EFO(エントリーフォーム最適化)といったWebサイトを改善するさまざまな施策についても一通りの知識を持っておくと力強いです。

一人前のWebディレクターになろう

 新米Webディレクターにおすすめの7つのスキルを駆け足で解説してきました。それぞれのスキルはつきつめていくと専門家が存在するぐらい、間口が広く、奥の深いもの。すべてを自分のものにするのは簡単ではありませんが、まずは「知ること」から始めてみてはどうでしょうか。

 現場とクライアントをじょうずにつなぐのがディレクターの仕事。「打ち合わせではうなずくだけ」「言われたことをそのまま伝えるだけ」を1日も早く卒業するために、スキルを補う知識を学んでみませんか。

「デキるディレクター」になるためのこの1冊!

Image from Amazon.co.jp
Webディレクション標準スキル152 企画・提案からプロジェクト管理、運用まで

「クライアントとの会話がかみ合わない」「デザイナーにうまく指示を出せない」――そんな若手Webディレクターの悩みを解決する本が、『Webディレクション標準スキル152 企画・提案からプロジェクト管理、運用まで』(日本WEBデザイナーズ協会 編)です。

 WEBデザイナーズ協会(JWDA)に所属する15社の現役Webディレクターたちが、プロとして知っておきたい152項目をピックアップ。Webサイト制作のディレクションに欠かせない知識をテキストとビジュアルで解説しました。

 ずっしり重い1030g、厚さ19.5mmと、類書を圧倒するボリュームで、苦手分野を穴埋めしたい新米Webディレクターや、これからWebディレクターを目指す方におすすめの1冊。新人教育にもぜひご活用ください。

  • 定価:4,494円 (本体4,280円)
  • 発売日:2012年3月16日
  • 形態:AB (392ページ)
  • ISBN:978-4-04-868746-1
  • 発行:アスキー・メディアワークス
  • 発売:角川グループパブリッシング

目次

第1章 プロジェクトの全体像とWebディレクターの役割
業種で異なるWebディレクターの役割/Webサイト制作のステークホルダー/Webサイト制作プロジェクトの流れ/Webディレクターが身につけたい「段取り力」/制作スタッフ間のコミュニケーション/クライアントの理解とコミュニケーション/10年後を生き抜くWebディレクターの心得
第2章 Webサイト制作案件の提案・受注
オリエンテーションの実施/ヒアリングシートによる要望の明確化/企画提案書の作成/要件定義書の作成/費用の算出と見積書の作成/プレゼンテーションの進め方と心構え/コンペ形式による案件の受注/受注から支払いまでの流れ/受注契約の締結
第3章 Webサイトのプランニング
目的によって違うWebサイトのタイプ/プロモーションサイトの役割と構成/企業サイトの役割と構成/ECサイトの要件定義/大規模サイトの要件をどう定めるか/Webサイトによるブランディング/Webサイトの現状把握/Webサイトの現状分析/ユーザビリティ調査の実施/マーケティング戦略のフレームワーク/AIDMAからAISAS、そしてSIPSへ/コンタクトポイントの設計とメディアプランニング/ペルソナによるターゲットの明確化/Webプロモーションのこれからの可能性/SWOT分析で課題を探る/KPIの設定とゴールの明確化/Webサイトのコンセプトメイキング/ブレーンストーミングとバズセッション/Webコンテンツの企画/Webサイトで使うドメイン名の選定/グローバルWebサイトの企画/ECサイトの企画/海外向けECサイトの企画
第4章 Webサイトの設計とデザインディレクション
Webページの基本的なレイアウト構成/Webサイトとアクセシビリティ/画面解像度・OS/ブラウザーの選定/ユーザビリティとユーザーエクスペリエンス/情報アーキテクチャー(IA)の理解/Webサイトのナビゲーション設計/SEOを意識したサイト設計/サイトマップの作成/ディレクトリマップの作成/ワイヤーフレームの作成/Webデザインにおけるタイポグラフィ/Webサイトの配色・色彩計画/トーン&マナーによるブランドイメージの構築/デザインカンプの作成/グローバルWebサイトの設計
第5章 プロジェクトマネジメント
議事録の作成と共有/プロジェクトの情報共有/プロジェクトメンバーのアサイン/タスクの洗い出しとWBSの作成/スケジュールの作成と進捗管理/プロジェクトの予算管理/外注企業の利用と管理/プロジェクトのリスク管理/プロジェクトの品質管理
第6章 Webコンテンツの制作ディレクション
Webコンテンツ制作の発注/コンテンツ素材の管理/画像フォーマットの種類と使い分け/Webに特化した文章術/「Webライティング」/納期や工数、コストを減らす/校正作業/Webサイトにかかわるさまざまな法律/個人情報保護法とプライバシーポリシー/Webサイトで使う素材の著作権/ECサイトに必須の特定商取引法の理解/Webサイトで扱う動画ファイルの選択/動画コンテンツ配信プラットフォームの選び方/WebサイトにおけるPDFの利用
第7章 Webサイトの制作ディレクション
Webデザインツールの種類と使い分け/Webサーバーの選定/テスト環境の構築/バージョン管理ツールの導入と使い方/HTMLの種類とマークアップの基本/CSSによるWebページのデザイン/Webサイトの価値を高めるJavaScript/「Web標準」の考え方/仕様策定が進む「HTML5」と「CSS3」/RSSフィードの作成と活用/検索結果の表示を変える/マイクロフォーマット/Webサイトの質を保つ制作仕様書の作成/CMSテンプレートによる/Webサイトの制作/文字コードとフォントの基礎知識/ブラウザーテストとテストツール/RIA技術の活用/Ajaxの仕組みとライブラリーの利用/Flashコンテンツの制作/独自空間を演出するフルFlashサイト/3つの事例からフルFlashサイトの可能性を探る/SilverlightとAdobe AIR
第8章 Webシステムの開発ディレクション
システム化の企画と提案/システムドキュメントの作成 /システムフローの作成/ネットワーク機器構成の検討・構築/サーバーサイド技術の役割と利用/Webシステムにおけるプログラミング言語の選定/データベースのしくみと役割/セキュリティ対策とリスク対応/巧妙化、複雑化するサーバー攻撃/ユーザー認証とSSLの導入/ASP/SaaSの活用/Web APIの利用とマッシュアップ/オープンソースの活用/決済システムの選定/決済代行会社の選択基準/ブログ/CMSの選定/企業コミュニティサイトの構築/ECプラットフォームの選定/リリース準備とWebサイトの公開
第9章 Webプロモーションの実施
検索エンジンとSEO/SEOを成功に導く外部対策/インターネット広告の利用/SEMの基本 リスティング広告/アフィリエイトのしくみ/ソーシャルメディア・マーケティング/ネットを活用した広報活動/クロスメディアによるプロモーション/国ごとで大きく異なる海外SEO/SEM事情/メールマガジンによるメールマーケティング
第10章 Webサイトの運用・改善
PDCAでまわす運用業務の基本/運用業務の受注と体制の構築/業務分担を明確にするECサイトの運営/実例にみる大規模サイトの運用ディレクション/Webサイト運営のリスクマネジメント/ソーシャルメディアの普及で注目される/テキストマイニングの可能性/Webサイトの効果測定/Webアクセス解析の活用/アクセス解析レポートと定期ミーティング/アクセス解析から導く改善提案/アクセス解析と業務データの連携/LPOとEFOによるWebサイトの改善/A/Bテストによる効果検証/レコメンデーションと行動ターゲティング
第11章 モバイルサイトの構築
携帯電話とインターネットアクセス/ケータイサイトの種類とビジネスモデル/ケータイサイトの要件定義/PCとの違いにみるケータイサイトの設計/ケータイサイト制作のポイント/ケータイサイトの集客手法/ソーシャルメディアの広がりとモバイルデバイス/モバイルアクセス解析の特徴とツールの選び方/ケータイアプリの開発フロー/スマートフォンとWeb制作/スマートフォンサイトの制作//iPhoneアプリ開発のワークフロー/マルチスクリーンサイトの設計・制作/モバイルCMSの種類と選び方
第12章 Web技術の応用
Webアクセス端末としてのビデオゲーム機/デスクトップウィジェットの開発と可能性/情報端末におけるWeb技術の活用/タッチパネル端末向けコンテンツの制作/デジタル放送とマルチメディアサービス/デジタルサイネージのコンテンツ制作/海外、国内でも広がるデジタルサイネージの実例と可能性/ディレクターが押さえておきたい世界のWebトレンド

Web Professionalトップへ

Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング