Your SlideShare is downloading. ×
0
終わりなきWebの旅
終わりなきWebの旅
終わりなきWebの旅
終わりなきWebの旅
終わりなきWebの旅
終わりなきWebの旅
終わりなきWebの旅
終わりなきWebの旅
終わりなきWebの旅
終わりなきWebの旅
終わりなきWebの旅
終わりなきWebの旅
終わりなきWebの旅
終わりなきWebの旅
終わりなきWebの旅
終わりなきWebの旅
終わりなきWebの旅
終わりなきWebの旅
終わりなきWebの旅
終わりなきWebの旅
終わりなきWebの旅
終わりなきWebの旅
終わりなきWebの旅
終わりなきWebの旅
終わりなきWebの旅
終わりなきWebの旅
終わりなきWebの旅
終わりなきWebの旅
終わりなきWebの旅
終わりなきWebの旅
終わりなきWebの旅
終わりなきWebの旅
終わりなきWebの旅
終わりなきWebの旅
終わりなきWebの旅
終わりなきWebの旅
終わりなきWebの旅
終わりなきWebの旅
終わりなきWebの旅
終わりなきWebの旅
終わりなきWebの旅
終わりなきWebの旅
終わりなきWebの旅
終わりなきWebの旅
終わりなきWebの旅
終わりなきWebの旅
終わりなきWebの旅
終わりなきWebの旅
終わりなきWebの旅
終わりなきWebの旅
終わりなきWebの旅
終わりなきWebの旅
終わりなきWebの旅
終わりなきWebの旅
終わりなきWebの旅
終わりなきWebの旅
終わりなきWebの旅
終わりなきWebの旅
終わりなきWebの旅
終わりなきWebの旅
終わりなきWebの旅
終わりなきWebの旅
終わりなきWebの旅
終わりなきWebの旅
終わりなきWebの旅
終わりなきWebの旅
終わりなきWebの旅
終わりなきWebの旅
終わりなきWebの旅
終わりなきWebの旅
終わりなきWebの旅
終わりなきWebの旅
終わりなきWebの旅
終わりなきWebの旅
終わりなきWebの旅
終わりなきWebの旅
終わりなきWebの旅
終わりなきWebの旅
終わりなきWebの旅
終わりなきWebの旅
終わりなきWebの旅
終わりなきWebの旅
終わりなきWebの旅
終わりなきWebの旅
終わりなきWebの旅
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

終わりなきWebの旅

3,435

Published on

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

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

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

Published in: Design
0 Comments
22 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,435
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
0
Comments
0
Likes
22
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×