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

お役に立ったらポチっとな

  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存
  • 1017

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

・何を”観察”する?
2つの要素
サイト(インフラ・コンテンツ)& ユーザー(アクション:どんな行動をとっている?)

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

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

ユーザーのアクション:
閲覧環境、見ている時間、見ている状態、見ている場所、気分
観察対象は2つある
 -アナリティクス 数字
 -会社 社内の人 マイナス評価の点も指摘してもらえる
滞在時間 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 アクセシビリティの強化、役割や状態を定義
こっちを勉強した方が役に立つ

・video要素って便利!ホントか?
コーデック問題 H.264 vs web m
ブラウザによってサポートが違う
すべて解決できる方法 → YouTubeを使えばいいんじゃない?

まとめ
かっこつけて無理に新要素を使わない
間違って使うくらいなら使わない方がいい
ひねらない、素直に楽にいきましょう!

★div厨の例には笑いました。要素全部覚える…!

勉強会紹介と懇親会


・HTML5とか勉強会forビギナー
・GTUG Girls
・Web先端技術味見部
・Rails Girls
・html5jえんぷら部
・ブラウザー勉強会
・html5j鹿児島女子部
・F-site
の皆さんからの紹介LTがありました。

懇親会ではスパークリングワインが振る舞われたので、めったにアルコールを飲まない私もお相伴にあずかりました。
第40回は「女子にやさしい」がテーマだけあって、女子がいっぱいいておしゃべりできて楽しかったです!

酔った勢いでLINE株式会社さんのレゴブロックをいたずらする参加者の図

line corp3

スピーカーの著書(Kindle版あり)

この記事を書いたのは

しゅうまい(@shumai)です。 新しいこと楽しいこと不思議なこと、わくわくすることが大好きです。MacBook Pro 15inchとiPhone 7 Plusの大画面コンビでブログを更新しています。→ 詳しいプロフィール

お役に立ったらポチっとな

  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存

最新情報はフォローしてね♪