Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Similar to 0からのwebディレクション講座 福岡 設計編_150117
Similar to 0からのwebディレクション講座 福岡 設計編_150117 (20)
0からのwebディレクション講座 福岡 設計編_150117
- 1. 0からのWebディレクション講座：設計編 ～ S T O P ! ブ レ ブ レ デ ィ レ ク シ ョ ン ！ ～ 日 本 デ ィ レ ク シ ョ ン 協 会 主 催
- 3. Webディレクターの役割
- 9. Webディレクターの役割 そのためには ブレない設計 と コミュニケーションを円滑にする 情報共有 がとても大事です。
- 10. Webにおける設計とは？
- 21. 6w2hに基づいた設計
- 24. 6w2hに基づいた設計 情報伝達をわかりやすく、漏れなく 行うために用いる確認事項。 W h e n （ い つ ） W h e r e （ ど こ で ） W h o （ 誰 が ） W h o m （ 誰 に ） W h y （ な ぜ ） W h a t （ 何 を ） H o w （ ど の よ う に ） How much（いくら）
- 41. • ユーザー視点の精度が向上 • 意思決定が早く的確に • イメージが共有しやすくなる • 企画の質が向上 6w2h基づいた設計：Whom
- 44. 6w2h基づいた設計：Whom ペルソナマーケティングの成功事例 • TBC 都内在住の自営業者（44歳）、年収900万円、 家族は1歳下の妻と長男16歳、長女13歳の4人家族・・・ • クールドラフト（アサヒビール） 三軒茶屋のワンルールマンションに住んでいる 都内のA学院大学に通う20歳の男性 • ジャガビー（カルビー） 文京区在住、ヨガと水泳に凝っている27歳の独身女性 参考：ペルソナマーケティングが5分で理解できる！【日本企業の厳選事例6選】 http://liskul.com/wm_personam6-5104
- 66. トーン＆マナーを共有
- 70. 仕様設計
- 74. 仕様設計：グルーピング • 企業情報系 「企業理念」や「会社概要」など • 製品情報系 「商品ページ」や「製品紹介」など • サポート系 「ご利用ガイド」や「よくある質問」など • 告知系 「ニュース＆トピックス」や 「キャンペーン情報」など • 後押し系 「お客様の声」や「レビュー」など 競合サイトを調査し、ユーザー視点で大きく分類。一定の ルールに沿った括りを設けることでわかりやすくなります。
- 76. 仕様設計：優先順位 配置による誘導 上下左右のレイアウトによる違い。 ① ② ③ ④ 上下 左右＞ ① ② ③ ④ ⑤ ⑥ ⑦ ⑧ ⑨
- 79. 仕様設計 クライアント環境や制作に関する ガイドラインをまとめておく • OS環境 ・・・ Windows / mac • 対応ブラウザ ・・・ IE / Safari / Chrome / Firefox / Opera の推奨バージョン • スクリーンサイズ ・・・ デスクトップ / スマートフォン におけるサイズを数値で • 文字コード ・・・ UTF-8 / S-JIS / EUC-JP のいずれか • マークアップ ・・・HTML5 + CSS3 • CMS ・・・ WP / MT / baserCMS など • 解析ツール ・・・ GoogleAnalytics 毎回0から定義は不要。 確認が必要なものはフォーマット化しておく。
- 80. まとめ
- 81. まとめ まとめ Webディレクターは忙しい フレームワークをもつ ブレるディレクターは誰も必要していない なりきるプロであれ！ 広い知識とコミュニケーションスキル 「ありがとう」「ごめんなさい」