tande lab.

HTML5 時代の Web デザイン #html5j 聴講メモ

去年9月の HTML5 Conference 2012 聴講メモを今更ながらアップ。その2。

こもりまさあきさん (フリーランス) @cipher / @proteanbm によるセッション。

HTML5 時代にどういうことを考えながらデザインしていくべきか、について
物腰柔らかい話口調で話されていて、とても惹き込まれるセッションでした。

関連記事

Web デザインするってなんだろう?

"Web デザイン" という言葉は難しい。
職域によってもその意味は難しい。

  • Photoshop で画面をつくること?
  • 適当に HTML で書いておけばいい?
  • ぐりぐり動かせればいい?

Web に関わるそれぞれの立場で "Web デザイン" の捉え方が微妙に違う。

これからの Web デザインとは

  • 局所的なところだけでなく、もっと大きなところで考えていく。
  • これまで以上に広範な知識が必要になるかも。
  • みんなで Web デザインしていく、そんな考え方のほうがいいのでは?

世界は変わり始めている

ちょっと前まで、これからはブロードバンドだ!at 自宅

だったものが

  • 外出時も3G回線で接続するスマートフォン生活が当たり前に。
  • ディスプレイはどんどん高精細化。
  • 閲覧デバイスも多様化。
  • スマホはOSも多様化。

etc…

どんどん未来は変わってく。
過去も大事だけど、未来も見ながらデザインを考えていく必要がある。

これからの Web コンテンツ配信は?

  • PC向けのままでいいのか?
  • スマートフォンに最適化?
  • レスポンシブな実装でいくか、アプリにするか。
  • 最適な配信形態、コンテンツ種類、内容は、コンテンツ次第。

どっちが良いとか悪いとかの話ではない

"何が適しているか、みんなで考える"

特定の職域の人だけで考える話ではなく、最初の段階で様々な人が関わって決めていかないといけない。
必ずしも PC に向かってネットしているわけではない、というライフスタイルも変わってきている。

これまでと状況が違うことを認識しよう

  • 作ったはいいけど、見てもらえないのであれば意味はない。
  • 閲覧環境の変化をきちんと理解する。
  • 様々な閲覧デバイスの存在、利用シーンを考えること。
  • 新しい技術 (HTML5など) とどう付き合っていくか。

Web の根本にあることを見直そう

本来、HTML は閲覧環境に左右されず情報を取得できることが大事。
Web が本来もっている性格、そこを改めて考え直す良い時期。

誰だって、自分の環境でストレスなく見たい!

Web の体験がより豊かになるように

今の Web デザインの手法、考え方を疑ってみる

  • 所狭しと情報を並べることが果たしていいことなのか?
  • 見た目がキレイとか面白いだけで表示が遅くていいのか?
  • クライアントの望みを忠実に再現すればいいのか?

ランディングページはこんな感じ!
とかサンプルが載ってるサイトとかあるけど本当に、これでいいのか?

今は良しとされている、いいデザインと言われているものも
本当にいいのものなか?を改めて疑ってみてもいい。

デバイスの多様化で、これらの問題が浮き彫りに

  • スマートフォンに最適化したら、PCサイトとの相違が問題に。
  • レスポンシブな実装をやってみたら、いつまで待っても表示されない。
  • 特定の機種でうまく動作しない。

ページあたりのデータ量は減りつつある

世界のサイトと比べても、日本のサイトは1ページ上の掲載コンテンツが多いほう。
世界的な潮流として、コンテンツは少なくなる。

今までと考え方を変える必要あり

PC 中心の Web サイトから、モバイル中心の Web サイトへ。
いわゆる、モバイルファーストの時代に突入しつつある。

誰のためにある Web サイトなのか

読みやすさ、わかりやすさ、使いやすさ、アクセスのしやすさ。
表層的な部分だけに偏重にならず、目には見えにくい部分を考えること。
それもデザインのひとつ。

クライアントの Web サイトを作っている場合は、その先にいるお客さんのことを考える。

これからの未来に向けてできること

HTML5 で拡充されたタグをきちんと使って意味付けを明確に

HTML5 だけに言えることではないが、今のうちからちゃんと意識してやっておくべき。

PDFa, Microdata, Microformats の利用

今まではただのテキストだったものに、少し書き足すだけで、別の価値を持たせることが可能に。
ex. Google 検索結果に表示されるようになった "Rating"

パフォーマンスを考慮したコンテンツの設計と実装

ex. 最近アップデートしたFacebookのアプリもパフォーマンスが改善したことで話題に。

CSS3 の採用, Webフォント, SVG

コードで表現できることはコードで。

.appcache などの利用

デバイスローカルにキャッシュとして保存するものを指定できる。

さまざまなデバイス・環境に適応できる設計と実装

ex. Media Queries を使う。

ピクセルパーフェクトからの卒業

そろそろ、ピクセルパーフェクトのデザインから卒業する時期。

今までは固定画面でデザインカンプを出すことが多かったが、今後は固定画面ではついていけない。
デザインつくるより、HTML 書いたり、JavaScript で書いたほうが早い、という案件も増えている。
CSS3 で置き換えられるものは置き換えていくようにしたほうがいい。

旧来のブラウザへの対応

見た目がどこまで一緒である必要があるのか?
どこまで妥協するか、線を引くかが重要。
全てに同じ見え方を要求すると、コストだけが膨らむ。

例えば、Modernizr を使うとかで対応していく。など。

まとめ

今まで良しとされてきた、その価値観を壊すぐらいに、先を見て知見を貯めておく。
今スマホが流行っているので、スワイプの動きとかつけたがるけど、本当にそれ必要なの?とか。

そういう考え方・技術を常にウォッチしておいて、
使える時期がきたら使えば良い。