愛に時間を。 〜最近のウェブサイトの作り方〜
DESCRIPTION
半日で RWD で Retina 対応のサイトを実装する方法TRANSCRIPT
愛に時間を。最近のウェブサイトのつくりかた
最近の悩み
こいつ（猫）が、ぼくの鞄をトイレ（小）がわりにする
とてもくさい
ウェブサイト作ってますか？
弊社大きくなんかこんな縦割り振りある
!
事業計画・サービスコンセプト固め (ビジネス・企画)
サイト設計/ワイヤーフレーム (クリエイター)
GUIデザイン・実装 (クリエイター)
サーバー開発 (エンジニア)
インフラ構築 (エンジニア)
検証 (QA)
デプロイ (エンジニア)
運用・上記繰り返し
最近のフロント開発必須知識
!
・grunt か gulp の読解力 → コピペ力
・compass（知識ぐらいで OK。 grunt に任せちゃえ）
・sass（SCSS でOK）
・bower
・git
・Terminal
・AngularJS, (jQuery)
!
このへんできればあなたもわたしもフロントエンドエンジニャー
半日で RWD で Retina 対応のサイト作る方法
半日で RWD で Retina 対応のサイト作る方法
1. 世の中のテンプレ活用する
2. JSX 使う
3. コピペ
1. 世の中のテンプレ活用する
Yeoman
スーパー素敵ウェブテンプレ集（しかも日々更新される）
static-generator っていうアレを入れます
$ npm install -g generator-webapp
!
Middleman とかもいいですね
2. JSX※ 使う
※DeNA JSX じゃなくて Adobe JSX の方です
Photoshop で「PSD のレイヤーをトリミングして CSS
position:absolute で Retina 対応の配置を作る」JSX
→これであっという間に Retina 対応 HTML+CSS に！
https://github.com/feb19/photoshop-jsx 動作保証しません♡
!(道家先生の Flash に配置するやつを魔改造してます)
http://www.libspark.org/svn/jsx/PSDExporter/
3. コピペ
http://snippets.feb19.jp とか gist とか
!
自分のためのスニペットをいっぱい貯めておく
→いつかなんか役に立つ・書く事で割と覚える
後々自分の書いたやつ周りに聞かれて復習になる
結果
半日スタバでドヤリングすることにより完成
ただし
作業を開始するまでに 4 日かけた（かかった）
理由
Photoshop から直接出力するためフルスクラッチより高速に終わるが
アプリ立ち上げたりボンヤリ眺めてたりなんか精神的暇時間が長い
やり直しの対応がだんだん面倒くなる（CSS・HTML・画像の差し替え）
SCSS 使おうが grunt 使おうがどうしようもない
ちゃんと文字とか構成揃ってからやりたくなる
!
↓
!
効率化によって、
もっと手間をかけられる・べきところが気にできるようになる
すなわち「効率化」効果により
＿人人人人人人人人人人＿
＞ 文字校力があがる ＜
‾^Y^Y^Y^Y^Y^Y^Y^‾
有権者の皆様にお伝えしたい事
・パフォーマンス改善
・グラフィックの調整
・インタラクションの気持ちよさ調整
・細部に神を宿す
・コピー文言の再考
・操作感、チュートリアルの客観的調査
(・他の仕事)
効率化したらその時間を細かい所の調整に費やせる
開発・制作を高速にする
↓
PDCA サイクル速度を高速にすることができる
デザインツール、フロントエンドツール色々出てるけど
「時間をかけるべき」クリエイティビティは変わらない。
っていうか時間をかけさせてください
→ エラい人
愛に時間を。最近のウェブサイトのつくりかた