未来のWeb制作現場で通用するクリエイターとなるために、いま刷新すべきセオリー2013.05.09 こもりまさあきGroundwork!
自己紹介1972年生まれのフリーランス。90年代前半から都内のDTP系デザイン会社にてアルバイトをはじめ、大学卒業後そのまま正社員に。入出力業務、デザイン業務、ネットワーク関連業務に並行して従事後、2001年会社を退職しフリーランスの道へ。業務...
今日お話しすること•時代の変化の波を感じとろう•時代に即して柔軟に対応する•日々進化する制作ツールや手法
時代の変化を感じ取れFeel the changes
時代が変わり始めている
“More people are logging into Facebookdaily on mobile than on desktopFacebooks Daily Mobile Users Exceed Daily Desktop Use...
スマートデバイス利用者が急増
“7,000 different device types are used to accessFacebook each day.VP Mike Schroepfer: 7,000 Different Types Of Mobile Devi...
次から次に出てくるデバイスに個別最適化できる?
1920px1280px800px768px320px1024px940px480px 540px
現代は、複数のデバイスをシーケンシャルに使う時代
PC/スマートデバイスで内容に相違があったら困ることも
閲覧者の利用状況にあわせた柔軟な配信ができる方が良い
HTML5の登場によるWebの進化
W3C HTML5 Logohttp://www.w3.org/html/logo/
W3C HTML5 Logohttp://www.w3.org/html/logo/
Webサイトは、いよいよ次の一歩が踏み出せるように
「静的」なものから「動的」なものへ
位置情報の取得、オフラインアクセスなど、夢は拡がる
世界は「リーン・…」に象徴されるスピード感で動く
完璧なモノを作ってからのリリースでは遅すぎる
そして、急速なクラウドプラットフォームの普及
クラウドの活用は、Web制作・運用の仕方さえも変える
この数年で大きな変化が起きていることを認識しよう
時代に即して柔軟に対応しようTo respond flexibly
変化をとらえて柔軟に対応する
これまでの制作ワークフローは、今の時代にあってるか?
©Brad Frosthttp://bradfrostweb.com/
©Brad Frosthttp://bradfrostweb.com/
©Brad Frosthttp://bradfrostweb.com/
いつまで「IE6が…」と言ってるつもりでしょう?
消えゆくものにいつまでコストをかける気?
もはや固定の画面サイズでは考えにくい時代
さらに「1px」という概念ですらも怪しい
1px 1px ?StandardRetina
Retinaでキレイに表示するには、倍のサイズが必要
Photoshopでカンプを作って、HTML/CSSで再構成する?
無駄
“Photoshop is repeating yourself. Ok, so you’ve spent 3days on a mockup in Photoshop. Now what? Now I haveto make it all o...
時間は上手に使わないといけない
世の中「DRY」が合言葉、Photoshopを使えば「RY」Dont Repeat Yourself Repeat Yourself
固定サイズ、ピクセルパーフェクトという呪縛からの解放
紙の置き換え的発想は、Web制作にあってないのだから
Google Glasshttp://www.google.com/glass/start/what-it-does/
こうなると、CSSの実装テクニックを追いかける意味もない
この先、情報がどういう形になっていくか、を視野に
いかに効率よく、コンテンツを閲覧者に届けるか
そのために僕たちは今何をするべきなのか
何度も繰り返しの作業を減らすことが大事になる
解決方法のひとつが、Style Tilesであり早期のモックアップ
Style Tileshttp://styletil.es/
Style Tileshttp://styletil.es/
ムードボードとモックアップの中間で全体のテイスト確認
既存のフローとあわないのであれば、もう少し柔軟に対応
“We’ve found that the best way forward is to pull allmembers of a team together to design, build, test andthen evaluate in...
完全な分業ではなく、お互いを理解し協力する
そうしないと、複雑化しすぎて終わるものも終わらない
時代にあわないワークフローなら「リファクタリング」
refactoringプログラムの外部から見た動作を変えずに、将来の仕様変更に柔軟に対応できるよう、ソースコードの内部構造を整理しなおすこと【リファクタリング】
視線の先は、目の前でなくこの次の時代へ
ツールも手法も日々進化するものTechniques evolve
変わりゆくものの中で止まらない
Web制作のツールは、日進月歩で便利になっている
自分で変えようとしなければ、いつまでも同じまま
3日かかった作業が3時間で終われば、別の作業に充てられる
オールインワンから「必要なものを組み合わせる」時代へ
先進的な開発ツールは、いつもコマンドラインから
node.jshttp://nodejs.org/
最近は、その多くがNode.js(npm)やRuby(gem)に
もはや世の中の制作フローは大きく様変わりしている
複雑化するCSSの記述は、CSSプリプロセッサを使う
LESShttp://lesscss.org/
Sasshttp://sass-lang.com/
Stylushttp://learnboost.github.io/stylus/
同じようなことを極力書かないで済むよう
変数や数式を使って、複雑化するCSSを効率よく管理する
CSSもモジュール単位で再利用可能な設計をしよう
<a class="btn btn-primary btn-large">Learn more </a>ボタンの基本スタイルボタン青くしてボタン大きくして
Scalable and Modular Architecture for CSShttp://smacss.com/
制作時、公開後、いずれかのタイミングでStyle Guideを
Pearshttp://pea.rs/
Style Guideがあれば、誰が更新しても結果は同じ
KSShttp://warpspire.com/kss/styleguides/
StyleDoccohttp://jacobrask.github.io/styledocco/
Kaleihttp://kaleistyleguide.com/
最初の設計とドキュメンテーションが大事
世の中、猫も杓子もCMS。その制作案件に必要か?
WordPressって流行ってるんでしょ?ではない
場合によっては、Static Site Generatorの方が効率が良い
Jekyllhttp://jekyllrb.com/
DocPadhttp://docpad.org/
rootshttp://roots.cx/
Servehttp://get-serve.com/
静的なコンテンツ制作をもっと簡単にする
<a class="brand" href="#">{{{site-title}}}</a><div class="nav-collapse collapse"><ul class="nav">{{#navbar}}<li><a href="{...
同じようなHTMLは極力書かない(DRY)
コンテンツは、MarkdownやJSONで書いて自動生成
HTMLテンプレートエンジンの仕組みを理解する
Hamlhttp://haml.info/
Jadehttp://jade-lang.com/
Handlebars.jshttp://handlebarsjs.com/
HTMLですら、変数を定義して自動的に生成させる
Webアプリへの進化によって注目されるJavaScript
AngularJShttp://angularjs.org/
Backbone.jshttp://backbonejs.org/
Knockouthttp://knockoutjs.com/
これらは、JavaScriptの「MV * * フレームワーク」
Webアプリをより簡単に作るためのフレームワーク
フレームワークを理解して、手間のかかる作業時間を短縮
Bootstraphttp://twitter.github.io/bootstrap/
Foundation 4http://foundation.zurb.com/
モックアップからそのまま本番のデザインを実装
ここでもHTMLテンプレートやプリプロセッサが活躍
Delicioushttps://delicious.com/
Deliciousは、Backbone.js + Bootstrap
Pitchforkhttp://pitchfork.com/
Pitchforkは、Backbone.js + WordPress
必要な技術を適宜組み合わせて、最良の結果を得る
そんな制作に必要なツールは、パッケージで管理する時代
Bowerhttp://bower.io/
自動化できるタスクは、コンピュータに任せてしまう
Grunthttp://gruntjs.com/
サイト制作の箱作りの段階から、自動化してしまう波が
Yeomanhttp://yeoman.io/
コマンドを実行するだけで必要なものが全部揃う
Mixturehttp://mixture.io/
ついにGUIのツールが発表になったものの…
進化のスピードはおさまることを知らない
ディスプレイの高精細化にも戸惑わないように
CSS3、Web Fonts、SVG。未来を見越した素材管理
Elusive-Icons Webfonthttp://shoestrap.org/downloads/elusive-icons-webfont/
Sketchhttp://www.bohemiancoding.com/sketch/
バージョン管理システムの導入で制作フローも変わる
デザイナーもGitを使えば、エンジニアとの協業もスムーズ
どれが最新?先祖返り?そんなトラブルともさようなら
仕事を進めるにあたって、距離が関係なくなっていく
GitHubhttps://github.com/
Webサイトのコンテンツ運用・管理にクラウドを活用
AWS S3 Hostinghttp://www.awsmicrosite.jp/s3-hosting/
10円ホスティングだって可能な時代になっている
WordPress AMIhttp://ja.megumi-cloud.com/
WordPressサイトの立ち上げ。必要な時間は10分未満
クラウド×PaaSの活用
Herokuhttps://www.heroku.com/
Engine Yardhttps://www.engineyard.com/
何か始めるにあたって、インフラのことすら気にしない
どんどん便利になっている世の中
余計な時間をかけないこと
PLTTShttp://pltts.me/
“From Pencil to finished Product in 8 hoursFrom Pencil to finished Product in 8 hourshttp://vslck.im/articles/pencil-to-pr...
自分の中に知識と技術さえあればできる
Webが変化すれば、職種・職域ですらあいまいに
未来でも通じるクリエイターになるには
根付いている業界の「当たり前」を疑ってかかれ
次の時代を生き残るために、自分自身をシフトする
自分を枠にはめすぎない方が、変化に対応しやすくなる
そして、定期的な情報のアップデートをしよう
知ってるか知らないかは、非常に大きな差を生むもの
「1年前に知ってれば…」、後悔先に立たず
自分の強みを作るなら、誰よりも早く取りかかる
誰も変えてはくれません。自分が変わらなければ
最後に。日本だけ見てても状況はわからないでしょう
そして、次世代のWeb制作の流れに乗りましょうHacker News- https://news.ycombinator.com/Designer News- https://news.layervault.com/Hey, designer!...
本日のまとめ•時代の変化の波を感じて、柔軟に対応しよう•これまでの概念を疑ってみることも大事•常に変化してるので、定期的に情報をアップデート
本日はありがとうございました
groundwork-pasona-tech
groundwork-pasona-tech
groundwork-pasona-tech
groundwork-pasona-tech
groundwork-pasona-tech
Upcoming SlideShare
Loading in …5
×

groundwork-pasona-tech

14,608 views

Published on

パソナテック<SKILL BASECAMP 2013>
「Groundwork ! 未来のWeb制作現場で通用するクリエイターとなるために、いま刷新すべきセオリー」資料

※こちらのスライドの内容と重複しますが、ロクナナさんの10周年記念のビデオで実際の操作画面とかがご覧頂けます。

ロクナナ10周年記念サイト
https://67.org/ws10th/

こもりまさあきのWeb制作環境 [67WS10周年記念]
http://www.youtube.com/watch?v=gKeAJJhX2Og

Published in: Education
5 Comments
108 Likes
Statistics
Notes
No Downloads
Views
Total views
14,608
On SlideShare
0
From Embeds
0
Number of Embeds
2,285
Actions
Shares
0
Downloads
0
Comments
5
Likes
108
Embeds 0
No embeds

No notes for slide

groundwork-pasona-tech

  1. 1. 未来のWeb制作現場で通用するクリエイターとなるために、いま刷新すべきセオリー2013.05.09 こもりまさあきGroundwork!
  2. 2. 自己紹介1972年生まれのフリーランス。90年代前半から都内のDTP系デザイン会社にてアルバイトをはじめ、大学卒業後そのまま正社員に。入出力業務、デザイン業務、ネットワーク関連業務に並行して従事後、2001年会社を退職しフリーランスの道へ。業務内容や立ち位置が異なるので、職域的な肩書きはなし近著に『基礎から覚える、深く理解できる。 Webデザインの新しい教科書』『レスポンシブ・ウェブデザイン標準ガイド』、などTwitter:@cipher/@proteanbmInstagram:@cipherこもりまさあき
  3. 3. 今日お話しすること•時代の変化の波を感じとろう•時代に即して柔軟に対応する•日々進化する制作ツールや手法
  4. 4. 時代の変化を感じ取れFeel the changes
  5. 5. 時代が変わり始めている
  6. 6. “More people are logging into Facebookdaily on mobile than on desktopFacebooks Daily Mobile Users Exceed Daily Desktop Users For The First Timehttp://www.fastcompany.com/3005269/facebooks-daily-mobile-users-exceed-daily-desktop-users-first-time
  7. 7. スマートデバイス利用者が急増
  8. 8. “7,000 different device types are used to accessFacebook each day.VP Mike Schroepfer: 7,000 Different Types Of Mobile Devices Access Facebook Every Dayhttp://techcrunch.com/2012/08/03/vp-mike-schroepfer-7000-different-mobile-devices-access-facebook-every-day/
  9. 9. 次から次に出てくるデバイスに個別最適化できる?
  10. 10. 1920px1280px800px768px320px1024px940px480px 540px
  11. 11. 現代は、複数のデバイスをシーケンシャルに使う時代
  12. 12. PC/スマートデバイスで内容に相違があったら困ることも
  13. 13. 閲覧者の利用状況にあわせた柔軟な配信ができる方が良い
  14. 14. HTML5の登場によるWebの進化
  15. 15. W3C HTML5 Logohttp://www.w3.org/html/logo/
  16. 16. W3C HTML5 Logohttp://www.w3.org/html/logo/
  17. 17. Webサイトは、いよいよ次の一歩が踏み出せるように
  18. 18. 「静的」なものから「動的」なものへ
  19. 19. 位置情報の取得、オフラインアクセスなど、夢は拡がる
  20. 20. 世界は「リーン・…」に象徴されるスピード感で動く
  21. 21. 完璧なモノを作ってからのリリースでは遅すぎる
  22. 22. そして、急速なクラウドプラットフォームの普及
  23. 23. クラウドの活用は、Web制作・運用の仕方さえも変える
  24. 24. この数年で大きな変化が起きていることを認識しよう
  25. 25. 時代に即して柔軟に対応しようTo respond flexibly
  26. 26. 変化をとらえて柔軟に対応する
  27. 27. これまでの制作ワークフローは、今の時代にあってるか?
  28. 28. ©Brad Frosthttp://bradfrostweb.com/
  29. 29. ©Brad Frosthttp://bradfrostweb.com/
  30. 30. ©Brad Frosthttp://bradfrostweb.com/
  31. 31. いつまで「IE6が…」と言ってるつもりでしょう?
  32. 32. 消えゆくものにいつまでコストをかける気?
  33. 33. もはや固定の画面サイズでは考えにくい時代
  34. 34. さらに「1px」という概念ですらも怪しい
  35. 35. 1px 1px ?StandardRetina
  36. 36. Retinaでキレイに表示するには、倍のサイズが必要
  37. 37. Photoshopでカンプを作って、HTML/CSSで再構成する?
  38. 38. 無駄
  39. 39. “Photoshop is repeating yourself. Ok, so you’ve spent 3days on a mockup in Photoshop. Now what? Now I haveto make it all over again in HTML/CSS. Wasted time.Just build it in HTML/CSS and spend that extra timeiterating, not rebuilding. If you’re not fast enough inHTML/CSS, then spend the time learning how to createin HTML/CSS faster. It’s time well spent.Why we skip Photoshop by Jason Fried of 37signalshttp://37signals.com/svn/posts/1061-why-we-skip-photoshop
  40. 40. 時間は上手に使わないといけない
  41. 41. 世の中「DRY」が合言葉、Photoshopを使えば「RY」Dont Repeat Yourself Repeat Yourself
  42. 42. 固定サイズ、ピクセルパーフェクトという呪縛からの解放
  43. 43. 紙の置き換え的発想は、Web制作にあってないのだから
  44. 44. Google Glasshttp://www.google.com/glass/start/what-it-does/
  45. 45. こうなると、CSSの実装テクニックを追いかける意味もない
  46. 46. この先、情報がどういう形になっていくか、を視野に
  47. 47. いかに効率よく、コンテンツを閲覧者に届けるか
  48. 48. そのために僕たちは今何をするべきなのか
  49. 49. 何度も繰り返しの作業を減らすことが大事になる
  50. 50. 解決方法のひとつが、Style Tilesであり早期のモックアップ
  51. 51. Style Tileshttp://styletil.es/
  52. 52. Style Tileshttp://styletil.es/
  53. 53. ムードボードとモックアップの中間で全体のテイスト確認
  54. 54. 既存のフローとあわないのであれば、もう少し柔軟に対応
  55. 55. “We’ve found that the best way forward is to pull allmembers of a team together to design, build, test andthen evaluate in multiple quick rounds.Content Choreographyhttp://trentwalton.com/2011/07/14/content-choreography/
  56. 56. 完全な分業ではなく、お互いを理解し協力する
  57. 57. そうしないと、複雑化しすぎて終わるものも終わらない
  58. 58. 時代にあわないワークフローなら「リファクタリング」
  59. 59. refactoringプログラムの外部から見た動作を変えずに、将来の仕様変更に柔軟に対応できるよう、ソースコードの内部構造を整理しなおすこと【リファクタリング】
  60. 60. 視線の先は、目の前でなくこの次の時代へ
  61. 61. ツールも手法も日々進化するものTechniques evolve
  62. 62. 変わりゆくものの中で止まらない
  63. 63. Web制作のツールは、日進月歩で便利になっている
  64. 64. 自分で変えようとしなければ、いつまでも同じまま
  65. 65. 3日かかった作業が3時間で終われば、別の作業に充てられる
  66. 66. オールインワンから「必要なものを組み合わせる」時代へ
  67. 67. 先進的な開発ツールは、いつもコマンドラインから
  68. 68. node.jshttp://nodejs.org/
  69. 69. 最近は、その多くがNode.js(npm)やRuby(gem)に
  70. 70. もはや世の中の制作フローは大きく様変わりしている
  71. 71. 複雑化するCSSの記述は、CSSプリプロセッサを使う
  72. 72. LESShttp://lesscss.org/
  73. 73. Sasshttp://sass-lang.com/
  74. 74. Stylushttp://learnboost.github.io/stylus/
  75. 75. 同じようなことを極力書かないで済むよう
  76. 76. 変数や数式を使って、複雑化するCSSを効率よく管理する
  77. 77. CSSもモジュール単位で再利用可能な設計をしよう
  78. 78. <a class="btn btn-primary btn-large">Learn more </a>ボタンの基本スタイルボタン青くしてボタン大きくして
  79. 79. Scalable and Modular Architecture for CSShttp://smacss.com/
  80. 80. 制作時、公開後、いずれかのタイミングでStyle Guideを
  81. 81. Pearshttp://pea.rs/
  82. 82. Style Guideがあれば、誰が更新しても結果は同じ
  83. 83. KSShttp://warpspire.com/kss/styleguides/
  84. 84. StyleDoccohttp://jacobrask.github.io/styledocco/
  85. 85. Kaleihttp://kaleistyleguide.com/
  86. 86. 最初の設計とドキュメンテーションが大事
  87. 87. 世の中、猫も杓子もCMS。その制作案件に必要か?
  88. 88. WordPressって流行ってるんでしょ?ではない
  89. 89. 場合によっては、Static Site Generatorの方が効率が良い
  90. 90. Jekyllhttp://jekyllrb.com/
  91. 91. DocPadhttp://docpad.org/
  92. 92. rootshttp://roots.cx/
  93. 93. Servehttp://get-serve.com/
  94. 94. 静的なコンテンツ制作をもっと簡単にする
  95. 95. <a class="brand" href="#">{{{site-title}}}</a><div class="nav-collapse collapse"><ul class="nav">{{#navbar}}<li><a href="{{{href}}}">{{label}}</a>{{/navbar}}</ul>{"site-title": "Pasona Tech | Groundwork","navbar": [{"label": "Home", "href": "./index.html"},{"label": "About", "href": "./about.html"}]}HTMLJSON
  96. 96. 同じようなHTMLは極力書かない(DRY)
  97. 97. コンテンツは、MarkdownやJSONで書いて自動生成
  98. 98. HTMLテンプレートエンジンの仕組みを理解する
  99. 99. Hamlhttp://haml.info/
  100. 100. Jadehttp://jade-lang.com/
  101. 101. Handlebars.jshttp://handlebarsjs.com/
  102. 102. HTMLですら、変数を定義して自動的に生成させる
  103. 103. Webアプリへの進化によって注目されるJavaScript
  104. 104. AngularJShttp://angularjs.org/
  105. 105. Backbone.jshttp://backbonejs.org/
  106. 106. Knockouthttp://knockoutjs.com/
  107. 107. これらは、JavaScriptの「MV * * フレームワーク」
  108. 108. Webアプリをより簡単に作るためのフレームワーク
  109. 109. フレームワークを理解して、手間のかかる作業時間を短縮
  110. 110. Bootstraphttp://twitter.github.io/bootstrap/
  111. 111. Foundation 4http://foundation.zurb.com/
  112. 112. モックアップからそのまま本番のデザインを実装
  113. 113. ここでもHTMLテンプレートやプリプロセッサが活躍
  114. 114. Delicioushttps://delicious.com/
  115. 115. Deliciousは、Backbone.js + Bootstrap
  116. 116. Pitchforkhttp://pitchfork.com/
  117. 117. Pitchforkは、Backbone.js + WordPress
  118. 118. 必要な技術を適宜組み合わせて、最良の結果を得る
  119. 119. そんな制作に必要なツールは、パッケージで管理する時代
  120. 120. Bowerhttp://bower.io/
  121. 121. 自動化できるタスクは、コンピュータに任せてしまう
  122. 122. Grunthttp://gruntjs.com/
  123. 123. サイト制作の箱作りの段階から、自動化してしまう波が
  124. 124. Yeomanhttp://yeoman.io/
  125. 125. コマンドを実行するだけで必要なものが全部揃う
  126. 126. Mixturehttp://mixture.io/
  127. 127. ついにGUIのツールが発表になったものの…
  128. 128. 進化のスピードはおさまることを知らない
  129. 129. ディスプレイの高精細化にも戸惑わないように
  130. 130. CSS3、Web Fonts、SVG。未来を見越した素材管理
  131. 131. Elusive-Icons Webfonthttp://shoestrap.org/downloads/elusive-icons-webfont/
  132. 132. Sketchhttp://www.bohemiancoding.com/sketch/
  133. 133. バージョン管理システムの導入で制作フローも変わる
  134. 134. デザイナーもGitを使えば、エンジニアとの協業もスムーズ
  135. 135. どれが最新?先祖返り?そんなトラブルともさようなら
  136. 136. 仕事を進めるにあたって、距離が関係なくなっていく
  137. 137. GitHubhttps://github.com/
  138. 138. Webサイトのコンテンツ運用・管理にクラウドを活用
  139. 139. AWS S3 Hostinghttp://www.awsmicrosite.jp/s3-hosting/
  140. 140. 10円ホスティングだって可能な時代になっている
  141. 141. WordPress AMIhttp://ja.megumi-cloud.com/
  142. 142. WordPressサイトの立ち上げ。必要な時間は10分未満
  143. 143. クラウド×PaaSの活用
  144. 144. Herokuhttps://www.heroku.com/
  145. 145. Engine Yardhttps://www.engineyard.com/
  146. 146. 何か始めるにあたって、インフラのことすら気にしない
  147. 147. どんどん便利になっている世の中
  148. 148. 余計な時間をかけないこと
  149. 149. PLTTShttp://pltts.me/
  150. 150. “From Pencil to finished Product in 8 hoursFrom Pencil to finished Product in 8 hourshttp://vslck.im/articles/pencil-to-product
  151. 151. 自分の中に知識と技術さえあればできる
  152. 152. Webが変化すれば、職種・職域ですらあいまいに
  153. 153. 未来でも通じるクリエイターになるには
  154. 154. 根付いている業界の「当たり前」を疑ってかかれ
  155. 155. 次の時代を生き残るために、自分自身をシフトする
  156. 156. 自分を枠にはめすぎない方が、変化に対応しやすくなる
  157. 157. そして、定期的な情報のアップデートをしよう
  158. 158. 知ってるか知らないかは、非常に大きな差を生むもの
  159. 159. 「1年前に知ってれば…」、後悔先に立たず
  160. 160. 自分の強みを作るなら、誰よりも早く取りかかる
  161. 161. 誰も変えてはくれません。自分が変わらなければ
  162. 162. 最後に。日本だけ見てても状況はわからないでしょう
  163. 163. そして、次世代のWeb制作の流れに乗りましょうHacker News- https://news.ycombinator.com/Designer News- https://news.layervault.com/Hey, designer!- http://heydesigner.com/Echo JS - JavaScript News- http://www.echojs.com/UX News Feed- http://www.uxnewsfeed.com/Inbound - Hacker News for Marketers- http://inbound.org/Tuts+- http://hub.tutsplus.com/Smashing Magazine- http://www.smashingmagazine.com/.net magazine- http://www.netmagazine.com/
  164. 164. 本日のまとめ•時代の変化の波を感じて、柔軟に対応しよう•これまでの概念を疑ってみることも大事•常に変化してるので、定期的に情報をアップデート
  165. 165. 本日はありがとうございました

×