Webディレクション講座 - 初級編 -

What is web direction?
この資料の無断転載は禁じます。利用希望の方は株式会社ISAOまでお問い合わせください。
Webディレクション講座
- 初級編 -
2016.9
株式会社ISAO
中嶋あいみ

© 2016 ISAO　│ Confidential
2
はじめに

3
自己紹介・略歴
‣東京都生まれ
‣立教大学経済学部卒業・株式会社ISAO入社
‣ファッション誌公式eコマースサイト　バイヤー・運営を6年
‣eコマースサイトの事業譲渡をきっかけに、Webディレクターに転身
‣受託開発案件を中心に、開発・制作のディレクション業務をはじめる
‣Webプロモーション支援の業務をはじめる
‣自社のコーポレートブランディング・PRの業務をはじめる

Webディレクションという仕事を知る
Webサイトを作る流れをなんとなく知る
“私もやってみたいな”と80％の人が思う
4
本日の研修のゴール

5
Webディレクションってなに？

6
Webディレクションってどうやって学ぶべき？
9：1　＝　経験：座学

7
わたしのディレクション経歴
🔥🔥
🔥🔥 🔥🔥

8
Webディレクターって市場価値あるの？

9
テキスト
引用：https://doda.jp/guide/heikin/2014/syokusyu/creative/001.html

10
MIIDASで求人と年収調べてみたら、これくらい

11
ディレクター市場は期待されるスキルが幅広い
引用： http://web-director.info/archives/5612

12
ディレクションの領域も幅広い
引用： http://web-director.info/archives/5612
準備要件定義構築・制作リリース運用

13
Webサイトってどうやって作るの？

14
いろいろなスキルの集合体で、Webサイトは作られる
サーバ立てる
プログラム作る
見た目と動きを作るクリエイティブ作る
デザイン設計する
データ分析する
ビジネスモデル考える
文字で魅せる

15
家に例えると・・・
家：WEBサイト
土地：サーバ
生活しやすさ：UX
外観・内装を決める
：デザイン
間取り：UI
外観・内装を作る
：フロンドエンド
骨組みを作る
：システム設計
電気・ガス・水道を通す
：プログラミング

16
こんなにたくさんの工程があります
準備要件定義構築・制作リリース運用
‣ 要求ヒアリング
‣ キーワード調査
‣ 競合調査
‣ ペルソナ策定
‣ 見積もり作成
‣ サイトマップ作成
‣ ワイヤーフレーム作成
‣ 画面遷移図作成
‣ コンテンツリスト作成
‣ バリデーション定義
‣ meta/ogp定義
‣ 試験項目書作成
‣ 試験
‣ 脆弱性診断
‣ アクセス解析準備
‣ SEO対策
‣ アクセス解析
‣ 広告
‣ SNS
‣ インフラ構築
‣ プログラム開発
‣ CMS開発
‣ クリエイティブ制作
‣ デザイン定義
‣ マークアップ
‣ コーディング
‣ セキュリティ対策

17
こんなにたくさんのドキュメントを作ります
※これは一部です。プロジェクトによって異なります。

18
資料作るとかめんどくさい
エンジニア上手く開発してよ
デザイナーなんだからカッコよく仕上げてよ
決めなきゃ作れない
決めないで作ると失敗する
✕

19
こんなコミュニケーションミス、よくあります
入力フォームの開発はこのサイトを参照して。
同じようなエラー文言で！
細かいところは後で調整させて！
とりあえず作りました！
確認おねがいします。
え？全然ユーザビリティ悪いじゃん。
テキストのマナーもバラバラだし、
スマホで入力しづらくない？当たり前に考慮してよ！
は？
後から修正するなら先に指示してくれよ。。
細かく指示しなくても
当たり前のレベルはわかってほしい。
なんで毎回サイト作る毎に同じこと言わせるの～
指示が曖昧だなぁ・・・
まあいいか。
言われたもの作ることが僕の仕事だし。
わかりました、修正します。。

20
それができないと、こんな失敗します
工数オーバーで利益減　　　　クライアント大激怒
納期遅延
依頼と
違う不具合

21
Webディレクターの役割

①３つのスコープ
品質予算期間

23
②わかり合うまでコミュニケーション
23

③同じゴールを目指せ、進め
✕
✕

25
それができないと、こんな失敗します
納期遅延
依頼と
違う不具合
工数オーバーで利益減　　　　クライアント大激怒

1. クライアントの言いなりになる
2. 制作者の言いなりになる
3. 自分の意見を持たない
4. 期限を明確にしない
5. 今できることを後回しにする
6. 代替案を提示しない
7. ステータスを共有しない
8. 口頭ですべて済まそうとする
9. メールの返事をしない
10. 議事録を書かない
11. 技術的な話から逃げる
12. 資料を確認せずに横流しする
13. 自分の役割にしか責任を持たない
26
”Webディレクターがやってはいけない13の行動”
引用：http://baigie.me/sogitani/2012/10/webdirector13/

1. クライアントの言いなりになる
2. 制作者の言いなりになる
3. 自分の意見を持たない
4. 期限を明確にしない
5. 今できることを後回しにする
6. 代替案を提示しない
7. ステータスを共有しない
8. 口頭ですべて済まそうとする
9. メールの返事をしない
10. 議事録を書かない
11. 技術的な話から逃げる
12. 資料を確認せずに横流しする
13. 自分の役割にしか責任を持たない
27
”Webディレクターがやってはいけない13の行動”
引用：http://baigie.me/sogitani/2012/10/webdirector13/
基本動作コミュニケーション
リーダーシップ

28
CASE STUDY “要求ヒアリング”

29
自部門のビジネスを紹介する
Webサイトを作りたい
あなたはWebディレクターです。
要求ヒアリングをおこないます。
どんな返答をしますか？

30
チームで考えてみましょう：15分
発表：10分
休憩：5分

31
自部門のビジネスを紹介するWebサイトを作りたい
A：
わかりました！
どんなデザインにしましょうか？
B：
何のために作りたいのですか？

32
問い合わせを沢山集めたいんだよね
A：
SEOや広告で幅広く集客して、
問い合わせ増に繋げましょう！
B：
問い合わせしてほしいユーザー
を、なるべく狭く絞り込みま
しょう！

33
4月にリリースしたいから、よろしくね
A：
期日を死守します！
リリースまで頑張りましょう！
B：
リリース後の保守と運用は
誰がどうやりましょうか？

34
回答例

35
自部門のビジネスを紹介するWebサイトを作りたい
A：
どんなデザインにしましょうか？
B：
何のために作りたいのですか？
B
「目的」「目標」を知らないと何も決まらない
⇒ヒアリングシート、要求確認書を作る

36
問い合わせを沢山集めたいんだよね
A：
SEOや広告で幅広く集客して、
問い合わせ増に繋げましょう！
B：
問い合わせしてほしいユーザー
を、なるべく狭く絞り込みま
しょう！
B
ターゲットを広くしすぎると、目標から遠くなる
⇒ペルソナを考える

37
4月にリリースしたいから、よろしくね
A：
期日を死守します！
リリースまで頑張りましょう！
B：
リリース後の保守と運用は
誰がどうやりましょうか？
B
リリースが目標ではない
⇒アナリティクス・CMS(管理画面)有無も決める

38
「作ること」が目標ではない

39
多くの引き出しから最善の計画を提案・実現
ユーザー環境
今のトレンド
運用
目標達成
集客

40
FAQ

41
Q：PCサイトとモバイルサイトの作成時に気をつけるべき違いはありますか？
スマホは短い！文頭が超重要
全角120文字程度
全角60文字程度

42
Q：業務を通じての苦労ややりがいを教えてください
チームビルディングとコミュニケーション
成長を実感できる

43
Webディレクション経験のメリット

44
どちらもビジネススキル
コミュニケーション
・リーダーシップ
ITリテラシー向上

45
まとめ
• Webサイトは多くの工程・スキルを集結して作っている
• Webディレクションとは、ゴールに向かって進める仕事
• リーダーシップ、コミュニケーションが鍛えられる
• たくさんの引き出しを増やすことが大切
• ITビジネスパーソンとして成長できる！

お問い合わせ先
株式会社ISAO（カブシキガイシャイサオ）
https://www.isao.co.jp
ISAO　で検索　🔍🔍

Webディレクション講座 - 初級編 -

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a Webディレクション講座 - 初級編 -

Semelhante a Webディレクション講座 - 初級編 - (20)

Webディレクション講座 - 初級編 -