Your SlideShare is downloading. ×
Future ProofDesign
未 来 へ 繋 ぐ W e b 系 デ ザ イ ン 思 考
WebSig 1日学校 2013年10月5日長谷川恭久 @yhassy
長谷川 恭久
ハ セ ガ ワ ヤ ス ヒ サ
ウェブデザインに関わる仕事人
企画・制作・コンサルティング
ライター・スピーカー
模擬 独自表現
媒体の特性を発見・学習
模擬
テ レ ビ
Television
独自表現
模擬
ウ ェ ブ サ イ ト
Web
模擬
ウ ェ ブ サ イ ト
Web
スクリーンサイズ
ハードウェア
ソフトウェア
利用環境
文脈
模擬
マ ル チ タ ッ チ 向 け
Multi-touch
2011年当時のスマホサイト
模擬
マ ル チ タ ッ チ 向 け
Multi-touch
指とデバイスの関係
安定しない回線
フォーカスしていない
印刷
CD-ROM
テレビ
PC向けサイト
模擬フェイズ
by NickyColman
Age of Tablet
2015年にはパソコンの年間販売台数を超える
Tablet shipments forecasted to outpace PCs by 2015
1980 1990 2000 2011
Windows
Apple
iPhone
Android
総務省 2013
Android Fragmentation Visualized (July 2013)
5.5インチのディスプレイ
27インチのタブレット?
5” 7” 9” 11” 13” 15” 17” 19” 21” 23” 25” 27”3”
ノート デスクトップ
スマートフォン タブレット
レイアウト
タイポグラフィ
色
コピー
写真・動画
テキスト
情報の優先度
操作感
導線
増え続けるスクリーンサイズ
前提を決めつけられない
コンテンツ消費の多様化
模擬
独自表現
固定から可変へ
利用者の使い方、環境の観察
コンテンツのマルチデバイス化
by Sólveig Zophoníasdóttir
あなたにとって Web はどのような存在ですか?
What is Web to you?
Web for All
デバイス、場所、文化、言語関係なくアクセスできることを保証
Web for All
HTML5
CSS3 SVG
SMIL
API
JavaScript
Designer
デ ザ イ ナ ー
厳密に見た目をコントロールしたい 順序通りに画面を見てもらいたい
画像・映像を楽しんでもらいたい
厳密に見た目をコントロールしたい 順序通りに画面を見てもらいたい
画像・映像を楽しんでもらいたい
Webを支える様々な技術
Designer
デ ザ イ ナ ー
コントロール 柔軟性
グラフィック
タイポグラフィ
レイアウト
共有しやすさ
操作の自由度
フォールバック
Designer
デ ザ イ ナ ー
コントロール 柔軟性
グラフィック
タイポグラフィ
レイアウト
共有しやすさ
操作の自由度
フォールバック
模擬
Designer
デ ザ イ ナ ー
コントロール優先
固定サイズ
見た目先行
独自表現
アクセシビリティ
可変サイズ
使い勝手
Webを支える様々な技術
by Martin Fisch
Progressive Enhancement
プ ロ グ レ ッ シ ブ ・ エ ン ハ ン ス メ ン ト
by Martin Fisch
利用者が必要とするコンテンツや機能へのアクセス
ボックス +角丸
+グラデーション +シャドー
Mac + Chrome Windows XP + IE7
半透明の背景 立体感のある演出
角丸アニメーション
各サービスへのアクセス ニュース観覧 キーワード検索
Mac + Firefox Windows XP + IE7
キーワード検索 結果の絞り込み 十分な検索結果
利用できないアプリ
観覧のみ可能なアプリ
Designer
デ ザ イ ナ ー
コントロール 柔軟性
Designer
デ ザ イ ナ ー
コントロール 柔軟性
Flexboxより洗練されたレイアウトシステム
29+ 7+ 23+ 10+
Flexboxより洗練されたレイアウトシステム
display: flex
flex-direction 要素をどの方向に並べていくか
justify-content 要素の横間隔をどのように空けるか
要素の縦間隔をどのように空けるかalign-content
order 要素を表示させる順番
flex-direction
justify-content
align-content
order
by Sólveig Zophoníasdóttir
あなたにとって Web はどのような存在ですか?
What is Web to you?
by Daniel Kulinski
Flexbox
基礎スタイル
マークアップ
by Daniel Kulinski
基礎スタイル
マークアップ
Grid
http://m.imgur.com/WntrM6p
利用者 コンテンツ
アクセスしやすいか
明確に示されているか
邪魔をしていないか
操作しやすいか
利用者 コンテンツ
アクセスしやすいか
明確に示されているか
邪魔をしていないか
操作しやすいか
利用者像
利用シーン(シナリオ)
デザイン原則
ゴール設定
それぞれのデバイスで素敵な見た目とインタラクションを提供
利用者が必要としているコンテンツを確実に提供するための設計
Back to BasicWebの本質を活かしたデザインをする時代
Long Term Thinking
短期的な設計能力だけでなく、長期的なコンテンツ管理と設計
Webの特性を再勉強
パソコン時代の感覚から離れる
マルチデバイスを見据えたコンテンツ設計
教育と啓蒙
Thankyou!
長谷川恭久
mail@yasuhisa.com
www.yasuhisa.com
@yhassy
未来へ繋ぐWeb系デザイン思考
未来へ繋ぐWeb系デザイン思考
未来へ繋ぐWeb系デザイン思考
未来へ繋ぐWeb系デザイン思考
未来へ繋ぐWeb系デザイン思考
未来へ繋ぐWeb系デザイン思考
未来へ繋ぐWeb系デザイン思考
未来へ繋ぐWeb系デザイン思考
未来へ繋ぐWeb系デザイン思考
未来へ繋ぐWeb系デザイン思考
未来へ繋ぐWeb系デザイン思考
未来へ繋ぐWeb系デザイン思考
未来へ繋ぐWeb系デザイン思考
未来へ繋ぐWeb系デザイン思考
未来へ繋ぐWeb系デザイン思考
未来へ繋ぐWeb系デザイン思考
Upcoming SlideShare
Loading in...5
×

未来へ繋ぐWeb系デザイン思考

3,290

Published on

WebSig1日学校2013 で使用したスライド。

Web の本質をおさらいしつつ、パソコンやスマートフォンといった特定のデバイスに捕われない Web サイト・アプリ設計の基礎を解説しました。

Published in: Design
1 Comment
26 Likes
Statistics
Notes
No Downloads
Views
Total Views
3,290
On Slideshare
0
From Embeds
0
Number of Embeds
26
Actions
Shares
0
Downloads
0
Comments
1
Likes
26
Embeds 0
No embeds

No notes for slide

Transcript of "未来へ繋ぐWeb系デザイン思考"

  1. 1. Future ProofDesign 未 来 へ 繋 ぐ W e b 系 デ ザ イ ン 思 考 WebSig 1日学校 2013年10月5日長谷川恭久 @yhassy
  2. 2. 長谷川 恭久 ハ セ ガ ワ ヤ ス ヒ サ ウェブデザインに関わる仕事人 企画・制作・コンサルティング ライター・スピーカー
  3. 3. 模擬 独自表現 媒体の特性を発見・学習
  4. 4. 模擬 テ レ ビ Television 独自表現
  5. 5. 模擬 ウ ェ ブ サ イ ト Web
  6. 6. 模擬 ウ ェ ブ サ イ ト Web スクリーンサイズ ハードウェア ソフトウェア 利用環境 文脈
  7. 7. 模擬 マ ル チ タ ッ チ 向 け Multi-touch
  8. 8. 2011年当時のスマホサイト
  9. 9. 模擬 マ ル チ タ ッ チ 向 け Multi-touch 指とデバイスの関係 安定しない回線 フォーカスしていない
  10. 10. 印刷 CD-ROM テレビ PC向けサイト 模擬フェイズ
  11. 11. by NickyColman Age of Tablet 2015年にはパソコンの年間販売台数を超える Tablet shipments forecasted to outpace PCs by 2015
  12. 12. 1980 1990 2000 2011 Windows Apple iPhone Android
  13. 13. 総務省 2013
  14. 14. Android Fragmentation Visualized (July 2013)
  15. 15. 5.5インチのディスプレイ 27インチのタブレット?
  16. 16. 5” 7” 9” 11” 13” 15” 17” 19” 21” 23” 25” 27”3” ノート デスクトップ スマートフォン タブレット
  17. 17. レイアウト タイポグラフィ 色 コピー 写真・動画 テキスト 情報の優先度 操作感 導線
  18. 18. 増え続けるスクリーンサイズ 前提を決めつけられない コンテンツ消費の多様化 模擬
  19. 19. 独自表現 固定から可変へ 利用者の使い方、環境の観察 コンテンツのマルチデバイス化
  20. 20. by Sólveig Zophoníasdóttir あなたにとって Web はどのような存在ですか? What is Web to you?
  21. 21. Web for All デバイス、場所、文化、言語関係なくアクセスできることを保証
  22. 22. Web for All HTML5 CSS3 SVG SMIL API JavaScript
  23. 23. Designer デ ザ イ ナ ー 厳密に見た目をコントロールしたい 順序通りに画面を見てもらいたい 画像・映像を楽しんでもらいたい
  24. 24. 厳密に見た目をコントロールしたい 順序通りに画面を見てもらいたい 画像・映像を楽しんでもらいたい Webを支える様々な技術
  25. 25. Designer デ ザ イ ナ ー コントロール 柔軟性 グラフィック タイポグラフィ レイアウト 共有しやすさ 操作の自由度 フォールバック
  26. 26. Designer デ ザ イ ナ ー コントロール 柔軟性 グラフィック タイポグラフィ レイアウト 共有しやすさ 操作の自由度 フォールバック
  27. 27. 模擬 Designer デ ザ イ ナ ー コントロール優先 固定サイズ 見た目先行 独自表現 アクセシビリティ 可変サイズ 使い勝手 Webを支える様々な技術
  28. 28. by Martin Fisch Progressive Enhancement プ ロ グ レ ッ シ ブ ・ エ ン ハ ン ス メ ン ト
  29. 29. by Martin Fisch 利用者が必要とするコンテンツや機能へのアクセス
  30. 30. ボックス +角丸
  31. 31. +グラデーション +シャドー
  32. 32. Mac + Chrome Windows XP + IE7 半透明の背景 立体感のある演出 角丸アニメーション 各サービスへのアクセス ニュース観覧 キーワード検索
  33. 33. Mac + Firefox Windows XP + IE7 キーワード検索 結果の絞り込み 十分な検索結果 利用できないアプリ 観覧のみ可能なアプリ
  34. 34. Designer デ ザ イ ナ ー コントロール 柔軟性
  35. 35. Designer デ ザ イ ナ ー コントロール 柔軟性
  36. 36. Flexboxより洗練されたレイアウトシステム 29+ 7+ 23+ 10+
  37. 37. Flexboxより洗練されたレイアウトシステム
  38. 38. display: flex flex-direction 要素をどの方向に並べていくか justify-content 要素の横間隔をどのように空けるか 要素の縦間隔をどのように空けるかalign-content order 要素を表示させる順番
  39. 39. flex-direction
  40. 40. justify-content
  41. 41. align-content
  42. 42. order
  43. 43. by Sólveig Zophoníasdóttir あなたにとって Web はどのような存在ですか? What is Web to you?
  44. 44. by Daniel Kulinski Flexbox 基礎スタイル マークアップ
  45. 45. by Daniel Kulinski 基礎スタイル マークアップ Grid
  46. 46. http://m.imgur.com/WntrM6p
  47. 47. 利用者 コンテンツ アクセスしやすいか 明確に示されているか 邪魔をしていないか 操作しやすいか
  48. 48. 利用者 コンテンツ アクセスしやすいか 明確に示されているか 邪魔をしていないか 操作しやすいか 利用者像 利用シーン(シナリオ) デザイン原則 ゴール設定
  49. 49. それぞれのデバイスで素敵な見た目とインタラクションを提供 利用者が必要としているコンテンツを確実に提供するための設計
  50. 50. Back to BasicWebの本質を活かしたデザインをする時代
  51. 51. Long Term Thinking 短期的な設計能力だけでなく、長期的なコンテンツ管理と設計
  52. 52. Webの特性を再勉強 パソコン時代の感覚から離れる マルチデバイスを見据えたコンテンツ設計 教育と啓蒙
  53. 53. Thankyou! 長谷川恭久 mail@yasuhisa.com www.yasuhisa.com @yhassy

×