Here is the new design attitude for web designers in the cross-channel user experience era.

1. クロスチャネル時代のWebデザイン
CONCENT #concentinc
長谷川 敦士, Ph.D. @ahaseg

4. 理解をデザインする人：
インフォメーションアーキテクト
Information Architect

5. © Nathan Shedroff
データ 情報 知識 知恵

6. ユーザー
コンテンツ コンテキスト
利用者
顧客
情報
機能
目的
制約

7. ユーザー
コンテンツ
サービス
つなぎかた
IA = ♥

8. （すべての）Webデザイナー
= IA

9. • Webデザイナー
Webサイトを活用し、主にコミュニケ
ーションの問題を解決するデザイナー

10. デザインって？
無意識
スタイル
↑
“機能＋形状”
↑
問題解決
↑
問題の定義（フレーミング）
↑

11. 問題解決プロセス
情報アーキテクチャ設計のプロセス
IA設計プロセスを構成する2つの軸と5つのステージ
Abstract
抽象
Analysis
分析
Synthesis
統合
Concrete
具体
反復
Solutions
ソリューション
Observations
観察
Frameworks
フレームワーク
Imperatives
方針
「Research Strategies for Future Planning」, 『interactions』VolumeXVI.2,pp.63-‐‑‒66, ColleenMurray

12. サービスデザイン：
提供サービス、事業戦略略
アクティビティデザイン：
ユーザー体験
インタラクションデザイン：
個別タッチポイント

13. サービスデザイン：ビジネス価値と顧客の期待価
値に基づくビジネスの再定義
体験のコンセプト
顧客
ビジネス
・期待価値
・⾏行行動⽂文脈
・提供価値
・競合優位性

14. • いま、なにをデザインすべきなのか？

15. ユーザー体験（UX）
UI／
機能
広告
（認知）
製品
形状
アフター
ケア

16. 体験の視覚化：
Customer Journey Map

17. Customer Journey Map
「経験」にまつわるストーリーを
深く、豊かに表現する⽅方法
by Chris Risdon from Adaptive Path @ IA Summit 2012

18. レイアウト
時系列列：基本 円環：タスク単位
Touchpoint:
サービス接点
Experience:
体験
Phase:
フェーズ Phase:
フェーズ
Touchpoint:
サービス接点
Experience:
体験

19. CJMの主な要素
• ペルソナ・シナリオ・
ユーザーゴール・ニーズ
• フェーズ：注意、態度度、興
味、ムード、etc.
• ユーザー要素
-‐‑‒ ⾏行行動：Behavior
-‐‑‒ ⼼心理理状況：Think
-‐‑‒ 感情要素：Feel
• タッチポイント
• サービス・システム要素
• 経路路
• 気づき・⽰示唆

20. Experience Maps:
Understanding Cross-Channel
Experiences For Gamers

21. Starbucks Experience Map - Little Springs Design http://bit.ly/vlJoQ8

22. Experience Map for Rail Europe | August 2011
STAGES
DOING
FEELING
Research & Planning Shopping Booking Post-Booking, Pre-Travel Travel Post Travel
People choose rail travel because it is
convenient, easy, and flexible.
Rail booking is only one part of people’s larger
travel process.
People build their travel plans over time. People value service that is respectful, effective
and personable.
EXPERIENCE
Rail Europe Experience Map
Kayak,
compare
airfare
Google
searches
Research
hotels
Talk with
friends
Relevance of Rail Europe
Enjoyability
Helpfulness of Rail Europe
Paper tickets
arrive in mail
• I’m excited to go to Europe!
• Will I be able to see everything I can?
• What if I can’t afford this?
• I don’t want to make the wrong choice.
• It’s hard to trust Trip Advisor. Everyone is
so negative.
• Keeping track of all the different products
is confusing.
• Am I sure this is the trip I want to take?
• Website experience is easy and friendly!
• Frustrated to not know sooner about which
tickets are eTickets and which are paper tickets.
Not sure my tickets will arrive in time.
• Stressed that I’m about to leave the country
and Rail Europe won’t answer the phone.
• Frustrated that Rail Europe won’t ship tickets
to Europe.
• Happy to receive my tickets in the mail!
• I am feeling vulnerable to be in an unknown place in
the middle of the night.
• Stressed that the train won’t arrive on time for my
connection.
• Meeting people who want to show us around is fun,
serendipitous, and special.
• Excited to share my vacation story with
my friends.
• A bit annoyed to be dealing with ticket refund
issues when I just got home.
View
maps
Arrange
travel
Blogs &
Travel sites
Plan with
interactive map
Review fares
Select pass(es)
Enter trips Confirm
itinerary
Delivery
options
Payment
options
Review &
confirm
Map itinerary
(finding pass)
Destination
pages
May call if
difficulties
occur
E-ticket Print
at Station
Web
raileurope.com
Wait for paper tickets to arriveResearch destinations, routes and products
Live chat for
questions
Activities, unexpected changes
Change
plans
Check ticket
status
Print e-tickets
at home
web/
apps
Look up
timetables
Plan/
confirm
activities
Web
Share
photos
Share
experience
(reviews)
Request
refunds
Follow-up on refunds for booking changes
Share experience
Buy additional
tickets
Look up
time tables
Stakeholder interviews
Cognitive walkthroughs
Customer Experience Survey
Existing Rail Europe Documentation
Opportunities
Guiding Principles
Customer Journey
Information
sources
RAIL EUROPE
THINKING
• What is the easiest way to get around Europe?
• Where do I want to go?
• How much time should I/we spend in each
place for site seeing and activities?
• I want to get the best price, but I’m willing to pay a
little more for first class.
• How much will my whole trip cost me? What are my
trade-offs?
• Are there other activities I can add to my plan?
• Do I have all the tickets, passes and reservations
I need in this booking so I don’t pay more
shipping?
• Rail Europe is not answering the phone. How
else can I get my question answered?
• Do I have everything I need?
• Rail Europe website was easy and friendly, but
when an issue came up, I couldn’t get help.
• What will I do if my tickets don’t arrive in time?
• I just figured we could grab a train but there are
not more trains. What can we do now?
• Am I on the right train? If not, what next?
• I want to make more travel plans. How do I
do that?
• Trying to return ticket I was not able to use. Not
sure if I’ll get a refund or not.
• People are going to love these photos!
• Next time, we will explore routes and availability
more carefully.
Ongoing,
non-linear
Linear
process
Non-linear, but
time based
Communicate a clear value
proposition.
STAGE: Initial visit
Connect planning, shopping and
booking on the web.
STAGES: Planning, Shopping, Booking
Arm customers with information
for making decisions.
STAGES: Shopping, Booking
Improve the paper ticket
experience.
STAGES: Post-Booking, Travel, Post-Travel
Make your customers into better,
more savvy travelers.
STAGES: Global
Proactively help people deal
with change.
STAGES: Post-Booking, Traveling
Support people in creating their
own solutions.
STAGES: Global
Visualize the trip for planning
and booking.
STAGES: Planning, Shopping
Enable people to plan over time.
STAGES: Planning, Shopping
Engage in social media with
explicit purposes.
STAGES: Global
Communicate status clearly at
all times.
STAGES: Post-Booking, Post Travel
Accommodate planning and
booking in Europe too.
STAGE: Traveling
Aggregate shipping with a
reasonable timeline.
STAGE: Booking
Help people get the help they
need.
STAGES: Global
GLOBAL PLANNING, SHOPPING, BOOKING POST-BOOK, TRAVEL, POST-TRAVEL
Relevance of Rail Europe
Enjoyability
Helpfulness of Rail Europe
Relevance of Rail Europe
Enjoyability
Helpfulness of Rail Europe
Relevance of Rail Europe
Enjoyability
Helpfulness of Rail Europe
Relevance of Rail Europe
Enjoyability
Helpfulness of Rail Europe
Relevance of Rail Europe
Enjoyability
Helpfulness of Rail Europe
Mail tickets
for refund
Get stamp
for refund

23. AS-IS
現状
TO-BE
プラン
Inside-out
サービス視点
サービス現状分析
サービス拡張
Cross Channel
Outside-in
顧客視点
ユーザー⾏行行動分析
新サービス企画
Cross Service
カスタマージャーニーマップの種類

24. Point
Touchpoint
≠ Channel

25. Touchpoint:
• 特定のユーザーニーズに対応した、特定の
場所と時間に紐紐付く、インタラクションす
るためのポイント
Channel:
• ユーザー（カスタマ）がインタラクション
するメディア
by Chris Risdon from Adaptive Path @ IA Summit 2012

26. Google Gmail
Touchpoint:
• コンピュータの認証
Channel:
• Web
• スマートフォン or 電話 or Email
by Chris Risdon from Adaptive Path @ IA Summit 2012

27. ホームプラス バーチャルショップ（韓国）
Touchpoint:
• ⾷食料料品の購⼊入
Channel:
• 駅ホーム
• 携帯電話
by Chris Risdon from Adaptive Path @ IA Summit 2012
http://www.honpo21.net/archives/341

28. • ⽂文脈＋⽂文化に合わせる
• ニーズ／必要な機能に関連づける
• 重要性／⽬目的に合わせた意味性
• さり気なさ／遊び／楽しさによる好感
• 利利⽤用可能／連続的な体験のつながり
Touchpoint
by Chris Risdon from Adaptive Path @ IA Summit 2012

29. 1. 調査・分析に基づくプラニング
2. タッチポイントの組み合わせによる経験
3. チームを巻き込む
4. アクションを引き起こす
Touchpoint
by Chris Risdon from Adaptive Path @ IA Summit 2012

30. Cross Channel
Design

31. 「旅行」という体験

32. 出発前∼旅行中∼旅行後
タイミングごとに、
必要となる情報／利利⽤用するサービス
はなにか

33. 旅⾏行行前 旅⾏行行中 旅⾏行行後
航空会社
Cross Chanel
クロスチャンネル

34. Multi to Cross
サービス
PC モバイル 店舗
“マルチ”チャンネル
サービス
PC モバイル 店舗
“クロス”チャンネル
＋ ＋

36. Pocket
(Read it Later)
PC
iPhone
iPad
source: Read it Later
http://bit.ly/rSLU68
帰宅宅後
早朝
出勤
帰宅宅
就寝前
就寝前
デバイスが持つ利利⽤用⽂文脈

37. 個々のサイトでの考慮
（ヒューリスティック）
•場所性：Place-‐‑‒making
•⼀一貫性：Consistency
•弾性、復復元⼒力力：Resilience
•縮約性：Reduction
•相関性：Correlation

38. 旅⾏行行前 旅⾏行行中 旅⾏行行後
フライト
確認／予約
フライト
チェックイン
NEX
確認
ホテル
予約
ホテル
経路路確認
レストラン
探索索
アルバム
作成
写真
シェア
Cross Service
クロスサービス

40. Atsushi HASEGAWA <ahaseg@gmail.com>
eTicket Itinerary and Receipt for Confirmation GCEWWW
United Airlines, Inc. <unitedairlines@united.com> Sat, Mar 10, 2012 at 11:06 PM
To: AHASEG@gmail.com
Confirmation:
GCEWWW
Check-­In >
Issue Date: March 10, 2012
Traveler eTicket Number Frequent Flyer Seats
HASEGAWA/ATSUSHIMR 0162320667315 UA-­EGT4XXXX Premier Silver / *S 30H/12D/-­-­-­/-­-­-­
FLIGHT INFORMATION
Day, Date Flight ClassDeparture City and Time Arrival City and Time Aircraft Meal
Wed, 21MAR12 UA8041S TOKYO, JAPAN
(NRT -­ NARITA) 4:30 PM
WASHINGTON, DC
(IAD -­ DULLES) 3:51 PM
777-­200Dinner
Wed, 21MAR12 UA2632S WASHINGTON, DC
(IAD -­ DULLES) 5:05 PM
NEW ORLEANS, LA
(MSY) 6:47 PM
A-­319 Purchase
Mon, 26MAR12 UA4973S NEW ORLEANS, LA
(MSY) 6:01 AM
SAN FRANCISCO, CA
(SFO) 9:00 AM
A-­320 Purchase
Mon, 26MAR12 UA8374S SAN FRANCISCO, CA
(SFO) 11:01 AM
TOKYO, JAPAN
(NRT -­ NARITA) 2:00 PM (27MAR)
747-­400Lunch
1 Flight operated by UNITED AIRLINES.
2 Flight operated by UNITED AIRLINES.
3 Flight operated by UNITED AIRLINES.
4 Flight operated by UNITED AIRLINES.
FARE INFORMATION
Fare Breakdown
Airfare: 77,400JPY
Japan Passenger Security Service
Charge:
500
Japan Passenger Service
Facilities Charge:
2,040
Fuel Surcharge: 50,000
September 11th Security Fee: 630
U.S. Federal Transportation Tax: 2,760
U.S. APHIS User Fee: 420
U.S. Immigration User Fee: 580
U.S. Customs User Fee: 460
U.S. Passenger Facility Charge: 380
Per Person Total: 135,170JPY
eTicket Total: 135,170JPY
Form of Payment:
AMERICAN EXPRESS
Last Four Digits 5303
The airfare you paid on this itinerary totals: 77,400 JPY
The taxes, fees, and surcharges paid total: 57,770 JPY
Fare Rules: Additional charges may apply for changes in addition to any fare rules listed.
REFUNDABLE/CXL FEE
International eTicket Reminders
Check-­in Requirement -­ Bags must be checked and boarding passes obtained at least 60 minutes prior to
scheduled departure. Baggage will not be accepted and advance seat assignments may be canceled if this
condition is not met.
Boarding Requirement -­ Passengers must be prepared to board at the departure gate with their boarding
12/11/30 Gmail -‐‑ Hyatt Regency New Orleans -‐‑ Confirmation -‐‑ ATSUSHI HASEGAWA -‐‑ 3/21/2012 -‐‑ 1758081
1/3https://mail.google.com/mail/u/0/?ui=2&ik=9938667deb&view=pt&q=hyatt regency&qs=true&search…
Naoko KAWACHI <naoko.kawachi@gmail.com>
Hyatt Regency New Orleans -­ Confirmation -­ ATSUSHI HASEGAWA -­
3/21/2012 -­ 1758081
Hyatt Regency New Orleans <Concierge@hyatte-­concierge.com> Thu, Mar 8, 2012 at 1:51 AM
To: NAOKO.KAWACHI@gmail.com
Hyatt E-­Concierge | Customer Service | Hotel Website | Print E-­Mail | View Online
RESERVATION CONFIRMATION
CONFIRMATION NUMBER: 1758081
CHECK-­IN DATE: Wednesday, March 21, 2012
HOTEL CHECK-­IN TIME: 3:00 PM
CHECK-­OUT DATE: Sunday, March 25, 2012
HOTEL CHECK-­OUT TIME: 11:00 AM
Hyatt Regency New Orleans
Poydras At Loyola Avenue
New Orleans, LA 70113 US
Tel: 504-­561-­1234 Fax: 504-­587-­4141
ATSUSHI HASEGAWA,
Greetings from Hyatt Regency New Orleans,
Thank you for your reservation. We look forward to welcoming you to our hotel.
To make changes to your reservation please click here or email us as at reservations@hyatt.com. To
speak with us directly, please call 1 877 827 1356 within the U.S. and Canada or simply contact your
local worldwide reservation center.
We are excited about your upcoming visit and look forward to creating a memorable experience for you.
Warmest Regards,
Hyatt Regency New Orleans Team

43. 旅⾏行行前 旅⾏行行中 旅⾏行行後
フライト
確認／予約
フライト
チェックイン
NEX
確認
ホテル
予約
ホテル
経路路確認
レストラン
探索索
アルバム
作成
写真
シェア
デバイス／サービスをまたがった、
旅行に関する情報のオーガナイズサポート
→ TripIt

44. クロスチャンネル
• 企業・サービス観点
• 提供サービスの最適な提供⽅方法
のプラニング
例例：
-‐‑‒ 航空会社のサービス
-‐‑‒ Amazon Kindle Whisper Sync
-‐‑‒ Read it later
クロスサービス
• ユーザー観点
→ 企業／サービス横断
• 新しい提供価値のチャンス
→ メタサービス
例例：
-‐‑‒ TripIt
-‐‑‒ レシピ to Evernote
-‐‑‒ Indeed

45. CONCENT,inc New Logotype Desing by Shintaro Kobayashi
ロゴタイプコンセプト
新しさを感じさせながら、10 年後に古く感じさせない デザインを目
指しました。角を少し丸める事で、有機的で親しみやすい雰囲気を出
しつつも、文字の骨格はあくまでもニュートラルに設計することで、
奇をてらわない 現代らしさを表現しています。また、右への傾きには、
これから先、ますます加速していくだろう世の中の変化に、WEB（コ
ンセント）と紙（アレフ・ゼロ）のハイブリットにより対応し、絶え
ず前進していこう、という意志を込めました。
ロゴマークコンセプト
ロゴタイプの右肩に付いているマーク。丸の中の二本の棒は、良く見
れば右が少し短く、左が少し長い。これはコンセントです。わかりづ
らいです。しかし、この丸には可能性があります。WEB ではボタンに
なるかもしれません。紙ではハンコになって押されるかもしれません。
そうして様々なかたちで使用していくと、いずれこのマークだけで
CONCENT と読めるようになる。そんな存在になってくれることを
望んでいます。
concentinc.jp/
THANKS!
Twitter @ahaseg
Facebook facebook.com/ahaseg