ウェブを構成するUIの品質とHTML

2017年3月18日@Frontend Conference 2017

Soichi Masuda

自己紹介

• 桝田 草一（ますぴー）
• @masuP9
• 株式会社サイバーエージェント
• フロントエンドエンジニア アクセシビリティおじさん(兼務)

生放送がログイン不要・高画質で見放題のプラットフォーム

ここから本題

ウェブサイト/アプリのUIの品質を高めたい

1

ウェブサイト/アプリのUIの品質ってなに？

分けて考えてみましょう

ウェブサイト/アプリのUI

画面のすべてがUI

• リンク
• ボタン
• 画像やテキストラベル
• ページ全体

すべてがユーザーとの接点

ウェブのUIって

1

UIができるまでの簡易フロー

0. サーバーがHTML(CSS,JS)を配信
1. ブラウザがHTMLを受け取りDOM(Document Object Model)を構築
2. CSSと組み合わせてレンダリング処理
3. (必要なら)JSがEventや振る舞いを追加

ウェブのUIはHTMLを基にして作られている

最近はJSから直接DOMを構築することも多いですが

UIの品質ってなんだ

品質ってなんだ

提供される製品やサービスについて、買い手側である顧客（消費者）が求める特性との合致度

↓

ウェブのUIにおける、ユーザーの体験

ウェブのユーザーって

加えて多様な人々、様々な利用環境

ウェブのUIの品質とは

多種多様なユーザー(や端末)が様々な環境で UIを使用した際の体験の総量ではないか

UXの総量

1

特定のユーザーのみがUIを使用した時のUXは

UX = y

多種多様なユーザー、又はデバイスがUIを使用した時のUXは二変量に分布

ターゲットであるペルソナが得られるUXを頂点とした場合、他ユーザーが得られるUXはペルソナとの近似度に従って下がる

多種多様なユーザーが様々なデバイスや様々なコンテキストでUIに触れた時のUXは

多変量に分布する

多次元空間の大きさ = 品質

頂点は複数、また時間とともに移りゆく可能性も

ここまでのまとめ

ウェブのUIの品質

多種多様なユーザー(や端末)が様々な環境で UIを使用した際の体験の総量

ではないか(私見)

HTMLのお話

HTMLは品質のどこに寄与するか

基礎的品質 / ロングテール的品質

HTMLがUIの基礎的品質を担う。

基礎的品質

まず使えるということ

品質を高めるHTMLの書き方(DOM構築の方法)

HTMLをなるべくHackしない

• 適切な要素選択
• 適切な要素順
• 適切な属性値の記述

適切な要素選択

ex : button

<button type="button">Button</button>

<div class="button">
<span class="sr-only">Button</span>
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>

<button>を再現するためには

• tabindex属性によるフォーカスの受け取り
• :focusのスタイル実装
• role="button"によるセマンティクスの補強
• onKeyPress(Space, Enter)などのキーボードEventトリガーの実装
• disabled属性による操作不可の実装

すべてを実装しないとそれぞれのユースケースで品質が下がる

<button>使おう

1

適切な要素順

ex : モーダルウインドウ

bodyの末尾にモーダルつけちゃう

const button = document.querySelector('button');
const modal  = document.createElement('div');

modal.innerHTML = '<p><a href="#">Link in Modal</a></p>';

button.addEventListener('click', () =< {
  document.body.appendChild(modal);
});

See the Pen mWqgZz by Soichi Masuda (@masuP9) on CodePen.

button押した時にフォーカスをモーダルに移して上げる必要がある。

でもDOMの順序に気をつければ…

See the Pen jBaobb by Soichi Masuda (@masuP9) on CodePen.

DOMの順番を自然な流れで構築しよう

適切な属性値の記述

ex : img要素のalt属性

素直に書けない場合

現在のHTML仕様では機能不足なこともある

WAI-ARIA

マークアップ言語に不足しているセマンティクスを提供する

詳しくは昨年の発表を

大事なのは、HTMLに足りないものを補うこと

より高い品質を目指して

SPA(Single Page Application)のページ遷移

CLIENT SIDE OF █████FRESH.TV 2016.04.05 - Node学園 20時限目 @ahomu

覚悟が必要

品質を保つための考え方

HTMLをなるべくHackしない

Hackするときは覚悟を持って💪

ありがとうございました

• slack-reaction-decomoji by o_ti
• Mangaloo（マンガルー） - マンガ素材活用サービス
• This is the Web by Brad Frost
• Extended HTML WAI-ARIAとMicrodataでHTMLを拡張する
• CLIENT SIDE OF █████FRESH.TV 2016.04.05 - Node学園 20時限目 @ahomu
• SPAと覚悟

最初に戻る🏠