8                 Web デザインのウソ・ホント                 ∼ Webらしくデザインするためのヒント    Web Design長谷川恭久                            CSS N...
ウソ   ホント
見た目    コントロール   ピクセル  パーフェクト            ページ
まったく同じの見た目にできる     ...と思っていたけど無理ですね
Webサイト   利用者
Webサイト   ソフトウェア   ハードウェア   インプット   利用者
完成したかのように見える間違った期待を与えてしまう           IE6対応?
Progressive Enhancement                          photo by Eustaquio Santimano
コンテンツ  マークアップ           スタイル           インタラクション
ボックス   +角丸
+グラデーション   +シャドー
見た目は違って当然コンテンツ配信          体験を重ねていく                 photo by Eustaquio Santimano
ピクセルパーフェクトに出来る    ...デザイナーのコダワリかと思ってた
動的なデザイン                    解像度の多様化                                  限られた仮説photo by EB Morse
photo by Dan King
PPI     iPhone 4+      326    MacBook Air     132   iMac 27-inch     109       iPad         132   Sony Vaio Z92    140    ...
流れ                        リズム      ピクセル   <   バランス・調和     サイズ                   空間                              photo by p...
完全なコントロールはできる     ...思うようにはいきません
デザイナー   <        =   利用者
コントロールの余地柔軟性とのバランス       それぞれの体験を提供
Webはページの集まりである   ...あまり良いメタファではないですね
<モーグリ投げ>                                            モーグリとの絆が深まると、モーグリを投げ、は                                            るか遠方...
キャンペーンをツイート              担当者向け情報動画をクリッピング               姉妹サイト
Facebook                             ブログ                                   YouTubeGoogle                    Webサイト        ...
Responsive Design
Text Reflow (CSS Regions)
ページではなくスペースコンテンツの整理と構造化               動き出すコンテンツ
見た目    コントロール   ピクセル  パーフェクト            ページ
標準技術        ツール   マークアップ     コミュニティ
これからも標準技術が残る   ...オープンであることの重要性
オープン                シンプル未知への対応
マークアップはより重要になる      ...コンテンツを支える基盤
photo by Yersinia pestis
コンテンツへの意味付け人とデータを繋げる       Webブラウザ以外へ
同じツールはこれからも使える  ...Photoshop や Fireworks は、より便利に
アセット制作      プロトタイピングクリエイティブの共有
コミュニティはより重要になる    ...2人以上が集まることに意味がある
若い業界ネットワークの強み  コラボレーション
ウソ   ホント
Design is the fundamental soul of a human-made creation that ends up expressing itself insuccessive outer layers of the pr...
デザインとは、人間の創造物の根源となる魂であり、それが結果として製品やサービスの表面にあらわれる。               Steve Jobs
8                 長谷川恭久                 mail@yasuhisa.com   www.yasuhisa.com   @yhassy    Web Design
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
×

Webデザインのウソ・ホント ~ Web らしくデザインするためのヒント

43,737

Published on

私たちが今まで呼んでいた Web デザインとは一体何だったのでしょうか?その中にはウソもあればホントのこともあります。私たちは過去から何を見出し、これからに繋げれば良いのでしょうか? Web らしくデザインするの意味は何でしょうか?利用者とクライアント間のギャップを埋めれば良いのでしょうか?これらの疑問に今セッションで応えていきます。

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

No Downloads
Views
Total Views
43,737
On Slideshare
0
From Embeds
0
Number of Embeds
19
Actions
Shares
0
Downloads
0
Comments
0
Likes
151
Embeds 0
No embeds

No notes for slide

Transcript of "Webデザインのウソ・ホント ~ Web らしくデザインするためのヒント"

  1. 1. 8 Web デザインのウソ・ホント ∼ Webらしくデザインするためのヒント Web Design長谷川恭久 CSS Nite in TAKAMATSU 2012 年 2 月 25 日
  2. 2. ウソ ホント
  3. 3. 見た目 コントロール ピクセル パーフェクト ページ
  4. 4. まったく同じの見た目にできる ...と思っていたけど無理ですね
  5. 5. Webサイト 利用者
  6. 6. Webサイト ソフトウェア ハードウェア インプット 利用者
  7. 7. 完成したかのように見える間違った期待を与えてしまう IE6対応?
  8. 8. Progressive Enhancement photo by Eustaquio Santimano
  9. 9. コンテンツ マークアップ スタイル インタラクション
  10. 10. ボックス +角丸
  11. 11. +グラデーション +シャドー
  12. 12. 見た目は違って当然コンテンツ配信 体験を重ねていく photo by Eustaquio Santimano
  13. 13. ピクセルパーフェクトに出来る ...デザイナーのコダワリかと思ってた
  14. 14. 動的なデザイン 解像度の多様化 限られた仮説photo by EB Morse
  15. 15. photo by Dan King
  16. 16. PPI iPhone 4+ 326 MacBook Air 132 iMac 27-inch 109 iPad 132 Sony Vaio Z92 140 Xperia S 342 Galaxy Nexus 316 HTC Desire HD 217 LG Optimus LTE 32916:9ワイドスクリーンモニタ 85∼138 4:3スタンダードモニタ 61∼126
  17. 17. 流れ リズム ピクセル < バランス・調和 サイズ 空間 photo by popupology
  18. 18. 完全なコントロールはできる ...思うようにはいきません
  19. 19. デザイナー < = 利用者
  20. 20. コントロールの余地柔軟性とのバランス それぞれの体験を提供
  21. 21. Webはページの集まりである ...あまり良いメタファではないですね
  22. 22. <モーグリ投げ> モーグリとの絆が深まると、モーグリを投げ、は るか遠方のアイテムを探すことができるようにな キャンペーン概要 ります。ただ、その扱いの粗さにモーグリは内心 穏やかじゃない様子…!? 特典の紹介 ゲームの概要ファイナルファンタジーXIII-2 予約受付中 動画 【ローソン・HMV限定特典付】PS3 ファイナルファン タジー XIII-2 Game Soft (Playstation3) キャラクター紹介 オンラインセール価格(税込):¥7,280 参考価格(税込):¥7,980 システム バトル 【ローソン・HMV限定特典付】Xbox360 ファイナル ファンタジー XIII-2 世界 Game Soft (Xbox360) オンラインセール価格(税込):¥7,280 ストアの価格 参考価格(税込):¥7,980 ©2011 SQUARE ENIX CO.,LTD ALL Rights Reserved.CHARACTER DESIGN:TETSUYA NOMURA
  23. 23. キャンペーンをツイート 担当者向け情報動画をクリッピング 姉妹サイト
  24. 24. Facebook ブログ YouTubeGoogle Webサイト Twitter モバイル
  25. 25. Responsive Design
  26. 26. Text Reflow (CSS Regions)
  27. 27. ページではなくスペースコンテンツの整理と構造化 動き出すコンテンツ
  28. 28. 見た目 コントロール ピクセル パーフェクト ページ
  29. 29. 標準技術 ツール マークアップ コミュニティ
  30. 30. これからも標準技術が残る ...オープンであることの重要性
  31. 31. オープン シンプル未知への対応
  32. 32. マークアップはより重要になる ...コンテンツを支える基盤
  33. 33. photo by Yersinia pestis
  34. 34. コンテンツへの意味付け人とデータを繋げる Webブラウザ以外へ
  35. 35. 同じツールはこれからも使える ...Photoshop や Fireworks は、より便利に
  36. 36. アセット制作 プロトタイピングクリエイティブの共有
  37. 37. コミュニティはより重要になる ...2人以上が集まることに意味がある
  38. 38. 若い業界ネットワークの強み コラボレーション
  39. 39. ウソ ホント
  40. 40. Design is the fundamental soul of a human-made creation that ends up expressing itself insuccessive outer layers of the product or service. Steve Jobs
  41. 41. デザインとは、人間の創造物の根源となる魂であり、それが結果として製品やサービスの表面にあらわれる。 Steve Jobs
  42. 42. 8 長谷川恭久 mail@yasuhisa.com www.yasuhisa.com @yhassy Web Design

×