なぜインブラウザー・デザインへの移行が必要なのか?

on 2013-04-18 (4 years ago) by 石橋秀仁

QxilというQ&Aサイトで、藤原由翼さんが興味深い質問をしていました:

皆さんはWebデザイナーのキャリアやスキルセットは今後どうあるべきだと思いますか? (どうあることを期待されているかという経営者視点でのコメントもお待ちしています。) – 藤原 由翼さんの質問

最初に「スキル不足なウェブ・デザイナー」から考えてみることにしましょう。「可変サイズを想定していないレイアウト」「ピクセル単位でない」「CMYKカラー・モデル」などのカンプをデザイナーが作るせいで、マークアップ・エンジニアが無駄な苦労をするハメになる。そういう苦労話(あるいは笑い話)はよく聴きます。ここには「デザインとテクノロジーの関係についての本質」が見え隠れしていると思います。そのあたりから考えていきましょう。

最初にこの文章の内容を要約しておきます。

  • メディアの技術的側面を理解し、その特性を活かすことが、より良いデザインに通じる。
  • ウェブ・デザイナーはインブラウザー・デザインを習得する必要がある。

では、始めましょう。

デザインとテクノロジーとメディアの関係

デザインにとって重要な課題は、デザインの対象となるメディアの技術的側面を理解し、その特性を活かすことです。

印刷物を扱う優れたデザイナーは、紙というメディアを熟知しているはずです。様々な紙の種類や寸法を知り、インクや製本も知って、それらを適切に用いるはずです。つまり、印刷テクノロジーについての理解に基づいてデザインするはずです。

同様に、ウェブを扱う優れたデザイナーは、ウェブというメディアを熟知しているはずです。HTTP、HTML、CSS、JavaScriptを知り、それらを適切に用いるはずです。つまり、ウェブ・テクノロジーについての理解に基づいてデザインするはずです。

ですから、良いウェブ・デザインのためにはウェブ・テクノロジーへの理解が欠かせません。

ウェブというメディアの特性

ウェブは「見た目の一貫性」を保証せず、「意味上の一貫性」を保証するメディアです。簡単に言うと、次のようなことです。

ウェブというメディアは、「Photoshopで作ったデザイン・カンプ通りに、ユーザーのブラウザーに表示されること」を保証しません。デバイスによって見た目が変わってしまいます。例えばユーザーのOSとブラウザを特定しても、ブラウザーの機能で「文字サイズを拡大」などの操作ができてしまうわけです。見た目の決定権がユーザー側にもあります。

ウェブというメディアは、「コンテンツの意味がきちんとユーザーに伝わること」を最大限に保証します。ユーザーのデバイスによってコンテンツの「見た目」は変わりますが、なるべく同じ「意味」を伝えようとします。これがウェブというメディアの技術的特性です。

レスポンシブ・ウェブ・デザインとインブラウザー・デザイン・アプローチ

ウェブというメディアの技術的特性と積極的に向き合うことで、多様なデバイスに対応することができるようになります。その代表的な手法が「レスポンシブ・ウェブ・デザイン」です。レスポンシブ・ウェブ・デザインは、ウェブというメディアの特性を活かしたデザイン・アプローチの好例です。

スマートフォンの機種が無数に出現してくる現代、すべての機種に個別対応していくことは非現実的です。むしろ「どんなデバイスからアクセスされても、一貫した意味を伝えるデザイン」にする必要があります。そこで、セマンティック(意味論的)なマークアップと、レスポンシブ・ウェブ・デザインのような手法が必要になります。

次に、セマンティックなマークアップと、レスポンシブ・ウェブ・デザインを実現するためのワークフローを考えましょう。私の考えでは、インブラウザー・デザインが答えです。

インブラウザー・デザインは、「最終成果物をブラウザーで閲覧するのだから、最初からHTMLやCSSを書いて、ブラウザー上で確認しながらデザインしていけばいいじゃないか」というアプローチです。ウェブの技術的特性を活かした、筋の良いアプローチだと思います。

インブラウザー・デザイン側から従来型手法への批判

歴史的に考えると、インブラウザー・デザインは従来型ワークフローへのアンチテーゼになっています。ここで批判されているのは「Photoshopによるデザイン・カンプ」や、「清書されたワイヤ・フレーム」といった「中間成果物」に偏重した手法です。

まず、デザイン・カンプ通りに(つまり「ピクセル・パーフェクト」)に実装することは、可能でもなければ、望ましくもありません。見た目の決定権はユーザー側にもあるからです。

また、デザイン作業の中間成果物のほとんどは、デジタルデータとして最終成果物に直接組み込まれるわけではありませんし、制作完了後にもメンテされない「ゴミ」になってしまいます。つまり「無駄」が多いのです。 1

他にはどのような言論があるでしょうか。例えば “Tips for Designing in the Browser” (Webdesigntuts+) では、従来型手法の問題点を、次のように指摘しています:

  • Photoshopでのデザインは固定幅ベース
  • ユーザーエクスペリエンスをデモできない
  • 作業の重複
  • 時間の無駄
  • デザインした通りの見た目にはならない

歴史的経緯として、従来型手法は、印刷物のデザイン・ワークフローに由来しています。従来型手法は「見た目の一貫性」を重視します。ということは、ウェブというメディアにふさわしい手法ではないのです。そのうえ、実際には「見た目の一貫性」も実現されないわけですから、手法として筋が良いとは言えません。

インブラウザー・デザイン手法の習得

従来型手法に馴染んだ人にとっては、インブラウザー・デザインが「難しい」と感じられるかもしれません。ただし、その「難しさ」はインブラウザー・デザイン自体の難しさではありません。これまで学んできたことをいったん捨て、改めて学び直すこと(反学習)の難しさです。ですから、「いったん分かってしまえば、とても簡単に感じられる」ということが往々にしてあります。

最後に、インブラウザー・デザインを習得する必要性について、さらなる一押しを加えておきます。インブラウザー・デザインはウェブというメディアの技術的特性を活かしたデザイン手法です。ならば、ウェブというメディアの技術的特性が大きく変わらない限り有効であり続けるでしょう。ということは、これは一過性のブームではないし、「離陸」できずに失墜するような「ハイプ」(誇大広告)でもありません。ですから、長期的には移行は不可避ですし、それゆえ学習は無駄になりません。 2

あとがき

「ウェブ業界」は二つあります。

ウェブ制作系」あるいは「広告系」のウェブ業界では、デザイナーは、コーポレート・サイトやキャンペーン・サイトなどを中心に手がけます。一方、「サービス系」のウェブ業界では、デザイナーは、アプリケーションやサービスをデザインします。いわゆるネット・ベンチャーやウェブ・スタートアップが属するのは後者の「サービス系」です。

どちら側に属しているかによっても、見える「世界」は異なります。私自身は両方を理解しようと努めてはいますが、基本的にはサービスとしてのウェブ開発に従事しており、そちら側のバイアスがかかった意見であることは表明しておきます。

「ウェブ制作系」と「サービス系」という二分法は、「ドキュメントとしてのウェブ」と「アプリケーションとしてのウェブ」という対立構図とパラレルです。この構図は、HTML5を紹介するときにもよく引用されます。つまり、HTMLの後者(アプリケーション)の側面を強化したものがHTML5だという説明の仕方です。HTML5では、ドキュメントとアプリケーションの両方を、以前よりうまく扱うことができるようになりました。それによって、ドキュメントの領域とアプリケーションの領域がシームレスにつながってきます。今後はドキュメントとアプリケーションの両方を手がけるウェブ・デザイナーが増えるでしょう。言い換えると、「ウェブ制作系」と「サービス系」のウェブ・デザイナーのスキルセットは重なっていくでしょう。

現状では、これら「2つのウェブ業界」の間での、人や知識の交流は案外少ないと思います。ぜひ「もう一方のウェブ業界」のイベントにも参加してみて頂きたいと思います。また、エンジニアの勉強会に参加することで、インブラウザー・デザインの理解が深まるかもしれません。ぜひ「越境」してみてください。

HTML5は「二つのウェブ業界」の架け橋になるでしょうか。それは私たちがその橋を渡るかどうかにかかっています。

謝辞

この文章を書くきっかけを与えてくださった藤原さん、この日に「インブラウザーデザイン勉強会」を企画してくださった「こけむさズ」の石嶋さん、講師のこもりさんに感謝します。

履歴

  • 初版:2013年4月18日
  • 第2版:2014年12月16日
  1. あらゆるドキュメントをムダだと言っているわけではありません。もちろん必要なドキュメントがあります。運用・保守のためのドキュメントは、制作完了後にも参照されます。あるドキュメントが「ゴミ」かどうかを見分けるポイントとして、「最終成果物と共にメンテナンスし続けるドキュメントなら、それはゴミではない」と言うことができます。

  2. 「インブラウザー・デザインは、ウェブというメディアの技術的特性が大きく変わらない限り、有効であり続けるでしょう」と書きました。では、「大きく変わる」とはどういう状況か、想像してみましょう。Google Glassのような、従来型の「ブラウザー」とはまったく異なるタイプの「ユーザー・エージェント」の普及が想像できます。そうなれば、インブラウザー・デザインと「イングラス(in-glass)・デザイン」を併用するのかもしれません。いずれにせよ、ウェブというメディアでは「見た目の一貫性」よりも「意味上の一貫性」ほうが重要です。つまりは、「レスポンシブ・ウェブ・デザイン」よりも「アクセシビリティ」のほうが本質的あり、「セマンティックなマークアップ」の意義が失われることはないでしょう。