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.
カンプが出来上がるまでに
フロントエンド構築としてできること
2015.05.15 DevLove関西
「クリエイターの技術持ち寄り発表会∼デザインそもそも論∼ 」
T a k e n o r i O k a s h i t a
カンプが出来上がるまでにフロントエンド構築としてできること
「僕はこうしてきた」というだけの簡単なお話。
※これをやったらいい!という話ではない
※デザインやプログラムの具体的な話はしない。
※当たり障りないことしか言わない。
自己紹介
Webデザイナー/フロントエンドエンジニア
岡下剛典
gouten5010
カンプが出来上がるまでにフロントエンド構築としてできること
親しみをこめて「GOUTEN(ゴウテン)」と呼んでください
- フリーランス
- クックビズ株式会社
2003 2006 2010 2013.04 20152013.09
DTPデザイン
DTPデザイン
WEBデザイン
WEBデザイン
フロントエンド
輝かしくない軌跡
5010WOKRS立ち上げヒキニート
引きこもり
引きこもりキャンペーン終了...
カンプが出来上がるまでにフロントエンド構築としてできること
アジェンダ
1. 吾輩はコーダーである
2. 吾輩が踏んだ地雷
3. 吾輩達がカンプを待たずにできること
4. 吾輩がデザイナーに物申す
5. 吾輩としてのまとめ
吾輩はコーダーである
カンプが出来上がるまでにフロントエンド構築としてできること
デザインはまだない
カンプが出来上がるまでにフロントエンド構築としてできること
でもコーディングしないと
カンプが出来上がるまでにフロントエンド構築としてできること
 ___
/ || ̄ ̄|| ∧_∧
|.....||__|| (     )  どうしてこうなった・・・
| ̄ ̄\三⊂/ ̄ ̄ ̄/
|    | ( ./     /
 ___
/ || ̄ ̄|| ∧_∧
|.....||__|| ( ^ω^ ) ...
カンプが出来上がるまでにフロントエンド構築としてできること
分業の弊害 納期が変えられない
サイト
制作
デザイン
フロントエンド
バックエンド
ディレクション
ライティング
カンプが出来上がるまでにフロントエンド構築としてできること
デザイナー
「デザインまだ出来てないんだぁてへぺろ(・ω<)★」
カンプが出来上がるまでにフロントエンド構築としてできること
吾輩「しょうがないにゃあ」
カンプが出来上がるまでにフロントエンド構築としてできること
そして、炎上…
カンプが出来上がるまでにフロントエンド構築としてできること
事前に準備       しておこう
カンプが出来上がるまでにフロントエンド構築としてできること
吾輩が踏んだ地雷
カンプが出来上がるまでにフロントエンド構築としてできること
吾輩「何も問題なければこの
   スケジュールでいけます」
CASE . 1
カンプが出来上がるまでにフロントエンド構築としてできること
問題は必ず発生する
自身の問題
デザイナーと
の連携
クライアント
の問題
その他の
外部要因
カンプが出来上がるまでにフロントエンド構築としてできること
吾輩「どこかのサイトでそういう
   動きを見たことがあるから、
   たぶんできますよ」
CASE . 2
カンプが出来上がるまでにフロントエンド構築としてできること
真似する
だけでできると
思い込む
サイトを探したり
ソースを解析したり
実装に時間
がかかる
クオリティが
低くなる
カンプが出来上がるまでにフロントエンド構築としてできること
イレギュラーは必ず発生するのでそれを見越す
自分が現状でできることできないことをしっかり把握する
できそうだと思うなら根拠を提示する
学んだこと
カンプが出来上がるまでにフロントエンド構築としてできること
吾輩達がカンプを待たずにできること
カンプが出来上がるまでにフロントエンド構築としてできること
Think Create
カンプが出来上がるまでにフロントエンド構築としてできること
仕様書を作る
ワイヤーフレームを作る
デザイナーと一緒にやりたい
カンプが出来上がるまでにフロントエンド構築としてできること
ヒアリング
Server Scripts Sitemap
and Web literacy of the client.
カンプが出来上がるまでにフロントエンド構築としてできること
で、どこまでやるの?
HTMLパーツのモジュール化
CSSファイルのモジュール化
JavaScript/PHPの記述の関数化
カンプが出来上がるまでにフロントエンド構築としてできること
モジュール化
HTMLパーツのモジュール化
CSS
JavaScript/PHP
Parts
Parts
Parts
Parts
カンプが出来上がるまでにフロントエンド構築としてできること
HTMLパーツのモジュール化
・静的/動的に関わらずモジュール化
・header, footer, contents, sidebar,
 global/sub menu, sns b...
カンプが出来上がるまでにフロントエンド構築としてできること
モジュール化
HTML
CSSファイルのモジュール化
JavaScript/PHP
CSS
Sass
SCSS
LESS
カンプが出来上がるまでにフロントエンド構築としてできること
CSSファイルのモジュール化
・Sass/SCSSのMixin等を利用
・カラーセット
CSS3ベンダープレフィックス
Media Queryのブレークポイント基本設定
 ボタン等の基...
カンプが出来上がるまでにフロントエンド構築としてできること
モジュール化
HTML
CSS
JavaScript/PHPの記述の関数化
JSとか
PHPとか
var
function
class
カンプが出来上がるまでにフロントエンド構築としてできること
JavaScript / PHPの関数化
・定義できるものは先に定義
・関数化できるものも事前に作成  JSとか
PHPとか
var
function
class
・モバイルの切り替え...
カンプが出来上がるまでにフロントエンド構築としてできること
Code Stock
よく使う記述や案件で使うであろう記述を
関数化してまとめて保持。
関数化した
JavaScript
やPHP
Sass/SCSS
のMixin
フォーマット
カンプが出来上がるまでにフロントエンド構築としてできること
記録ツール
Application Snippet of Editor
Website
カンプが出来上がるまでにフロントエンド構築としてできること
バージョン管理
カンプが出来上がるまでにフロントエンド構築としてできること
• 開発工数と見積もりの具体化
• 仕様変更等・要件追加による追加工数の予測
• 心の余裕と平穏
• 技術に即した提案
準備することの効能
カンプが出来上がるまでにフロントエンド構築としてできること
ローカル環境
カンプが出来上がるまでにフロントエンド構築としてできること
フレームワーク
JavaScript CSS
Foundation
カンプが出来上がるまでにフロントエンド構築としてできること
CMS
カンプが出来上がるまでにフロントエンド構築としてできること
ビルドシステム
Grunt glup
各エディタの
ビルド設定
カンプが出来上がるまでにフロントエンド構築としてできること
使えるものは使え
楽をしろ
カンプが出来上がるまでにフロントエンド構築としてできること
吾輩がデザイナーに物申す
カンプが出来上がるまでにフロントエンド構築としてできること
1. 無茶ぶりには対応できません。
2. 考えすぎると凡庸なデザインになってしまう可能性も。
3. デザイン制作してて出来そうかどうかわからない時は
  すぐに相談。
設計を少しだけ考...
カンプが出来上がるまでにフロントエンド構築としてできること
コミュニケーションを
ちゃんととろう。
1. 制作時の対応可否や突然の仕様変更にも対応したいから。
2. 板挟みになってストレス溜まったら飲みに行こう。
カンプが出来上がるまでにフロントエンド構築としてできること
1. ループする予定の部分はちゃんとループするように作ろう。
2. 納品前にレイヤー整理はしてください。
3. あんたが持ってるフォントを俺が持ってるとは限らないぞ。
切り出しを考慮し...
カンプが出来上がるまでにフロントエンド構築としてできること
吾輩としてのまとめ
カンプが出来上がるまでにフロントエンド構築としてできること
予測して準備する
心を強く持つ
僕が大事にしていること
カンプが出来上がるまでにフロントエンド構築としてできること
あなたはどう進めていますか?
カンプが出来上がるまでにフロントエンド構築としてできること
ありがとうございました
Upcoming SlideShare
Loading in …5
×

カンプが出来上がるまでにフロントエンド構築としてできること

3,367 views

Published on

2015年5月15日に開催されたDevLove関西「クリエイターの技術持ち寄り発表会〜デザインそもそも論〜 」で発表に使用したスライドです。(※加筆修正しています)

Published in: Engineering
  • Sex in your area is here: ♥♥♥ http://bit.ly/369VOVb ♥♥♥
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Dating for everyone is here: ❤❤❤ http://bit.ly/369VOVb ❤❤❤
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

カンプが出来上がるまでにフロントエンド構築としてできること

  1. 1. カンプが出来上がるまでに フロントエンド構築としてできること 2015.05.15 DevLove関西 「クリエイターの技術持ち寄り発表会∼デザインそもそも論∼ 」 T a k e n o r i O k a s h i t a
  2. 2. カンプが出来上がるまでにフロントエンド構築としてできること 「僕はこうしてきた」というだけの簡単なお話。 ※これをやったらいい!という話ではない ※デザインやプログラムの具体的な話はしない。 ※当たり障りないことしか言わない。
  3. 3. 自己紹介 Webデザイナー/フロントエンドエンジニア 岡下剛典 gouten5010 カンプが出来上がるまでにフロントエンド構築としてできること 親しみをこめて「GOUTEN(ゴウテン)」と呼んでください - フリーランス - クックビズ株式会社
  4. 4. 2003 2006 2010 2013.04 20152013.09 DTPデザイン DTPデザイン WEBデザイン WEBデザイン フロントエンド 輝かしくない軌跡 5010WOKRS立ち上げヒキニート 引きこもり 引きこもりキャンペーン終了 cook+biz所属 カンプが出来上がるまでにフロントエンド構築としてできること
  5. 5. カンプが出来上がるまでにフロントエンド構築としてできること アジェンダ 1. 吾輩はコーダーである 2. 吾輩が踏んだ地雷 3. 吾輩達がカンプを待たずにできること 4. 吾輩がデザイナーに物申す 5. 吾輩としてのまとめ
  6. 6. 吾輩はコーダーである カンプが出来上がるまでにフロントエンド構築としてできること
  7. 7. デザインはまだない カンプが出来上がるまでにフロントエンド構築としてできること
  8. 8. でもコーディングしないと カンプが出来上がるまでにフロントエンド構築としてできること
  9. 9.  ___ / || ̄ ̄|| ∧_∧ |.....||__|| (     )  どうしてこうなった・・・ | ̄ ̄\三⊂/ ̄ ̄ ̄/ |    | ( ./     /  ___ / || ̄ ̄|| ∧_∧ |.....||__|| ( ^ω^ )  どうしてこうなった!? | ̄ ̄\三⊂/ ̄ ̄ ̄/ |    | ( ./     /  ___ ♪ ∧__,∧.∩ / || ̄ ̄|| r( ^ω^ )ノ  どうしてこうなった! |.....||__|| └‐、   レ´`ヽ   どうしてこうなった! | ̄ ̄\三  / ̄ ̄ ̄/ノ´` ♪ |    | ( ./     /  ___        ♪  ∩∧__,∧ / || ̄ ̄||         _ ヽ( ^ω^ )7  どうしてこうなった! |.....||__||         /`ヽJ   ,‐┘   どうしてこうなった!  | ̄ ̄\三  / ̄ ̄ ̄/  ´`ヽ、_  ノ     |    | ( ./     /      `) ) ♪ カンプが出来上がるまでにフロントエンド構築としてできること
  10. 10. カンプが出来上がるまでにフロントエンド構築としてできること 分業の弊害 納期が変えられない サイト 制作 デザイン フロントエンド バックエンド ディレクション ライティング
  11. 11. カンプが出来上がるまでにフロントエンド構築としてできること デザイナー 「デザインまだ出来てないんだぁてへぺろ(・ω<)★」
  12. 12. カンプが出来上がるまでにフロントエンド構築としてできること 吾輩「しょうがないにゃあ」
  13. 13. カンプが出来上がるまでにフロントエンド構築としてできること そして、炎上…
  14. 14. カンプが出来上がるまでにフロントエンド構築としてできること 事前に準備       しておこう
  15. 15. カンプが出来上がるまでにフロントエンド構築としてできること 吾輩が踏んだ地雷
  16. 16. カンプが出来上がるまでにフロントエンド構築としてできること 吾輩「何も問題なければこの    スケジュールでいけます」 CASE . 1
  17. 17. カンプが出来上がるまでにフロントエンド構築としてできること 問題は必ず発生する 自身の問題 デザイナーと の連携 クライアント の問題 その他の 外部要因
  18. 18. カンプが出来上がるまでにフロントエンド構築としてできること 吾輩「どこかのサイトでそういう    動きを見たことがあるから、    たぶんできますよ」 CASE . 2
  19. 19. カンプが出来上がるまでにフロントエンド構築としてできること 真似する だけでできると 思い込む サイトを探したり ソースを解析したり 実装に時間 がかかる クオリティが 低くなる
  20. 20. カンプが出来上がるまでにフロントエンド構築としてできること イレギュラーは必ず発生するのでそれを見越す 自分が現状でできることできないことをしっかり把握する できそうだと思うなら根拠を提示する 学んだこと
  21. 21. カンプが出来上がるまでにフロントエンド構築としてできること 吾輩達がカンプを待たずにできること
  22. 22. カンプが出来上がるまでにフロントエンド構築としてできること Think Create
  23. 23. カンプが出来上がるまでにフロントエンド構築としてできること 仕様書を作る ワイヤーフレームを作る デザイナーと一緒にやりたい
  24. 24. カンプが出来上がるまでにフロントエンド構築としてできること ヒアリング Server Scripts Sitemap and Web literacy of the client.
  25. 25. カンプが出来上がるまでにフロントエンド構築としてできること で、どこまでやるの? HTMLパーツのモジュール化 CSSファイルのモジュール化 JavaScript/PHPの記述の関数化
  26. 26. カンプが出来上がるまでにフロントエンド構築としてできること モジュール化 HTMLパーツのモジュール化 CSS JavaScript/PHP Parts Parts Parts Parts
  27. 27. カンプが出来上がるまでにフロントエンド構築としてできること HTMLパーツのモジュール化 ・静的/動的に関わらずモジュール化 ・header, footer, contents, sidebar,  global/sub menu, sns button area, list-style format, and,more… ・最初に仕様やワイヤーフレームがしっかり  固まっていれば、そうそう構造が変わる  ことはない(はず) Parts Parts Parts Parts
  28. 28. カンプが出来上がるまでにフロントエンド構築としてできること モジュール化 HTML CSSファイルのモジュール化 JavaScript/PHP CSS Sass SCSS LESS
  29. 29. カンプが出来上がるまでにフロントエンド構築としてできること CSSファイルのモジュール化 ・Sass/SCSSのMixin等を利用 ・カラーセット CSS3ベンダープレフィックス Media Queryのブレークポイント基本設定  ボタン等の基本パーツフォーマット  共通の文章フォーマット ・頻繁に使いそうなものはとりあえず定義 CSS Sass SCSS LESS
  30. 30. カンプが出来上がるまでにフロントエンド構築としてできること モジュール化 HTML CSS JavaScript/PHPの記述の関数化 JSとか PHPとか var function class
  31. 31. カンプが出来上がるまでにフロントエンド構築としてできること JavaScript / PHPの関数化 ・定義できるものは先に定義 ・関数化できるものも事前に作成  JSとか PHPとか var function class ・モバイルの切り替えフラグ  スクロール制御  クリックの拡張  ページネーションフォーマット    etc…
  32. 32. カンプが出来上がるまでにフロントエンド構築としてできること Code Stock よく使う記述や案件で使うであろう記述を 関数化してまとめて保持。 関数化した JavaScript やPHP Sass/SCSS のMixin フォーマット
  33. 33. カンプが出来上がるまでにフロントエンド構築としてできること 記録ツール Application Snippet of Editor Website
  34. 34. カンプが出来上がるまでにフロントエンド構築としてできること バージョン管理
  35. 35. カンプが出来上がるまでにフロントエンド構築としてできること • 開発工数と見積もりの具体化 • 仕様変更等・要件追加による追加工数の予測 • 心の余裕と平穏 • 技術に即した提案 準備することの効能
  36. 36. カンプが出来上がるまでにフロントエンド構築としてできること ローカル環境
  37. 37. カンプが出来上がるまでにフロントエンド構築としてできること フレームワーク JavaScript CSS Foundation
  38. 38. カンプが出来上がるまでにフロントエンド構築としてできること CMS
  39. 39. カンプが出来上がるまでにフロントエンド構築としてできること ビルドシステム Grunt glup 各エディタの ビルド設定
  40. 40. カンプが出来上がるまでにフロントエンド構築としてできること 使えるものは使え 楽をしろ
  41. 41. カンプが出来上がるまでにフロントエンド構築としてできること 吾輩がデザイナーに物申す
  42. 42. カンプが出来上がるまでにフロントエンド構築としてできること 1. 無茶ぶりには対応できません。 2. 考えすぎると凡庸なデザインになってしまう可能性も。 3. デザイン制作してて出来そうかどうかわからない時は   すぐに相談。 設計を少しだけ考えた デザイン制作をしてほしい
  43. 43. カンプが出来上がるまでにフロントエンド構築としてできること コミュニケーションを ちゃんととろう。 1. 制作時の対応可否や突然の仕様変更にも対応したいから。 2. 板挟みになってストレス溜まったら飲みに行こう。
  44. 44. カンプが出来上がるまでにフロントエンド構築としてできること 1. ループする予定の部分はちゃんとループするように作ろう。 2. 納品前にレイヤー整理はしてください。 3. あんたが持ってるフォントを俺が持ってるとは限らないぞ。 切り出しを考慮した デザイン制作をしてくれ
  45. 45. カンプが出来上がるまでにフロントエンド構築としてできること 吾輩としてのまとめ
  46. 46. カンプが出来上がるまでにフロントエンド構築としてできること 予測して準備する 心を強く持つ 僕が大事にしていること
  47. 47. カンプが出来上がるまでにフロントエンド構築としてできること あなたはどう進めていますか?
  48. 48. カンプが出来上がるまでにフロントエンド構築としてできること ありがとうございました

×