終わりなきWebの旅

3,987 views

Published on

Web を Web らしくデザインするということはどういうことなのでしょうか。コンテンツを補助するためのビジュアル。まったく同じ見た目にするのではなく、利用者の状況に寄り添う形のデザイン。Web へアクセスするための手段がますます増えていく中、今までの Web デザインの捉え方を変える時期にきています。

http://www.yasuhisa.com/could/article/experience-layers/

Published in: Design

終わりなきWebの旅

  1. 1. 終 わりなき Web の 旅CSS Nite in KOBE, Vol.1 2012年10月6日 長谷川恭久
  2. 2. ハ セ ガ ワ ヤ ス ヒ サ長谷川恭久@yhassy
  3. 3. モバイル デスクトップ2007 2009 2011 2013 2015 by Robert Scoble
  4. 4. 87% by Maureen Sill
  5. 5. by Johan Larsson
  6. 6. 15,000,000,000 by Brett Neilson
  7. 7. 30,000,000,000 by Brett Neilson
  8. 8. ‣ ソーシャルメディア‣ UX : User Experience‣ 制作効率化
  9. 9. ‣ Webとコンテンツ‣ Webにおける見た目‣ Webデザイン思考
  10. 10. ‣ 限りなく可変でダイナミック‣ どのように見られるのか‣ 拡散・共有を前提とした配信‣ 制作や管理体制
  11. 11. ‣ 厳密なレイアウト作り‣ コンテンツとレイアウトの関連性が強い‣ 一方通行の発信
  12. 12. ‣ 可変の世界‣ コンテンツがダイナミック‣ 双方向・多方向の対話
  13. 13. ‣ どのハードウェアを使うか‣ どのアプリケーションを利用するか‣ どう設定するか
  14. 14. 26%
  15. 15. ‣ 自分にとっての「好き」‣ 自分にとっての「便利」‣ 自分にとっての「楽」
  16. 16. ‣ 手がかりを示してくれる‣ 要素の囲い込み‣ 位置や状態を知らせる‣ 雰囲気をつくる by Joshua Thomas
  17. 17. Atmosphere
  18. 18. by Danny Knaak
  19. 19. by Danny Knaak
  20. 20. 具体化質問 部品構築模索
  21. 21. ‣ ビジネスモデルはなにですか? ‣ 知ることができる場所や媒体は? ‣ 顧客が最も気にしていることは? ‣ Web サイトを必要とされている?photo by Tim OBrien
  22. 22. 空間 線 質感 色 形 様式photo by Ky
  23. 23. ‣ ボタン ‣ ボタン ‣ ヘッダー ‣ 本文 ‣ ボックス ‣ 画像・写真 ‣ リスト ‣ テーブルphoto by Wally Gobetz
  24. 24. Web制作者のモチベーションアップCSS Nite(シーエスエス・ナイト)はWeb制作に関わるすべての方のためのセミナーイベントです。 参加するにあたって資格などはありません。Web業界に興味のあるさまざまな方々の参加をお待ちしています。 v 登壇者紹介 v スケジュール v 準備にあたって新着情報twitterみんなのつぶやきページ株式会社日本情報化農業研究所さまより季節の野菜色々詰め合わせをプレゼント協賛頂きました懇親会のお知らせ
  25. 25. v 登壇者紹介 v スケジュール v 準備にあたって新着情報 Web制作者の モチベーションアップtwitterみんなのつぶやきページ株式会社日本情報化農業研究所さまより季節の野菜色々詰め合わせをプレゼント協賛頂きました CSS Nite(シーエスエス・ナイト)はWeb制作に関わるすべての方のためのセミナーイベントで す。 参加するにあたって資格などはありません。Web業界に興味のあるさまざまな方々の参加をお懇親会のお知らせ 待ちしています。
  26. 26. v 登壇者紹介 v スケジュール v 準備にあたって新着情報twitterみんなのつぶやきページ株式会社日本情報化農業研究所さまより季節の野菜色々詰め合わせをプレゼント協賛頂きました懇親会のお知らせ
  27. 27. 模索がしやすいムードボードより 具体的 様々な状況が 考慮できるコンテンツを考慮できる
  28. 28. Webサイト 利用者
  29. 29. Webサイト ソフトウェア ハードウェア インプット 利用者
  30. 30. Progressive Enhancement photo by Eustaquio Santimano
  31. 31. http://dowebsitesneedtolookexactlythesameineverybrowser.com/ Webサイトはまったく同じ見た目である必要はない
  32. 32. コンテンツ マークアップ スタイル インタラクション
  33. 33. 購入 購入 購入 購入.box{      background: #715886 // 背景色      background: linear-gradient(top, #715886 0%,#2f2539 100%); // グラデ     border-radius: 20px; // 角丸      box-shadow: 0 0 5px #000000; // ボックスシャドー      -webkit-transition: All 1s ease; // アニメーション } .box:hover{      box-shadow: 0 0 10px #a1f6f9; // マウスオーバーしたときのボックスシャドー } 
  34. 34. 購入 購入 購入 購入 カートは空です 購入.box{      background: #715886 // 背景色      background: linear-gradient(top, #715886 0%,#2f2539 100%); // グラデ     border-radius: 20px; // 角丸      box-shadow: 0 0 5px #000000; // ボックスシャドー 
  35. 35. Progressive Enhancement = 体験のレイヤー
  36. 36. HTML人にも機械にもやさしくなれる CSS 視覚的な理解を加味していく Javascript より使いやすくするための機能
  37. 37. ‣ 環境に合わせて適応する‣ 見た目を同じにすることではない‣ 最低限の体験を保証する photo by Eustaquio Santimano
  38. 38. 理論なしで実践するのは、コンパスや舵をもたずに、闇雲に航海にでる船乗りと同じである。
  39. 39. photo by Mark Chapman
  40. 40. photo by Robert Scoble
  41. 41. ‣ 情報へアクセスできるか ‣ 壁を取り払うためのデザイン ‣ パフォーマンスphoto by Johanna H
  42. 42. ‣ すべてをコントロールできない‣ レイアウトではなく雰囲気‣ Progressive Enhancement
  43. 43. 長谷川恭久mail@yasuhisa.com@yhassyyasuhisa.com/could

×