サイト内検索

なぜデザイナーが HTML5 に関心を持つべきなのか

この記事は、html5doctor に掲載されている記事「Why designers should care about HTML5」を日本語訳したものです。

一部、直訳ではなく意訳した部分がございます。原文と表現が異なることがございますので、ご了承ください。この本日本語訳には、翻訳上の誤りがある可能性があります。したがって、内容について一切保証をするものではありません。正確さを求める場合には、必ず各記事の原文を参照してください。当方は、この文書によって利用者が被るいかなる損害の責任を負いません。もし誤りなどを見つけたら、当サイトのお問い合わせより連絡いただければ幸いです。

なぜデザイナーが HTML5 に関心を持つべきなのか

私たちみんなの関心は薄かったものの、しばらくしてから、HTML5 は最終的に関心を引くものにふさわしいものとなった。開発コミュニティ(代表的なものとして SuperFriends があげられる)は、仕様の実践的な要素を議論したり、賛否両論の要素を含めるかどうかを議論したり、私たちが HTML5 を解き放つことができるタイムフレームを決めたりするようになってきた。

しかし、Post-It、sketch、.psd といった世界に慣れてしまった私たち、そう、– デザイナー – は、あまり主張することはなかった。おそらく、私たちは、CSS3 の華やかさや、それらの表面的なスリルに惑わされていたのだろう。(やれ、丸い角だ!、グラデーションだ!、透明だ!と。)そうでなければ、私たちは @font-face の奴隷状態になっていたということだ。適度なウェブ・タイポグラフィの時代になることを待ち望んでいたのだろう。

無理もなかろう。しかし、デザイナーも HTML5 でエキサイトする時がきたのだ。

ある程度は、それも実践で使えるようになってきた。あなたのデザインの雰囲気、つまり、ビジュアル、ウェブ・インタラクション、ユーザ・エクスペリエンスが何であれ、ネイティブなテクノロジーを知っていれば、もっといい仕事ができるようになるのだ。指揮者がオーケストラの楽器の素質を理解していなければいけないのと同じように、デザイナーはウェブの言語を理解しておく必要があるのだ。

しかし、HTML5 は、単に私たちのスキルを研ぎ澄ますだけではない。私たちがウェブをデザインする方法に大きな違いが出てくるのだ。

セマンティックな要素

インフォメーション・アーキテクト(広義に捕らえれば、ユーザー・エクスペリエンス・デザイナーも)は、HTML5 の新要素によって血が騒ぐに違いない。 – <nav>, <header>, <aside> などだ。それらはすぐに今日のウェブに変革をもたらすものではないが、将来のための投資なのだ。情報を伴ったものを使いやすくするということは、IA の中心的なテーマだ。そして、それゆえに、その実践者は、マシン可読なセマンティクスが提供するだろう新しいエクスペリエンスの先端にいるに違いない。HTML5 は、私たちに、<div>だらけの世界よりはもっと意味がある方法でテキストをマークアップできるようにしてくれる。つまり、私たちは、まもなく、サブページレベルで現れるアプリケーションを見ることを意味するのだ。私たちは上っ面だけを見始めたに過ぎない。Operator toolbar や、iGoogle のカスタマイズ可能な UI を考えてみてほしい。しかし、私たちは、セマンティクスをリッチにすることで、どのような形でエンド・ユーザーにベネフィットをもたらすことができるのかを考えて、デザインを掘り下げる必要があるだろう。

API と、その他の拡張

現時点では、HTML5 の API には、完成には程遠いものもがあるのは確かだが、それらに磨きがかかれば、新たな魅力的な機会とチャレンジを私たちに与えることになるだろう。

位置情報サービスのデザイナーなら、当然、geolocation API が計り知れない価値を持っていることがわかるだろう。contentEditable 属性は、JavaScript や独自のインタフェースに頼らずに、ウェブを本当の意味で読み書き可能とするパワーを私たちに与えてくれる。新たに規定された input のタイプ(type="search" など)は、入力機能において、これまでになかった視覚的な刺激を提供することができる。もちろん、これは、ブラウザーメーカーがどのようにそれを実装するかに依存する。

今までは、私たちの分野を、表示域とウェブサーバに限定されたものとして簡単に考えることができた。しかし、HTML5 は、シームレス、つまり、デスクトップとオフラインとオンラインのエクスペリエンスの違いをなくす方向に向かっている:たとえば、ドラッグ・アンド・ドロップ API は、オンラインとデスクトップの違いが曖昧になるのがわかるだろう。ローカル・ストレージは、ネット接続が貧弱な場合でも、ウェブと同じようなエクスペリエンスを実現することができるだろう。このひとつにまとめられるということは、明らかに良いことだ。しかし、私たちは、ユーザーのリクエストで、それらの隠されてしまった継ぎ目をどうやって見えるようにするのかについても、考案しなければいけない。ユーザーは、彼らの位置がどうやって投稿されるのか、そして、どんなデータが彼らのマシンと同期されるのか、を把握するべきなのだ。

<video>, <audio>, <canvas>

標準の世界と Flash の世界の間には、よく言われるような溝があることは確かだ。これらの新たに導入されたメディア要素(特に <canvas>)の到来を、Adobe の申し子の死の前触れと見る人もいる。

私は、これは有望とも魅力があるあるとも思わない。どちらのテクノロジーもパーフェクトではない。もちろん、Flash はプロプライエタリであるがゆえに、ブラウザーとユーザーの間に立つサード・パーティの気まぐれに支配されることになる。<canvas> は、アクセシビリティに問題があることが分かっている。しかし、それら 2 つは、もし私たちがそれぞれの強みを引き出せるなら、どちらも共存できるのだ。現在の Flash アプリケーションには、<canvas> のほうが適しているものもある。特に、グラフ、アニメーション、インフォグラフィックのようなダイナミックなビジュアライゼーションだ。アプリケーションの中には、Flash のパワフルな能力の恩恵を受けるものもあるだろう。ゲームや重いインタラクティブ・ウィジットだ。

話はそれるが、リッチなメディア要素を実行するために、外部プラグインに依存する必要がないという点においては、確かに、ユーザー・エクスペリエンスのベネフィットはある。そして、<video><audio> 要素を持ち上げるられるのを見るのは、おもしろいだろう。当初は、そのインタフェース要素を取り込んで定義することは、ブラウザー・メーカーの肩にかかることになるだろうが、私たちは、毎日のウェブ・エクスペリエンスにそれらを統合する方法を理解する必要があるだろう。幸いなことに、それらは他の HTML 要素と同じようにスタイルできるのだ。もし、あなたの映像美学がボックス・シャドーを伴う傾斜イメージに頼っているなら、同じことをビデオにも簡単に適用できるのだ。

とはいうものの、私たちは不都合な真実を無視することはできない。イバラのコーデック問題だ。きっと、誰もが、それを早く解決してほしいと思っていることだろう。

デザイナーに何ができるのか?

かなり忍耐強く細部にこだわるデザイナーでない限り、仕様のすべてを読んで、WHATWG メーリングリストでさらに細かい点を議論したいと思わないだろう。それは、まったくデザイナーの役割ではない。

しかし、コミュニティとして、私たちが HTML5 について語り始めることは大事だ。もし、あなたが初めて HTML を触るのであれば、それを学ぶにはもってこいのタイミングだ。このサイトの記事HTML5 のプレビューは、HTML5 とそれ以前との違いに関する有益なガイダンスとなる。前述のとおり、デザイナーは、ディベロッパの友人と語り合うべきだ:このテクノロジーに関してもう何もいうことがないなんていう革新派は、ほとんどいないはずだ。彼らは、実践における変革をどう見ているのだろうか?私たちは、HTML5 の到来に向けて、私たちのサイトを準備するために、何ができるのだろうか?私たちはウェブをもっと良い場所にするために、どうやって、その長所を生かした構築できるのだろうか?

私たちはまだ、HTML5 を使って何を成し遂げられるのか分からない。しかし、ウェブのボキャブラリーがこれを強烈に変革するということは、めったにないことだ。私たちは、今から準備すれば、ユーザーのオンライン・ライフにイノベーションを持ち込む大きなチャンスとなるだろう。

この記事は Cennydd の個人ウェブサイト Ineffable で合同で投稿されたものです。