WCAN 2017 Springに参加してきたのでメモ。


WebデザインのトレンドとAdobe XDのススメ

アドビ システムズ 株式会社 轟 啓介さん

Webデザインのトレンド

  • モバイルフレンドリー(モバイルファースト)
  • ディスプレイに高解像度化によるWebフォント, SVGの多様
  • ミニマルデザインの浸透(フラット、マテリアル、メトロ)
    • 「UI < コンテンツ」 不要なものを削ぎ落とし、必要な部分を際立てるデザイン
    • 「色彩とタイポグラフィー」
  • マイクロインタラクション(装飾的なアニメーションの使い方からUX的なアニメーションの使い方)
    • UI自体が主張するアニメーション

UIからUI/UXへ

UIの均一化から脱するUI/UXデザイン

  • プロトタイピングの登場

プロトタイプ

プロトタイプのメリット

プロトタイプは1000回の会議に匹敵する

プロトタイプとは?

誰かのフィードバックを得るために作るもの

デザインカンプではダメ?

想像力豊なクライアントは少ない

= デザインカンプだけではわからない事が多い

良質なフィードバックを得るためには「触れるもの、動くもの」を作るのが近道である。

プロトタイプなしの場合

ほぼすべてのプロセス完了時に「動くもの」に触るから効率が悪い
手戻りのリスクが発生

プロトタイプありの場合

早い段階で「動くもの」ができる
早い段階での検証に入れるので、精度の向上に時間をさける

さくっとプロトタイプを作れるツール「Abode XD」

  • ベータ版なので無料
  • UIデザイン(ワイヤーフレーム、デザインカンプ)
  • プロトタイプ(画面遷移、インタラクション)
  • 共有が簡単に行える(フィードバック、コンセンサス)

Adobe XDのおすすめのポイント

  • とにかく軽い
  • そうとう簡単
  • さくさく早い(操作性、機能)
  • 楽しい

XDの実演

  • デザインボードでデザイン
    • リピートグリッドで繰り返し表示が簡単にできる
    • 解除しない限りはリピート状態を保持する(幅が狭くなれば改行してくれる)
    • テキストファイルをD&Dですぐに反映
    • 画像をD&Dですぐに反映
    • 背景ぼかしですぐに画像にブラー効果をつけられる
  • プロトタイプボードに切り替えるとプロトタイプを実行できる
    • ボタンの遷移先などをアートボードごとに結びつけることができる
    • トランジション、イージングを設定できる
    • 前のページに戻したい場合は「一つ前にボードに戻る」を使うと便利
    • プレビューを録画することもできる(ユーザテストに使える)
    • 「オンラインで共有」するとXDがなくてもプロトタイプを実行する環境を作ってくれる
    • 2回目以降は差分で反映してくれる
    • コメント機能があるのでそこにフィードバックを残せる
    • アートボードにコメントをピン留めできる
    • 「解決」でタスク管理
  • スマホアプリと連携
    • PCのXDとスマホのXDで画面を同期させることができる
    • PCのXDのレンダリング部分のみスマホ版にそのまま移植してある
  • デベロッパー向けの機能
    • PNG, SVG, PDFで書き出し
    • Web, iOS, Androidにチェック入れると2, 3倍でも書き出せる

XDの開発背景

  • クオリティは最初から1.0レベル
  • クオリティを担保するために機能を絞って開発している(バグを極力減らすため)
  • 短期リリースを繰り返しユーザーの声を反映させている(1ヶ月で1機能追加ペース)
  • ベータ版だが、現時点で開発を中断する予定はない
  • 完成させた状態でベータ版として出すことで、バグ報告以外のフィードバック(ユーザーのアイデア)が返ってくる
    • UserVoiceというフォーラムを設立、機能リクエストやバグ報告ができる
    • 投票機能もある
    • 進行状態も確認できる

将来的な機能

  • デベロッパー向けAPIも準備中
  • ブラウザからアートボードにアクセスできる(フォントサイズなどの情報を抜き出せる)
  • スタイルガイドの自動生成
  • CC Library(アプリ間でのアセットの共有)
    • Photoshop(画像編集) -> XD(プロトタイプ)への連携もスムーズになる
  • Visual Versioning(デザインのバージョン管理、変更箇所だけが差分としてクラウドにアップされる)
  • リアルタイムコラボレーション(アートボードの共同編集)
    • コンフリクトを防ぐために作業中はアートボードがロックされる
  • Design with Real Data (Google DocなどのWeb上のデータをリンク・インポート)

XDをコアにしたUI/UXワークフロー

それぞれがシームレスに連携

  • 高度な画像編集 Photoshop
  • 高度なイラスト Illustrator
  • UI/UXデザイン XD

XDのUIデザインはXDでデザインされている

  • XDは当然XDでデザインしている
  • PhotoshopをXDを使ってデザインしているという現象

サンプルから学ぶ
https://blogs.adobe.com/creativestation/web-max-japan-2016-xd-features-and-roadmap


最近のフロントエンド事情(2017年)

株式会社トゥーアール 西畑 一馬さん

Webの多様化

ビジネスの延長にWeb(アプリ)があるのではなくWeb(アプリ)前提にビジネスが展開されるようになった

これまでのビジネスが消滅したわけではない

Webで解決できる領域は爆発的に広がっている

HTMLトレンド

とりあえずHTML5を覚えよう

  • HTML5.1が最新の仕様(2012年草案、2016年勧告)
    • picture要素とsource要素が追加
    • 画像のレスポンシブ対応に最適
    • IE11以外の主要ブラウザで使用可能
      • ポリフィルで対応可能
    • srcset属性によるレスポンシブ対応も可能
    • 高解像度画像がキャッシュされている場合はそちらが優先される
    • h1問題
    • 見出しに関してはランクを分けて書く(h1, h2, …)
    • details要素, summary要素, menu要素, menuitem要素が追加
  • HTML5.2(2016年8月に草案)
    • dialog要素の追加, keygen要素の削除

W3Cの仕様策定プロセス

  1. 草案
  2. 勧告候補
  3. 勧告案
  4. 勧告、W3C勧告

HTML Living Standard

  • W3C「HTML5を標準に」
  • WHATWG「HTMLは進化し続けるべきだ」

HTML5、HTML LSそれぞれ使える要素に違いがある

SEOのトレンド

  • スマホ対応していないと検索結果に影響してくるようになった
  • モバイルフレンドリーテスト
  • レスポンシブWebデザインの重要性が増加
  • パフォーマンスも検索結果に影響

スマートフォン対応方法

  • レスポンシブWebデザイン
  • 動的配信
  • セパレートURL(sp.xxx.com, xxx.com/sp)

評価に影響はない…らしい

レスポンシブWebデザインは危険

  • デザイナーが独創的なグリッドを作り始めたら危険信号
  • 多少実装をわかっている人が設計(デザイン)しないと壊れる

パフォーマンス最適化

  • リクエスト数の制限
  • ファイルサイズの軽減(js圧縮など)
  • リクエストタイミングの調整(body直下にscript配置、lazyloadなど)

WebP image formatを利用

  • Googleが開発
  • 圧縮率が高いのでパフォーマンス向上を見込める
  • Chrome, Operaくらいしか対応していない
  • 読み方は「ウェッピー」

SVGを利用

  • とにかく軽い
  • 極力SVGにしておくとページの表示を早くできる

HTTP/2

  • HTTPの新しい仕様
  • ロードできるファイルの量が増えた(100個以上)
  • ファイルを分ければ分けるほど高速化を見込める
  • ほぼ全てのブラウザで対応

CSSトレンド

  • CSS3
    • 普及している
    • 各機能ごとにモジュール化、草案→勧告というプロセス
  • CSS4
    • 一部の機能はすでに使える
  • CSS Flexible Box が普及し始めている
    • ほぼすべてのブラウザで動作
    • Anrdoid4.4からブラウザが大幅に進化(Blinkの採用)
    • Microsoftのサポートポリシーが変更
    • 最近だとIE9もサポートが切れ、IE11しかサポートしないという結果に
    • モダンライフサイクルポリシー(MSがレガシーな環境を切り捨てようとしている)
  • cssnext
    • 拡張メタ言語、未来の文法を先取りできる(新しい仕様を体験できる)
    • postcss-apply
    • postcss-calc
    • postcss-nesting
    • cssnextは未来の学習コストに充てられる
    • でもSASS/SCSSのほうが機能は充実!
    • PostCSSとして提供されている
    • Autoprefixer
    • Style lint
    • cssnano
    • CSS MQPacker(media queryをひとまとめにしてくれる)
    • gulpとPostCSSは分けて使っている

CSS設計

CSSは壊れやすい

解決アプローチ

  • OOCSS(クラスの分割)
  • SMACSS(モジュール管理)
  • BEM(クラスの命名規則)
  • ECSS(モジュールの粒度)

これらを組み合わせて案件の最適な設計を模索しよう

スタイルのコンポーネント化

  • JSのコンポーネント化の概念をCSSにも取り入れる
    • Bootstrapなどが有名
  • スタイルガイドジェネレータ

Atomic Design

パーツをそれぞれ細かく分けて、それを組み合わせてデザインするという最近流行りのデザイン手法

JS, CSS, デザイン全てでコンポーネントという概念が普及しつつある

JSのトレンド

読み物:2016年にJavaScriptを学んでどう感じたか

jQuery使わなくても良いのではという風潮

  • JavaScriptを使っているサイト 74.1%
  • jQuery 72.1%
  • 非jQuery 3%

jQueryまだまだ最強!

フレームワークの登場

でもjQueryは自由にかけすぎてしまう…

  • ある程度ルールを統一するために
  • jQueryを始めAngular, Vue, Reactなど登場
  • React.jsはパフォーマンスを求めた結果生まれた
    • 仮想DOMの採用
    • 差分変更なので速度が早い
    • jQueryとは相性は悪い(仮想DOMはjQueryの変更を打ち消してしまう)
    • jQueryと仮想DOMは一緒に使わないのがお作法

jQueryは今後も活躍するけど、フレームワークのことも考えて非jQueryでの実装も学ぶ必要がある。

ES6 = ES2015

  • 様々な機能が追加
    • Class構文、Allow関数…
  • ブラウザが対応していないと使えない?
    • 拡張メタ言語でコンパイルすることで使えるようにする
    • Babel
    • 現場でES2016以上で書ける
    • TypeScript
      • 型宣言が行える
    • Webpack
      • ビルド環境の構築に利用

アクセシビリティのトレンド

  • 障害者差別解消法が施行
    • アクセシビリティ対応が義務化
  • WAI-ARIAが施行
    • VoiceOverなどの支援ソフトに対応させる
    • 実演 area-live=”polite” で中身が読み上げられる
  • WCAG2.1草案
    • 主にモバイル系のアクセシビリティが強化

開発環境

エディタ戦国時代

開発環境の多様化

.editorconfig

  • プロジェクトごとにルールを決められる
    • インデントはタブか、改行コードは何か、など
    • 設定しておくとエディタが自動で変換してくれる

バージョン管理

  • Git
  • GitHub
  • git-flow

コミュニケーションツール

  • slack / chatwork / skype

to-Rさんの環境

  • node.js(ndenv)
  • npm(簡単なタスク)
  • lite-server(ローカルサーバー)
  • Webpack(JSのモジュール管理)
  • Babel(ES2015+の変換)
  • SCSS
  • PostCSS(CSSの整形)
  • Pug
  • gulp(複雑なタスク)

まとめ

  • Webが解決する領域が多様化している
  • フロントエンドに求められることも多様化
  • 少しずつでもキャッチアップしていこう