2016年のweb界隈の総まとめ

2016.12.31 by masahiko

CSS Nite「Shift10：Webデザイン行く年来る年」というイベントに行ってきたので、自分の感想も込みで、2016年のweb界隈・web業界にはどういったことがあったのか、まとめたいと思います。

量が量なので、けっこうはしょった部分もあります。ご了承ください。

吉川雅彦のフロントエンドエンジニア視点での感想とまとめ

今年は「フロントエンド界隈は流れが速いというが、今年はぜんぜん流れが変わっていない。目新しいものが出てきていない」ということをよく聞いていた
そのとおりだと感じた
2016年を一言でいうと、HTML5関連技術の安定
- Windowsのサポートポリシーの変更がされ
- 開発者にとってIE11以上でいいよねという流れになり
- 開発者が使える技術が増え
- そこへGoogleがモバイルの評価に力を入れ始め
- 一部の人が先行して使っていた技術を満を持して使い出し（使い出さざるをえなくなり）
- HTML5の足並みが揃い始め安定し始め、それに伴いwebサイトを刷新する企業や団体も多かった

マークアップ

仕様

HTML 5.1 勧告
障害者差別解消法が2016年4月1日施行

ブラウザ

対応ブラウザはIE11以上でいいよねという流れ
マイクロソフトがIEのサポートポリシーを変更
iOS 10 のSafariが、viewport拡大制限が無効、インライン動画再生対応
Flashがデフォルトで停止状態のブラウザが多くを占めてくる

CSS

Flexboxは、ブラウザの対応がそろったが、まだバグ多い（Flexbugs）

JavaScript

jQuery 3 が2016年6月9日リリース、IE8以下のサポートを廃止
フレームワーク、React、Vue、Angularが人気で、各々の方向性がそろってきた

ツール

Sass：DreamweaverでもSass対応、libSassとRuby Sass 3.4はほぼ100％互換性に、ompass+Bourbonでのmixin から、PostCSSのautoprefixerの流れに
PostCSS：後方互換や最適化に便利

ツールと制作環境

OSとハードウェア

Windows：Windows10 無料アップデート、ハードウェアが好調
Mac：macOS Sierra(10.12)、OS X → macOS、新MacBook ProがTouch Bar搭載

Adobe

Photoshop：ゆがみフィルター登場、コンテンツに応じるの進化
Illustrator：ピクセルパーフェクトの刷新で以前より使いやすく
書き出しの世代交代
Dreamweaver：生まれ変わる、コード編集はBrackets、CSSプリプロセッサー搭載
XD：Sketchに対抗、Photoshopでカンプ作るというよりも、こっちを推してきている

アクセシビリティ

「JIS X 8341-3」の改定、国際規格「ISO/IEC 40500:2012」（= W3C「WCAG 2.0」）と同じ内容の⼀致規格になってきた
「障害者差別解消法」の施⾏、公的機関は法定義務、⺠間事業者は努⼒義務
「みんなの公共サイト運⽤ガイドライン」の公開
HTML5とWAI-ARIAによる実装が加速

マーケティング

AMP対応

食べログなど、AMP対応
広告収益減収やURLの二重化など課題も

Googleアナリティクスあれこれ

ユーザーがどのように行動したかが見られるユーザーエクスプローラーの新機能

人口知能解析

GAにもAIによる無料のアドバイス機能（英語版）
仮説やKPIは、人間が立てなければ意味がない
自動化の流れはとめられない

マーケティングオートメーション

Hubspotがダントツのシェア 2015年36.3%
商売に必要なこと（マーチャンダイジングやフルフィルメント）をきちんとやってからでないと、ツール導入の効果は小さいかも（ほとんどメール配信のパーソナライズで終わってしまう）

SXOとモバイルファーストインデックス

SXO – Search Experience Optimization
検索体験の最適化
キーワードではなく、クエリ（現在位置とかの、言語化しにくいもの）ごとに最適化するアルゴリズムに進化していっている

広告あれこれ

Google検索、Yahoo!検索で、検索結果画面の右側の広告枠を廃止
各々機能強化
いまの時代の広告はレッドオーシャン、LTV（顧客生涯価値）にもとづく予算やKPI設定が、ますます大切に

スマホUI

2016年の主なトピックス

iOS 10 リリース、コンプレクションリダクション
動画元年
セルフィー文化

プロトタイピングツール

トランジション型：遷移に特化したツール
- InVison
- Marvel
- Prott
- POP
インタラクション型：凝った動きに特化したツール
- Pixate
- Principle
  - アニメーションなど高度な使い方ができる
- Origami Studio
  - デザイナが嫌いそう
- ProtoPie
  - タイムラインを使って
- STAGE / GALLERY
- Adobe XD

フォント

絵文字・アイコン・ロゴ

絵文字が使われだすようになる
Font Awesome 5 – 無料版と有料版
温泉など90種類の案内用のマークについて変更を検討

ツール

フォント管理ツール
- 使ってる人少ない
- FontEXplorer X Pro 6.0にバージョンアップして日本語対応
- アプリケーションの起動にかかる、探すのに時間が
フォント制作ツール
Drop&Type 2.0
海外でも、イラレで作って、フォントにする流れ
デスクトップアプリ
- お気に入りフォント機能
- イラレにも
- 類似フォントを表示（欧文フォント）
- イラレ、最近使用したフォント（設定で変更可能？）
マッチフォント
- 欧文フォントのみ
OpenType SVG
- カラーやグラデーションをもったフォントをサポートしはじめた
- コロンの位置、前後関係に依存する
- 仕様がまだ固まっていない
- 新しい流れ
ミニ字形パネル
- さいとうさんの「さい」の字をインラインで選べる

書籍

月刊MdN「絶対フォント感を身につける。2」
『+DESIGNING VOLUME 42 実践文字組み講座』
『文字を作る仕事』

OSフォントベンダー

OS
- macOS Sierra
  - 8書体
  - 11フォント
フォントワークス
- ゴスペル – EB
- エヴァンゲリオン公式フォントマティスEB TrueType版
モリサワ
- いろいろアップグレード
- タイプデザインコンペティション 2016
  - しまなみなど
Mopstudio
- ミウラFONT10年ぶりの新書体

Web Fonts

Google Fonts + 日本語早期アクセス（試験的に提供）
- Noto Sans 以外にも使える
- 試験運用なので注意
TypeSquare モリサワ
- 文字組み機能オン
CSS3
- 日本語フォントの文字組機能
その他
- Web が web に
- にじみ感、きてる
- 游ゴシック体のWindowsでのレンダリング問題
游ゴシックのにじみ問題
- 初めて共通のフォント
- 共通といいつつ、見え方違う
- OSに搭載されているウェイトが違う
- macOSはレギュラー以下がない
- normal 400で設定してもmacOS、medium500が使われる
- Windows アプリケーション（ブラウザ）によってフォントのレンダリングが違う
- ガンマ、クリアタイプ？がちょっとずつ違う
- なんとかできるけど、ややこしい

デザイントレンド

今年は

リニューアルが多かった

トレンド

ホイールアイコン
ローポリからリアルポリゴン
波の模様をあしらったデザイン
等幅フォントの新しい文脈
サイドとずれの融合
高解像度化

上半期グローバル企業

newsの面積が減少
グローバルメニューがメガメニューになってきて、押すとさらにメガメニュー
アプリからの影響でコンプレクションリダクション

上場企業

多段カラムからペライチデザインに
レスポンシブ、4段階のブレークポイント