女子にやさしい「第40回HTML5とか勉強会」に参加してきたよ #html5j

2013/7/26 イベントレポート

テーマ「これからのWeb制作で大事なこと」として開催された勉強会に参加しました。デザインや運用、マークアップの役に立つお話を聞けましたよ。

html5
会場は渋谷ヒカリエのLINE株式会社さん。テンション上がるインテリアでした。
line corp1 line corp2

「見た目以上に大事なこれからのデザイン」

秋葉秀樹さん：株式会社ツクロア

問題提起：ある大手銀行の残高照会画面
初期表示で期間が「 2013/6/1〜2013/4/9 」ってなってる。これって…
デザイナーの価値って見かけだけ？

今日話したいこと：デザインを「時間」で考える

検索結果０ゼロをデザインしてますか？
検索結果が見つからなかった時のことを考えているか？

ダミーテキストの弊害
一瞬キレイに見える、しかし…
マージン・余白がキレイに整っている。→ 実際に文字が入ると揃わなくてごちゃごちゃ
ダミーテキストは実は都合の良いデザインスキマどうする
高さを揃えて省略した場合、はしょった分を読んでいる人もいる
サンプル画面を作る時ダミーテキストではNG。ダミーテキスト撲滅運動！！

HTML5Videoを使った動画サイトデザイン
足りない何かが…
動画が終わった時にどうするかが書いてない
デザインを時間で考えると、「再生が終わった後は何を表示する？」

ユーザーによる編集が不可欠なUI
例えばTodoアプリ
手がかりが乏しいロングタップ（長押し）「三」のアイコンを長押しすると並び替えができる場合
並び替えできることをどうユーザーに伝えるか？
何秒で並び替えを可能にするか？
ロングタップを気づかせるしくみはないか？
Android版Firefoxはバイブレータ鳴動がJavaScriptでできる

慣習に従うのも大事
チェックボックス左右の違いは？
ON/OFFは右側、左側は複数チェックした物をゴミ箱など編集機能がある場合

まとめ
デザインは人の行動に寄り添う
よって時間と共に変化する意識を持とう

ダミーテキストは撲滅するべし

手段を限定せず、あらゆる問題解決にチャレンジしよう

見た目以上に大事なこれからのデザイン from Hideki Akiba

★ダミーテキスト撲滅運動に一票！！私もきれいな紙芝居HTMLをもらって、実際に文字列を入れたらガタガタというのには何度も遭遇しましたので…。

「”観察”から始めるJSコーディング – スマホサイトの制作実話を元に」

一條美和子さん：産経デジタル

・何のためにWebサイトを作るのか？
ビジネスのため。利益を出し続けなくてはならない。不用意に止まらせてはならない。止まれば機会損失。
止まらせないためには、「想定外」をなくしていくことが必要。
トラブルだけではなく、要求に早く適応することも求められる。
そこで制作に必要になるのが「観察」
案件発生時だけではなく日々の運用の中でも見ていく。

・公開サイトのJS作成は4ステップ
まずは要求ありき
企画：こんなことがしたい！ → JS制作
でも、とにかく作ればOKではない。
観察→設計→実装→検証の4ステップを回していく

・何を”観察”する？
２つの要素
サイト（インフラ・コンテンツ）＆ユーザー（アクション：どんな行動をとっている？）

例）サイトのインフラ：
ページ生成の仕組み→HTMLができる？動的に表示？
URL構成→スマホページURLは独立？
CMSでHTMLを生成しているので、HTML上の何かを変えたくてもサイト全体を一気に変えることは不可能。出力済みファイルは「置換」作業が必要。
ある１日に生成されたページ量：４３０ページ
昨年末：計１８０万ページと膨大すぎる

サイトのコンテンツ：
同一ページに同じデザインのパーツが出ないとは限らないコピー&ペーストで使われることもしばしば
細かいデザイン調整
iOS：「ホームへ」 Android：「ブックマークへ」の文言出し分け

ユーザーのアクション：
閲覧環境、見ている時間、見ている状態、見ている場所、気分
観察対象は２つある
　-アナリティクス数字
　-会社社内の人　マイナス評価の点も指摘してもらえる
滞在時間 1:21秒直帰率 56.40% さっと見ている

・どんな観察結果が反映されているか？
http://goo.gl/nNvKoD ← ここにコードの例

-ニュースのリスト、ページングじゃなくてツイッターみたいに画面変えずに内容を表示したい
-ページ表示速度を速めたい
-ロード完了後に強制スクロールアップはやめて！
-過去ファイルの置換はなるべく避けたい
-GAのコード

ビジネスで一番おそろしいのは機会損失。避けられるようにしましょう。

★トラブルだけではなく、要求に迅速に応えられないことも機会損失であると。全くそのとおりです…。

「HTML5マークアップビギナーの良くある質問にズバリ答えます」

羽田野太巳さん：有限会社futomi/株式会社ニューフォリア

・article要素はどこで使えばいいの？
「Feedの記事の単位にふさわしいコンテンツ」
フィードを知らない？ → ニュース記事、ブログ記事、報道発表にarticleを使いましょう
それ以外は全部section要素に
間違って使うくらいならsection要素が無難

・要素を全部覚えないとダメ？
1200… 中学校の英単語の数たぶんみなさんの時代は900。これだけは皆覚えて来た。
108… HTML5の要素の数覚えられる！上から全部！
使うのは2割程度だけどボキャブラリーとして知っておく必要がある

・最短マークアップがかっこいい？
<! DOCTYPE html>
<titile>タイトル</title>
<body>
これでも文法はOKで最短
でも、<html>が無い、<head>が無い、</body>が無い
メンテナンスする人のことも考えて
こんなくだらないことを覚えるヒマがあるなら、もっと大事なことを覚えましょう

・div厨かっこ悪い…お前もな…
HTML5ではsection厨現る
sectionはレイアウトのために使うのではない
<section>をsexy modern <div>だと勘違い
・スタイルのフックに<section>を使う
・見出しが伴わないブロックに<section>を使う
div厨はかっこわるいが害は少ない
section厨は弊害だらけ div厨よりたちが悪い気をつけましょう

・これも何かしら意味づけしないと…
セマンティクス症候群
マークアップはセマンティクスが大事
この意識が強すぎてヘンテコなマークアップをひねり出す人、若しくは、悩みすぎて納期に間に合わない人を指す
<hgroup>
<h1>メインタイトル</h1>
<h2>サブタイトル</h2>
</hgroup>
<hgourp>の廃止を受けて
　サブタイトルはどう扱うべきか悩む
　いろいろテクニックをひねり始める
　そして思いつく…　<small>
治療法
・これは使用を考える人がやることで、あなたの仕事では無い
・苦労の割には役に立ちません
・HTML5には「サブタイトル」というセマンティクスの要素が無いことを理解すべし
・無いものを無理にひねり出さないこと（108個知らないと無いということが分からない）
・もっと気楽になろう
<h1>メインタイトル</h1>
<p class=”sub”>サブタイトル</p>
どうしても完治しないあなたへの処方箋
・Microdata HTML5.0からは削除される予定、HTML Microdataという拡張仕様として存在予定
・WAI-ARIA アクセシビリティの強化、役割や状態を定義
こっちを勉強した方が役に立つ