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

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

on

  • 3,250 views

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

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

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

Statistics

Views

Total Views
3,250
Views on SlideShare
1,833
Embed Views
1,417

Actions

Likes
23
Downloads
0
Comments
1

21 Embeds 1,417

http://www.yasuhisa.com 648
http://cloud.feedly.com 300
http://direkyo.siva 282
http://www.feedspot.com 58
http://prv.direkyo.sync-d.jp 21
http://1ds.websig247.jp 14
http://www.direkyo.com 13
http://www.komaztz.com 12
http://www.newsblur.com 11
http://reader.freerss.net 11
http://freerss.net 10
http://s.deeeki.com 8
http://rss.ameba.jp 7
http://feedly.com 7
https://twitter.com 4
http://digg.com 4
http://newsblur.com 3
http://ivystar.jp 1
http://reader.aol.com 1
http://prv2.direkyo.sync-d.jp 1
http://yoleoreader.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial LicenseCC Attribution-NonCommercial License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • 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