Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

2,973 views

Published on

Webディレクターの役割って?Webサイトってどうやって作るの?を0から知ることができるスライドです。
Web制作会社の人や企業のWeb担当者の方に向いています。
株式会社ISAOの社内研修用資料をアレンジしたものです。

Published in: Internet
  • accessibility Books Library allowing access to top content, including thousands of title from favorite author, plus the ability to read or download a huge selection of books for your pc or smartphone within minutes ,Download or read Ebooks here ... ......................................................................................................................... Download FULL PDF EBOOK here { http://bit.ly/2m6jJ5M }
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

  1. 1. What is web direction? この資料の無断転載は禁じます。利用希望の方は株式会社ISAOまでお問い合わせください。 Webディレクション講座 - 初級編 - 2016.9 株式会社ISAO 中嶋あいみ
  2. 2. © 2016 ISAO │ Confidential What is web direction? 2 はじめに
  3. 3. © 2016 ISAO │ Confidential 3 自己紹介・略歴 ‣東京都生まれ ‣立教大学経済学部 卒業・株式会社ISAO入社 ‣ファッション誌公式eコマースサイト バイヤー・運営を6年 ‣eコマースサイトの事業譲渡をきっかけに、Webディレクターに転身 ‣受託開発案件を中心に、開発・制作のディレクション業務をはじめる ‣Webプロモーション支援の業務をはじめる ‣自社のコーポレートブランディング・PRの業務をはじめる
  4. 4. © 2016 ISAO │ Confidential What is web direction? Webディレクションという仕事を知る Webサイトを作る流れをなんとなく知る “私もやってみたいな”と80%の人が思う 4 本日の研修のゴール
  5. 5. © 2016 ISAO │ Confidential What is web direction? 5 Webディレクションってなに?
  6. 6. © 2016 ISAO │ Confidential What is web direction? 6 Webディレクションってどうやって学ぶべき? 9:1 = 経験:座学
  7. 7. © 2016 ISAO │ Confidential What is web direction? 7 わたしのディレクション経歴 🔥🔥 🔥🔥 🔥🔥
  8. 8. © 2016 ISAO │ Confidential What is web direction? 8 Webディレクターって市場価値あるの?
  9. 9. © 2016 ISAO │ Confidential What is web direction? 9 テキスト 引用:https://doda.jp/guide/heikin/2014/syokusyu/creative/001.html
  10. 10. © 2016 ISAO │ Confidential What is web direction? 10 MIIDASで求人と年収調べてみたら、これくらい
  11. 11. © 2016 ISAO │ Confidential What is web direction? 11 ディレクター市場は期待されるスキルが幅広い 引用: http://web-director.info/archives/5612
  12. 12. © 2016 ISAO │ Confidential What is web direction? 12 ディレクションの領域も幅広い 引用: http://web-director.info/archives/5612 準備 要件定義 構築・制作 リリース 運用
  13. 13. © 2016 ISAO │ Confidential What is web direction? 13 Webサイトってどうやって作るの?
  14. 14. © 2016 ISAO │ Confidential What is web direction? 14 いろいろなスキルの集合体で、Webサイトは作られる サーバ立てる プログラム作る 見た目と動きを作るクリエイティブ作る デザイン設計する データ分析する ビジネスモデル考える 文字で魅せる
  15. 15. © 2016 ISAO │ Confidential What is web direction? 15 家に例えると・・・ 家:WEBサイト 土地:サーバ 生活しやすさ:UX 外観・内装を決める :デザイン 間取り:UI 外観・内装を作る :フロンドエンド 骨組みを作る :システム設計 電気・ガス・水道を通す :プログラミング
  16. 16. © 2016 ISAO │ Confidential What is web direction? 16 こんなにたくさんの工程があります 準備 要件定義 構築・制作 リリース 運用 ‣ 要求ヒアリング ‣ キーワード調査 ‣ 競合調査 ‣ ペルソナ策定 ‣ 見積もり作成 ‣ サイトマップ作成 ‣ ワイヤーフレーム作成 ‣ 画面遷移図作成 ‣ コンテンツリスト作成 ‣ バリデーション定義 ‣ meta/ogp定義 ‣ 試験項目書作成 ‣ 試験 ‣ 脆弱性診断 ‣ アクセス解析準備 ‣ SEO対策 ‣ アクセス解析 ‣ 広告 ‣ SNS ‣ インフラ構築 ‣ プログラム開発 ‣ CMS開発 ‣ クリエイティブ制作 ‣ デザイン定義 ‣ マークアップ ‣ コーディング ‣ セキュリティ対策
  17. 17. © 2016 ISAO │ Confidential What is web direction? 17 こんなにたくさんのドキュメントを作ります ※これは一部です。プロジェクトによって異なります。
  18. 18. © 2016 ISAO │ Confidential What is web direction? 18 資料作るとかめんどくさい エンジニア上手く開発してよ デザイナーなんだからカッコよく仕上げてよ 決めなきゃ作れない 決めないで作ると失敗する ✕
  19. 19. © 2016 ISAO │ Confidential What is web direction? 19 こんなコミュニケーションミス、よくあります 入力フォームの開発はこのサイトを参照して。 同じようなエラー文言で! 細かいところは後で調整させて! とりあえず作りました! 確認おねがいします。 え?全然ユーザビリティ悪いじゃん。 テキストのマナーもバラバラだし、 スマホで入力しづらくない?当たり前に考慮してよ! は? 後から修正するなら先に指示してくれよ。。 細かく指示しなくても 当たり前のレベルはわかってほしい。 なんで毎回サイト作る毎に同じこと言わせるの~ 指示が曖昧だなぁ・・・ まあいいか。 言われたもの作ることが僕の仕事だし。 わかりました、修正します。。
  20. 20. © 2016 ISAO │ Confidential What is web direction? 20 それができないと、こんな失敗します 工数オーバーで利益減    クライアント大激怒 納期遅延 依頼と 違う 不具合
  21. 21. © 2016 ISAO │ Confidential What is web direction? 21 Webディレクターの役割
  22. 22. © 2016 ISAO │ Confidential What is web direction? ①3つのスコープ 品質予算 期間
  23. 23. © 2016 ISAO │ Confidential What is web direction? 23 ②わかり合うまでコミュニケーション 23
  24. 24. © 2016 ISAO │ Confidential What is web direction? ③同じゴールを目指せ、進め ✕ ✕
  25. 25. © 2016 ISAO │ Confidential What is web direction? 25 それができないと、こんな失敗します 納期遅延 依頼と 違う 不具合 工数オーバーで利益減    クライアント大激怒
  26. 26. © 2016 ISAO │ Confidential What is web direction? 1. クライアントの言いなりになる 2. 制作者の言いなりになる 3. 自分の意見を持たない 4. 期限を明確にしない 5. 今できることを後回しにする 6. 代替案を提示しない 7. ステータスを共有しない 8. 口頭ですべて済まそうとする 9. メールの返事をしない 10. 議事録を書かない 11. 技術的な話から逃げる 12. 資料を確認せずに横流しする 13. 自分の役割にしか責任を持たない 26 ”Webディレクターがやってはいけない13の行動” 引用:http://baigie.me/sogitani/2012/10/webdirector13/
  27. 27. © 2016 ISAO │ Confidential What is web direction? 1. クライアントの言いなりになる 2. 制作者の言いなりになる 3. 自分の意見を持たない 4. 期限を明確にしない 5. 今できることを後回しにする 6. 代替案を提示しない 7. ステータスを共有しない 8. 口頭ですべて済まそうとする 9. メールの返事をしない 10. 議事録を書かない 11. 技術的な話から逃げる 12. 資料を確認せずに横流しする 13. 自分の役割にしか責任を持たない 27 ”Webディレクターがやってはいけない13の行動” 引用:http://baigie.me/sogitani/2012/10/webdirector13/ 基本動作 コミュニケーション リーダーシップ
  28. 28. © 2016 ISAO │ Confidential What is web direction? 28 CASE STUDY “要求ヒアリング”
  29. 29. © 2016 ISAO │ Confidential What is web direction? 29 自部門のビジネスを紹介する Webサイトを作りたい あなたはWebディレクターです。 要求ヒアリングをおこないます。 どんな返答をしますか?
  30. 30. © 2016 ISAO │ Confidential What is web direction? 30 チームで考えてみましょう:15分 発表:10分 休憩:5分
  31. 31. © 2016 ISAO │ Confidential What is web direction? 31 自部門のビジネスを紹介するWebサイトを作りたい A: わかりました! どんなデザインにしましょうか? B: わかりました! 何のために作りたいのですか?
  32. 32. © 2016 ISAO │ Confidential What is web direction? 32 問い合わせを沢山集めたいんだよね A: SEOや広告で幅広く集客して、 問い合わせ増に繋げましょう! B: 問い合わせしてほしいユーザー を、なるべく狭く絞り込みま しょう!
  33. 33. © 2016 ISAO │ Confidential What is web direction? 33 4月にリリースしたいから、よろしくね A: 期日を死守します! リリースまで頑張りましょう! B: リリース後の保守と運用は 誰がどうやりましょうか?
  34. 34. © 2016 ISAO │ Confidential What is web direction? 34 回答例
  35. 35. © 2016 ISAO │ Confidential What is web direction? 35 自部門のビジネスを紹介するWebサイトを作りたい A: わかりました! どんなデザインにしましょうか? B: わかりました! 何のために作りたいのですか? B 「目的」「目標」を知らないと何も決まらない ⇒ヒアリングシート、要求確認書を作る
  36. 36. © 2016 ISAO │ Confidential What is web direction? 36 問い合わせを沢山集めたいんだよね A: SEOや広告で幅広く集客して、 問い合わせ増に繋げましょう! B: 問い合わせしてほしいユーザー を、なるべく狭く絞り込みま しょう! B ターゲットを広くしすぎると、目標から遠くなる ⇒ペルソナを考える
  37. 37. © 2016 ISAO │ Confidential What is web direction? 37 4月にリリースしたいから、よろしくね A: 期日を死守します! リリースまで頑張りましょう! B: リリース後の保守と運用は 誰がどうやりましょうか? B リリースが目標ではない ⇒アナリティクス・CMS(管理画面)有無も決める
  38. 38. © 2016 ISAO │ Confidential What is web direction? 38 「作ること」が目標ではない
  39. 39. © 2016 ISAO │ Confidential What is web direction? 39 多くの引き出しから最善の計画を提案・実現 ユーザー環境 今のトレンド 運用 目標達成 集客
  40. 40. © 2016 ISAO │ Confidential What is web direction? 40 FAQ
  41. 41. © 2016 ISAO │ Confidential What is web direction? 41 Q:PCサイトとモバイルサイトの作成時に気をつけるべき違いはありますか? スマホは短い!文頭が超重要 全角120文字程度 全角60文字程度
  42. 42. © 2016 ISAO │ Confidential What is web direction? 42 Q:業務を通じての苦労ややりがいを教えてください チームビルディングとコミュニケーション 成長を実感できる
  43. 43. © 2016 ISAO │ Confidential What is web direction? 43 Webディレクション経験のメリット
  44. 44. © 2016 ISAO │ Confidential What is web direction? 44 どちらもビジネススキル コミュニケーション ・リーダーシップ ITリテラシー向上
  45. 45. © 2016 ISAO │ Confidential What is web direction? 45 まとめ • Webサイトは多くの工程・スキルを集結して作っている • Webディレクションとは、ゴールに向かって進める仕事 • リーダーシップ、コミュニケーションが鍛えられる • たくさんの引き出しを増やすことが大切 • ITビジネスパーソンとして成長できる!
  46. 46. © 2016 ISAO │ Confidential お問い合わせ先 株式会社ISAO(カブシキガイシャ イサオ) https://www.isao.co.jp ISAO で検索 🔍🔍

×