CSS Nite LP38に行ってきた
-
Upload
yasuyuki-fujikawa -
Category
Engineering
-
view
850 -
download
3
Transcript of CSS Nite LP38に行ってきた
![Page 1: CSS Nite LP38に行ってきた](https://reader030.fdocuments.net/reader030/viewer/2022013122/55aedf151a28abbe1f8b4704/html5/thumbnails/1.jpg)
CSS Nite LP38 「Webデザイン行く年来る年(Shift8)」
行ってきた
Yasuyuki Fujikawa
![Page 2: CSS Nite LP38に行ってきた](https://reader030.fdocuments.net/reader030/viewer/2022013122/55aedf151a28abbe1f8b4704/html5/thumbnails/2.jpg)
フロントのこと聞きたい!
![Page 3: CSS Nite LP38に行ってきた](https://reader030.fdocuments.net/reader030/viewer/2022013122/55aedf151a28abbe1f8b4704/html5/thumbnails/3.jpg)
![Page 4: CSS Nite LP38に行ってきた](https://reader030.fdocuments.net/reader030/viewer/2022013122/55aedf151a28abbe1f8b4704/html5/thumbnails/4.jpg)
• 基調講演 • 2014年のマークアップの話題を総まとめ • 動画にキャプションをつけなきゃ ダメよ~ダメダメ • フローの変革からツールと制作環境が注目された2014年
• Webデザイントレンドキャプチャで振り返る2014年の潮流
• スマートデバイス 2014→2015
CSS Nite LP38 アジェンダ
![Page 5: CSS Nite LP38に行ってきた](https://reader030.fdocuments.net/reader030/viewer/2022013122/55aedf151a28abbe1f8b4704/html5/thumbnails/5.jpg)
• 基調講演 • 2014年のマークアップの話題を総まとめ • 動画にキャプションをつけなきゃ ダメよ~ダメダメ • フローの変革からツールと制作環境が注目された2014年
• Webデザイントレンドキャプチャで振り返る2014年の潮流
• スマートデバイス 2014→2015
CSS Nite LP38 アジェンダ
![Page 6: CSS Nite LP38に行ってきた](https://reader030.fdocuments.net/reader030/viewer/2022013122/55aedf151a28abbe1f8b4704/html5/thumbnails/6.jpg)
2014年のマークアップの 話題を総まとめ
![Page 7: CSS Nite LP38に行ってきた](https://reader030.fdocuments.net/reader030/viewer/2022013122/55aedf151a28abbe1f8b4704/html5/thumbnails/7.jpg)
HTML
![Page 8: CSS Nite LP38に行ってきた](https://reader030.fdocuments.net/reader030/viewer/2022013122/55aedf151a28abbe1f8b4704/html5/thumbnails/8.jpg)
2014年10月28日 HTML5が正式な仕様に
![Page 9: CSS Nite LP38に行ってきた](https://reader030.fdocuments.net/reader030/viewer/2022013122/55aedf151a28abbe1f8b4704/html5/thumbnails/9.jpg)
2014年10月 2016年中
.1
![Page 10: CSS Nite LP38に行ってきた](https://reader030.fdocuments.net/reader030/viewer/2022013122/55aedf151a28abbe1f8b4704/html5/thumbnails/10.jpg)
<!DOCTYPE html> <html lang="ja"> <head> ...
![Page 11: CSS Nite LP38に行ってきた](https://reader030.fdocuments.net/reader030/viewer/2022013122/55aedf151a28abbe1f8b4704/html5/thumbnails/11.jpg)
HTMLバージョンの意味は薄れていく
![Page 12: CSS Nite LP38に行ってきた](https://reader030.fdocuments.net/reader030/viewer/2022013122/55aedf151a28abbe1f8b4704/html5/thumbnails/12.jpg)
CSS
![Page 13: CSS Nite LP38に行ってきた](https://reader030.fdocuments.net/reader030/viewer/2022013122/55aedf151a28abbe1f8b4704/html5/thumbnails/13.jpg)
CSS誕生20周年
![Page 16: CSS Nite LP38に行ってきた](https://reader030.fdocuments.net/reader030/viewer/2022013122/55aedf151a28abbe1f8b4704/html5/thumbnails/16.jpg)
ブラウザ
![Page 17: CSS Nite LP38に行ってきた](https://reader030.fdocuments.net/reader030/viewer/2022013122/55aedf151a28abbe1f8b4704/html5/thumbnails/17.jpg)
2014年4月9日IE 6の終焉
![Page 18: CSS Nite LP38に行ってきた](https://reader030.fdocuments.net/reader030/viewer/2022013122/55aedf151a28abbe1f8b4704/html5/thumbnails/18.jpg)
2015年は
IE 8が下限
![Page 19: CSS Nite LP38に行ってきた](https://reader030.fdocuments.net/reader030/viewer/2022013122/55aedf151a28abbe1f8b4704/html5/thumbnails/19.jpg)
2016年1月12日にIE 8サポート終了
![Page 20: CSS Nite LP38に行ってきた](https://reader030.fdocuments.net/reader030/viewer/2022013122/55aedf151a28abbe1f8b4704/html5/thumbnails/20.jpg)
Firefox Developer Edition
![Page 21: CSS Nite LP38に行ってきた](https://reader030.fdocuments.net/reader030/viewer/2022013122/55aedf151a28abbe1f8b4704/html5/thumbnails/21.jpg)
![Page 22: CSS Nite LP38に行ってきた](https://reader030.fdocuments.net/reader030/viewer/2022013122/55aedf151a28abbe1f8b4704/html5/thumbnails/22.jpg)
制作環境
![Page 23: CSS Nite LP38に行ってきた](https://reader030.fdocuments.net/reader030/viewer/2022013122/55aedf151a28abbe1f8b4704/html5/thumbnails/23.jpg)
Sassのさらなる普及
![Page 24: CSS Nite LP38に行ってきた](https://reader030.fdocuments.net/reader030/viewer/2022013122/55aedf151a28abbe1f8b4704/html5/thumbnails/24.jpg)
3.4.9: 2014年11月24日
3.4.0: 2014年 8月18日
3.3.0: 2014年 3月 7日
![Page 25: CSS Nite LP38に行ってきた](https://reader030.fdocuments.net/reader030/viewer/2022013122/55aedf151a28abbe1f8b4704/html5/thumbnails/25.jpg)
タスクランナー競争
![Page 26: CSS Nite LP38に行ってきた](https://reader030.fdocuments.net/reader030/viewer/2022013122/55aedf151a28abbe1f8b4704/html5/thumbnails/26.jpg)
Grunt と Gulp かメジャー
![Page 27: CSS Nite LP38に行ってきた](https://reader030.fdocuments.net/reader030/viewer/2022013122/55aedf151a28abbe1f8b4704/html5/thumbnails/27.jpg)
BEMのさらなる普及
![Page 28: CSS Nite LP38に行ってきた](https://reader030.fdocuments.net/reader030/viewer/2022013122/55aedf151a28abbe1f8b4704/html5/thumbnails/28.jpg)
classの命名規則
Webサイト設計手法
![Page 29: CSS Nite LP38に行ってきた](https://reader030.fdocuments.net/reader030/viewer/2022013122/55aedf151a28abbe1f8b4704/html5/thumbnails/29.jpg)
アプリケーション フレームワーク
![Page 30: CSS Nite LP38に行ってきた](https://reader030.fdocuments.net/reader030/viewer/2022013122/55aedf151a28abbe1f8b4704/html5/thumbnails/30.jpg)
Flux + React
![Page 31: CSS Nite LP38に行ってきた](https://reader030.fdocuments.net/reader030/viewer/2022013122/55aedf151a28abbe1f8b4704/html5/thumbnails/31.jpg)
Coding for Marketing
![Page 32: CSS Nite LP38に行ってきた](https://reader030.fdocuments.net/reader030/viewer/2022013122/55aedf151a28abbe1f8b4704/html5/thumbnails/32.jpg)
• Googleアナリティクスのトラッキングコード • タグマネージャー • 構造化データ(Schema.org、Googleリッチスニペット)
• Googleでのスマホ対応のラベル表示(Mobile-friendly)
![Page 33: CSS Nite LP38に行ってきた](https://reader030.fdocuments.net/reader030/viewer/2022013122/55aedf151a28abbe1f8b4704/html5/thumbnails/33.jpg)
フロントエンジニアもマーケティングに
無関係ではいられない時代に
![Page 34: CSS Nite LP38に行ってきた](https://reader030.fdocuments.net/reader030/viewer/2022013122/55aedf151a28abbe1f8b4704/html5/thumbnails/34.jpg)
フローの変革からツールと 制作環境が注目された2014年
![Page 35: CSS Nite LP38に行ってきた](https://reader030.fdocuments.net/reader030/viewer/2022013122/55aedf151a28abbe1f8b4704/html5/thumbnails/35.jpg)
ウェブデザインの本質は 言葉です。
![Page 36: CSS Nite LP38に行ってきた](https://reader030.fdocuments.net/reader030/viewer/2022013122/55aedf151a28abbe1f8b4704/html5/thumbnails/36.jpg)
Web Font の普及
Google Fonts, Adobe
![Page 37: CSS Nite LP38に行ってきた](https://reader030.fdocuments.net/reader030/viewer/2022013122/55aedf151a28abbe1f8b4704/html5/thumbnails/37.jpg)
コードを書かずにUI設計
コードから始まるUI設計 という乖離
![Page 38: CSS Nite LP38に行ってきた](https://reader030.fdocuments.net/reader030/viewer/2022013122/55aedf151a28abbe1f8b4704/html5/thumbnails/38.jpg)
• Macaw • InVision • Sketch3 • blocs
UIデザインが捗るツール
![Page 39: CSS Nite LP38に行ってきた](https://reader030.fdocuments.net/reader030/viewer/2022013122/55aedf151a28abbe1f8b4704/html5/thumbnails/39.jpg)
クラウドファンディングサービスのKickstarterへの投稿で
注目を浴びた、WEBデザインツール。
2013年10月2日に出資者募集が開始された際は
わずか24時間で75000$の目標を達成。
Webデザイン界隈で注目されているプロジェクトです。
Macaw
![Page 40: CSS Nite LP38に行ってきた](https://reader030.fdocuments.net/reader030/viewer/2022013122/55aedf151a28abbe1f8b4704/html5/thumbnails/40.jpg)
![Page 41: CSS Nite LP38に行ってきた](https://reader030.fdocuments.net/reader030/viewer/2022013122/55aedf151a28abbe1f8b4704/html5/thumbnails/41.jpg)
• アニメーションを簡単に作成でき、 自動でHTML・CSS・JSを書き出せます
• 作成したデザインは自動で可変にできます • レスポンシブなデザインが作成できます • 豊富なテンプレート・スクリプトを 使ったインタラクティブなモックアップ作成ができます
• 簡単にグローバルパーツを作成したり編集したりすることができます
Macaw
![Page 42: CSS Nite LP38に行ってきた](https://reader030.fdocuments.net/reader030/viewer/2022013122/55aedf151a28abbe1f8b4704/html5/thumbnails/42.jpg)
フォトショなどで製作中のデザイン画像や ラフスケッチをスキャンした画像など取り込み 開発中のデザインを複数人で共有しながら 「リアルタイムミーティング」を実現できる
InVision
![Page 43: CSS Nite LP38に行ってきた](https://reader030.fdocuments.net/reader030/viewer/2022013122/55aedf151a28abbe1f8b4704/html5/thumbnails/43.jpg)
![Page 44: CSS Nite LP38に行ってきた](https://reader030.fdocuments.net/reader030/viewer/2022013122/55aedf151a28abbe1f8b4704/html5/thumbnails/44.jpg)
InVision
言葉じゃ説明しづらい ↓
Demo!!
![Page 45: CSS Nite LP38に行ってきた](https://reader030.fdocuments.net/reader030/viewer/2022013122/55aedf151a28abbe1f8b4704/html5/thumbnails/45.jpg)
Adobe Fireworksが開発中止となりその代替ツールとして脚光を浴びた
Sketch3
![Page 46: CSS Nite LP38に行ってきた](https://reader030.fdocuments.net/reader030/viewer/2022013122/55aedf151a28abbe1f8b4704/html5/thumbnails/46.jpg)
![Page 47: CSS Nite LP38に行ってきた](https://reader030.fdocuments.net/reader030/viewer/2022013122/55aedf151a28abbe1f8b4704/html5/thumbnails/47.jpg)
HTMLやCSS、JavaScriptなどがわからない人でも
クリックだけでウェブサイトを作れるWebエディタ「Blocs」
blocs
![Page 48: CSS Nite LP38に行ってきた](https://reader030.fdocuments.net/reader030/viewer/2022013122/55aedf151a28abbe1f8b4704/html5/thumbnails/48.jpg)
![Page 49: CSS Nite LP38に行ってきた](https://reader030.fdocuments.net/reader030/viewer/2022013122/55aedf151a28abbe1f8b4704/html5/thumbnails/49.jpg)
https://dl.dropboxusercontent.com/u/2510134/aiueolabdemosite/index.html
blocs
30分で作ったというサイト
![Page 50: CSS Nite LP38に行ってきた](https://reader030.fdocuments.net/reader030/viewer/2022013122/55aedf151a28abbe1f8b4704/html5/thumbnails/50.jpg)
• Macaw • InVision • Sketch3 • blocs
有料アプリばかり!
![Page 51: CSS Nite LP38に行ってきた](https://reader030.fdocuments.net/reader030/viewer/2022013122/55aedf151a28abbe1f8b4704/html5/thumbnails/51.jpg)
効率化を測るなら 安い買い物なのかもしれない
![Page 52: CSS Nite LP38に行ってきた](https://reader030.fdocuments.net/reader030/viewer/2022013122/55aedf151a28abbe1f8b4704/html5/thumbnails/52.jpg)
終わり