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

1. Future ProofDesign
未 来 へ 繋 ぐ W e b 系 デ ザ イ ン 思 考
WebSig １日学校 2013年10月5日長谷川恭久 @yhassy

2. 長谷川 恭久
ハ セ ガ ワ ヤ ス ヒ サ
ウェブデザインに関わる仕事人
企画・制作・コンサルティング
ライター・スピーカー

5. 模擬 独自表現
媒体の特性を発見・学習

7. 模擬
テ レ ビ
Television
独自表現

10. 模擬
ウ ェ ブ サ イ ト
Web

15. 模擬
ウ ェ ブ サ イ ト
Web
スクリーンサイズ
ハードウェア
ソフトウェア
利用環境
文脈

16. 模擬
マ ル チ タ ッ チ 向 け
Multi-touch

17. 2011年当時のスマホサイト

18. 模擬
マ ル チ タ ッ チ 向 け
Multi-touch
指とデバイスの関係
安定しない回線
フォーカスしていない

19. 印刷
CD-ROM
テレビ
PC向けサイト
模擬フェイズ

20. by NickyColman
Age of Tablet
2015年にはパソコンの年間販売台数を超える
Tablet shipments forecasted to outpace PCs by 2015

21. 1980 1990 2000 2011
Windows
Apple
iPhone
Android

22. 総務省 2013

23. Android Fragmentation Visualized (July 2013)

26. 5.5インチのディスプレイ
27インチのタブレット？

27. 5” 7” 9” 11” 13” 15” 17” 19” 21” 23” 25” 27”3”
ノート デスクトップ
スマートフォン タブレット

29. レイアウト
タイポグラフィ
色
コピー
写真・動画
テキスト
情報の優先度
操作感
導線

30. 増え続けるスクリーンサイズ
前提を決めつけられない
コンテンツ消費の多様化
模擬

31. 独自表現
固定から可変へ
利用者の使い方、環境の観察
コンテンツのマルチデバイス化

33. by Sólveig Zophoníasdóttir
あなたにとって Web はどのような存在ですか？
What is Web to you?

34. Web for All
デバイス、場所、文化、言語関係なくアクセスできることを保証

35. Web for All
HTML5
CSS3 SVG
SMIL
API
JavaScript

37. Designer
デ ザ イ ナ ー
厳密に見た目をコントロールしたい 順序通りに画面を見てもらいたい
画像・映像を楽しんでもらいたい

38. 厳密に見た目をコントロールしたい 順序通りに画面を見てもらいたい
画像・映像を楽しんでもらいたい
Webを支える様々な技術

39. Designer
デ ザ イ ナ ー
コントロール 柔軟性
グラフィック
タイポグラフィ
レイアウト
共有しやすさ
操作の自由度
フォールバック

40. Designer
デ ザ イ ナ ー
コントロール 柔軟性
グラフィック
タイポグラフィ
レイアウト
共有しやすさ
操作の自由度
フォールバック

41. 模擬
Designer
デ ザ イ ナ ー
コントロール優先
固定サイズ
見た目先行
独自表現
アクセシビリティ
可変サイズ
使い勝手
Webを支える様々な技術

42. by Martin Fisch
Progressive Enhancement
プ ロ グ レ ッ シ ブ ・ エ ン ハ ン ス メ ン ト

43. by Martin Fisch
利用者が必要とするコンテンツや機能へのアクセス

44. ボックス ＋角丸

45. ＋グラデーション ＋シャドー

46. Mac + Chrome Windows XP + IE7
半透明の背景 立体感のある演出
角丸アニメーション
各サービスへのアクセス ニュース観覧 キーワード検索

47. Mac + Firefox Windows XP + IE7
キーワード検索 結果の絞り込み 十分な検索結果
利用できないアプリ
観覧のみ可能なアプリ

48. Designer
デ ザ イ ナ ー
コントロール 柔軟性

49. Designer
デ ザ イ ナ ー
コントロール 柔軟性

50. Flexboxより洗練されたレイアウトシステム
29+ 7+ 23+ 10+

51. Flexboxより洗練されたレイアウトシステム

52. display: flex
flex-direction 要素をどの方向に並べていくか
justify-content 要素の横間隔をどのように空けるか
要素の縦間隔をどのように空けるかalign-content
order 要素を表示させる順番

53. flex-direction

54. justify-content

55. align-content

56. order

58. by Sólveig Zophoníasdóttir
あなたにとって Web はどのような存在ですか？
What is Web to you?

59. by Daniel Kulinski
Flexbox
基礎スタイル
マークアップ

60. by Daniel Kulinski
基礎スタイル
マークアップ
Grid

61. http://m.imgur.com/WntrM6p

62. 利用者 コンテンツ
アクセスしやすいか
明確に示されているか
邪魔をしていないか
操作しやすいか

63. 利用者 コンテンツ
アクセスしやすいか
明確に示されているか
邪魔をしていないか
操作しやすいか
利用者像
利用シーン（シナリオ）
デザイン原則
ゴール設定

64. それぞれのデバイスで素敵な見た目とインタラクションを提供
利用者が必要としているコンテンツを確実に提供するための設計

66. Back to BasicWebの本質を活かしたデザインをする時代

67. Long Term Thinking
短期的な設計能力だけでなく、長期的なコンテンツ管理と設計

68. Webの特性を再勉強
パソコン時代の感覚から離れる
マルチデバイスを見据えたコンテンツ設計
教育と啓蒙

69. Thankyou!
長谷川恭久
mail@yasuhisa.com
www.yasuhisa.com
@yhassy