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