MONKEY CAN DO            サルでもできるウェブデザイン            DESIGN WORKS                2010. 03.06   Takashi Kikuchi  SwapSkills20...
菊池 崇                  allWebクリエイター塾講師                Web Directions East LLC. CEO  SwapSkills2010年3月15日月曜日
?                    書 籍                      HTML5 & CSS3                      HTML5 doctor                          今夏発売...
http://html5doctor.com/  SwapSkills2010年3月15日月曜日
海外のカンファレンスに参加          自分の技術を研鑽すること  SwapSkills2010年3月15日月曜日
コーダー/マーケッター  SwapSkills2010年3月15日月曜日
CSS3                   border-radius                     rgba/hsla                gradient(radial/liner)  SwapSkills2010年3...
コーダー/マーケッター  SwapSkills2010年3月15日月曜日
コーダー/マーケッター                +             デザインセンス  SwapSkills2010年3月15日月曜日
デザインセンス                      0  SwapSkills2010年3月15日月曜日
SwapSkills2010年3月15日月曜日
デザインセンスが”0”で           ウェブデザインは可能か  SwapSkills2010年3月15日月曜日
デザイン  SwapSkills2010年3月15日月曜日
デザイン                レイアウト   Grid System / Vertical Rythm  SwapSkills2010年3月15日月曜日
デザイン                レイアウト             カラー   Grid System / Vertical Rythm  SwapSkills2010年3月15日月曜日
SwapSkills2010年3月15日月曜日
ロジカルにやればできる  SwapSkills2010年3月15日月曜日
デザインツール  SwapSkills2010年3月15日月曜日
SwapSkills2010年3月15日月曜日
SwapSkills2010年3月15日月曜日
SwapSkills2010年3月15日月曜日
(x)html + CSS                 コーディング  SwapSkills2010年3月15日月曜日
(x)html + CSS + browser  SwapSkills2010年3月15日月曜日
(x)html + CSS + browser       コーディング+デザインツール  SwapSkills2010年3月15日月曜日
SwapSkills2010年3月15日月曜日
SwapSkills2010年3月15日月曜日
デザイン  SwapSkills2010年3月15日月曜日
デザイン  SwapSkills2010年3月15日月曜日
デザイン           デザインカンプ  SwapSkills2010年3月15日月曜日
デザイン           デザインカンプ  SwapSkills2010年3月15日月曜日
デザイン           デザインカンプ   判断  SwapSkills2010年3月15日月曜日
デザイン           デザインカンプ   判断  SwapSkills2010年3月15日月曜日
デザイン           デザインカンプ   判断  SwapSkills2010年3月15日月曜日
デザイン           デザインカンプ   判断  SwapSkills2010年3月15日月曜日
デザイン           デザインカンプ   判断   コーディング  SwapSkills2010年3月15日月曜日
デザイン           デザインカンプ   判断   コーディング  SwapSkills2010年3月15日月曜日
デザイン           デザインカンプ   判断   コーディング  SwapSkills2010年3月15日月曜日
デザイン           デザインカンプ   判断   コーディング  SwapSkills2010年3月15日月曜日
先入観                preconceptions  SwapSkills2010年3月15日月曜日
SwapSkills2010年3月15日月曜日
SwapSkills2010年3月15日月曜日
SwapSkills2010年3月15日月曜日
共有                s h a r e  SwapSkills2010年3月15日月曜日
Grid System  SwapSkills2010年3月15日月曜日
Josef                Muller-Brockmann  SwapSkills2010年3月15日月曜日
ページサイズを割り出すこと     コラムに割ること     デザインすること                - Grid System Raster systeme -                   Josef Muller-Brock...
ページサイズを                割り出 す こ と  SwapSkills2010年3月15日月曜日
ページのサイズを割り出すこと                960px  SwapSkills2010年3月15日月曜日
コラムに割ること  SwapSkills2010年3月15日月曜日
コラムに割ること  SwapSkills2010年3月15日月曜日
コラムに割ること                960/1 = 960  SwapSkills2010年3月15日月曜日
コラムに割ること                960/1 = 960                960/2 = 480  SwapSkills2010年3月15日月曜日
コラムに割ること                960/1 = 960   960/6 = 160                960/2 = 480   960/8 = 120                960/3 = 320   96...
コラムに割ること                  40px   20px  SwapSkills2010年3月15日月曜日
960gs  SwapSkills2010年3月15日月曜日
SwapSkills2010年3月15日月曜日
16                                 40px                                 20px                960-16-col.png  SwapSkills2010...
160px x 160pxバナー                60px + 60px + 40px = 160px                    960-16-col.png  SwapSkills2010年3月15日月曜日
html {       background : url(../grids/960-16-col.png)       repeat-y top center; }  SwapSkills2010年3月15日月曜日
Vertical Rythm  SwapSkills2010年3月15日月曜日
Jina Bolton                http://sushiandrobots.com/  SwapSkills2010年3月15日月曜日
SwapSkills2010年3月15日月曜日
base grid                ベ ース グ リ ッ ド  SwapSkills2010年3月15日月曜日
SwapSkills2010年3月15日月曜日
x  SwapSkills2010年3月15日月曜日
x   =  SwapSkills2010年3月15日月曜日
12px            x   =                font-size  SwapSkills2010年3月15日月曜日
12px            x   1.5       =                font-size   line-height  SwapSkills2010年3月15日月曜日
12px            x   1.5       =   18px                font-size   line-height       base-grid  SwapSkills2010年3月15日月曜日
The n  SwapSkills2010年3月15日月曜日
12px   The n  SwapSkills2010年3月15日月曜日
18px   12px   The n  SwapSkills2010年3月15日月曜日
18px                18px   12px   The n                18px  SwapSkills2010年3月15日月曜日
html {      16px x 87.5% = 14px                            font-size : 87.5%; }  SwapSkills2010年3月15日月曜日
SwapSkills2010年3月15日月曜日
14px                font-size  SwapSkills2010年3月15日月曜日
14px             x                font-size  SwapSkills2010年3月15日月曜日
14px             x   1.5                font-size   line-height  SwapSkills2010年3月15日月曜日
14px             x   1.5       =                font-size   line-height  SwapSkills2010年3月15日月曜日
14px             x   1.5       =   21px                font-size   line-height       base-grid  SwapSkills2010年3月15日月曜日
あいう  SwapSkills2010年3月15日月曜日
14px   あいう  SwapSkills2010年3月15日月曜日
21px   14px   あいう  SwapSkills2010年3月15日月曜日
21px                21px   14px   あいう                21px  SwapSkills2010年3月15日月曜日
6pt: non pareil           7pt: min ion           8pt: brevier or small text           9pt: bour geois or gal liard        ...
見出しのフォントサイズ                     h1 = 36px                     h2 = 24px                     h3 = 20px                  h4,...
あいう  SwapSkills2010年3月15日月曜日
14px   あいう  SwapSkills2010年3月15日月曜日
20px   14px   あいう  SwapSkills2010年3月15日月曜日
20px                20px   14px   あいう                20px  SwapSkills2010年3月15日月曜日
20px   html {                       font-size : 87.5%}                20px                20px   p{                       ...
20px   html {                       font-size : 87.5%}                20px                       p{                20px   ...
margin-bottom のみで指定  SwapSkills2010年3月15日月曜日
h1, h2, h3, h4, h5, h6 {                       margin-bottom : 20px; }                20px                20px            ...
SwapSkills2010年3月15日月曜日
20px       base-grid  SwapSkills2010年3月15日月曜日
20px           /       base-grid  SwapSkills2010年3月15日月曜日
20px / 14px       base-grid   font-size  SwapSkills2010年3月15日月曜日
20px / 14px                =       base-grid   font-size  SwapSkills2010年3月15日月曜日
20px / 14px = 1.42857       base-grid   font-size   line-height  SwapSkills2010年3月15日月曜日
あいう  SwapSkills2010年3月15日月曜日
1em   あいう  SwapSkills2010年3月15日月曜日
1.42857em   1em   あいう  SwapSkills2010年3月15日月曜日
1.42857em         1.42857em   1em   あいう         1.42857em  SwapSkills2010年3月15日月曜日
Color  SwapSkills2010年3月15日月曜日
キーカラー                        背景色                        テキスト                テキスト色(:link, :visited)                テキスト色(:h...
Adobe	 Kuler  SwapSkills2010年3月15日月曜日
① 自然の色        ② カラースキーマ        ③ 似ている色のウェブサイト  SwapSkills2010年3月15日月曜日
http://www.snook.ca/technical/                 colour_contrast/colour.html  SwapSkills2010年3月15日月曜日
Further Reading   •http://www.subtraction.com/pics/0703/grids_are_good.pdf   •http://www.markboulton.co.uk/journal/comment...
Thanks !  SwapSkills2010年3月15日月曜日
One more thing  SwapSkills2010年3月15日月曜日
CSS3  SwapSkills2010年3月15日月曜日
SwapSkills2010年3月15日月曜日
2006/01 -  SwapSkills2010年3月15日月曜日
Andy Clarke                http://www.stuffandnonsense.co.uk/  SwapSkills2010年3月15日月曜日
SwapSkills2010年3月15日月曜日
SwapSkills2010年3月15日月曜日
一生そろいません  SwapSkills2010年3月15日月曜日
より実践的な                デモに進もう  SwapSkills2010年3月15日月曜日
Andy Clarke                http://www.vimeo.com/8235596  SwapSkills2010年3月15日月曜日
Upcoming SlideShare
Loading in …5
×

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

2,012 views

Published on

SwapSkills 2010 Vol1にておこなった。サルでもできるウェブデザイン のスライド

Published in: Design, Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,012
On SlideShare
0
From Embeds
0
Number of Embeds
195
Actions
Shares
0
Downloads
19
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

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

  1. 1. MONKEY CAN DO サルでもできるウェブデザイン DESIGN WORKS 2010. 03.06 Takashi Kikuchi SwapSkills2010年3月15日月曜日
  2. 2. 菊池 崇 allWebクリエイター塾講師 Web Directions East LLC. CEO SwapSkills2010年3月15日月曜日
  3. 3. ? 書 籍 HTML5 & CSS3 HTML5 doctor 今夏発売! SwapSkills2010年3月15日月曜日
  4. 4. http://html5doctor.com/ SwapSkills2010年3月15日月曜日
  5. 5. 海外のカンファレンスに参加 自分の技術を研鑽すること SwapSkills2010年3月15日月曜日
  6. 6. コーダー/マーケッター SwapSkills2010年3月15日月曜日
  7. 7. CSS3 border-radius rgba/hsla gradient(radial/liner) SwapSkills2010年3月15日月曜日
  8. 8. コーダー/マーケッター SwapSkills2010年3月15日月曜日
  9. 9. コーダー/マーケッター + デザインセンス SwapSkills2010年3月15日月曜日
  10. 10. デザインセンス 0 SwapSkills2010年3月15日月曜日
  11. 11. SwapSkills2010年3月15日月曜日
  12. 12. デザインセンスが”0”で ウェブデザインは可能か SwapSkills2010年3月15日月曜日
  13. 13. デザイン SwapSkills2010年3月15日月曜日
  14. 14. デザイン レイアウト Grid System / Vertical Rythm SwapSkills2010年3月15日月曜日
  15. 15. デザイン レイアウト カラー Grid System / Vertical Rythm SwapSkills2010年3月15日月曜日
  16. 16. SwapSkills2010年3月15日月曜日
  17. 17. ロジカルにやればできる SwapSkills2010年3月15日月曜日
  18. 18. デザインツール SwapSkills2010年3月15日月曜日
  19. 19. SwapSkills2010年3月15日月曜日
  20. 20. SwapSkills2010年3月15日月曜日
  21. 21. SwapSkills2010年3月15日月曜日
  22. 22. (x)html + CSS コーディング SwapSkills2010年3月15日月曜日
  23. 23. (x)html + CSS + browser SwapSkills2010年3月15日月曜日
  24. 24. (x)html + CSS + browser コーディング+デザインツール SwapSkills2010年3月15日月曜日
  25. 25. SwapSkills2010年3月15日月曜日
  26. 26. SwapSkills2010年3月15日月曜日
  27. 27. デザイン SwapSkills2010年3月15日月曜日
  28. 28. デザイン SwapSkills2010年3月15日月曜日
  29. 29. デザイン デザインカンプ SwapSkills2010年3月15日月曜日
  30. 30. デザイン デザインカンプ SwapSkills2010年3月15日月曜日
  31. 31. デザイン デザインカンプ 判断 SwapSkills2010年3月15日月曜日
  32. 32. デザイン デザインカンプ 判断 SwapSkills2010年3月15日月曜日
  33. 33. デザイン デザインカンプ 判断 SwapSkills2010年3月15日月曜日
  34. 34. デザイン デザインカンプ 判断 SwapSkills2010年3月15日月曜日
  35. 35. デザイン デザインカンプ 判断 コーディング SwapSkills2010年3月15日月曜日
  36. 36. デザイン デザインカンプ 判断 コーディング SwapSkills2010年3月15日月曜日
  37. 37. デザイン デザインカンプ 判断 コーディング SwapSkills2010年3月15日月曜日
  38. 38. デザイン デザインカンプ 判断 コーディング SwapSkills2010年3月15日月曜日
  39. 39. 先入観 preconceptions SwapSkills2010年3月15日月曜日
  40. 40. SwapSkills2010年3月15日月曜日
  41. 41. SwapSkills2010年3月15日月曜日
  42. 42. SwapSkills2010年3月15日月曜日
  43. 43. 共有 s h a r e SwapSkills2010年3月15日月曜日
  44. 44. Grid System SwapSkills2010年3月15日月曜日
  45. 45. Josef Muller-Brockmann SwapSkills2010年3月15日月曜日
  46. 46. ページサイズを割り出すこと コラムに割ること デザインすること - Grid System Raster systeme - Josef Muller-Brockmann SwapSkills2010年3月15日月曜日
  47. 47. ページサイズを 割り出 す こ と SwapSkills2010年3月15日月曜日
  48. 48. ページのサイズを割り出すこと 960px SwapSkills2010年3月15日月曜日
  49. 49. コラムに割ること SwapSkills2010年3月15日月曜日
  50. 50. コラムに割ること SwapSkills2010年3月15日月曜日
  51. 51. コラムに割ること 960/1 = 960 SwapSkills2010年3月15日月曜日
  52. 52. コラムに割ること 960/1 = 960 960/2 = 480 SwapSkills2010年3月15日月曜日
  53. 53. コラムに割ること 960/1 = 960 960/6 = 160 960/2 = 480 960/8 = 120 960/3 = 320 960/10 = 96 960/4 = 260 960/12 = 80 960/5 = 192 960/16 = 60 SwapSkills2010年3月15日月曜日
  54. 54. コラムに割ること 40px 20px SwapSkills2010年3月15日月曜日
  55. 55. 960gs SwapSkills2010年3月15日月曜日
  56. 56. SwapSkills2010年3月15日月曜日
  57. 57. 16 40px 20px 960-16-col.png SwapSkills2010年3月15日月曜日
  58. 58. 160px x 160pxバナー 60px + 60px + 40px = 160px 960-16-col.png SwapSkills2010年3月15日月曜日
  59. 59. html { background : url(../grids/960-16-col.png) repeat-y top center; } SwapSkills2010年3月15日月曜日
  60. 60. Vertical Rythm SwapSkills2010年3月15日月曜日
  61. 61. Jina Bolton http://sushiandrobots.com/ SwapSkills2010年3月15日月曜日
  62. 62. SwapSkills2010年3月15日月曜日
  63. 63. base grid ベ ース グ リ ッ ド SwapSkills2010年3月15日月曜日
  64. 64. SwapSkills2010年3月15日月曜日
  65. 65. x SwapSkills2010年3月15日月曜日
  66. 66. x = SwapSkills2010年3月15日月曜日
  67. 67. 12px x = font-size SwapSkills2010年3月15日月曜日
  68. 68. 12px x 1.5 = font-size line-height SwapSkills2010年3月15日月曜日
  69. 69. 12px x 1.5 = 18px font-size line-height base-grid SwapSkills2010年3月15日月曜日
  70. 70. The n SwapSkills2010年3月15日月曜日
  71. 71. 12px The n SwapSkills2010年3月15日月曜日
  72. 72. 18px 12px The n SwapSkills2010年3月15日月曜日
  73. 73. 18px 18px 12px The n 18px SwapSkills2010年3月15日月曜日
  74. 74. html { 16px x 87.5% = 14px font-size : 87.5%; } SwapSkills2010年3月15日月曜日
  75. 75. SwapSkills2010年3月15日月曜日
  76. 76. 14px font-size SwapSkills2010年3月15日月曜日
  77. 77. 14px x font-size SwapSkills2010年3月15日月曜日
  78. 78. 14px x 1.5 font-size line-height SwapSkills2010年3月15日月曜日
  79. 79. 14px x 1.5 = font-size line-height SwapSkills2010年3月15日月曜日
  80. 80. 14px x 1.5 = 21px font-size line-height base-grid SwapSkills2010年3月15日月曜日
  81. 81. あいう SwapSkills2010年3月15日月曜日
  82. 82. 14px あいう SwapSkills2010年3月15日月曜日
  83. 83. 21px 14px あいう SwapSkills2010年3月15日月曜日
  84. 84. 21px 21px 14px あいう 21px SwapSkills2010年3月15日月曜日
  85. 85. 6pt: non pareil 7pt: min ion 8pt: brevier or small text 9pt: bour geois or gal liard 10pt: long primer or gara mond 11pt: small pica or philo sophy 12pt: pica 14pt: eng lish or augustin 18pt: great primer 21pt: double small pica or double pica 24pt: double pica or two-line pica 36pt: double great primer or 2-line great primer http://www.markboulton.co.uk/journal/comments/five-simple-steps-to-better-typography-part-4 SwapSkills2010年3月15日月曜日
  86. 86. 見出しのフォントサイズ h1 = 36px h2 = 24px h3 = 20px h4, h5, h6 = 14px SwapSkills2010年3月15日月曜日
  87. 87. あいう SwapSkills2010年3月15日月曜日
  88. 88. 14px あいう SwapSkills2010年3月15日月曜日
  89. 89. 20px 14px あいう SwapSkills2010年3月15日月曜日
  90. 90. 20px 20px 14px あいう 20px SwapSkills2010年3月15日月曜日
  91. 91. 20px html { font-size : 87.5%} 20px 20px p{ margin : 20px 0; } 20px 20px 20px SwapSkills2010年3月15日月曜日
  92. 92. 20px html { font-size : 87.5%} 20px p{ 20px margin : 20px 0; } 20px SwapSkills2010年3月15日月曜日
  93. 93. margin-bottom のみで指定 SwapSkills2010年3月15日月曜日
  94. 94. h1, h2, h3, h4, h5, h6 { margin-bottom : 20px; } 20px 20px 20px SwapSkills2010年3月15日月曜日
  95. 95. SwapSkills2010年3月15日月曜日
  96. 96. 20px base-grid SwapSkills2010年3月15日月曜日
  97. 97. 20px / base-grid SwapSkills2010年3月15日月曜日
  98. 98. 20px / 14px base-grid font-size SwapSkills2010年3月15日月曜日
  99. 99. 20px / 14px = base-grid font-size SwapSkills2010年3月15日月曜日
  100. 100. 20px / 14px = 1.42857 base-grid font-size line-height SwapSkills2010年3月15日月曜日
  101. 101. あいう SwapSkills2010年3月15日月曜日
  102. 102. 1em あいう SwapSkills2010年3月15日月曜日
  103. 103. 1.42857em 1em あいう SwapSkills2010年3月15日月曜日
  104. 104. 1.42857em 1.42857em 1em あいう 1.42857em SwapSkills2010年3月15日月曜日
  105. 105. Color SwapSkills2010年3月15日月曜日
  106. 106. キーカラー 背景色 テキスト テキスト色(:link, :visited) テキスト色(:hover, :active) SwapSkills2010年3月15日月曜日
  107. 107. Adobe Kuler SwapSkills2010年3月15日月曜日
  108. 108. ① 自然の色 ② カラースキーマ ③ 似ている色のウェブサイト SwapSkills2010年3月15日月曜日
  109. 109. http://www.snook.ca/technical/ colour_contrast/colour.html SwapSkills2010年3月15日月曜日
  110. 110. Further Reading •http://www.subtraction.com/pics/0703/grids_are_good.pdf •http://www.markboulton.co.uk/journal/comments/five-simple-steps-to- better-typography •http://thinkit.jp/article/807/1/ 自分の記事 image •http://www.autismhangout.com/userfiles/image/monkey.jpg SwapSkills2010年3月15日月曜日
  111. 111. Thanks ! SwapSkills2010年3月15日月曜日
  112. 112. One more thing SwapSkills2010年3月15日月曜日
  113. 113. CSS3 SwapSkills2010年3月15日月曜日
  114. 114. SwapSkills2010年3月15日月曜日
  115. 115. 2006/01 - SwapSkills2010年3月15日月曜日
  116. 116. Andy Clarke http://www.stuffandnonsense.co.uk/ SwapSkills2010年3月15日月曜日
  117. 117. SwapSkills2010年3月15日月曜日
  118. 118. SwapSkills2010年3月15日月曜日
  119. 119. 一生そろいません SwapSkills2010年3月15日月曜日
  120. 120. より実践的な デモに進もう SwapSkills2010年3月15日月曜日
  121. 121. Andy Clarke http://www.vimeo.com/8235596 SwapSkills2010年3月15日月曜日

×