CSS Nite in AOMORI 基調講演資料。 マルチデバイス化がますます進む 2013 年。これは対応するスクリーンが増えただけではなく、新たな考え方を身につけなければいけないことを意味しています。今までのやり方が通用しないのは Web サイト制作だけのことではなく、マーケティングやブランディングなど他の分野にも共通していえることです。「コンテンツが大事」と昔から言われていますが、今までと同じやり方では大事なコンテンツが人へ届かないということになります。 コンテンツの設計から始めることで、より柔軟で拡張性のある Web サイトを作るためのワークフローのヒントを紹介します。

1. 長谷川恭久CSS Nite in AOMORI, Vol.7 2013年4月27日
コンテンツから始まる新しいWebワークフロー

2. ハ セ ガ ワ ヤ ス ヒ サ
yhassy

3. CSS Nite in TAKAMATSU
（2012）
‣ 進むマルチデバイス化
‣ 多種多様なWebとの関わり
‣ 従来の作り方の限界

5. レイアウト
タイポグラフィ
色
コピー
写真・動画
テキスト
情報の優先度
操作感
導線

7. 5.5インチのディスプレイ
27インチのタブレット？

8. https://twitter.com/dkdsgn/status/322342508912852992
2.8
3.14
3.2
3.4
3.5
3.6 3.65
4.0
4.2
4.27
4.3
4.5
4.52
4.65
4.85.0
5.3
5.5
5.86.3
7.0
7.7
7.0
10 10.1

9. ビジュアル
コンテンツ
画面遷移・インタラクション
（プロトタイプ）

10. コンテンツ プロトタイプ

11. コンテンツ
‣ 後回しにしないコンテンツ開発
‣ マルチデバイス化への構造化
‣ 人のためになるコンテンツ配信

12. ‣ カンプはリスクになる
‣ 模索ができる『何か』
‣ 使い勝手や画面遷移 プロトタイプ

13. プロトタイプコンテンツ

14. コンテンツ
データ収集 分析・解析 ゴール設定

15. プロトタイプ
‣ プロトタイプの目的が明確になる
‣ ツールの選定がしやすくなる
‣ 仮説を基にしたプロトタイプの設計

16. スタイルガイド UIライブラリ スタイルタイル
ビジュアル

17. プロトタイプ
ビジュアル
データ収集 解析・分析 ゴール設定

18. データ収集
ORGANIZE DATA

24. 自動化ツールでページを収集
必要最低限のデータを収集・管理
棚卸しは必ずする

25. 分析・解析
ANALYZE DATA

27. ページビュー・訪問者数
直帰率・離脱率
滞在時間
ゴール達成数
売り上げ

28. ‣ なぜアクセスされているのか？
‣ なぜお問い合わせボタンを押さない？
‣ ソーシャル経由は直帰率がなぜ高い？
分析・解析

29. ダッシュボード
カスタムレポート
アドバンス セグメント

30. ‣ サイトパフォーマンス ダッシュボード http://bit.ly/11vzaQS
‣ 直帰しなかったソーシャルトラフィック http://bit.ly/11vzKht
‣ Not Provided 以外のオルガニック検索 http://bit.ly/11vAbbv
‣ タブレット以外のモバイルトラフィック http://bit.ly/11vAmn2
‣ 時間ごとにトラフィックを解析 http://bit.ly/hrdreport

31. ゴール設定
SET YOUR GOAL

33. ゴールなしのサイト制作は意味なし
測定可能なデータからゴールを設定
可能な限り明確なゴールを立てる
測定のためのテンプレートを制作ゴール設定

34. Design is how it works
デザインはどのように機能するかである。

35. データ収集 分析・解析 ゴール設定
ユーザビリティ利用者像 CMS設計

36. データ収集 分析・解析 ゴール設定
‣ ターゲット利用者が本当に必要なコンテンツの開発
‣ 実現可能なコンテンツ配信の計画ができる
‣ フォーカスされることによりコスト削減
‣ 様々なチャンネルで一貫したメッセージ配信

37. コンテンツ

38. プロトタイプ

39. プロトタイプ
ブログ記事からお問い合わせへ誘導したい
導線を複数提案
スケッチ / HTML / 画像ツール
検証・調整

42. コンテンツ

43. ビジュアル

44. ビジュアル
ターゲットに合ったビジュアルは何？
スタイルブック・見本帳
色 / 形 / 雰囲気の擦り合わせ
検証・調整

46. ‣ ボタン
‣ ヘッダー
‣ ボックス
‣ リスト
‣ ボタン
‣ 本文
‣ 画像・写真
‣ テーブル

47. データ収集 分析・解析 ゴール設定
プロトタイプ
ビジュアル

48. コンテンツから始めると変わる
コンテンツの棚卸しに挑戦
データによって伸びるクリエイティブ
小さく始めて、着実な検証コンテンツ

49. 基礎講座
コンテンツ
戦略
UI設計

50. 基礎講座
コンテンツ
戦略
UI設計
マルチデバイス化のためのコンテンツ戦略
コンテンツを活かすための UI 設計

51. mail@yasuhisa.com
@yhassy
長谷川恭久
yasuhisa.com/could
THANK YOU!