実践！CSSデザインの「型」でみる視覚表現テクニック

「型」視覚表現テクニック

実践！CSSデザインのでみる

境祐司

Designer meets Designers SESSION 5

2007.8.10

1

残暑お見舞い申し上げます暑さ厳しき折柄、くれぐれもご自愛のほどお祈り申し上げます

2

自己紹介

境祐司Instructional Designer

インストラクショナル・デザイナーとして学校、企業の講座プラン、教育マネジメント、講演、書籍執筆などの活動

を行う。2000年より情報デザイン関連のオンライン学習実証実験を始める。モバイルを活用した新しい学習環境を

提案、専用ネットワークにて実験サイトcommon style.を運営。現在、教育デザイナー育成を目的としたフォーラム

を立ち上げるため準備中。著書に『Making a Rule for Web Design』（ソーテック）、『CSSビジュアルデザイ

ン・メソッド』（毎日コミュニケーションズ）、『XHTMLマークアップ＆スタイルシートリフォームデザインガイ

ドブック』（ソシム）、『改訂新版 Webデザイン基礎』（技術評論社）など。

3

自己紹介


・企業の講座プラン・教育マネジメント

4

自己紹介


5

自己紹介


2007年はあと5冊ほど出版される予定

6

技waza

subject

new

7

最新動向New Trends of CSS

ブラウザ対策browser fixed

基礎デザインBasic Design

仕様書http://www.w3.org/TR/CSS21/

subject

new

8

http://www.w3.org/TR/CSS21/






subject

new+

変わらないもの

日々変化するもの

9



Introduction

10

Web standards 1998-2000Before/After CSS Design

11

1998年頃のCSS学習デザイナーはどのような勉強をしていたか？

12

13

Webスタイルシート活用ガイドCSSの基礎から応用まで著：スティーブン・マルダー／訳：安藤慶一発行：プレンティスホール出版／定価2,600円＋税

1997年11月出版

14

1998～2000年頃のCSS学習「カスケードの理解」

15

1998～2000年頃のCSS学習「継承の理解」

16

1998～2000年頃のCSS学習「詳細度の理解」

17


18


19

20

スタイルシートWebデザインCSS2完全解説著：すみけんたろう

発行：技術評論社／定価1,980円＋税

1998年8月出版

21

1998～2000年頃のCSS学習「構造化の重要性」

22

23

ユニバーサルHTML/XHTML著：神崎正英

発行：毎日コミュニケーションズ／定価2,200円＋税

2000年11月出版

24

25

1997年1998年1999年2000年

カスケードスタイルの継承

ルールとルールの競合

詳細度CSSフォーマットモデル

ブラウザ戦争を終結させるためにHTMLを再確認

情報デザインアクセシビリティ

ユーザビリティ

26

1997年1998年1999年2000年







しかし、CSSは普及せず

27

1997年1998年1999年2000年







物理マークアップに駆逐される

28

1997年1998年1999年2000年







独自拡張仕様と視覚表現

29

HTMLだけのマルチカラムレイアウト

1998年

30

Netscape Communicator 4.75

31

CSSは使わずHTMLで段組み

32

<spacer type="vertical" size="24"><multicol cols="3" gutter="25" width="690">　<p>文章</p></multicol>

multicol 要素Netscape 3.x - 4.x

33

Netscape Communicator 4.75

34

multicol要素（ページの段組みを指定する）spacer要素（余白を指定する）blink要素（テキストを点滅させる）marquee要素（テキストをスクロールさせる）bgsound要素（音楽を再生する）

ブラウザに次々と搭載される独自拡張仕様

35

簡単に段組みレイアウトが表現できるHTMLだけで

36


非構造化ドキュメントの氾濫

37


独自拡張仕様はWebを混乱させる非構造化ドキュメントの氾濫

38

HTMLやCSSを正しく実装したブラウザが流通しない限り、Web制作者の意識も変わらない

39

WaSP設立

1998年

The Web Standards Project

40

言葉の力

41

Web Standards

42

象徴・要求・啓蒙Web Standards

43


ブラウザーベンダーに対してはW3Cが勧告する技術標準に沿った実装をおこない、独自拡張仕様のサポートを控えるよう意見する

44


Web制作者には、正しいマークアップを即し「特定のブラウザに依存しない柔軟性の高い

Webサイト」作りが多くの利点を持つことを説く

45

1997年1998年1999年2000年

2001年2002年2003年2004年

46

1997年1998年1999年2000年

2001年2002年2003年2004年

47

1997年1998年1999年2000年

2001年2002年2003年2004年

10月、Wired NewsがCSSレイアウトを採用12月、W3CもテーブルからCSSレイアウトへ

48

1997年1998年1999年2000年

2001年2002年2003年2004年

5月、css Zen Gardenが公開される

49

1997年1998年1999年2000年

2001年2002年2003年2004年

CSS関連の書籍、セミナーなどが増加する

50

2005年2006年2007年2008年

CSSから学んだWebデザイナーの登場テーブルレイアウトを知らない

51

52

Web標準の教科書

著：益子貴寛発行：秀和システム／定価2,400円＋税

2005年7月出版

XHTMLとCSSでつくる正しいWebサイト

53

2005年2006年2007年2008年

業界で進む世代交代と洗練されるCSSデザイン

54

2005年2006年2007年2008年を知るCSSデザイン視覚表現の「今」

55

技waza

Cascading Style Sheets

56

技waza


視覚表現の

57

機能美

58

機能美

FunctionalBeauty

59

Functional Beauty

60

Functional Beauty

61

Functional Beauty

62

Functional Beauty

63

Functional Beauty

64

Functional Beauty

65

技waza


視覚表現の

スキルアップskill up

new

66



Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification

67





68



69



70






71








72








負担

73




・背景色および背景画像が表示されない・ナビゲーションバーの表現で、画像置換を使うと　Firefoxだけテキストのアンダーラインが表示されてしまう・@importで外部CSSを読み込む場合、一瞬デフォルトの　状態で表示されてしまう・ユニバーサルセレクタでデフォルトCSSの値を　リセットしても、IE6の一部の要素には適用されない・ショートハンドで記述する際、部分的に値を省略すると　デフォルト値にもどってしまう・隣接する画像に隙間ができてしまう・意図しないスクロールバーが表示されてしまう

74


・背景画像が固定できない・絶対配置した要素が他の要素を隠してしまう・ボックスからテキストがあふれてしまう・指定したマージンが倍の値になりレイアウトが　変わってしまう・ボーダーのスタイル指定が反映されない・ブラウザによって文字が極端に小さくなってしまう・最上部に表示されている見出しなどが欠けてしまう・リストの項目間に隙間ができてしまう・IE7のページズームを使った場合、背景画像が拡大されない・IE7のページズームで文字が重なってしまう

75






負担

76








77




ピクセルパーフェクトデザイン

New Trends of CSS

pixel-perfect design

78



New Trends of CSS

pixel-perfect designどのブラウザでも同じデザインで表示させる［文字サイズをピクセル指定、見栄えのためにCSSハック使用］

79



アダプティブデザイン


adaptive design

New Trends of CSS

80






コミュニティinternet community

educational institution

81



http://dictionary.goo.ne.jp/search.php?MT=educational&kind=ej&mode=0&wl=1


http://dictionary.goo.ne.jp/search.php?MT=institution&kind=ej&mode=0&wl=1








各国のコミュニティlocal community


82














専門誌・セミナーmedia / seminar


83















書籍・学校book / educational institution


84







技waza


CSSデザインの技法はから提案される「個人」

85

creator's creator

86

creator's creatorクリエーターのお手本になるクリエーターの存在

87

CSS技法の情報を得る

88

alpha blogger assetアルファブロガー・アセット

creator's creator

89

効率良く情報を得る

90

RSS Feed

91

Fast ladder http://fastladder.com/

RSS Feedを活用する

92

http://fastladder.com

http://fastladder.com

CSSデザインを体系的に習得するコツ

93

デザインの


良いデザインをたくさん見るを覚えて、「型」

94

dismantle learningディスメント・ラーニングのススメ

95

ディスメント・ラーニングで役立つツール

Web Developerhttp://chrispederick.com/work/web-developer/

http://www.infoaxia.com/tools/webdeveloper/

http://www.infoaxia.co.jp/株式会社インフォアクシア

Web Developer日本語版

dismantle learning

96

http://chrispederick.com/work/web-developer/

http://chrispederick.com/work/web-developer/




http://www.infoaxia.co.jp



dismantle learning

W3C http://www.w3.org/

97

http://www.w3.org

http://www.w3.org

dismantle learning

CSSを無効にする

98

dismantle learning

99

dismantle learning

スタイル情報を表示する

100

dismantle learning

101

dismantle learning

スタイル情報

102

dismantle learning

CSSを表示する

103

dismantle learning

104

dismantle learning

105

dismantle learning

ページのサイズを表示する

106

dismantle learning

107

dismantle learning

108

dismantle learning

みずほ証券 http://www.mizuho-sc.com/ja/index.html

109

http://www.mizuho-sc.com/ja/index.html


dismantle learning

110

dismantle learning

21のCSSファイル

111

dismantle learning

愛・地球博 http://www.expo2005.or.jp/jp/

112

http://www.expo2005.or.jp/jp/

http://www.expo2005.or.jp/jp/

dismantle learning

113

dismantle learning

114

dismantle learning

21のCSSファイル

115

CSS RuleCSSデザインのルール

116

CSS Rule

hicksdesign http://www.hicksdesign.co.uk/

117

http://www.hicksdesign.co.uk

http://www.hicksdesign.co.uk

CSS Rule

メッセージ

XHTMLソースのコメント

118

CSS Rule

The Web Standards Project [WaSP] http://www.webstandards.org/

119

http://www.webstandards.org

http://www.webstandards.org

CSS Rule

CSSハック専用のCSSファイル

120

CSS Rule

TextDrive http://textdrive.com/

121

http://textdrive.com

http://textdrive.com

CSS Rule

フロートのクリアや非表示などの指定をまとめる

122

Global Navigationstep1-17construction

技法の記録

123


Apple.com

124


Apple.com

125

step1

XHTML

126

step2

XHTML & CSS

127

#globalheader { width: 982px; height: 38px;

margin: 18px auto; position: relative; z-index: 9998; }

#globalheader #globalnav { margin: 0; padding: 0; }

step3

128

#globalheader #globalnav li { display: inline; }

step4

129

#globalheader #globalnav li a { float: left; width: 117px; height: 0; padding-top: 38px; overflow: hidden; }

step5

130


step5

131

Global Navigation Image

PNG & GIF

132


step5

133

#globalheader #globalnav li a, #globalheader #globalsearch {

background-image: url(globalnavbg.png); _background-image: url(globalnavbg.gif); background-repeat: no-repeat;}

step6

134

#globalheader #globalnav li a, #globalheader #globalsearch {

background-image: url(globalnavbg.png); _background-image: url(globalnavbg.gif); background-repeat: no-repeat;}

step6

135

#globalheader #globalnav li#gn-store a { background-position: 0 0; }#globalheader #globalnav li#gn-store a { background-position: -117px 0; }

step7

136

#globalheader #globalnav li#gn-mac a { background-position: -234px 0; }

step8

137

#globalheader #globalnav li#gn-ipoditunes a { background-position: -351px 0; }

step9

138

#globalheader #globalnav li#gn-iphone a { background-position: -468px 0; }

step10

139

#globalheader #globalnav li#gn-downloads a { background-position: -585px 0; }

step11

140

#globalheader #globalnav li#gn-support a { background-position: -702px 0; }

step12

141

/* OVER STATES */

#globalheader #globalnav li#gn-apple a:hover { background-position: 0 -38px; }#globalheader #globalnav li#gn-store a:hover { background-position: -117px -38px; }#globalheader #globalnav li#gn-mac a:hover { background-position: -234px -38px; }#globalheader #globalnav li#gn-ipoditunes a:hover { background-position: -351px -38px; }#globalheader #globalnav li#gn-iphone a:hover { background-position: -468px -38px; }#globalheader #globalnav li#gn-downloads a:hover { background-position: -585px -38px; }#globalheader #globalnav li#gn-support a:hover { background-position: -702px -38px; }

step13

142

/* PRESSED STATES */

#globalheader #globalnav li#gn-apple a:active { background-position: 0 -76px; }#globalheader #globalnav li#gn-store a:active { background-position: -117px -76px; }#globalheader #globalnav li#gn-mac a:active { background-position: -234px -76px; }#globalheader #globalnav li#gn-ipoditunes a:active { background-position: -351px -76px; }#globalheader #globalnav li#gn-iphone a:active { background-position: -468px -76px; }#globalheader #globalnav li#gn-downloads a:active { background-position: -585px -76px; }#globalheader #globalnav li#gn-support a:active { background-position: -702px -76px; }

step14

143

/* ON STATES */

#globalheader.home #globalnav li#gn-apple a:hover { background-position: 0 0; cursor: default; }#globalheader.store #globalnav li#gn-store a { background-position: -117px -114px !important; }#globalheader.mac #globalnav li#gn-mac a { background-position: -234px -114px !important; }#globalheader.ipoditunes #globalnav li#gn-ipoditunes a { background-position: -351px -114px !important; }#globalheader.iphone #globalnav li#gn-iphone a { background-position: -468px -114px !important; }#globalheader.downloads #globalnav li#gn-downloads a { background-position: -585px -114px !important; }#globalheader.support #globalnav li#gn-support a { background-position: -702px -114px !important; }

step15

144

/* ON STATES */

#globalheader.home #globalnav li#gn-apple a:hover { background-position: 0 0; cursor: default; }#globalheader.store #globalnav li#gn-store a { background-position: -117px -114px !important; }#globalheader.mac #globalnav li#gn-mac a { background-position: -234px -114px !important; }#globalheader.ipoditunes #globalnav li#gn-ipoditunes a { background-position: -351px -114px !important; }#globalheader.iphone #globalnav li#gn-iphone a { background-position: -468px -114px !important; }#globalheader.downloads #globalnav li#gn-downloads a { background-position: -585px -114px !important; }#globalheader.support #globalnav li#gn-support a { background-position: -702px -114px !important; }

step15

145

#globalsearch { width: 163px; height: 38px; position: absolute; top: 0; right: 0; background-position: 100% 0; background-repeat: no-repeat; }

step16

146

#globalsearch label .prettyplaceholder { display: none; }

step17

147

Global Navigation

step1-17construction

Apple.com

148

Global Navigation

step1-17construction

Apple.com

技法の記録

149

new+


技法の記録

・時間をかけて体系的に学ぶなら書籍や学校・仕事をしながら(限られた時間で)学ぶなら　ディスメント・ラーニング

150

new+

技法の記録

表現の分解仕組みの分解

151

new+

技法の記録

技Cascading Style Sheets

技法の記録

技法の記録技法の記録

技法の記録

152

new+

技法の記録

技技法の記録

技法の記録技法の記録

技法の記録

waza waza

wazawaza

waza


153






new

154




事例

new+

CSS dismantle learning

155

elastic layout outlineエラスティックレイアウト概論

156

elastic layout outlinenew+

elastic layoutエラスティックレイアウトとは？

157

elastic layout outline

fluid elastic layout

fixed elastic layout

ブラウザのウィンドウサイズにあわせて変更される

new

フォントサイズにあわせて変更される

（min-width, max-widthによる制限付き可変）

158


Mozilla Foundation http://www.mozilla.org/


159

http://www.mozilla.org

http://www.mozilla.org



160



161



162

elastic layout outlineMozilla Corporationhttp://www.mozilla.com/en-US/

163

http://www.mozilla.com/en-US/

http://www.mozilla.com/en-US/

elastic layout outlinefluid layout

164

elastic layout outlinefluid layout

165


GBHXonline.com http://gbhxonline.com/


166

http://gbhxonline.com

http://gbhxonline.com



167



168

elastic layout detailsエラスティックレイアウトに関する経緯

169

elastic layout details

A List Aparthttp://alistapart.com/

170

http://alistapart.com

http://alistapart.com

2004年1月9日Elastic Design by Patrick Griffithshttp://alistapart.com/articles/elastic/


171

http://alistapart.com/articles/elastic/


2005年4月25日Fixed or fluid width? Elastic!

http://www.456bereastreet.com/archive/200504/fixed_or_fluid_width_elastic/


172



Stuff and Nonsensehttp://www.stuffandnonsense.co.uk/

Andy Clarke


173

http://www.stuffandnonsense.co.uk

http://www.stuffandnonsense.co.uk

2005年8月24日A List (taken) Aparthttp://www.stuffandnonsense.co.uk/archives/a_list_taken_apart.html


174

http://www.stuffandnonsense.co.uk/archives/a_list_taken_apart.html

http://www.stuffandnonsense.co.uk/archives/a_list_taken_apart.html

2005年11月26日Resolution dependent style switchinghttp://www.456bereastreet.com/archive/200511/resolution_dependent_style_switching/


175

http://www.456bereastreet.com/archive/200511/resolution_dependent_style_switching/

http://www.456bereastreet.com/archive/200511/resolution_dependent_style_switching/

Particletreehttp://particletree.com/

Dynamic Resolution Dependent Layoutshttp://particletree.com/examples/dynamiclayouts/

DRDL


176

http://particletree.com

http://particletree.com

http://particletree.com/examples/dynamiclayouts/

http://particletree.com/examples/dynamiclayouts/

Dynamic Resolution Dependent Layouts


177



178



179

2005年11月27日Resolution vs. browser size vs. fixed or adaptive width

http://www.456bereastreet.com/archive/200611/resolution_vs_browser_size_vs_fixed_or_adaptive_width/


180



Resolutionvs.

browser size

fixed or adaptive widthvs.


181

elastic layout demonstrationエラスティックレイアウト・デモンストレーション

182

2004年1月9日Elastic Design by Patrick Griffithshttp://alistapart.com/articles/elastic/

Elastic Design Demonstration

183




184


h1 { margin: 0.2em 0.5em; color: #666;}

.image { width: 30em; height: 15em; margin: 0.2em 1em; border: 1px solid #000;}

new

185


デモンストレーションをご覧ください

186

Cascading Style Sheetsnew





ここが一番重要

187








new

無視できない

188








new

無視できない

アップデート情報は日々

189






new+

無視できない

アップデート情報は日々

190

The weird and wonderful world of

Internet Explorer

インターネットエクスプローラーの不可思議な世界へ

191

The weird and wonderful world of

Internet Explorer

インターネットエクスプローラーの不可思議な世界へ

怖い話192

IE hasLayout outlinehasLayoutプロパティとCSSデザインの関係について

The weird and wonderful world of Internet Explorer

193

IE hasLayout outlinemsdnInternet Explorer Developer CenterLearn | Cascading Style Sheets (CSS)http://msdn2.microsoft.com/en-us/ie/aa740476.aspx

194

http://msdn2.microsoft.com/en-us/ie/aa740476.aspx

http://msdn2.microsoft.com/en-us/ie/aa740476.aspx

IE hasLayout outline

http://blogs.msdn.com/ie/IEBlog

195

http://blogs.msdn.com/ie/

http://blogs.msdn.com/ie/

BugInternet Explorerのバグ

IE BugIE hasLayout outline

196


Peekaboo BugInternet Explorer and Expanding Box Problem

Quirky PercentagesLine-height bugBorder Chaos

Disappearing List-Background bugGuillotine Bug

Unscrollable Content bugDuplicate Characters Bug

IE and ItalicsDoubled Float-Margin bug

Duplicate Indent bugThree pixel text jogCreeping Text bug

Missing First letter bugPhantom box bug

197

CSS hacks and broken pagesページ表示の不具合に対処するためのCSSハック

CSS hacks


198


Explorer Exposed!The weird and wonderful world of Internet Explorerhttp://www.positioniseverything.net/explorer.html

199

http://www.positioniseverything.net/explorer.html

http://www.positioniseverything.net/explorer.html


IE6 Peekaboo Bughttp://www.positioniseverything.net/explorer/peekaboo.html

Explorer Exposed!The weird and wonderful world of Internet Explorer

200

http://www.positioniseverything.net/explorer/peekaboo.html

http://www.positioniseverything.net/explorer/peekaboo.html


There are three ways we know to prevent this bug.

1. Keep the clearing div from touching the float, or avoid using a background on div#floatholder. Not exactly ideal.

2. Give both div#floatholder and div#float 'position: relative'. Be sure to fully test this method.

3. Give div#floatholder hasLayout (now the preferred method)

バグに対処するための3つの方法

201






(now the preferred method)3. Give div#floatholder hasLayout

202






(now the preferred method)3. Give div#floatholder hasLayout

203


msdnhasLayout Propertyhttp://msdn2.microsoft.com/en-us/library/ms533776.aspx

204

http://msdn2.microsoft.com/en-us/library/ms533776.aspx



haslayouthasLayout Property

Gets a value that indicates whether the object has layout.オブジェクトがレイアウト情報を持っているかどうかを示す

205


The following example shows how to use the hasLayout property to determine whether an object has layout.

206



207



208

IE hasLayout outlinenew

haslayout・IEの独自拡張／プロパティはread-only・HTMLのすべての要素が対象・要素にレイアウト情報があるのか　true(真)、false(偽)で示す・初期値はfalse・7つのプロパティに特定の値を指定すると　　hasLayoutの値がtrueに変更される

209


haslayoutCSS property

displayheightfloatpositionwidthwriting-modezoom

Value

inline-blockany valueleft or rightabsoluteany valuetb-rlany value

特定の値を指定するとhasLayoutの値がtrueに変更される

(auto以外)

(auto以外)

(auto以外)

210


haslayout

CSS hacks and broken pagesCSS hacks !?

CSSハック！？

211


haslayout“non-layout” elements

“has layout” elements

or

212


haslayout

さまざまな問題が発生する

213


haslayoutMany common IE float bugs.

Boxes themselves treating basic properties differently.

Margin collapsing between a container and its descendants.

Various problems with the construction of lists.

Differences in the positioning of background images.

Differences between browsers when using scripting.

214


haslayoutIE6 Peekaboo Bug

215



浮動化ボックスの親要素に指定した背景色が消える

216



浮動化ボックスの親要素に指定した背景色が消える

hasLayout値がfalseで発生

217




Value



(auto以外)

(auto以外)

(auto以外)

218


haslayout浮動化ボックスの親要素に指定した背景色が消える


widthの指定でhasLayout値がtrueに変わる

要素にレイアウト情報があると判断される

219


haslayout浮動化ボックスの親要素に指定した背景色が消える


widthの指定でhasLayout値がtrueに変わる

要素にレイアウト情報があると判断される

浮動化ボックスの高さが算出されてしまう

220




Value



(auto以外)

(auto以外)

(auto以外)

221




Value



(auto以外)

(auto以外)

(auto以外)autoを指定するとhasLayoutの値がリセットされる

222


On having layouthttp://www.satzansatz.de/cssd/onhavinglayout.html

223

http://www.satzansatz.de/cssd/onhavinglayout.html

http://www.satzansatz.de/cssd/onhavinglayout.html


Default layout elements

<html>, <body><table>, <tr>, <th>, <td><img><hr><input>, <button>, <select>, <textarea>, <fieldset>, <legend><iframe>, <embed>, <object>, <applet><marquee>

224

IE hack managementIE CSSハックの管理


225


Thoughts on IE hack managementhttp://onhavinglayout.fwpf-webdesign.de/hack_management/

226

http://onhavinglayout.fwpf-webdesign.de/hack_management/

http://onhavinglayout.fwpf-webdesign.de/hack_management/






new

227








new

228








new

重要

229



技waza


230

技waza


小技

小技

小技

小技

小技

小技

new

231

技waza


小技＋小技＋小技＋小技

一定の型に基づく動作new

232

技waza




技法の記録技法の記録技法の記録技法の記録

233

技waza




技法の記録技法の記録技法の記録技法の記録

感性やセンスを問わない技法の形式化が重要

234

技waza


candy colorrunning shyflash page-buildingIR: rocket vs chameleon

grid layoutbaseline-grid layoutwhite background theorywide-screen composition

utility layout [widget & gadget]sidebar-land buyoutmashup [web application hybrid]

passe-partoutflood-colorappropriation design


技法の一部

235

Cascading Style Sheets技法の分類

new+

本日は4つのカテゴリを取り上げる

236

Cascading Style Sheets技法の分類

new

color-forwardroyal-standard

patchworkcelebrity

237

color-forward

238

ビジュアルの刺激で訴求するデザインcolor-forward

239



240

color-forwardCameron Moll ~ I {heart} design. http://www.cameronmoll.com/portfolio/

241

http://www.cameronmoll.com/portfolio/

http://www.cameronmoll.com/portfolio/

color-forwardThe Consult http://www.theconsult.com/

242

http://www.theconsult.com

http://www.theconsult.com

color-forwardStartseite von >>Denklichter http://www.denk-licht.de/

243

http://www.denk-licht.de


color-forwardStartseite von >>Denklichter http://www.denk-licht.de/

244



color-forwardhrasti.com http://www.hrasti.com/

245

http://www.hrasti.com


color-forwardhrasti.com http://www.hrasti.com/

246



color-forwardElliot Jay Stocks http://elliotjaystocks.com/blog/

247

http://elliotjaystocks.com/blog/


color-forwardElliot Jay Stocks http://elliotjaystocks.com/blog/

248



color-forwardUniversity of Notre Dame http://glynnhonors.nd.edu/

249

http://glynnhonors.nd.edu/

http://glynnhonors.nd.edu/


250




251



candy color


252

candy colorビジュアルの刺激で訴求するデザインcolor-forward

グラデーション＋

ベベル＆ドロップシャドウ

反射＋

角丸＋

new

253

candy colorビジュアルの刺激で訴求するデザインcolor-forwardnew+

表現の形式化

254


表現の形式化

一定の型に基づく動作感性やセンスを問わない技法の形式化が重要

255


グラフィック部品の事例


256


257


258


259


260


261


262


263


264


265


266


1. ベベル

267


2. ボーダー

268


3.ドロップシャドウ

269


270


271


視覚表現の手法を型で覚える


272

running shy


273

color-forwardkara burke illustrations http://www.karaburke.net/prints.php

274

http://www.karaburke.net/prints.php



275




276



color-forwardSystima Technology http://www.systima-technology.co.uk/

277

http://www.systima-technology.co.uk



278




279




280



flash page-building


281

サイトにアクセスしてください

ビジュアルの刺激で訴求するデザインcolor-forwardnew+

http://home.disney.go.com/http://home.disney.go.com/lite/

Disney.comflash page-building

XHTML & CSS

282

http://home.disney.go.com

http://home.disney.go.com

http://home.disney.go.com/lite/

http://home.disney.go.com/lite/

IR: rocket vs chameleon


283


ビジュアルの刺激で訴求するデザインcolor-forwardnew+

画像置換

284



大気圏外(ブラウザ表示領域外)へ飛ばす

new+

285



同化させる／隠す

new+

286

IR: rocket vs chameleonビジュアルの刺激で訴求するデザイン

color-forward

A

new+

背景色に同化させる

287


color-forward

IR: rocket vs chameleonA

new

288


color-forward



A

new

289


color-forward

B

new+

文字を小さくして背景色に同化させる

290


color-forward

IR: rocket vs chameleonB

new

291


color-forward

IR: rocket vs chameleonB

new

292


color-forward



B

new

293


color-forward

C

new+

装飾領域に同化させる

294


color-forward

IR: rocket vs chameleonC

new

295


color-forward

C



new

296

royal-standard

297

安全で馴染みのあるデザインroyal-standard

298



299

grid layoutbaseline-grid layout


300

grid layout

301

情報量の多いサイトで検証

royal-standard

new+

302

フジテレビ

303

フジテレビ

304

TBS

305

TBS

306

テレビ朝日

307

テレビ朝日

308

日本テレビ

309

日本テレビ

310

NHK

311

NHK

312

各サイトについて解説いたします

royal-standard

new+

313

NHK

フジテレビ

TBS

日本テレビ

テレビ朝日

314

フジテレビ

TBS

日本テレビ

テレビ朝日

NHK

315

royal-standardTunnel 7 http://www.tunnel7.com/

316

http://www.tunnel7.com


royal-standardTunnel 7 http://www.tunnel7.com/

317



white background theory


318

「白は安全」

royal-standard

new+

の意味

319

「白は安全」

royal-standard

new+

の意味カラーリングリスクの問題

320

royal-standardRikcat Industries http://www.rikcatindustries.com/

321

http://www.rikcatindustries.com


royal-standardRikcat Industries http://www.rikcatindustries.com/

322



royal-standardMark Boulton Design http://www.markboultondesign.com/

323

http://www.markboultondesign.com


royal-standardMark Boulton Design http://www.markboultondesign.com/

324




royal-standard

new+

325

wide-screen composition


326

& elastic layoutwide-screen composition

royal-standard

327

テレビは着々とワイドスクリーンへ移行

royal-standard

new+

328

今後、パソコンもワイドスクリーンへ移行する理由

royal-standard

new+

329

ワイドスクリーンで閲覧する

royal-standard

new+

Webデザインはどう変わる？

330

elastic layout

royal-standard

331

elastic layout

Text Zoom royal-standard

332

Internet Explorer 7

royal-standard

333

elastic layout

royal-standard

334

elastic layout

Page Zoom royal-standard

335

elastic layout

Text Zoom royal-standard

336

elastic layout

Page Zoom royal-standard

337

elastic layout

Page Zoom

Text Zoom

royal-standard

338

elastic layout

みずほ証券 http://www.mizuho-sc.com/ja/index.html

royal-standard

339



elastic layout

royal-standard

340

elastic layout

Text Zoom

royal-standard

341

elastic layout

[FIX-EL] fixed elastic layout

342

elastic layout343

elastic layout

Internet Explorer 7royal-standard

344

elastic layout

Page Zoomroyal-standard

345

elastic layout


D-Size+ PageZoomデフォルトサイズ

royal-standard

346

ページズームが推奨される理由

royal-standard

new+

347


royal-standard

new+

348

new+

スクリーンメディアのアクセシビリティ

情報の種類でみるとテキストズームは等しく情報を提供できない欠陥機能？

349

new+

スクリーンメディアのアクセシビリティ

ページズームについて考えてみよう

350

zoom Attribute | zoom Propertyhttp://msdn2.microsoft.com/en-us/library/ms531189.aspx

zoom

怖い話351



zoom Attribute | zoom Property

352


353


354


zoom

Web制作者がページの拡大率を制御

355


zoom

Web制作者がページの拡大率を制御閲覧者はページズーム機能で制御可能

356


zoom

Web制作者がページの拡大率を制御閲覧者はページズーム機能で制御可能アクセシブルなページコントロール

357


zoom

Internet Explorer 8, 9...?Operaのイメージレンダリングに近づく？

358

Web制作者がページの拡大率を制御閲覧者はページズーム機能で制御可能(最優先)アクセシブルなページコントロールの実現

CSSハックを排除したシンプルなページ作りへ

359


CSSハックを排除したシンプルなページ作りへHTMLは世界中の人が使う道具である

360


CSSハックを排除したシンプルなページ作りへHTMLは世界中の人が使う道具である(リッチなWebにアクセスできない国も多い)

361


CSSハックを排除したシンプルなページ作りへHTMLは世界中の人が使う道具である(リッチなWebにアクセスできない国も多い)

362

patchwork

363

マッシュアップで構成するデザインpatchwork

364



365



http://www.uniqlo.com/jp/UNIQLO

366

http://www.uniqlo.com/jp/

http://www.uniqlo.com/jp/


new+

patchwork

367

celebrity

368

対象を絞り高級感でアプローチするデザイン

celebrity

369

対象を絞り高級感でアプローチするデザイン

celebrity


370

Earth Mother http://www.earth-mother.com.au/

celebrity

371

http://www.earth-mother.com.au


Earth Mother http://www.earth-mother.com.au/

celebrity

372



hopking design http://www.hopkingdesign.com/

celebrity

373

http://www.hopkingdesign.com


hopking design http://www.hopkingdesign.com/

celebrity

374



対象を絞り高級感でアプローチするデザインcelebrity

passe-partoutパスパルトゥー

375

Belflora.com http://belflora.com/

celebrity

376

http://belflora.com

http://belflora.com

Belflora.com http://belflora.com/

celebrity

377

http://belflora.com

http://belflora.com

Dara's Garden http://www.darasgarden.com/

celebrity

378

http://www.darasgarden.com


Dara's Garden http://www.darasgarden.com/

celebrity

379




new+

celebrity

380

flood-color


フラッドカラー

381

scorereviews.com http://scorereviews.com/default.aspx

celebrity

382

http://scorereviews.com/default.aspx

http://scorereviews.com/default.aspx

scorereviews.com

celebrity

383

vosressources.com http://www.vosressources.com/

celebrity

384

http://www.vosressources.com


vosressources.com http://www.vosressources.com/

celebrity

385



EGOLOUNGE http://www.egolounge.de/

celebrity

386

http://www.egolounge.de



celebrity

387




celebrity

388




new+

celebrity

389

appropriation design


390

DaVinci Gourmet http://www.davincigourmet.com/

celebrity

391

http://www.davincigourmet.com


DaVinci Gourmet http://www.davincigourmet.com/

celebrity

392



Dalit Freedom Network http://www.dalitnetwork.org/

celebrity

393

http://www.dalitnetwork.org



celebrity

394




celebrity

395




new+

celebrity

396

まとめ

397









書籍・学校book / educational institution


new

398







CSSデザインの技法はから「個人」

creator's creatorクリエーターのお手本になるクリエーターの存在

RSS Feedを活用する

399

デザインの


良いデザインをたくさん見るを覚えて、「型」

400


技法を知る

401

技waza






技法を分類する

402

技法を分類する

CSSの技法を調べるディスメント・ラーニングのススメ

良いデザインをたくさん見るFeedを活用して情報を得る

403




adaptive design

New Trends of CSS

new

404




adaptive design

New Trends of CSS

new

405




adaptive design

New Trends of CSS

new

・柔軟性の高いサイト(閲覧環境を制限しない)・できるだけシンプル(情報構築の方針)・ノイズ(CSSハック)の混入は最小限

406

アダプティブデザインadaptive design

new

を知るには

世界のコミュニティにアクセスしよう

英語が苦手な人はネットの機械翻訳を利用してもよい

407

技waza


視覚表現の

世界の技を学び、己の技を磨く日々

408

ご清聴ありがとうございました

409

「型」視覚表現テクニック

実践！CSSデザインのでみる

Designer meets Designers SESSION 5

410