Transcript
Page 1: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills

Takashi Kikuchi2010. 03.06

サルでもできるウェブデザインMONKEY CAN DO DESIGN WORKS

2010年3月15日月曜日

Page 2: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills

菊池 崇

Web Directions East LLC. CEO

allWebクリエイター塾講師

2010年3月15日月曜日

Page 3: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills

HTML5 & CSS3

HTML5 doctor? 今夏発売!

書 籍

2010年3月15日月曜日

Page 4: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills

http://html5doctor.com/

2010年3月15日月曜日

Page 5: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills

海外のカンファレンスに参加自分の技術を研鑽すること

2010年3月15日月曜日

Page 6: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills

コーダー/マーケッター

2010年3月15日月曜日

Page 7: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills

CSS3border-radius

rgba/hsla

gradient(radial/liner)

2010年3月15日月曜日

Page 8: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills

コーダー/マーケッター

2010年3月15日月曜日

Page 9: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills

コーダー/マーケッター

デザインセンス+

2010年3月15日月曜日

Page 10: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills

0デザインセンス

2010年3月15日月曜日

Page 11: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills2010年3月15日月曜日

Page 12: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills

デザインセンスが”0”でウェブデザインは可能か

2010年3月15日月曜日

Page 13: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills

デザイン

2010年3月15日月曜日

Page 14: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills

デザイン

レイアウト

Grid System / Vertical Rythm

2010年3月15日月曜日

Page 15: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills

デザイン

カラーレイアウト

Grid System / Vertical Rythm

2010年3月15日月曜日

Page 16: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills2010年3月15日月曜日

Page 17: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills

ロジカルにやればできる

2010年3月15日月曜日

Page 18: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills

デザインツール

2010年3月15日月曜日

Page 19: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills2010年3月15日月曜日

Page 20: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills2010年3月15日月曜日

Page 21: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills2010年3月15日月曜日

Page 22: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills

(x)html + CSSコーディング

2010年3月15日月曜日

Page 23: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills

(x)html + CSS + browser

2010年3月15日月曜日

Page 24: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills

(x)html + CSS + browserコーディング+デザインツール

2010年3月15日月曜日

Page 25: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills2010年3月15日月曜日

Page 26: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills2010年3月15日月曜日

Page 27: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills

デザイン

2010年3月15日月曜日

Page 28: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills

デザイン

2010年3月15日月曜日

Page 29: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills

デザイン デザインカンプ

2010年3月15日月曜日

Page 30: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills

デザイン デザインカンプ

2010年3月15日月曜日

Page 31: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills

デザイン デザインカンプ 判断

2010年3月15日月曜日

Page 32: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills

デザイン デザインカンプ 判断

2010年3月15日月曜日

Page 33: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills

デザイン デザインカンプ 判断

2010年3月15日月曜日

Page 34: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills

デザイン デザインカンプ 判断

2010年3月15日月曜日

Page 35: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills

デザイン デザインカンプ 判断 コーディング

2010年3月15日月曜日

Page 36: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills

デザイン デザインカンプ 判断 コーディング

2010年3月15日月曜日

Page 37: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills

デザイン デザインカンプ 判断 コーディング

2010年3月15日月曜日

Page 38: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills

デザイン デザインカンプ 判断 コーディング

2010年3月15日月曜日

Page 39: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills

先 入 観preconceptions

2010年3月15日月曜日

Page 40: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills2010年3月15日月曜日

Page 41: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills2010年3月15日月曜日

Page 42: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills2010年3月15日月曜日

Page 43: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills

共 有s h a r e

2010年3月15日月曜日

Page 44: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills

Grid System

2010年3月15日月曜日

Page 45: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills

Josef

Muller-Brockmann

2010年3月15日月曜日

Page 46: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills

ページサイズを割り出すこと

コラムに割ること

デザインすること

- Grid System Raster systeme -Josef Muller-Brockmann

2010年3月15日月曜日

Page 47: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills

ページサイズを割り出すこと

2010年3月15日月曜日

Page 48: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills

960px

ページのサイズを割り出すこと

2010年3月15日月曜日

Page 49: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills

コラムに割ること

2010年3月15日月曜日

Page 50: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills

コラムに割ること

2010年3月15日月曜日

Page 51: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills

960/1 = 960

コラムに割ること

2010年3月15日月曜日

Page 52: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills

960/1 = 960

960/2 = 480

コラムに割ること

2010年3月15日月曜日

Page 53: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills

960/1 = 960

960/2 = 480

960/3 = 320

960/4 = 260

960/5 = 192

960/6 = 160

960/8 = 120

960/10 = 96

960/12 = 80

960/16 = 60

コラムに割ること

2010年3月15日月曜日

Page 54: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills

40px 20px

コラムに割ること

2010年3月15日月曜日

Page 55: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills

960gs

2010年3月15日月曜日

Page 56: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills2010年3月15日月曜日

Page 57: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills

40px20px

16

960-16-col.png

2010年3月15日月曜日

Page 58: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills

960-16-col.png

160px x 160pxバナー60px + 60px + 40px = 160px

2010年3月15日月曜日

Page 59: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills

html {

background : url(../grids/960-16-col.png)

repeat-y top center; }

2010年3月15日月曜日

Page 60: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills

Vertical Rythm

2010年3月15日月曜日

Page 61: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills

http://sushiandrobots.com/

Jina Bolton

2010年3月15日月曜日

Page 62: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills2010年3月15日月曜日

Page 63: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills

base gridベースグリッド

2010年3月15日月曜日

Page 64: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills2010年3月15日月曜日

Page 65: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills

x

2010年3月15日月曜日

Page 66: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills

x =

2010年3月15日月曜日

Page 67: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills

x =12px

font-size

2010年3月15日月曜日

Page 68: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills

x =12px

font-size

1.5

line-height

2010年3月15日月曜日

Page 69: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills

x =12px

font-size

1.5

line-height

18px

base-grid

2010年3月15日月曜日

Page 70: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills

The n

2010年3月15日月曜日

Page 71: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills

The n12px

2010年3月15日月曜日

Page 72: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills

The n12px18px

2010年3月15日月曜日

Page 73: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills

The n12px18px

18px

18px

2010年3月15日月曜日

Page 74: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills

html {

font-size : 87.5%; }16px x 87.5% = 14px

2010年3月15日月曜日

Page 75: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills2010年3月15日月曜日

Page 76: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills

14px

font-size

2010年3月15日月曜日

Page 77: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills

x14px

font-size

2010年3月15日月曜日

Page 78: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills

x14px

font-size

1.5

line-height

2010年3月15日月曜日

Page 79: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills

x =14px

font-size

1.5

line-height

2010年3月15日月曜日

Page 80: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills

x =14px

font-size

1.5

line-height

21px

base-grid

2010年3月15日月曜日

Page 81: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills

あいう

2010年3月15日月曜日

Page 82: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills

あいう14px

2010年3月15日月曜日

Page 83: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills

あいう14px21px

2010年3月15日月曜日

Page 84: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills

あいう14px21px

21px

21px

2010年3月15日月曜日

Page 85: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills

6pt: non pareil7pt: min ion8pt: brevier or small text9pt: bour geois or gal liard10pt: long primer or gara mond11pt: small pica or philo sophy12pt: pica14pt: eng lish or augustin18pt: great primer21pt: double small pica or double pica24pt: double pica or two-line pica36pt: double great primer or 2-line great primer

http://www.markboulton.co.uk/journal/comments/five-simple-steps-to-better-typography-part-4

2010年3月15日月曜日

Page 86: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills

h1 = 36px

h2 = 24px

h3 = 20px

h4, h5, h6 = 14px

見出しのフォントサイズ

2010年3月15日月曜日

Page 87: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills

あいう

2010年3月15日月曜日

Page 88: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills

あいう14px

2010年3月15日月曜日

Page 89: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills

あいう14px20px

2010年3月15日月曜日

Page 90: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills

あいう14px20px

20px

20px

2010年3月15日月曜日

Page 91: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills

20px

20px

20px

20px

20px

20px

html {

font-size : 87.5%}

p {

margin : 20px 0; }

2010年3月15日月曜日

Page 92: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills

20px

20px

20px

20px

html {

font-size : 87.5%}

p {

margin : 20px 0; }

2010年3月15日月曜日

Page 93: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills

margin-bottom のみで指定

2010年3月15日月曜日

Page 94: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills

20px

20px

20px

h1, h2, h3, h4, h5, h6 {margin-bottom : 20px; }

2010年3月15日月曜日

Page 95: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills2010年3月15日月曜日

Page 96: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills

20px

base-grid

2010年3月15日月曜日

Page 97: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills

/20px

base-grid

2010年3月15日月曜日

Page 98: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills

/20px

base-grid

14px

font-size

2010年3月15日月曜日

Page 99: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills

/ =20px

base-grid

14px

font-size

2010年3月15日月曜日

Page 100: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills

/ =20px

base-grid

14px

font-size

1.42857

line-height

2010年3月15日月曜日

Page 101: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills

あいう

2010年3月15日月曜日

Page 102: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills

あいう1em

2010年3月15日月曜日

Page 103: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills

あいう1em1.42857em

2010年3月15日月曜日

Page 104: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills

あいう1em1.42857em

1.42857em

1.42857em

2010年3月15日月曜日

Page 105: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills

Color

2010年3月15日月曜日

Page 106: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills

背景色

テキスト色(:link, :visited)テキスト色(:hover, :active)

キーカラー

テキスト

2010年3月15日月曜日

Page 107: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills

Adobe Kuler

2010年3月15日月曜日

Page 108: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills

① 自然の色

② カラースキーマ

③ 似ている色のウェブサイト

2010年3月15日月曜日

Page 111: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills

Thanks !

2010年3月15日月曜日

Page 112: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills

One more thing

2010年3月15日月曜日

Page 113: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills

CSS3

2010年3月15日月曜日

Page 114: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills2010年3月15日月曜日

Page 115: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills

2006/01 -

2010年3月15日月曜日

Page 116: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills

http://www.stuffandnonsense.co.uk/

Andy Clarke

2010年3月15日月曜日

Page 117: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills2010年3月15日月曜日

Page 118: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills2010年3月15日月曜日

Page 119: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills

一生そろいません

2010年3月15日月曜日

Page 120: サルでもできるウェブデザイン : SwapSkills 2010 Vol01

SwapSkills

より実践的なデモに進もう

2010年3月15日月曜日


Top Related