• Like
  • Save
Webデザインのウソ・ホント ~ Web らしくデザインするためのヒント
Upcoming SlideShare
Loading in...5
×

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

  • 34,012 views
Uploaded on

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

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

More in: Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
34,012
On Slideshare
0
From Embeds
0
Number of Embeds
15

Actions

Shares
Downloads
0
Comments
0
Likes
128

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. 8 Web デザインのウソ・ホント ∼ Webらしくデザインするためのヒント Web Design長谷川恭久 CSS Nite in TAKAMATSU 2012 年 2 月 25 日
  • 2. ウソ ホント
  • 3. 見た目 コントロール ピクセル パーフェクト ページ
  • 4. まったく同じの見た目にできる ...と思っていたけど無理ですね
  • 5. Webサイト 利用者
  • 6. Webサイト ソフトウェア ハードウェア インプット 利用者
  • 7. 完成したかのように見える間違った期待を与えてしまう IE6対応?
  • 8. Progressive Enhancement photo by Eustaquio Santimano
  • 9. コンテンツ マークアップ スタイル インタラクション
  • 10. ボックス +角丸
  • 11. +グラデーション +シャドー
  • 12. 見た目は違って当然コンテンツ配信 体験を重ねていく photo by Eustaquio Santimano
  • 13. ピクセルパーフェクトに出来る ...デザイナーのコダワリかと思ってた
  • 14. 動的なデザイン 解像度の多様化 限られた仮説photo by EB Morse
  • 15. photo by Dan King
  • 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. 流れ リズム ピクセル < バランス・調和 サイズ 空間 photo by popupology
  • 18. 完全なコントロールはできる ...思うようにはいきません
  • 19. デザイナー < = 利用者
  • 20. コントロールの余地柔軟性とのバランス それぞれの体験を提供
  • 21. Webはページの集まりである ...あまり良いメタファではないですね
  • 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. キャンペーンをツイート 担当者向け情報動画をクリッピング 姉妹サイト
  • 24. Facebook ブログ YouTubeGoogle Webサイト Twitter モバイル
  • 25. Responsive Design
  • 26. Text Reflow (CSS Regions)
  • 27. ページではなくスペースコンテンツの整理と構造化 動き出すコンテンツ
  • 28. 見た目 コントロール ピクセル パーフェクト ページ
  • 29. 標準技術 ツール マークアップ コミュニティ
  • 30. これからも標準技術が残る ...オープンであることの重要性
  • 31. オープン シンプル未知への対応
  • 32. マークアップはより重要になる ...コンテンツを支える基盤
  • 33. photo by Yersinia pestis
  • 34. コンテンツへの意味付け人とデータを繋げる Webブラウザ以外へ
  • 35. 同じツールはこれからも使える ...Photoshop や Fireworks は、より便利に
  • 36. アセット制作 プロトタイピングクリエイティブの共有
  • 37. コミュニティはより重要になる ...2人以上が集まることに意味がある
  • 38. 若い業界ネットワークの強み コラボレーション
  • 39. ウソ ホント
  • 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. デザインとは、人間の創造物の根源となる魂であり、それが結果として製品やサービスの表面にあらわれる。 Steve Jobs
  • 42. 8 長谷川恭久 mail@yasuhisa.com www.yasuhisa.com @yhassy Web Design