2013年1月、茅場町コワーキングスペース Co-Edo で開催されたセミナー＆ワークショップのスライド。ワークショップの部分を省いたかたちで公開してあります。 解説記事はこちら http://www.yasuhisa.com/could/article/content-for-multidevices/

1. design content
for
multiple devices
マルチデバイス化を見据えたコンテンツ設計
CSS Nite @ Co-Edo
2013年1月11日
長谷川恭久

2. ハ
セ
ガ
ワ
ヤ
ス
ヒ
サ
長谷川恭久
@yhassy

4. 70%
IKEA

5. 100+
Groupon

6. $
7B
Coca Cola

7. 61%
52%
Custom Content
Blogs
42%
Articles & Blogs
Brafton (2012)

8. 収益
ブランド ロイアリティ
リスク管理
市場拡大

9. question

11. ブログ記事
オンラインセミナー
Webページ
ニュースレター
オーディオ
プレスリリース
ビデオ
記事
写真
ホワイトペーパー
電子書籍
自動返信メール
ケーススタディ
インフォグラフィック

12. 利用者が
必要としているものは？
利用者のタスクの達成を補助するために
必要とされる要素。

13. Useful
使える
Consistent
一貫性
User Centered
利用者中心
Clear
明確
Concise
簡潔

14. コワーキングスペース良いよ！

15. Co-Edoのコワーキングスペース良いよ！

16. Co-Edoにはこんな良いことあるよ！

17. Co-Edoであなたの仕事がこう変わる！

18. Cafe Co-Edo
ニュース
シェフのメッセージ
コンセプト
メニュー
イベント
今月のおすすめ
〒104-0033 東京都中央区新川1-3-4 PAビル5F
お問い合わせ
ニュース

19. メイン画像
予約
（アニメーション付）
おすすめ
コンセプト
ニュース
店名
シェフからのメッセージ
プロモーション
（読み方含む）
お問い合わせ
本日のランチ
（又はディナー）
駐車場情報

20. 企業ミッション
代表者の挨拶
冗長な文書
ギミック
イントロムービー
当たり前を疑い省く

21. 86%
Information
20%
Facebook Users
Pew Internet Research (2012)
by Johan Larsson

22. Useful
使える
User Centered
利用者中心
Consistent
一貫性
Clear
Concise
簡潔
明確

23. Useful
使える
User Centered
利用者中心
Consistent
Clear
簡潔
フォーカス
Social
ソーシャル
一貫性
Concise
Focus
明確

24. What about Context?
コンテキスト（文脈）はどうなの？
by Ed Yourdon

27. デバイス
天気
知識
経験
ムード
場所
社会
文化
使い方
目的
時間
人との距離
欲求

28. ムード
場所
ゴール
動き
好み
Context
ヒューマン
テクニカル
時間
デバイス
期待
欲求
天気

29. ムード
場所
ゴール
動き
好み
Context
ヒューマン
テクニカル
時間
デバイス
期待
欲求
天気

30. ユーザー設定
デバイス
履歴
検索キーワード

34. GPS / IPアドレス
ネットワーク
履歴
時間
ソーシャルメディア

35. Not yet
Is Context King?

36. 情報交換
ショッピング
メール
What is mobile?
モバイルだからといって使い方って限定してる？
Web観覧
読書
ビデオ
ブログ

37. 31%
Pew (2012)
28%
Pew (2011)

38. いつ、どこで、どのように
コンテンツにアクセスするかは利用者の自由

39. コンテキストを察知して
パーソナライズ化した
コンテンツを
用意しましたー。

40. コンテキストを察知して
パーソナライズ化した
いや、
コンテンツを
そんなの頼んでないし。
用意しましたー。

41. Context will be King

43. Content is Broken
今のコンテンツは壊れている

45. <meta property="og:title" content="ソムリエは知っている！ ボジョレーよりもおすすめのヌーヴォー（新
酒ワイン）" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://www.lifehacker.jp/
2012/11/121118sommelier.html" />
<meta property="og:image" content="http://www.lifehacker.jp/upload_files/
121118sommelier.jpg" />
<meta property="og:description" content="皆様こんにちは。グルメスチュワートの浅田です。街の装いも
変わって、少しずつ本格的な冬が近づいてきま" />

50. ?
現状、どのようにコンテンツが管理されているのか？システムは？
Webマスターは誰？また、コンテンツの責任者は？
?
見直しや、調整が行われているか？コンテンツは古くなってないか？
?
コンテンツ制作や配信のためのルールは築かれているか？

53. プレミアムデザイン
リッチインタラクション

54. 6バージョン作成
3倍以上のコスト

55. 4.1%
810,000

57. 5.5インチのディスプレイ

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

59. ?
現存の情報を再利用できるのか？それとも新しくコンテンツを作らなけ
ればならないのか？
?
現存の CMS と連携ができるのか？配信までのプロセスは？
?
もし、新しいサービスのフレームワークを現存の CMS が保持できない
なら、すべて新しい CMS へ移行するのか？それとも別なのを加えるの
か？

60. すべてを自動化できない
今だけのことを考えて作れない
作る以外にも考えることが多い
コンテンツはとてもコスト高！

61. 真のマルチデバイス化という新しい価値の提供
長期的なお客様、利用者への満足
より、コンテンツを活かしたデザインをつくるチャンス

62. Content is Hard!
コンテンツは難しい！

63. 企画
仕様設計
デザイン
制作・開発
リリース

64. 企画
仕様設計
デザイン
制作・開発
リリース

65. by Harsh Agrawal

66. 86%
Neilsen, Google

67. 78%
Model Metrics 2011
by Adam Grabek

68. Smatrphone
Computer
Tablet
Game Console
アメリカの 6 歳から 19 歳までの男女

69. 啓蒙
レビュー
調整・構成
最適化

71. 今あるコンテンツの在庫項目を洗い出す
コンテンツの品質チェック
ミスや手直しが必要なものの作業をする
他に必要なコンテンツがあるか話し合う

79. Content Model
コンテンツモデル

80. Content Model
コンテンツの細分化
最小の単位を定義する工程
設計のためのテンプレート
コンテンツモデル

92. COPE
Create Once, Publish Everywhere
１回作り込んで、すべての場で配信する

93. 日付
タイトル
画像
本文
地図
会場情報
申し込み

94. 日付
短めのタイトル
タイトル
画像
本文
地図
会場情報
申し込み

95. 日付
短めのタイトル
タイトル
サムネイル
画像
本文
地図
会場情報
申し込み

96. 日付
短めのタイトル
タイトル
サムネイル
画像
詳細
スピーカー
概要
日付
地図
会場情報
申し込み
会場
開始時間
終了時間

99. 日付
サブタイトル
タイトル
サムネイル
詳細
画像
スピーカー
概要
日付
地図
会場情報
申し込み
会場
開始時間
終了時間

100. プレスリリース
タイトル（短）
タイトル（長）
イントロダクション
本文
概要
サムネイル
公開日
改訂日
担当者名
添付ファイル
関連製品
お問い合わせ情報

101. パソコン
モバイル
ソーシャル
タイトル（長）
タイトル（短）
タイトル（短）
イントロダクション
イントロダクション
サムネイル
公開日
公開日
概要
改訂日
改訂日
本文
本文
関連製品
関連製品
添付ファイル
お問い合わせ情報
お問い合わせ情報
担当者名
担当者名

102. ゴールに沿ったモデリングかどうか
運営するためのリソースがあるか
メッセージを伝えるために十分かどうか
トーン＆マナーは適しているかどうか

103. CMS

104. CMS=API

105. CMS=API
再利用できるような設計を意識する
コンテンツは自由に組み合わせができる小さな塊
コンテンツとスタイリングを切り離す
メタデータを入力できる環境を整える

106. ページ
パッケージ

108. モバイルだからという先入観をもたない
利用者にとっての良いコンテンツをつくる
早い段階からスタート
デザインがより自由になる
CMSをAPIのように使ってみる

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