サービス運営の現場から考えた、HTML5時代のwebデザイン #html5j

9月8日（土）に実施された、HTML5　conference 2012をのぞきみしました＠UST。
その中で、特に気になってたのがこもりまさあき氏による「HTML5時代のwebデザイン」のセッション。

私は一般的なUIについてはあれこれいえるものの。HTML5の側面からwebサービスのディレクションを考えるとなると、まだまだ浅学なのです。うう、お恥ずかしい！

多様化するデバイスを前に、HTML5を使った最適なコンテンツは何か、という点について語るにはまだまだお恥ずかしいレベル感です。というわけで、自分の勉強のためにまとめました。

HTML5時代のWebデザイン from Masaaki Komori

様々な端末がある現在。ユーザーにとって、最適な配信形態って？

dConstruct archive / adactio

・局所的なところではなく、もっと大きなところで
webをデザインしていく、そんな考え方のほうがよいのでは

・webを取り巻く環境が変わり始めた
閲覧デバイスの多様化も着々と進行中。アンドロイド端末は種類も豊富で、今後は家電などますますデバイスが多様化していくだろう。OSのバージョンも多様化

・数多くのブラウザに対応するには？
過去のバージョンのブラウザの存在、スマートデバイスのブラウザ、どのように対応していくのがよいのかを考える必要がある。しかも、ほいそれと切り捨てられない現実がある。そこをサポートすることはふまえつつ、未来のことも考えましょう。

・これからのwebコンテンツ配信は？
PC向けのままでいい？スマートフォンに最適化？レスポンシブ？アプリにしてしまう？最適な配信形態はコンテンツの種類や内容でかわる。何が適しているかみんなで考えることが必要。

レスポンシブwebデザイン（RWD）が話題となり、「RWDでつくるのが通常」という考え方もでてくる昨今。

@kazuhito 既に存在しているサイトなどで直ぐに移行ができないサイトなどでしょうか。基本今後の新しく作るサイトはRWDだと考えています。

— allWebクリエイター塾さん (@all_web) 9月 10, 2012

そこまで断言する方はいるものの。私はユーザーに最適な配信形態について、やっぱり迷いがある。レスポンシブは理想ではあるけど、じゃあどうやって実装するの？という点がやっぱり悩ましいのだ。

私はスマホでの購入促進のため、表示速度1秒の違いや突破率0.5%上げるためのマイクロなUIチューニングで戦っている。RWDだと幅の広いブラウザと同じHTMLをだす＝アクセシビリティの確保はできるのはわかっているが、最適なユーザビリティ、探しやすさ、価値を兼ね備えたUIを提供できるかがわからない。技術的判断の能力が低いからである。

また、サービスをデバイス問わず統合的に見る力も必要だなあと痛感してる。多少スマホでのユーザビリティが下がっても、もしかしたらPCサイトやタブレットでそれ以上のサイト価値を生み出せるのかもしれないし。

最適な配信形態とするためには、フロントの視点も、エンジニアからの視点も、両方の面が必要だと思う。
だからこその、ひとつのサービス構築に対するチーム編成ーDeNAのスクラム開発体制だったり、グリーの垂直統合モデルーがでてくるのだと思う。

分業というより統合する形が、現場の制作者として必要とされてる。私のようなwebディレクターに求められてる役割がどんどん広くなってるように感じているのは、決して間違いではないと思う。

ユーザーの利用シーンを考えたサイトづくり

The Bed As A Desk / mootown

・みんな、必ずしもPCに向かっているわけではない。帰宅時間にスマホみたり、お風呂でジップロックにいれてiPadにいれたりとか。これまでと状況が違うことを理解しよう。作ったはいいけど、見てもらえないのは意味はない。様々な閲覧デバイスを考えて、それらの利用シーンを考える。誰だって自分の環境でストレスなく見たい。

・今のwebデザインの手法、考え方を疑う。所せましと情報をならべるのはいいこと？みつけづらくない？とか。

・デバイスの多様化で、問題がうきぼりに。スマホ最適化したら、PCコンテンツとの相違が問題に。レスポンシブな実装をやってみたら、いつまでたっても表示できない。特定の機種ではうまく動作できない。

・ページあたりのデータ量は減りつつある。PC中心で考えていてはだめ。誰のためにあるwebサイトなのか？読みやすさ、わかりやすさを考える

・コンテンツにこれまで以上の価値を。HTML5で拡充されたタグをきちんと使って意味付ける。RDFa、Microdata、Micoformatsの利用。ただのテキスト以上の価値を与える。これまで見えなかった情報も見えるように。ちゃんとマークアップしていれば、検索結果にでてくるなど。

・不安定な回線環境に対応する
パフォーマンスを考慮したコンテンツの設計と実装。CSS3の採用、webフォント、SVGなど、転送に時間かかっていたもの（画像とか）を新しい技術でおきかえてよりよいパフォーマンスがでるようにする。キャッシュなどのローカルにあるデータで必要なものは活用していく。不安定な回線環境考えて制作する。

・多様なデバイスへの対応手段を覚える。メディアクエリーをつかった設計と実装を考える。日本はコンテンツ量がおおすぎ。コンテンツ量が多いサイトはレスポンシブにすることは厳しい。ピクセルパーフェクト（固定画面前提）から卒業する。縦横比率をピクセルベースで考えるのは難しいので、CSS3でおきかえパーセントで幅を指定とか。古いブラウザについても「角丸ができない」なら、角丸デザインきりすてるとかの妥協も必要。

・この先のwebを豊かにできる可能性、それを実現する術を知ろうとすることは大事。使える時期がきたら使えばいい。HTML5の動向に注目しながら、多くの人に役に立つwebサイトをつくっていこう。

利用シーンを考えると、デバイス超越したサイトの構成が必要となる。

まず、コンセプトダイアグラム＆その各画面UU数と突破率かいて、誰がどういうときに、サイトのどういうものにアクセスするのか端末ごとに考えてみたらいいんじゃないかなと思う。また、成果測定もそのコンセプトダイアグラムに基づいて考える。
※コンセプトダイアグラムについては過去記事参照「
UXとアナリティクス #ShibuyaUX に参加してきた！まとめ」

最近、社内でコンセプトダイアグラム書いて、いくつかの販促企画でログ解析をして次回施策を説明したら「わかりやすい！」って絶賛された。コンセプトダイアグラムは、職種の違う皆が見てどこがネックなのかビジュアル化され理解しやすく、かつ数値的な裏付けがあるので、施策にも皆の納得感がでるからだと思う。ECには私たちweb制作者のほか、商品開発者、マーケター、エンジニア、様々な方が関わっている。様々な職種のメンバー間で、一つの方向見てスピーディーに施策を決めていくのに有益な手法だと私は信じている。

———-

技術が日進月歩で変わっていくweb業界。
考えることは山積みで、ゼネラリストの側面持ったスペシャリストが求められるというカオスな状況になって大変ではあるけど。ブラウザのむこうにいる誰かに届けるために、日々精進したいと思う。