本記事は、アーカイブに保存されている過去の記事です。最新の情報は、公益社団法人日本印刷技術協会(JAGAT)サイトをご確認ください。
多様な画面サイズのデバイスにワンソースに対応するための手法としてレスポンシブWebデザインがある。
スマートフォン・タブレットを持つ人が一般的になり、Webサイトや電子書籍もパソコン以外で見る機会が増えた。そこで多様な画面サイズに対してそれぞれ別のサイトを用意するのではなく、ひとつのサイトで複数画面に対応するための手法としてレスポンシブWebデザインが注目されている。これは、スマートフォンやタブレット、パソコンといった画面サイズが違うデバイスでも、ひとつのHTMLで対応できるWebサイトを制作する手法を指す。
クロスメディア研究会では、スマートフォンと電子書籍、それぞれの切り口でのマルチデバイス対応についてエル・カミノ・リアルの木寺氏と境氏に話を伺った。
木寺氏は、もともとケータイ業界においてJavaの標準化やシステム開発に携わっており、キャリアごとにプログラムが変わるのではなく、1つのプログラムでどの端末にも対応できるプログラムの重要性を感じていた。そのため、2年ほど前にレスポンシブWebデザインのことを知ったときに「これだ!」と感じたという。
レスポンシブWebデザインを取り入れることで、ひとつのHTMLを更新することですべてのデバイスに対応するサイトが出来上がる。デバイスごとに複数のサイトを用意する必要がなくなるという大きなメリットとチャンスがある。
小さい画面のスマートウォッチから大画面のスマートテレビまで、適正なレイアウトでWeb画面を表示することができる。横サイズでレイアウトが変わるので、まだできていないデバイスの対応も可能だ。
必要なのはHTML5とCSS3のみというシンプルさ。サーバ側でOSやデバイスごとに振り分ける必要はなく、フロントの変更だけでよいので時間と開発コストの削減になる。また1URLであるということは、SEOの観点からみてもメリットがある。
さらにマルチデバイスに対応できるということは、デジタルサイネージへも応用できる。たとえば、ある若者向けファッションビルでは、レスポンシブWebデザインのコンテンツをデジタルサイネージで表示し、同じURLをそのままスマートフォンへ送ったのち、ECサイトへ誘導することもおこなっている。
最近ではいかにもサイズによって可変するかのような3段組みレイアウトではなく、一見そうとは見えないカタログのようなレイアウトなのにレスポンシブWebデザインになったりするWebサイトも登場している。
Webに初めてレイアウトという概念を持ち込んだのがレスポンシブWebデザインだと考えている。画面サイズごとに画像の配置やボタンの大きさを変えたり、表示するコンテンツ内容自体も変えていくなど、今後は、印刷物のレイアウトからWebまで1人の担当者がレイアウトする時代がやってくると考えている。
またスマートフォンアプリの分野から見ても、現在はダウンロード型のアプリを作る人がほとんどであるが、流れとしては将来的にブラウザベースに変わると考えており、アプリでもレスポンシブWebデザインが主流になっていくだろう。
電子書籍では、大きく分けて画面サイズにより文字の折り返しが調整されるリフローと、紙面イメージをそのまま表示する固定レイアウトがある。スマートフォン・タブレット(特にアンドロイド端末)は画面サイズも解像度も多種多様であり、どうやって見せるかが課題になっている。
文芸書や文字中心の書籍ではリフローで画面サイズに合わせた表示ができるが、マンガ、絵本、雑誌のようなレイアウトが凝っているコンテンツでは固定レイアウトが主流で、スマートフォンの小さな画面では見にくい。さらに固定レイアウトでは画像になっているため検索ができない、といった問題がある。
EPUBの仕様はひとつだが実装はさまざまであるため、ビューワーによって見え方が異なる。EPUBの汎用ビューワーは複数のOSで提供されているが、実際の振る舞いは開発者に依存していたり、仕様のすべてを実装しているわけではない。そのためリフローであっても画面サイズが変わったときに、画像のテキスト回り込みが崩れたり、図版が切れたりしてしまうといったことが起こる。そのため回り込み指定を行わなかったりする対応が必要になる。
固定レイアウトでは、異なる画面サイズでも読みやすくするための取り組みもされている。ボストングローブ紙のアプリでは、リフローと固定レイアウトが切り替えられるハイブリッド方式を採用しており、新聞レイアウトそのままの紙面イメージをダブルタップするとリフローに切り替わる。ほかにも記事を音声で読みあげる機能や翻訳、記事の共有機能などを実装している。
アップルiBookdtoreでは、高解像度のビデオ埋め込みが可能になったり、テキストと音声を同期したり、アプリに近い電子書籍を提供できるようになっている。iBooks Aouthorという制作支援ツールを提供し制作をサポートしている。
アマゾンKindleでは、アップル同様ビデオ埋め込み(ただし見れる環境が限られており、現状ではiOSかKindle Fireでしか見ることができない。)、固定レイアウトで一部がズームできるパネルビューなどの機能を実装している。KindleGen、Kindle Previewerといった制作ツールを提供している。
さらについ先日、Kindle Comic Creatorというマンガをkindle用コンテンツに変換できるツールがリリースされた。これによっていままでは大変だった固定レイアウトの作成が簡単にできるようになった。今後は個人でも出版ができるKDPで写真集やマンガが増えると考えている。ワークフローも変わっていくと思う。
最近では、高度なことをEPUBで実現したり新しい電子雑誌の見せ方も検討されている。
拡張レイアウトでは、円グラフや鳥のカタチに沿って文字を流し込むなど、いままでできなかった凝ったレイアウトもCSSで表現できるようになった。
アマゾンが提供しているWhispersync(ウィスパーシンク)という同期機能では、電子書籍とオーディオブックを一緒に購入した人が、自宅で電子書籍を開くと、通勤途中でオーディオブックで読んだ途中から開くことができる。電子書籍コンテンツ自体は拡張せず、シンプルな構造でデータサイズも小さく、永続性の高さを保つ。Whispersyncやクラウド連携といった他のメディアと連携しながら新しい機能を提供していこうという動きである。
電子書籍では、異なる画面サイズや高度な技術を採用したコンテンツを快適にみられるような対応が求められてくる。たとえばKindle向けに画像サイズを小さくしたコンテンツを制作していると、フルHDになると画像の解像度が高くて画像がぼけてしまう。Retinaに対応しているコンテンツを従来のものと比較すると一目瞭然である。価格を上げてでも高解像度版を出したほうがよい。
いまは既存の本を電子書籍化していくのに一生懸命になっている段階であるが、どうすれば収益をあげられるか、ということが非常に重要である。「電子ならでは」の機能を付加しないと、電子コンテンツの利用者が止まってしまうのでいろいろな試行錯誤が数年前から続いている。今後は新しい本のカタチを考え、提案し、具現化していくことが重要である。
(JAGAT 研究調査部 中狭亜矢)