Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

あるマークアップエンジニアの 初期制作時のテンプレ事情

832 views

Published on

DIST.17 「Webデザインの現場のための効率化術」2017/08/25

Published in: Technology
  • Be the first to comment

あるマークアップエンジニアの 初期制作時のテンプレ事情

  1. 1. あるマークアップエンジニアの 初期制作時のテンプレ事情 DIST.17 「Webデザインの現場のための効率化術」
  2. 2. STUDIO ONE 岩堀 真吾 フリーランスのマークアップエンジニア 2003年よりDTP組版等に従事、2007年Web制作会社に転身。2008年からフ リーランスとして活動。 気づいたら10年経ってました コードしか書かなくなったのは3年前くらいから でも、今時フリーランスなのに - CMSできない - JS得意じゃない
  3. 3. 効率化どうしてますか
  4. 4. 自分はこんな感じ - テンプレートを用意しておく - 自分ルールを作っておく - よく使うものはスニペット - (受託専門なので)先方の環境に合わせる
  5. 5. テンプレート
  6. 6. HTML / CSS ディレクトリ構成
  7. 7. HTML / Sass(SCSS) ディレクトリ構成
  8. 8. Jade(pug) / Sass(SCSS) ディレクトリ構成
  9. 9. Jade(pug) / stylus ディレクトリ構成
  10. 10. HTML / CSS | HTML / Sass(SCSS) HTML https://codepen.io/stdone_iwahori/pen/ZJoNxG?editors=1000
  11. 11. Jade(pug) / Sass(SCSS) | Jade(pug) / stylus Jade(pug) base page https://codepen.io/stdone_iwahori/pen/GvBrmw?editors=1000
  12. 12. HTML / CSS CSS https://codepen.io/stdone_iwahori/pen/ZJoNxG?editors=0100
  13. 13. HTML / Sass(SCSS) | Jade(pug) / Sass(SCSS) Sass(SCSS) style base https://codepen.io/stdone_iwahori/pen/GvBrmw?editors=0100
  14. 14. Jade(pug) / stylus stylus style base https://codepen.io/stdone_iwahori/pen/wqxJdW?editors=0100
  15. 15. よくわからないですよね - HTML / CSS https://github.com/std-one/HTML-CSS - HTML / Sass(SCSS) https://github.com/std-one/HTML-Sass - Jade(Pug) / Sass(SCSS) https://github.com/std-one/Jade-Sass - Jade(Pug) / Stylus https://github.com/std-one/Jade-Stylus
  16. 16. ルール
  17. 17. .visual-main { } .visual-main__header { } .visual-main__contents { } .visual-main__footer { } .visual-main__headline { } .visual-main__lead { } .visual-main__btn { } ルール CSSクラス命名規則
  18. 18. スニペット
  19. 19. スニペット ツール - TextExpander - Dash - Alfled
  20. 20. スニペット 展開 ;css-flex
  21. 21. スニペット 展開 .flex { display: -webkit-flex; display: flex; flex-flow: wrap; -webkit-justify-content: space-between; justify-content: space-between; } .flex__item { -webkit-flex: 0 0 33%; flex: 0 0 33%; max-width: 33%;/* IE11 */ }
  22. 22. スニペット 展開 ;html-media
  23. 23. スニペット 展開 <div class="media"> <div class="media__image media__image—rev"> <img src="/images/dummy.gif" alt=""> </div> <div class="media__text"> <p>ダミーテキストキストダミーテキストダミーテキストダミーテキスト</p> </div> </div><!-- /.media -->
  24. 24. 受託なので
  25. 25. 受託なので 制作環境 - Photoshop - illustrator - Sketch - Adobe XD(一度だけ) - Fireworks(2016年2月以降見てない)
  26. 26. 受託なので 制作環境 - 無理して自分の環境に合わせるのではなくクライ アントさんに合わせる -- なぜならそれが営業の一番の近道でフリーランスにとっての営業を効率化(リピートに繋が る!
  27. 27. まとめ - テンプレート大事 - 自分なりのパターンを作っておく - スニペットを活用 - クライアントさんの効率化に協力する心構え
  28. 28. ありがとうございました

×