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 329
16: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
ブログ
YouTube
Google
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 in
successive outer layers of the product or service.
Steve Jobs

41.
デザインとは、人間の創造物の根源となる魂で
あり、それが結果として製品やサービスの表面
にあらわれる。
Steve Jobs

42.
8
長谷川恭久
mail@yasuhisa.com www.yasuhisa.com @yhassy
Web Design