CSS Nite in Kobe, Vol. 2にて話した、デザインの考え方、クロスチャネルの考え方、クロスチャネルとクロスサービスについての講演資料です。

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

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

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

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

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

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

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

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

11. 問題解決プロセス
具体
抽象
分析 統合
観察
モデル化
コンセプト
方針
制作物

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

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

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

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

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

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

18. 体験のデザイン
→ Webデザイン

19. 「旅行」という体験
→ ２つの考え方

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

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

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

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

25. 全体文脈のデザインで
考慮すべきこと
• 場所性：Place-making
• 一貫性：Consistency
• 弾性、復元力：Resilience
• 縮約性：Reduction
• 相関性：Correlation

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

28. 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

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

32. クロスチャンネル
• 企業・サービス観点
• 提供サービスの最適な
提供方法のプラニング
例：
- 航空会社のサイト
- お店のサイト
- ショッピングモールのサイト
- Amazon Kindle Whisper Sync
クロスサービス
• ユーザー観点
→ 企業／サービス横断
• 新しい提供価値のチャンス
→ メタサービス
例：
- TripIt
- レシピノート
- Indeed

33. まとめ
• Webデザイナーは（みんな）
インフォメーションアーキテクト
• デザインすべきはユーザーの体験
• カスタマージャーニーマップは
体験デザインの有力なツール
• クロスチャネルとクロスサービス

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