SlideShare a Scribd company logo
「なんとなく」を共有する
コンテンツを活かしたデザインプロセス
WCAN 2014 Winter 長谷川恭久 2014年12月20日
Contentコンテンツ
「なんとなく」を共有する、コンテンツを活かしたデザインプロセス
「なんとなく」を共有する、コンテンツを活かしたデザインプロセス
「なんとなく」を共有する、コンテンツを活かしたデザインプロセス
「なんとなく」を共有する、コンテンツを活かしたデザインプロセス
装飾を添える
レイアウトを組む
魅力的な演出を加える
パフォーマンスを考慮する
プライオリティを決める
利用者の役に立つ演出
「なんとなく」を共有する、コンテンツを活かしたデザインプロセス
「なんとなく」を共有する、コンテンツを活かしたデザインプロセス
行動を促すコンテンツ
利用者の今のニーズに応える
ストーリーを構築
「なんとなく」を共有する、コンテンツを活かしたデザインプロセス
1995 1997 1999 2001 2003 2005 2007 2009 2011 2013
250
500
750
1000
1250
パソコン スマートフォン&タブレット
Enders Analysis
デバイス販売台数(100万)
The Nielsen Company
The Nielsen Company
Consumer Barometer by Google
2.3
0.1 1.0 10
Nielsen Norman Group (1993)
0-1 1-2 2-3 3-4 4-5 5-10 10-20 20-30 30-40
0.04
0.03
0.02
0.01
コンバージョン率と表示速度の関係
表示速度(秒)
コンバージョン率
TagMan(2014)
「なんとなく」を共有する、コンテンツを活かしたデザインプロセス
1995 1997 1999 2001 2003 2005 2007 2009 2011 2013
250
500
750
1000
1250
パソコン スマートフォン&タブレット
Enders Analysis
デバイス販売台数(100万)
行動を促すコンテンツ
利用者の今のニーズに応える
ストーリーを構築
ゼロから考え直す
Contentコンテンツ
「なんとなく」を共有する、コンテンツを活かしたデザインプロセス
?
「なんとなく」を共有する、コンテンツを活かしたデザインプロセス
Creative
Data Creative
利用者が
求めているもの
配信側が
出したいもの
「なんとなく」を共有する、コンテンツを活かしたデザインプロセス
利用者は誰なのか?
どのように訪れたのか?
どの順序で利用したのか?
地域
新規とリピーター
モバイルの利用状況
リピートの回数や間隔
ユーザーのロイヤリティ
人間像を作る材料
デバイスと行動の関係
長期の傾向を見極める
キーワード(有料・オーガニック)
チャンネル
すべての参照
キーワード
ページビュー 直帰率新規ユーザー
観覧数 滞在時間 目標達成率
動機をみつける材料
必要なコンテンツを探す
利用者が使う言葉を学習
ページビュー(高・低両方とも)
ランディングページ
離脱ページ
行動フロー(目標達成)
コンテンツ
滞在時間 直帰率離脱率
ランディング 表示速度 目標達成率
品質を見極める材料
導線の課題を洗い出す
誰が どのように 何を
インタビューの目的
利用者の動機を深堀
仮説の検証
ペルソナ
• ビジネスコンサルタントとして半年前に独立
• 社員なしで、経理など信頼している事務所に任せている
• 複数のクライアントを既に抱えており、オフィスにいる時間はあまりない。打
ち合わせの間にあるわずかな時間をつかって、クライアントとのやりとや、資
料作成を行っている。
• パソコン、スマートフォンの使用経験も長く、自社ツールとして Google
Apps を活用している。出先が多いことから、オンラインで手軽にやりとり出
来るツールに興味をもっている。
杉浦さん
30代半ば
シナリオ
ビジネスコンサルタントとして独立したばかりの杉浦さんですが、既に複数のク
ライアントを抱える忙しい毎日を過ごしています。日中はクライアントやコンサ
ルタントとの打合せでスケジュールが一杯になるため、オフィスでゆっくりでき
るのは、早朝と帰宅前の夜のみ。資料作成は、オフィスより打ち合わせの合間に
立ち寄るカフェということも少なくありません。
なんとかうまくいっているものの、お客様とのコミュニケーションが手薄になっ
ているのが気になるところ。特に会議後のフォローアップや、問題点の共有がう
まくいっていないイメージがあります。メールのやりとりでは、読んでいるのか
え分からないですし、様々な資料を五月雨式に共有すると、混乱を招くことがあ
ります。プロジェクト管理ツールの導入を試みましたが、お客様が使いこなせ
ず、結局メールに戻るということがしばしば。
お客様にも使えて、コミュニケーションの漏れを防ぐのが今の課題。自分はオン
ラインサービスを使うことに抵抗はないが、お客様でも使えるものを選ぶのが最
大の難関です。そこで、知り合いが以前熱く語っていた ChatWork を試してみ
ることにしました。
• 他のペルソナに比べて、ITリテラシーが比較的高めな場合、どうなるか
を検証。Web/IT 業界以外にいる「スマートビジネスマン」を対象。
• こうした属性が落とし難い理由は、彼等は自分たちで積極的にツールを
使ったり情報収集しているので、自分たちはちゃんと使っていると思い
込んでいる場合があります。リテラシーの高さがかえって、 ChatWork
を使うことを躊躇していることもありえる。
このペルソナの意図
自分の仕事につかえるかどうか。ニーズに応えてくれそうかどうか。
お客様でも手軽に使えるかどうか。
知り合いが熱く語っている理由はなにか。どこが良いところなのか。
動機・意図
利用シーン
解説 チェックポイント
「なんとなく」を共有する、コンテンツを活かしたデザインプロセス
「なんとなく」を共有する、コンテンツを活かしたデザインプロセス
共感・共有するプロセス
データを基に発想
優先順位を決めるヒント
コンテンツシート
コンテンツ制作用共有シート
現状の把握に便利
コンテンツに集中できる
項目 仕様 例 備考
項目 仕様 例 備考
本文からメタタグキーワードまで
可能な限り細分化
項目 仕様 例 備考
文字数の指定
メディアファイルの形式
項目 仕様 例 備考
例文
少しでも書きやすくなるような工夫
項目 仕様 例 備考
なぜ必要なのか、注意点など
書き手が意図を説明
Contentコンテンツ
Contentコンテンツ
利用者の目的や欲求を満たすもの
文脈や動機の理解
レイアウトではなくプライオリティ
イメージ デザイン言葉
Data Creative
「なんとなく」を共有する、コンテンツを活かしたデザインプロセス
UXデザインプロセスを活用したコンテンツの評価方法
2015年1月31日(土)

More Related Content

Viewers also liked

"1DAY"編集学校
"1DAY"編集学校"1DAY"編集学校
"1DAY"編集学校
Yoshihiro Kanematsu
 
ユーザの潜在特徴を考慮した情報拡散モデルの学習
ユーザの潜在特徴を考慮した情報拡散モデルの学習ユーザの潜在特徴を考慮した情報拡散モデルの学習
ユーザの潜在特徴を考慮した情報拡散モデルの学習
Yuya Yoshikawa
 
"かわいい"を具現化した存在について
"かわいい"を具現化した存在について"かわいい"を具現化した存在について
"かわいい"を具現化した存在について
w1mvy pine
 
スプラトゥーンから見える“ハマる”しかけ
スプラトゥーンから見える“ハマる”しかけスプラトゥーンから見える“ハマる”しかけ
スプラトゥーンから見える“ハマる”しかけ
Azusa Akaishi
 
命名規則のススメ
命名規則のススメ命名規則のススメ
命名規則のススメ
natrium11321
 
「わからない」との付き合い方
「わからない」との付き合い方「わからない」との付き合い方
「わからない」との付き合い方
Eric Sartre
 
Design Thinking 2015
Design Thinking 2015Design Thinking 2015
Design Thinking 2015
Masanori Kado
 
SVG MANIAX Ver.2 - Mars vanilla
SVG MANIAX Ver.2 -  Mars vanillaSVG MANIAX Ver.2 -  Mars vanilla
SVG MANIAX Ver.2 - Mars vanilla
Naoki Matsuda
 
やりたいことを続けられる仕組みの作り方 - Omoroki DesignLang
やりたいことを続けられる仕組みの作り方 - Omoroki DesignLangやりたいことを続けられる仕組みの作り方 - Omoroki DesignLang
やりたいことを続けられる仕組みの作り方 - Omoroki DesignLang
Taketoshi Kamada
 
引き際の美学
引き際の美学引き際の美学
引き際の美学
Haruo Sato
 
おもしろく働くための「わらしべ長者方式」
おもしろく働くための「わらしべ長者方式」おもしろく働くための「わらしべ長者方式」
おもしろく働くための「わらしべ長者方式」
Shuichi Tsutsumi
 
「行けたら行く」の論理構造 〜きっと君は来ない〜
「行けたら行く」の論理構造 〜きっと君は来ない〜「行けたら行く」の論理構造 〜きっと君は来ない〜
「行けたら行く」の論理構造 〜きっと君は来ない〜
ajisaka motcho
 
デザインワークで使う「Pinterest」
デザインワークで使う「Pinterest」デザインワークで使う「Pinterest」
デザインワークで使う「Pinterest」
Eri Kakuho
 
クックパッドのグロースハックについて 20140218 ver1.1(更新版)
クックパッドのグロースハックについて 20140218 ver1.1(更新版)クックパッドのグロースハックについて 20140218 ver1.1(更新版)
クックパッドのグロースハックについて 20140218 ver1.1(更新版)
Kato Kyosuke
 
コンテンツ マーケティング革命
コンテンツ マーケティング革命コンテンツ マーケティング革命
コンテンツ マーケティング革命
Tactus Associates
 
もうやりきったと思ってませんか?まだまだやれるEFO-マルチデバイス時代のウェブフォーム顧客体験最適化
もうやりきったと思ってませんか?まだまだやれるEFO-マルチデバイス時代のウェブフォーム顧客体験最適化もうやりきったと思ってませんか?まだまだやれるEFO-マルチデバイス時代のウェブフォーム顧客体験最適化
もうやりきったと思ってませんか?まだまだやれるEFO-マルチデバイス時代のウェブフォーム顧客体験最適化
tanakayoshikif-code
 
コンテンツをディレクションするということ
コンテンツをディレクションするということコンテンツをディレクションするということ
コンテンツをディレクションするということ
Yoshihiro Kanematsu
 
青年海外協力隊・フィールド調査団の最終報告書
青年海外協力隊・フィールド調査団の最終報告書青年海外協力隊・フィールド調査団の最終報告書
青年海外協力隊・フィールド調査団の最終報告書
Daisuke Miyazaki
 

Viewers also liked (18)

"1DAY"編集学校
"1DAY"編集学校"1DAY"編集学校
"1DAY"編集学校
 
ユーザの潜在特徴を考慮した情報拡散モデルの学習
ユーザの潜在特徴を考慮した情報拡散モデルの学習ユーザの潜在特徴を考慮した情報拡散モデルの学習
ユーザの潜在特徴を考慮した情報拡散モデルの学習
 
"かわいい"を具現化した存在について
"かわいい"を具現化した存在について"かわいい"を具現化した存在について
"かわいい"を具現化した存在について
 
スプラトゥーンから見える“ハマる”しかけ
スプラトゥーンから見える“ハマる”しかけスプラトゥーンから見える“ハマる”しかけ
スプラトゥーンから見える“ハマる”しかけ
 
命名規則のススメ
命名規則のススメ命名規則のススメ
命名規則のススメ
 
「わからない」との付き合い方
「わからない」との付き合い方「わからない」との付き合い方
「わからない」との付き合い方
 
Design Thinking 2015
Design Thinking 2015Design Thinking 2015
Design Thinking 2015
 
SVG MANIAX Ver.2 - Mars vanilla
SVG MANIAX Ver.2 -  Mars vanillaSVG MANIAX Ver.2 -  Mars vanilla
SVG MANIAX Ver.2 - Mars vanilla
 
やりたいことを続けられる仕組みの作り方 - Omoroki DesignLang
やりたいことを続けられる仕組みの作り方 - Omoroki DesignLangやりたいことを続けられる仕組みの作り方 - Omoroki DesignLang
やりたいことを続けられる仕組みの作り方 - Omoroki DesignLang
 
引き際の美学
引き際の美学引き際の美学
引き際の美学
 
おもしろく働くための「わらしべ長者方式」
おもしろく働くための「わらしべ長者方式」おもしろく働くための「わらしべ長者方式」
おもしろく働くための「わらしべ長者方式」
 
「行けたら行く」の論理構造 〜きっと君は来ない〜
「行けたら行く」の論理構造 〜きっと君は来ない〜「行けたら行く」の論理構造 〜きっと君は来ない〜
「行けたら行く」の論理構造 〜きっと君は来ない〜
 
デザインワークで使う「Pinterest」
デザインワークで使う「Pinterest」デザインワークで使う「Pinterest」
デザインワークで使う「Pinterest」
 
クックパッドのグロースハックについて 20140218 ver1.1(更新版)
クックパッドのグロースハックについて 20140218 ver1.1(更新版)クックパッドのグロースハックについて 20140218 ver1.1(更新版)
クックパッドのグロースハックについて 20140218 ver1.1(更新版)
 
コンテンツ マーケティング革命
コンテンツ マーケティング革命コンテンツ マーケティング革命
コンテンツ マーケティング革命
 
もうやりきったと思ってませんか?まだまだやれるEFO-マルチデバイス時代のウェブフォーム顧客体験最適化
もうやりきったと思ってませんか?まだまだやれるEFO-マルチデバイス時代のウェブフォーム顧客体験最適化もうやりきったと思ってませんか?まだまだやれるEFO-マルチデバイス時代のウェブフォーム顧客体験最適化
もうやりきったと思ってませんか?まだまだやれるEFO-マルチデバイス時代のウェブフォーム顧客体験最適化
 
コンテンツをディレクションするということ
コンテンツをディレクションするということコンテンツをディレクションするということ
コンテンツをディレクションするということ
 
青年海外協力隊・フィールド調査団の最終報告書
青年海外協力隊・フィールド調査団の最終報告書青年海外協力隊・フィールド調査団の最終報告書
青年海外協力隊・フィールド調査団の最終報告書
 

More from Yasuhisa Hasegawa

作って終わりから卒業しよう - デザインシステム入門編
作って終わりから卒業しよう - デザインシステム入門編作って終わりから卒業しよう - デザインシステム入門編
作って終わりから卒業しよう - デザインシステム入門編
Yasuhisa Hasegawa
 
課題を導き出す魔法のシートの作り方
課題を導き出す魔法のシートの作り方課題を導き出す魔法のシートの作り方
課題を導き出す魔法のシートの作り方
Yasuhisa Hasegawa
 
好みや多数決で決めない、デザインとの正しい付き合い方
好みや多数決で決めない、デザインとの正しい付き合い方好みや多数決で決めない、デザインとの正しい付き合い方
好みや多数決で決めない、デザインとの正しい付き合い方
Yasuhisa Hasegawa
 
Webプロフェッショナルだからできるコンテンツの検査
Webプロフェッショナルだからできるコンテンツの検査Webプロフェッショナルだからできるコンテンツの検査
Webプロフェッショナルだからできるコンテンツの検査
Yasuhisa Hasegawa
 
センスやテイストだけで決めないデザインの会話のためにすること
センスやテイストだけで決めないデザインの会話のためにすることセンスやテイストだけで決めないデザインの会話のためにすること
センスやテイストだけで決めないデザインの会話のためにすること
Yasuhisa Hasegawa
 
マルチデバイスを見据えたコンテンツ設計
マルチデバイスを見据えたコンテンツ設計マルチデバイスを見据えたコンテンツ設計
マルチデバイスを見据えたコンテンツ設計
Yasuhisa Hasegawa
 
コンテンツとCMSの上手な付き合い方
コンテンツとCMSの上手な付き合い方コンテンツとCMSの上手な付き合い方
コンテンツとCMSの上手な付き合い方
Yasuhisa Hasegawa
 
スマホサイトが嫌われる理由と改善方法
スマホサイトが嫌われる理由と改善方法スマホサイトが嫌われる理由と改善方法
スマホサイトが嫌われる理由と改善方法
Yasuhisa Hasegawa
 
Webサイトの核をデザインするための最初の一歩
Webサイトの核をデザインするための最初の一歩Webサイトの核をデザインするための最初の一歩
Webサイトの核をデザインするための最初の一歩
Yasuhisa Hasegawa
 
6から始まる Movable Type の旅
6から始まる Movable Type の旅6から始まる Movable Type の旅
6から始まる Movable Type の旅
Yasuhisa Hasegawa
 
未来へ繋ぐWeb系デザイン思考
未来へ繋ぐWeb系デザイン思考未来へ繋ぐWeb系デザイン思考
未来へ繋ぐWeb系デザイン思考
Yasuhisa Hasegawa
 
Before UX: UXを導入せずに済む方法
Before UX: UXを導入せずに済む方法Before UX: UXを導入せずに済む方法
Before UX: UXを導入せずに済む方法
Yasuhisa Hasegawa
 
今だからデザインできるMTの未来
今だからデザインできるMTの未来今だからデザインできるMTの未来
今だからデザインできるMTの未来
Yasuhisa Hasegawa
 
ゲームから学ぶデザイン思考術
ゲームから学ぶデザイン思考術ゲームから学ぶデザイン思考術
ゲームから学ぶデザイン思考術
Yasuhisa Hasegawa
 
コンテンツから始まる新しいWebワークフロー
コンテンツから始まる新しいWebワークフローコンテンツから始まる新しいWebワークフロー
コンテンツから始まる新しいWebワークフロー
Yasuhisa Hasegawa
 
コンテンツで改善する UI デザインの極意
コンテンツで改善する UI デザインの極意コンテンツで改善する UI デザインの極意
コンテンツで改善する UI デザインの極意
Yasuhisa Hasegawa
 
未来をプロトタイプしよう
未来をプロトタイプしよう未来をプロトタイプしよう
未来をプロトタイプしよう
Yasuhisa Hasegawa
 
モダン・タイムス 〜 コンテンツと作り手を自由にする Web デザイン
モダン・タイムス 〜 コンテンツと作り手を自由にする Web デザインモダン・タイムス 〜 コンテンツと作り手を自由にする Web デザイン
モダン・タイムス 〜 コンテンツと作り手を自由にする Web デザイン
Yasuhisa Hasegawa
 
終わりなきWebの旅
終わりなきWebの旅終わりなきWebの旅
終わりなきWebの旅
Yasuhisa Hasegawa
 
脱紙!Webならではのコミュニケーション思考術
脱紙!Webならではのコミュニケーション思考術脱紙!Webならではのコミュニケーション思考術
脱紙!Webならではのコミュニケーション思考術
Yasuhisa Hasegawa
 

More from Yasuhisa Hasegawa (20)

作って終わりから卒業しよう - デザインシステム入門編
作って終わりから卒業しよう - デザインシステム入門編作って終わりから卒業しよう - デザインシステム入門編
作って終わりから卒業しよう - デザインシステム入門編
 
課題を導き出す魔法のシートの作り方
課題を導き出す魔法のシートの作り方課題を導き出す魔法のシートの作り方
課題を導き出す魔法のシートの作り方
 
好みや多数決で決めない、デザインとの正しい付き合い方
好みや多数決で決めない、デザインとの正しい付き合い方好みや多数決で決めない、デザインとの正しい付き合い方
好みや多数決で決めない、デザインとの正しい付き合い方
 
Webプロフェッショナルだからできるコンテンツの検査
Webプロフェッショナルだからできるコンテンツの検査Webプロフェッショナルだからできるコンテンツの検査
Webプロフェッショナルだからできるコンテンツの検査
 
センスやテイストだけで決めないデザインの会話のためにすること
センスやテイストだけで決めないデザインの会話のためにすることセンスやテイストだけで決めないデザインの会話のためにすること
センスやテイストだけで決めないデザインの会話のためにすること
 
マルチデバイスを見据えたコンテンツ設計
マルチデバイスを見据えたコンテンツ設計マルチデバイスを見据えたコンテンツ設計
マルチデバイスを見据えたコンテンツ設計
 
コンテンツとCMSの上手な付き合い方
コンテンツとCMSの上手な付き合い方コンテンツとCMSの上手な付き合い方
コンテンツとCMSの上手な付き合い方
 
スマホサイトが嫌われる理由と改善方法
スマホサイトが嫌われる理由と改善方法スマホサイトが嫌われる理由と改善方法
スマホサイトが嫌われる理由と改善方法
 
Webサイトの核をデザインするための最初の一歩
Webサイトの核をデザインするための最初の一歩Webサイトの核をデザインするための最初の一歩
Webサイトの核をデザインするための最初の一歩
 
6から始まる Movable Type の旅
6から始まる Movable Type の旅6から始まる Movable Type の旅
6から始まる Movable Type の旅
 
未来へ繋ぐWeb系デザイン思考
未来へ繋ぐWeb系デザイン思考未来へ繋ぐWeb系デザイン思考
未来へ繋ぐWeb系デザイン思考
 
Before UX: UXを導入せずに済む方法
Before UX: UXを導入せずに済む方法Before UX: UXを導入せずに済む方法
Before UX: UXを導入せずに済む方法
 
今だからデザインできるMTの未来
今だからデザインできるMTの未来今だからデザインできるMTの未来
今だからデザインできるMTの未来
 
ゲームから学ぶデザイン思考術
ゲームから学ぶデザイン思考術ゲームから学ぶデザイン思考術
ゲームから学ぶデザイン思考術
 
コンテンツから始まる新しいWebワークフロー
コンテンツから始まる新しいWebワークフローコンテンツから始まる新しいWebワークフロー
コンテンツから始まる新しいWebワークフロー
 
コンテンツで改善する UI デザインの極意
コンテンツで改善する UI デザインの極意コンテンツで改善する UI デザインの極意
コンテンツで改善する UI デザインの極意
 
未来をプロトタイプしよう
未来をプロトタイプしよう未来をプロトタイプしよう
未来をプロトタイプしよう
 
モダン・タイムス 〜 コンテンツと作り手を自由にする Web デザイン
モダン・タイムス 〜 コンテンツと作り手を自由にする Web デザインモダン・タイムス 〜 コンテンツと作り手を自由にする Web デザイン
モダン・タイムス 〜 コンテンツと作り手を自由にする Web デザイン
 
終わりなきWebの旅
終わりなきWebの旅終わりなきWebの旅
終わりなきWebの旅
 
脱紙!Webならではのコミュニケーション思考術
脱紙!Webならではのコミュニケーション思考術脱紙!Webならではのコミュニケーション思考術
脱紙!Webならではのコミュニケーション思考術
 

「なんとなく」を共有する、コンテンツを活かしたデザインプロセス