当社が制作するWebコンテンツにおける品質向上の歩みを振り返る、「品質の追求」シリーズ。その第5回では、レスポンシブWebデザインを取り上げます。
かつて、モバイルデバイスでWebを閲覧することが難しかった時代、Webコンテンツを表示させる対象としてのスクリーンは、時代と共に右肩上がりで大きく・広くなっていくものと考えられていました。その結果、デスクトップ/ノートPC向けとモバイルデバイス向けとでWebデザインを完全に切り分けて扱うことが主流となりました。ところがiPhoneという、デスクトップ向けに制作されたWebサイトであっても遜色なく表示可能なモバイルデバイスが普及し始めたことを受けて、Webデザインも変化を余儀なくされます。
そんな折、Ethan Marcotte氏がA List Apartに「Responsive Web Design」という記事を2010年5月に寄稿。以来、片手に収まるスマートフォンのスクリーンから、インターネット接続可能な家庭用テレビの40インチ以上あるスクリーンに至るまで、大小さまざまなサイズのスクリーンに同一のマークアップで対応可能なアプローチとして、レスポンシブWebデザインが急速に普及し始めました。
ちょうどその頃、当サイトのリニューアルプロジェクトが進行しており、フロントエンドの設計・実装を担当していた私は、デザインカンプがデスクトップPC向けのものしか存在しなかったにもかかわらず、レスポンシブWebデザインの採用を提案。スマートフォンでの表示は担当デザイナーとブラウザ上で確認・調整することとし、デザインカンプは作らないことで時間を節約しようとしました。
しかし、メディアクエリーを本格的に活用したフロントエンド設計は初めてのことで、トライ＆エラーにかなり時間を要したことや、レスポンシブWebデザインを前提とした検品プロセスが未定義だったこともあって、リニューアルプロジェクトは大幅に遅延。部分的ではあったものの、新しいデザインでサイトをようやく公開できたのは、2012年2月23日のことでした（当社Webサイトをリニューアル）。
お客様向けに提供する前に、まずは自社のサイトで試験的に導入のうえ評価する......というのは、レスポンシブWebデザインに限った話ではなく、これまで「品質の追求」シリーズの記事で取り上げたWeb標準準拠やアクセシビリティについても同じ。しかし思い返せば、このレスポンシブWebデザインが、自分の経験上は最もハードルが高かったように思います。
同プロジェクトでの苦労のかいあって、同じ年の4月にはレスポンシブWebデザインの提供を本格化、サービスラインナップにしっかりレスポンシブWebデザインを加えることができました。また、リニューアルの経緯を「Firefox Developers Conference 2012 in Osaka」にて講演させていただく運びにもなりました（使用スライド：ミツエーリンクス 自社サイトの取り組み）。