• Like
  • Save
未来へ繋ぐWeb系デザイン思考
Upcoming SlideShare
Loading in...5
×

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

  • 3,056 views
Uploaded on

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

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

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

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

Views

Total Views
3,056
On Slideshare
0
From Embeds
0
Number of Embeds
26

Actions

Shares
Downloads
0
Comments
1
Likes
25

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