Download - 愛に時間を。 〜最近のウェブサイトの作り方〜
![Page 1: 愛に時間を。 〜最近のウェブサイトの作り方〜](https://reader033.vdocuments.pub/reader033/viewer/2022042607/55852758d8b42a4c128b5051/html5/thumbnails/1.jpg)
愛に時間を。最近のウェブサイトのつくりかた
![Page 3: 愛に時間を。 〜最近のウェブサイトの作り方〜](https://reader033.vdocuments.pub/reader033/viewer/2022042607/55852758d8b42a4c128b5051/html5/thumbnails/3.jpg)
最近の悩み
こいつ(猫)が、ぼくの鞄をトイレ(小)がわりにする
とてもくさい
![Page 4: 愛に時間を。 〜最近のウェブサイトの作り方〜](https://reader033.vdocuments.pub/reader033/viewer/2022042607/55852758d8b42a4c128b5051/html5/thumbnails/4.jpg)
ウェブサイト作ってますか?
![Page 5: 愛に時間を。 〜最近のウェブサイトの作り方〜](https://reader033.vdocuments.pub/reader033/viewer/2022042607/55852758d8b42a4c128b5051/html5/thumbnails/5.jpg)
弊社大きくなんかこんな縦割り振りある
!
事業計画・サービスコンセプト固め (ビジネス・企画)
サイト設計/ワイヤーフレーム (クリエイター)
GUIデザイン・実装 (クリエイター)
サーバー開発 (エンジニア)
インフラ構築 (エンジニア)
検証 (QA)
デプロイ (エンジニア)
運用・上記繰り返し
![Page 6: 愛に時間を。 〜最近のウェブサイトの作り方〜](https://reader033.vdocuments.pub/reader033/viewer/2022042607/55852758d8b42a4c128b5051/html5/thumbnails/6.jpg)
最近のフロント開発必須知識
!
・grunt か gulp の読解力 → コピペ力
・compass(知識ぐらいで OK。 grunt に任せちゃえ)
・sass(SCSS でOK)
・bower
・git
・Terminal
・AngularJS, (jQuery)
!
このへんできればあなたもわたしもフロントエンドエンジニャー
![Page 7: 愛に時間を。 〜最近のウェブサイトの作り方〜](https://reader033.vdocuments.pub/reader033/viewer/2022042607/55852758d8b42a4c128b5051/html5/thumbnails/7.jpg)
半日で RWD で Retina 対応のサイト作る方法
![Page 9: 愛に時間を。 〜最近のウェブサイトの作り方〜](https://reader033.vdocuments.pub/reader033/viewer/2022042607/55852758d8b42a4c128b5051/html5/thumbnails/9.jpg)
半日で RWD で Retina 対応のサイト作る方法
1. 世の中のテンプレ活用する
2. JSX 使う
3. コピペ
![Page 10: 愛に時間を。 〜最近のウェブサイトの作り方〜](https://reader033.vdocuments.pub/reader033/viewer/2022042607/55852758d8b42a4c128b5051/html5/thumbnails/10.jpg)
1. 世の中のテンプレ活用する
Yeoman
スーパー素敵ウェブテンプレ集(しかも日々更新される)
static-generator っていうアレを入れます
$ npm install -g generator-webapp
!
Middleman とかもいいですね
![Page 11: 愛に時間を。 〜最近のウェブサイトの作り方〜](https://reader033.vdocuments.pub/reader033/viewer/2022042607/55852758d8b42a4c128b5051/html5/thumbnails/11.jpg)
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/
![Page 12: 愛に時間を。 〜最近のウェブサイトの作り方〜](https://reader033.vdocuments.pub/reader033/viewer/2022042607/55852758d8b42a4c128b5051/html5/thumbnails/12.jpg)
3. コピペ
http://snippets.feb19.jp とか gist とか
!
自分のためのスニペットをいっぱい貯めておく
→いつかなんか役に立つ・書く事で割と覚える
後々自分の書いたやつ周りに聞かれて復習になる
![Page 13: 愛に時間を。 〜最近のウェブサイトの作り方〜](https://reader033.vdocuments.pub/reader033/viewer/2022042607/55852758d8b42a4c128b5051/html5/thumbnails/13.jpg)
結果
半日スタバでドヤリングすることにより完成
![Page 14: 愛に時間を。 〜最近のウェブサイトの作り方〜](https://reader033.vdocuments.pub/reader033/viewer/2022042607/55852758d8b42a4c128b5051/html5/thumbnails/14.jpg)
ただし
作業を開始するまでに 4 日かけた(かかった)
![Page 15: 愛に時間を。 〜最近のウェブサイトの作り方〜](https://reader033.vdocuments.pub/reader033/viewer/2022042607/55852758d8b42a4c128b5051/html5/thumbnails/15.jpg)
理由
Photoshop から直接出力するためフルスクラッチより高速に終わるが
アプリ立ち上げたりボンヤリ眺めてたりなんか精神的暇時間が長い
やり直しの対応がだんだん面倒くなる(CSS・HTML・画像の差し替え)
SCSS 使おうが grunt 使おうがどうしようもない
ちゃんと文字とか構成揃ってからやりたくなる
!
↓
!
効率化によって、
もっと手間をかけられる・べきところが気にできるようになる
![Page 16: 愛に時間を。 〜最近のウェブサイトの作り方〜](https://reader033.vdocuments.pub/reader033/viewer/2022042607/55852758d8b42a4c128b5051/html5/thumbnails/16.jpg)
すなわち「効率化」効果により
_人人人人人人人人人人_
> 文字校力があがる <
‾^Y^Y^Y^Y^Y^Y^Y^‾
![Page 17: 愛に時間を。 〜最近のウェブサイトの作り方〜](https://reader033.vdocuments.pub/reader033/viewer/2022042607/55852758d8b42a4c128b5051/html5/thumbnails/17.jpg)
有権者の皆様にお伝えしたい事
![Page 18: 愛に時間を。 〜最近のウェブサイトの作り方〜](https://reader033.vdocuments.pub/reader033/viewer/2022042607/55852758d8b42a4c128b5051/html5/thumbnails/18.jpg)
・パフォーマンス改善
・グラフィックの調整
・インタラクションの気持ちよさ調整
・細部に神を宿す
・コピー文言の再考
・操作感、チュートリアルの客観的調査
(・他の仕事)
効率化したらその時間を細かい所の調整に費やせる
![Page 19: 愛に時間を。 〜最近のウェブサイトの作り方〜](https://reader033.vdocuments.pub/reader033/viewer/2022042607/55852758d8b42a4c128b5051/html5/thumbnails/19.jpg)
開発・制作を高速にする
↓
PDCA サイクル速度を高速にすることができる
![Page 20: 愛に時間を。 〜最近のウェブサイトの作り方〜](https://reader033.vdocuments.pub/reader033/viewer/2022042607/55852758d8b42a4c128b5051/html5/thumbnails/20.jpg)
デザインツール、フロントエンドツール色々出てるけど
「時間をかけるべき」クリエイティビティは変わらない。
![Page 21: 愛に時間を。 〜最近のウェブサイトの作り方〜](https://reader033.vdocuments.pub/reader033/viewer/2022042607/55852758d8b42a4c128b5051/html5/thumbnails/21.jpg)
っていうか時間をかけさせてください
→ エラい人
![Page 22: 愛に時間を。 〜最近のウェブサイトの作り方〜](https://reader033.vdocuments.pub/reader033/viewer/2022042607/55852758d8b42a4c128b5051/html5/thumbnails/22.jpg)
愛に時間を。最近のウェブサイトのつくりかた