クロスチャネル時代のWebサイトデザイン

1,570 views

Published on

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

Published in: Design

クロスチャネル時代のWebサイトデザイン

  1. 1. クロスチャネル時代のWebデザイン CONCENT #concentinc 長谷川 敦士, Ph.D. @ahaseg
  2. 2. 理解をデザインする人: インフォメーションアーキテクト Information Architect
  3. 3. © Nathan Shedroff データ 情報 知識 知恵
  4. 4. ユーザー コンテンツ コンテキスト 利用者 顧客 情報 機能 目的 制約
  5. 5. ユーザー コンテンツ サービス つなぎかた IA = ♥
  6. 6. (すべての)Webデザイナー = IA
  7. 7. • Webデザイナー Webサイトを活用し、 主にコミュニケーションの問題を 解決するデザイナー
  8. 8. デザインって? 無意識 スタイル ↑ “機能+形状” ↑ 問題解決 ↑ 問題の定義(フレーミング) ↑
  9. 9. 問題解決プロセス 具体 抽象 分析 統合 観察 モデル化 コンセプト 方針 制作物
  10. 10. • いま、なにをデザインすべきなのか?
  11. 11. ユーザー体験(UX) UI/ 機能 広告 (認知) 製品 形状 アフター ケア
  12. 12. 体験の視覚化: Customer Journey Map
  13. 13. Customer Journey Map 「経験」にまつわるストーリーを 深く、豊かに表現する方法 by Chris Risdon from Adaptive Path @ IA Summit 2012
  14. 14. レイアウト 時系列:基本 円環:タスク単位 Touchpoint: サービス接点 Experience: 体験 Phase: フェーズ Phase: フェーズ Touchpoint: サービス接点 Experience: 体験
  15. 15. CJMの主な要素 • ペルソナ・シナリオ・ ユーザーゴール・ニーズ • フェーズ:注意、態度、興 味、ムード、etc. • ユーザー要素 - 行動:Behavior - 心理状況:Think - 感情要素:Feel • タッチポイント • サービス・システム要素 • 経路 • 気づき・示唆
  16. 16. 体験のデザイン → Webデザイン
  17. 17. 「旅行」という体験 → 2つの考え方
  18. 18. 出発前∼旅行中∼旅行後 タイミングごとに、 必要となる情報/利用するサービス はなにか
  19. 19. 旅行前 旅行中 旅行後 航空会社 Cross Chanel クロスチャンネル
  20. 20. Multi to Cross サービス PC モバイル 店舗 “マルチ”チャンネル サービス PC モバイル 店舗 “クロス”チャンネル + +
  21. 21. Pocket (Read it Later) PC iPhone iPad source: Read it Later http://bit.ly/rSLU68 帰宅後 早朝 出勤 帰宅 就寝前 就寝前 デバイスが持つ利用文脈
  22. 22. 全体文脈のデザインで 考慮すべきこと • 場所性:Place-making • 一貫性:Consistency • 弾性、復元力:Resilience • 縮約性:Reduction • 相関性:Correlation
  23. 23. 旅行前 旅行中 旅行後 フライト 確認/予約 フライト チェックイン NEX 確認 ホテル 予約 ホテル 経路確認 レストラン 探索 アルバム 作成 写真 シェア Cross Service クロスサービス
  24. 24. 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
  25. 25. 旅⾏行行前 旅⾏行行中 旅行後 フライト 確認/予約 フライト チェックイン NEX 確認 ホテル 予約 ホテル 経路確認 レストラン 探索 アルバム 作成 写真 シェア デバイス/サービスをまたがった、 旅行に関する情報のオーガナイズサポート → TripIt
  26. 26. クロスチャンネル • 企業・サービス観点 • 提供サービスの最適な 提供方法のプラニング 例: - 航空会社のサイト - お店のサイト - ショッピングモールのサイト - Amazon Kindle Whisper Sync クロスサービス • ユーザー観点 → 企業/サービス横断 • 新しい提供価値のチャンス → メタサービス 例: - TripIt - レシピノート - Indeed
  27. 27. まとめ • Webデザイナーは(みんな) インフォメーションアーキテクト • デザインすべきはユーザーの体験 • カスタマージャーニーマップは 体験デザインの有力なツール • クロスチャネルとクロスサービス
  28. 28. CONCENT,inc New Logotype Desing by Shintaro Kobayashi ロゴタイプコンセプト 新しさを感じさせながら、10 年後に古く感じさせない デザインを目 指しました。角を少し丸める事で、有機的で親しみやすい雰囲気を出 しつつも、文字の骨格はあくまでもニュートラルに設計することで、 奇をてらわない 現代らしさを表現しています。また、右への傾きには、 これから先、ますます加速していくだろう世の中の変化に、WEB(コ ンセント)と紙(アレフ・ゼロ)のハイブリットにより対応し、絶え ず前進していこう、という意志を込めました。 ロゴマークコンセプト ロゴタイプの右肩に付いているマーク。丸の中の二本の棒は、良く見 れば右が少し短く、左が少し長い。これはコンセントです。わかりづ らいです。しかし、この丸には可能性があります。WEB ではボタンに なるかもしれません。紙ではハンコになって押されるかもしれません。 そうして様々なかたちで使用していくと、いずれこのマークだけで CONCENT と読めるようになる。そんな存在になってくれることを 望んでいます。 concentinc.jp/ THANKS! Twitter @ahaseg Facebook facebook.com/ahaseg

×