品質の追求（その6）レスポンシブWebデザインの検品
エグゼクティブ・フェロー 木達
前回、品質の追求（その5）からの続きです。レスポンシブWebデザインを採用し当社サイトをリニューアルしたその翌年、マルチスクリーン・デザインの標準提供開始についてというニュースリリースを発行。2013年10月以降、お客様から特別に指定のない限り、すべてのWebプロジェクトにおいて多様なサイズのスクリーンに対応したビジュアルデザインを提供することにしました。
このニュースリリースで、マルチスクリーン・デザインという、業界的にほとんど使われておらず一般的にも耳なじみが薄いと思われる言葉を使っていますが、それには明確な理由がありました。上述のニュースリリースより、「マルチスクリーン・デザインとは？」の見出しに続く内容を以下に引用します：
Webサイトを表示可能なデバイスのスクリーンには、大きさのみならずタッチ操作の可否や精細度等において、さまざまなものがあります。それら全てに対し、完全ではなくともスクリーンの特性に対応した一定の見やすさと使いやすさを提供し得るデザインを、マルチスクリーン・デザインと本リリースでは定義します。レスポンシブWebデザインは、マルチスクリーン・デザインを実現する手法の一つです。
レスポンシブWebデザインが登場するより前から、リキッドデザインと呼ばれる手法が存在しました。リキッドデザインに基づいても、PCとモバイルの別を問わず、コンテンツをさまざまなスクリーンに対応させることはできます。しかし、どちらの手法を採用するかは重要ではなく、さまざまなスクリーンに適合できるデザイン特性を表現したいという意図で、あえてマルチスクリーン・デザインという言葉を使った次第です。
とはいえ実態は、リキッドデザインではなくレスポンシブWebデザインを採用するケースがほとんど。従い、当たり前品質にマルチスクリーン・デザインを加えるにあたり、具体的にはレスポンシブWebデザインをどう検品するか、その手法の開発であったり、検品に着手するために制作者からインプットが必要な情報の定義、またそれら一連のルール化と社内浸透が求められました。
基本的にはWeb標準準拠、フルCSSレイアウトが当たり前となった以降に標準的なプロセスとなった2段階方式、つまりモジュール（UIパーツ）に対する検品と、それを使用したWebページに対する検品と、それぞれ分けて行う点に変わりはありません。しかしレスポンシブWebデザイン固有の要件として、特定のスクリーン幅でUIないしレイアウトが変化する、ブレイクポイントの存在があります。
そこで、想定する最小ビューポートやブレイクポイントを定義する際、合わせてレファレンスポイントと社内的に呼ぶところのスクリーン幅を定義、検品に用いるようにしました。レファレンスポイントとは、UIないしレイアウトが一定の状態を維持する範囲における、代表的な幅を意味します。
あらゆるスクリーン幅において意図されたビジュアルデザインが実現できていることを目視確認するのが理想ですが、検品にそこまでのコストをかけることは事実上困難です。ゆえに、レファレンスポイントでの目視確認を原則とすることにより、検品に必要な工数と制作物の品質のバランスを取った格好です。
もともと、ブレイクポイントはそう多く定義するものではなく、表示上の調整と呼べる程度のマイナーな変化を加えるものを除外すれば、1カ所（モバイル向けとデスクトップ向けの2パターンを包含するデザイン）か2カ所（スマートフォン、タブレット、デスクトップそれぞれを意図した3パターンを包含するデザイン）のケースがほとんどで、落とし所としてうまく機能しているように思います。