2016年のweb界隈の総まとめ

2016年web界隈・業界

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

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

Shift10:Webデザイン行く年来る年(CSS Nite LP50)

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

  • 今年は「フロントエンド界隈は流れが速いというが、今年はぜんぜん流れが変わっていない。目新しいものが出てきていない」ということをよく聞いていた
  • そのとおりだと感じた
  • 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でカンプ作るというよりも、こっちを推してきている

アクセシビリティ

マーケティング

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段階のブレークポイント