UI記述言語としてのHTML
キチンとすれば便利になります

@[HTML/JS/CSS] WebデザインとUX について考える

Soichi Masuda / @masuP9

自己紹介

桝田草一の写真

  • 桝田 草一
  • フロントエンドエンジニア兼ディレクター
  • @デジパ株式会社
  • 東京の会社所属、大阪でリモートワーク

はじめに

WebはHTMLでできている

  • はてなブログ, アメブロ
  • Wordpress, Jimdo
  • AngularJS, React
  • Jade(Pug), haml
  • Gmail, Kintone

etc...

HTMLを出力している or HTMLで動いている

WebアプリケーションにとってのUI記述言語
=> HTML

HTMLは簡単...


ほんとに?

まだまだちゃんとHTMLを書けていない
(適切な要素選択ができていない)ケースがあります。

基礎的なことですがおさらいしましょう。

<button>ボタン</button>

buttonには3つのtype

  • submit : formを送信する
  • reset : formの入力内容を消去する
  • button : ボタン

<button type="button">ボタン</button>


押したらクライアントサイド(JavaScript)で何かする

  • アコーディオン
  • ナビゲーションのトグル
  • データ読み込んで表示...

それ<button>

例えばアコーディオン、こんなふうに書いてませんか?

押してね!
ワオ!
dt:hover {
  cursor: pointer;
}

JSでdt.addEventListener('click', function(){hogehoge;});


押してね!

<button>にしておけば...</button>

なにも特別な事をしなくても
  • 押せる見た目に勝手にしてくれる
  • キーボードフォーカスを受け取ってくれる
  • フォーカス時の見た目もデフォルトで付与
  • autofocus属性でフォーカスのコントロールも
  • JS無しでEnterspaceで実行
  • 読み上げ時に実行可能であることが読み上げられる

様々なユースケースに対応 => UX高まる(損なわない)


HTMLすごくないですか

スマートフォンのドロワーナビ

こんなことになってませんか?

ボタンを使って

中に画像も入れられますよ

タブなどのページ内遷移を拡張する場合は
a要素のままでも

<a href="#tab1">タブ1</a>

label

スキなくだものを選択してください

  • リンゴ
  • いちご
  • バナーナ

老眼にはツラい…

スキなくだものを選択してください

リンゴ いちご バナーナ マンゴー スイカ いちじく

このポチは、スイカ?マンゴー?

label使おう


label は UIのキャプションのための要素

UIをテキストで補足、意味付け

意味的なひも付けだけでなく、UIとしても紐づく

labelをクリックで該当のinputにフォーカス or 選択
inputフォーカス時にlabelのテキストを読み上げ


JSなどで特別なことをせずに!!

CSSでさらに補強

label {
  // クリック、タップエリアを明確に
  display: inline-block;
  padding: 10px;
  border: 1px solid #777;
}

label:hober {
  cursor: pointer; // クリック可能なことを明示
  text-decoration: underline;
}

label input[type="radio"]:checked + span {
  background-color: tomato; // 選択された要素を明示
}

まとめ

UIに適切なHTML要素を選択することで
様々なユースケースに対応できます。


  • 押す => button
  • 入力UIとキャプションの紐付け => label

色んなケースでも便利に使える / 使いやすい


それってUX!

おまけ

details & summary

details & summaryもありますがブラウザの対応がツラい details&summaryのCan I Use の画面。IE,Edgeで使えない。
details & summaryもありますが details&summaryのCan I Use の画面。IE,Edgeで使えない。

menu & menuitem

Hello World

これは Firefox のみです。デモ@CodePen

おわりです