8
Web デザインのウソ・ホント
∼ Webらしくデザインするためのヒント
Web Design
長谷川恭久 CSS Nite in TAKAMATSU
2012 年 2 月 25 日

ウソ ホント

見た目 コントロール
ピクセル
パーフェクト
ページ

まったく同じの見た目にできる
．．．と思っていたけど無理ですね

Webサイト 利用者

Webサイト ソフトウェア ハードウェア インプット 利用者

完成したかのように見える
間違った期待を与えてしまう
IE6対応？

Progressive Enhancement
photo by Eustaquio Santimano

コンテンツ
マークアップ
スタイル
インタラクション

ボックス ＋角丸

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

見た目は違って当然
コンテンツ配信
体験を重ねていく
photo by Eustaquio Santimano

ピクセルパーフェクトに出来る
．．．デザイナーのコダワリかと思ってた

動的なデザイン
解像度の多様化
限られた仮説
photo by EB Morse

photo by Dan King

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

流れ
リズム
ピクセル < バランス・調和
サイズ
空間
photo by popupology

完全なコントロールはできる
．．．思うようにはいきません

デザイナー <
= 利用者

コントロールの余地
柔軟性とのバランス
それぞれの体験を提供

Webはページの集まりである
．．．あまり良いメタファではないですね

＜モーグリ投げ＞
モーグリとの絆が深まると、モーグリを投げ、は
るか遠方のアイテムを探すことができるようにな キャンペーン概要
ります。ただ、その扱いの粗さにモーグリは内心
穏やかじゃない様子…！？
特典の紹介
ゲームの概要
ファイナルファンタジー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

キャンペーンをツイート
担当者向け情報
動画をクリッピング
姉妹サイト

Facebook
ブログ
YouTube
Google
Webサイト
Twitter
モバイル

Responsive Design

Text Reflow (CSS Regions)

ページではなくスペース
コンテンツの整理と構造化
動き出すコンテンツ

見た目 コントロール
ピクセル
パーフェクト
ページ

標準技術 ツール
マークアップ コミュニティ

これからも標準技術が残る
．．．オープンであることの重要性

オープン
シンプル
未知への対応

マークアップはより重要になる
．．．コンテンツを支える基盤

photo by Yersinia pestis

コンテンツへの意味付け
人とデータを繋げる
Webブラウザ以外へ

同じツールはこれからも使える
．．．Photoshop や Fireworks は、より便利に

アセット制作
プロトタイピング
クリエイティブの共有

コミュニティはより重要になる
．．．2人以上が集まることに意味がある

若い業界
ネットワークの強み
コラボレーション

ウソ ホント

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

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

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