サルでもできるWebデザイン:SwapSkills

190,210 views
201,561 views

Published on

SwapSkills 2010 Vol01 でおこなったプレゼンテーションのスライド

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

No Downloads
Views
Total views
190,210
On SlideShare
0
From Embeds
0
Number of Embeds
177,241
Actions
Shares
0
Downloads
0
Comments
0
Likes
51
Embeds 0
No embeds

No notes for slide

サルでもできるWebデザイン:SwapSkills

  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日月曜日

×