ブログ

「HTML5を使うためのプログレッシブエンハンスメント〜すべての人に確実に情報を届けるために〜」に参加してきました。

7月13日にApple Store,Ginzaでおこなわれた「HTML5を使うためのプログレッシブエンハンスメント」に参加してきました。

ざっくりと(!?)アジェンダ

前置き

  • プログレッシブエンハンスメント:開発手法
  • <ruby>要素を例にフォールバックという考え方を説明
  • HTML5の解説。HTML5=Markup+API

Web(ウェブ)とは

  • あらゆる対象に情報を伝える。
  • あらゆる対象に同じUXを見せようとしている。
  • チラシは誰が見ても同じには見えないが、Webでは同じように見せる必要が無い。同じように見せたいのなら画像で十分。
  • クロスブラウザ対策:あらゆる対象に同じUXを提供する。
  • Webとは、本来同じUXを伝えるものではなく、確実に上を伝えること。
  • 本来のWebは非メディア依存。
  • HTML5で意識されているのは、「マルチデバイス」。スマートフォン・たぶれっと・テレビなど。
  • リフローが前提(スクリーンやサイズに応じて変形自在)。
    リフローをメリットと認識した上でWebを作成。

同じUXは美徳?違いは悪徳?

  • 違うことは悪いことではない。紙媒体の場合は問題だが。
  • プログレッシブエンハンスメント=違いを受け入れること。
  • スマートフォン時代には、あらゆるデバイスを見ることは不可能。

開発アプローチ

  • 開発アプローチ:Progressive Enhancement/Regressive Enhancement/Graceful Degradation
  • 手段:Fallback
  • 特性表現:Unobtrusive Scripting
  • Unobtrusive Scriptingの解説〜Jsは控えめにつつましく/JSが機能することを前提にしない。JS万能論で考えるな、JSはおまけだ。
  • JSで使うのが良くない例[1]:history:back()を使用した解説/改良版ソースの解説。
  • JSで使うのが良くない例[2]:サブメニューの動的生成。
  • 3つの開発アプローチの解説。
  • アプローチの違いについて:UXのレベル・機能実装渡に応じて。

Regressive Enhancementの解説

  • 古いブラウザには同等の機能をあらゆる手段を使って気合いでエミュレート
  • JSライブラリ(jQueryなど)を使う。
  • 非常に高コストゆえに自作は厳しい。
  • 例:VideoJS(http://videojs.com/)

Graceful Degradationの解説

  • Fail Safe/Fault Tolerant
  • デグレートして代替機能を提供
  • HTMLのフォールバック機能が有効
  • てっとり早いが、万能ではない
  • 問題がある(UAが新しいブラウザでJSオフの時に見られないときがある)
  • 要素フォールバックのポイントの解説

Progreiive Enhancementの解説

  • 必要最低限の機能を用意
  • あらゆるUAで利用可能
  • UAの能力に応じて機能拡張/CSS/JSによるUXをアドオン(追加)
  • UAの能力に応じて機能拡張/最新のUAなら最高の見た目で
  • すべてのUAに情報を伝えて、UAに応じて見た目を調整する

その他

  • 実例紹介
  • 定義の解説
  • まとめ(優先順位を間違えない):アクセシビリティが最優先
  • まとめ(優先順位を間違えない):ユーザビリティをアドオン(追加)

感想など

プログレッシブエンハンスメントなどは言葉でよく聞いても、くわしく解説を聞くのが初めてだったので非常に勉強になりました。PC案件だとお客様だけでなく、ディレクターなどにも納得してもらうのが現状だとなかなか難しい部分があります。

スマートフォン案件では納得してもらうことが多いような気がします。見栄えの差をどう納得させていくかが、切り捨てなのか、JavaScriptなどで補完していくかが違いですが、将来的には見栄えの差を切り捨てていくほうにしていきたいです。

このあたりは、実際に見栄えが違いますって納得してもらうのが難しい部分もあるのかな。日本だとどうしても「納品」などといってWebサイトも工業製品のようにとらえる雰囲気があるのでこれからどう意識を変えていくのかが問題ですね。ディレクター・デザイナー・マークアップエンジニアが楽をするためにも(そしてその余力をもっと別のものに使うためにも)、どうかえていくかが大切だと感じました。

ゆめいろデザインへのお問い合わせやお見積もり依頼はこちらから。
お客さまのニーズにあった提案を行い、パートナーとして共に成長することを目指しています。