Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
design content
for

multiple devices
マルチデバイス化を見据えたコンテンツ設計

CSS Nite @ Co-Edo

2013年1月11日

長谷川恭久
ハ

セ

ガ

ワ

ヤ

ス

ヒ

サ

長谷川恭久
@yhassy
70%
IKEA
100+
Groupon
$

7B
Coca Cola
61%

52%

Custom Content

Blogs

42%
Articles & Blogs

Brafton (2012)
収益
ブランド ロイアリティ
リスク管理
市場拡大
question
ブログ記事

オンラインセミナー

Webページ

ニュースレター

オーディオ

プレスリリース

ビデオ

記事

写真

ホワイトペーパー

電子書籍

自動返信メール

ケーススタディ

インフォグラフィック
利用者が
必要としているものは?

利用者のタスクの達成を補助するために
必要とされる要素。
Useful
使える

Consistent
一貫性

User Centered
利用者中心

Clear
明確

Concise
簡潔
コワーキングスペース良いよ!
Co-Edoのコワーキングスペース良いよ!
Co-Edoにはこんな良いことあるよ!
Co-Edoであなたの仕事がこう変わる!
Cafe Co-Edo
ニュース

シェフのメッセージ

コンセプト

メニュー

イベント

今月のおすすめ

〒104-0033 東京都中央区新川1-3-4 PAビル5F

お問い合わせ

ニュース
メイン画像

予約

(アニメーション付)

おすすめ

コンセプト
ニュース

店名

シェフからのメッセージ

プロモーション

(読み方含む)

お問い合わせ

本日のランチ
(又はディナー)

駐車場情報
企業ミッション

代表者の挨拶

冗長な文書

ギミック

イントロムービー

当たり前を疑い省く
86%
Information

20%
Facebook Users

Pew Internet Research (2012)
by Johan Larsson
Useful
使える

User Centered
利用者中心

Consistent
一貫性

Clear

Concise
簡潔

明確
Useful
使える

User Centered
利用者中心

Consistent
Clear
簡潔

フォーカス

Social
ソーシャル

一貫性

Concise

Focus

明確
What about Context?
コンテキスト(文脈)はどうなの?

by Ed Yourdon
デバイス

天気

知識
経験

ムード
場所

社会
文化

使い方

目的
時間

人との距離
欲求
ムード

場所

ゴール
動き
好み

Context

ヒューマン

テクニカル

時間
デバイス
期待
欲求

天気
ムード

場所

ゴール
動き
好み

Context

ヒューマン

テクニカル

時間
デバイス
期待
欲求

天気
ユーザー設定

デバイス

履歴

検索キーワード
GPS / IPアドレス
ネットワーク
履歴
時間
ソーシャルメディア
Not yet

Is Context King?
情報交換

ショッピング
メール

What is mobile?
モバイルだからといって使い方って限定してる?

Web観覧

読書

ビデオ

ブログ
31%
Pew (2012)

28%
Pew (2011)
いつ、どこで、どのように
コンテンツにアクセスするかは利用者の自由
コンテキストを察知して
パーソナライズ化した
コンテンツを
用意しましたー。
コンテキストを察知して
パーソナライズ化した

いや、

コンテンツを

そんなの頼んでないし。

用意しましたー。
Context will be King
Content is Broken
今のコンテンツは壊れている
<meta property="og:title" content="ソムリエは知っている! ボジョレーよりもおすすめのヌーヴォー(新
酒ワイン)" />
<meta property="og:type" content="article" /...
?

現状、どのようにコンテンツが管理されているのか?システムは?
Webマスターは誰?また、コンテンツの責任者は?

?

見直しや、調整が行われているか?コンテンツは古くなってないか?

?

コンテンツ制作や配信のためのルールは築かれてい...
プレミアムデザイン

リッチインタラクション
6バージョン作成

3倍以上のコスト
4.1%

810,000
5.5インチのディスプレイ
5.5インチのディスプレイ

27インチのタブレット?
?

現存の情報を再利用できるのか?それとも新しくコンテンツを作らなけ
ればならないのか?

?

現存の CMS と連携ができるのか?配信までのプロセスは?

?

もし、新しいサービスのフレームワークを現存の CMS が保持できない
なら、...
すべてを自動化できない
今だけのことを考えて作れない
作る以外にも考えることが多い
コンテンツはとてもコスト高!
真のマルチデバイス化という新しい価値の提供
長期的なお客様、利用者への満足
より、コンテンツを活かしたデザインをつくるチャンス
Content is Hard!
コンテンツは難しい!
企画

仕様設計

デザイン

制作・開発

リリース
企画

仕様設計

デザイン

制作・開発

リリース
by Harsh Agrawal
86%
Neilsen, Google
78%
Model Metrics 2011

by Adam Grabek
Smatrphone

Computer

Tablet

Game Console

アメリカの 6 歳から 19 歳までの男女
啓蒙

レビュー

調整・構成

最適化
今あるコンテンツの在庫項目を洗い出す
コンテンツの品質チェック
ミスや手直しが必要なものの作業をする
他に必要なコンテンツがあるか話し合う
Content Model
コンテンツモデル
Content Model
コンテンツの細分化
最小の単位を定義する工程
設計のためのテンプレート

コンテンツモデル
COPE

Create Once, Publish Everywhere

1回作り込んで、すべての場で配信する
日付

タイトル

画像

本文

地図

会場情報

申し込み
日付
短めのタイトル
タイトル

画像

本文

地図

会場情報

申し込み
日付
短めのタイトル
タイトル

サムネイル

画像

本文

地図

会場情報

申し込み
日付
短めのタイトル
タイトル

サムネイル

画像

詳細

スピーカー

概要

日付

地図

会場情報

申し込み

会場

開始時間

終了時間
日付

サブタイトル

タイトル

サムネイル

詳細

画像

スピーカー

概要

日付

地図

会場情報

申し込み

会場

開始時間

終了時間
プレスリリース

タイトル(短)

タイトル(長)

イントロダクション

本文

概要

サムネイル

公開日

改訂日

担当者名

添付ファイル

関連製品

お問い合わせ情報
パソコン

モバイル

ソーシャル

タイトル(長)

タイトル(短)

タイトル(短)

イントロダクション

イントロダクション

サムネイル

公開日

公開日

概要

改訂日

改訂日

本文

本文

関連製品

関連製品

添付フ...
ゴールに沿ったモデリングかどうか
運営するためのリソースがあるか
メッセージを伝えるために十分かどうか
トーン&マナーは適しているかどうか
CMS
CMS=API
CMS=API
再利用できるような設計を意識する
コンテンツは自由に組み合わせができる小さな塊
コンテンツとスタイリングを切り離す
メタデータを入力できる環境を整える
ページ

パッケージ
モバイルだからという先入観をもたない
利用者にとっての良いコンテンツをつくる
早い段階からスタート
デザインがより自由になる
CMSをAPIのように使ってみる
THANK YOU!
長谷川恭久
mail@yasuhisa.com
@yhassy
yasuhisa.com/could
マルチデバイスを見据えたコンテンツ設計
マルチデバイスを見据えたコンテンツ設計
マルチデバイスを見据えたコンテンツ設計
マルチデバイスを見据えたコンテンツ設計
マルチデバイスを見据えたコンテンツ設計
マルチデバイスを見据えたコンテンツ設計
マルチデバイスを見据えたコンテンツ設計
マルチデバイスを見据えたコンテンツ設計
マルチデバイスを見据えたコンテンツ設計
マルチデバイスを見据えたコンテンツ設計
マルチデバイスを見据えたコンテンツ設計
マルチデバイスを見据えたコンテンツ設計
マルチデバイスを見据えたコンテンツ設計
マルチデバイスを見据えたコンテンツ設計
マルチデバイスを見据えたコンテンツ設計
マルチデバイスを見据えたコンテンツ設計
マルチデバイスを見据えたコンテンツ設計
マルチデバイスを見据えたコンテンツ設計
マルチデバイスを見据えたコンテンツ設計
マルチデバイスを見据えたコンテンツ設計
マルチデバイスを見据えたコンテンツ設計
マルチデバイスを見据えたコンテンツ設計
マルチデバイスを見据えたコンテンツ設計
マルチデバイスを見据えたコンテンツ設計
マルチデバイスを見据えたコンテンツ設計
マルチデバイスを見据えたコンテンツ設計
マルチデバイスを見据えたコンテンツ設計
マルチデバイスを見据えたコンテンツ設計
マルチデバイスを見据えたコンテンツ設計
マルチデバイスを見据えたコンテンツ設計
マルチデバイスを見据えたコンテンツ設計
マルチデバイスを見据えたコンテンツ設計
マルチデバイスを見据えたコンテンツ設計
マルチデバイスを見据えたコンテンツ設計
マルチデバイスを見据えたコンテンツ設計
マルチデバイスを見据えたコンテンツ設計
マルチデバイスを見据えたコンテンツ設計
マルチデバイスを見据えたコンテンツ設計
Prochain SlideShare
Chargement dans…5
×

マルチデバイスを見据えたコンテンツ設計

2013年1月、茅場町コワーキングスペース Co-Edo で開催されたセミナー&ワークショップのスライド。ワークショップの部分を省いたかたちで公開してあります。

解説記事はこちら
http://www.yasuhisa.com/could/article/content-for-multidevices/

  • Soyez le premier à commenter

マルチデバイスを見据えたコンテンツ設計

  1. 1. design content for multiple devices マルチデバイス化を見据えたコンテンツ設計 CSS Nite @ Co-Edo 2013年1月11日 長谷川恭久
  2. 2. ハ セ ガ ワ ヤ ス ヒ サ 長谷川恭久 @yhassy
  3. 3. 70% IKEA
  4. 4. 100+ Groupon
  5. 5. $ 7B Coca Cola
  6. 6. 61% 52% Custom Content Blogs 42% Articles & Blogs Brafton (2012)
  7. 7. 収益 ブランド ロイアリティ リスク管理 市場拡大
  8. 8. question
  9. 9. ブログ記事 オンラインセミナー Webページ ニュースレター オーディオ プレスリリース ビデオ 記事 写真 ホワイトペーパー 電子書籍 自動返信メール ケーススタディ インフォグラフィック
  10. 10. 利用者が 必要としているものは? 利用者のタスクの達成を補助するために 必要とされる要素。
  11. 11. Useful 使える Consistent 一貫性 User Centered 利用者中心 Clear 明確 Concise 簡潔
  12. 12. コワーキングスペース良いよ!
  13. 13. Co-Edoのコワーキングスペース良いよ!
  14. 14. Co-Edoにはこんな良いことあるよ!
  15. 15. Co-Edoであなたの仕事がこう変わる!
  16. 16. Cafe Co-Edo ニュース シェフのメッセージ コンセプト メニュー イベント 今月のおすすめ 〒104-0033 東京都中央区新川1-3-4 PAビル5F お問い合わせ ニュース
  17. 17. メイン画像 予約 (アニメーション付) おすすめ コンセプト ニュース 店名 シェフからのメッセージ プロモーション (読み方含む) お問い合わせ 本日のランチ (又はディナー) 駐車場情報
  18. 18. 企業ミッション 代表者の挨拶 冗長な文書 ギミック イントロムービー 当たり前を疑い省く
  19. 19. 86% Information 20% Facebook Users Pew Internet Research (2012) by Johan Larsson
  20. 20. Useful 使える User Centered 利用者中心 Consistent 一貫性 Clear Concise 簡潔 明確
  21. 21. Useful 使える User Centered 利用者中心 Consistent Clear 簡潔 フォーカス Social ソーシャル 一貫性 Concise Focus 明確
  22. 22. What about Context? コンテキスト(文脈)はどうなの? by Ed Yourdon
  23. 23. デバイス 天気 知識 経験 ムード 場所 社会 文化 使い方 目的 時間 人との距離 欲求
  24. 24. ムード 場所 ゴール 動き 好み Context ヒューマン テクニカル 時間 デバイス 期待 欲求 天気
  25. 25. ムード 場所 ゴール 動き 好み Context ヒューマン テクニカル 時間 デバイス 期待 欲求 天気
  26. 26. ユーザー設定 デバイス 履歴 検索キーワード
  27. 27. GPS / IPアドレス ネットワーク 履歴 時間 ソーシャルメディア
  28. 28. Not yet Is Context King?
  29. 29. 情報交換 ショッピング メール What is mobile? モバイルだからといって使い方って限定してる? Web観覧 読書 ビデオ ブログ
  30. 30. 31% Pew (2012) 28% Pew (2011)
  31. 31. いつ、どこで、どのように コンテンツにアクセスするかは利用者の自由
  32. 32. コンテキストを察知して パーソナライズ化した コンテンツを 用意しましたー。
  33. 33. コンテキストを察知して パーソナライズ化した いや、 コンテンツを そんなの頼んでないし。 用意しましたー。
  34. 34. Context will be King
  35. 35. Content is Broken 今のコンテンツは壊れている
  36. 36. <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="皆様こんにちは。グルメスチュワートの浅田です。街の装いも 変わって、少しずつ本格的な冬が近づいてきま" />
  37. 37. ? 現状、どのようにコンテンツが管理されているのか?システムは? Webマスターは誰?また、コンテンツの責任者は? ? 見直しや、調整が行われているか?コンテンツは古くなってないか? ? コンテンツ制作や配信のためのルールは築かれているか?
  38. 38. プレミアムデザイン リッチインタラクション
  39. 39. 6バージョン作成 3倍以上のコスト
  40. 40. 4.1% 810,000
  41. 41. 5.5インチのディスプレイ
  42. 42. 5.5インチのディスプレイ 27インチのタブレット?
  43. 43. ? 現存の情報を再利用できるのか?それとも新しくコンテンツを作らなけ ればならないのか? ? 現存の CMS と連携ができるのか?配信までのプロセスは? ? もし、新しいサービスのフレームワークを現存の CMS が保持できない なら、すべて新しい CMS へ移行するのか?それとも別なのを加えるの か?
  44. 44. すべてを自動化できない 今だけのことを考えて作れない 作る以外にも考えることが多い コンテンツはとてもコスト高!
  45. 45. 真のマルチデバイス化という新しい価値の提供 長期的なお客様、利用者への満足 より、コンテンツを活かしたデザインをつくるチャンス
  46. 46. Content is Hard! コンテンツは難しい!
  47. 47. 企画 仕様設計 デザイン 制作・開発 リリース
  48. 48. 企画 仕様設計 デザイン 制作・開発 リリース
  49. 49. by Harsh Agrawal
  50. 50. 86% Neilsen, Google
  51. 51. 78% Model Metrics 2011 by Adam Grabek
  52. 52. Smatrphone Computer Tablet Game Console アメリカの 6 歳から 19 歳までの男女
  53. 53. 啓蒙 レビュー 調整・構成 最適化
  54. 54. 今あるコンテンツの在庫項目を洗い出す コンテンツの品質チェック ミスや手直しが必要なものの作業をする 他に必要なコンテンツがあるか話し合う
  55. 55. Content Model コンテンツモデル
  56. 56. Content Model コンテンツの細分化 最小の単位を定義する工程 設計のためのテンプレート コンテンツモデル
  57. 57. COPE Create Once, Publish Everywhere 1回作り込んで、すべての場で配信する
  58. 58. 日付 タイトル 画像 本文 地図 会場情報 申し込み
  59. 59. 日付 短めのタイトル タイトル 画像 本文 地図 会場情報 申し込み
  60. 60. 日付 短めのタイトル タイトル サムネイル 画像 本文 地図 会場情報 申し込み
  61. 61. 日付 短めのタイトル タイトル サムネイル 画像 詳細 スピーカー 概要 日付 地図 会場情報 申し込み 会場 開始時間 終了時間
  62. 62. 日付 サブタイトル タイトル サムネイル 詳細 画像 スピーカー 概要 日付 地図 会場情報 申し込み 会場 開始時間 終了時間
  63. 63. プレスリリース タイトル(短) タイトル(長) イントロダクション 本文 概要 サムネイル 公開日 改訂日 担当者名 添付ファイル 関連製品 お問い合わせ情報
  64. 64. パソコン モバイル ソーシャル タイトル(長) タイトル(短) タイトル(短) イントロダクション イントロダクション サムネイル 公開日 公開日 概要 改訂日 改訂日 本文 本文 関連製品 関連製品 添付ファイル お問い合わせ情報 お問い合わせ情報 担当者名 担当者名
  65. 65. ゴールに沿ったモデリングかどうか 運営するためのリソースがあるか メッセージを伝えるために十分かどうか トーン&マナーは適しているかどうか
  66. 66. CMS
  67. 67. CMS=API
  68. 68. CMS=API 再利用できるような設計を意識する コンテンツは自由に組み合わせができる小さな塊 コンテンツとスタイリングを切り離す メタデータを入力できる環境を整える
  69. 69. ページ パッケージ
  70. 70. モバイルだからという先入観をもたない 利用者にとっての良いコンテンツをつくる 早い段階からスタート デザインがより自由になる CMSをAPIのように使ってみる
  71. 71. THANK YOU! 長谷川恭久 mail@yasuhisa.com @yhassy yasuhisa.com/could

×