本記事は、アーカイブに保存されている過去の記事です。最新の情報は、公益社団法人日本印刷技術協会(JAGAT)サイトをご確認ください。
2013年7月19日、クロスメディア研究会ではレスポンシブWEBデザインをテーマにセミナーを開催した。同テーマを研究会で取り上げるのは3回目。今回は数多くスマホ向けサイト制作を手掛けるエイチツーオー・スペースのたにぐちまこと氏に、レスポンシブWebデザインのメリット・デメリット、そしてタッチデバイス向けの最適解について伺った。
レスポンシブWebデザインとは、スマホやタブレット、パソコンといった画面サイズが違うデバイスでも、ひとつのHTMLで対応できるWebサイトを制作する手法を指す。タッチデバイス(スマホ・タブレット等のモバイル端末)からのWebサイト閲覧が増えたことや、Googleが1URLであるレスポンシブWebデザインを推奨したことで注目されるようになった。
ワンソースですべてのデバイスに対応できる、コスト削減になる、というメリットが強調され、今後はレスポンシブWebデザインになっていくとも考えられがちだが、現時点ではそうでもないようである。たにぐち氏が大手64サイトを調査したところ、実際にレスポンシブWebデザインを採用しているのはわずか1サイトであった。大手サイトで採用しているところもあるが、主流ではない。
その理由として複雑なレイアウトの場合は制作が煩雑になり更新の手間もかかるため、思うようなメリットが得られにくい点が挙げられる。またユーザー側から見てスマホとPCでサイトに表示される要素が異なる場合があり必要な情報が探しにくいことがる。これらの要因からレスポンシブWebデザインは、それほど普及はしていないと考えられる。
しかし次々と新たな端末が登場し、Webを閲覧する環境は増えていく。そこで解決策として、たにぐち氏は、「がんばらないレスポンシブWebデザイン」をすすめている。レスポンシブWebデザインは「ワンソースであるべき」という限定的な考え方をやめ、スマホ用とパソコン用はソースを分けた上でタブレットとスマホは共通のソースで部分的にレスポンシブWebデザインを取り入れる、といった柔軟な使い方をしていくやり方だ。制作手法にとらわれず、クライアントが何を求めているかを把握して課題を解決できる方法を選択するのが現実的である。
すでに用意されているBootstrapやFoundationといったライブラリを使うという選択肢もある。ひながたとして提供されているデザインを用いることで、簡単かつ短期間にサイト制作ができる。さらに変更も簡単で、デザインもタッチデバイス用に最適化されている。しかし装備されている機能に制限があるなどのデメリットもある。
さらにライブラリを使うことでサイト制作のワークフロー自体も変化する。いままでは設計→デザイン→コーディング→プログラミング、という流れでサイトを制作していたものが、設計者が直接ブラウザ上で設計と同時にコーディングを行い、それを何回か繰り返した上でデザインやプログラミングを進めていく。このような制作プロセスを「Designing in the browser(デザイニング イン ザ ブラウザ)」と呼んでいる。
もうひとつは「スマホ対応しない」という方法である。Appleのサイトが典型的で、ほか大手メーカーサイトやECサイトで見られるデザインだ。PCでみるとパーツが大きく大味だが、スマホ・タブレットでみるとちょうど良いサイズになっている。タッチデバイスを基準にサイトを設計し、部分的に各デバイスごとの対応をしていく手法は、スマホ対応しない、というよりもPC対応しない、ともいえるものだ。
最後にたにぐち氏は、「これからのWeb制作は、タッチデバイスで見られることを想定した上でサイトを設計・制作していくことになる」と述べ、「サイト制作側は、文字やパーツは大きく、画像も高精細な画面で見ても見栄えが悪くならないようなサイズを用意するといった対応が求められるようになってくる。そしてもっとも大切なのは、クライアントにとって何が必要なのかを見極めること、そしてタッチファーストという考え方でいくことである。」と締めくくった。
(JAGAT 研究調査部 中狭亜矢)