今年 5 月末に Wired 誌の iPad 版が発売された。発売当初の熱気が落ちついた今でも、販売数としては十分満足できるレベルにあり、紙媒体との共食いも起きていない。とりあえずは新しい市場の創出に成功した、と出版社では考えているそうだ。アドビにとっても、iPad 版 Wired は電子出版ソリューションへの最初の取り組みであり、Adobe Digital Publishing Suite のベースともなった重要なプロジェクトだ。
MAX 2010 では、Wired on the iPad のデザインが出来上がるまでの過程を、実際にプロジェクトに関わった 2 人のデザイナーから聞く機会が提供された。以下その内容を紹介したい。
Wired のデザインについて語る Bruce Bell（左）と Justin Van Slembrouck（右）
出版の間隔によりデザイン要件が異なるという。今回は月刊誌の出版ワークフローをターゲットとして作業が行われた
デジタルマガジンとは何か？
まず、なぜ iPad をターゲットとしたのか、という話題からセッションは始まった。
初期のデジタルマガジンは、単純に印刷された誌面をブラウザー内に再現したものが多かった。これでは、ズームイン／ズームアウトの繰り返しが基本操作となり、読み手にやさしくない。雑誌のデジタル化にあたっては、コンテンツだけでなく、スクリーン表示に適したインタラクションの提供も求められる。
それでは、「読み手に最適な環境を提供できるデバイスは？」と考えてみると、Kindle の大きさは魅力だが、雑誌が必要とする表現力を持っていないし、スマートフォンは高機能だが画面が小さすぎる。つまり、雑誌閲覧に適切なフォームファクターと機能を兼ね備えたデバイスは、新世代のタブレット第 1 段である iPad を待つ必要があったという訳だ。
ブラウザ内に表示された電子書籍。印刷用のデザインそのままのため、拡大しないと文章を読むことができない
Kindle は表現力不足
ノート PC は大き過ぎ スマートフォンは小さ過ぎ ネットブックは "ちゃち" 過ぎ
ところで、そもそも「雑誌」とはなんだろうか？ Justin 曰く、「雑誌は、歴史的に文化の一部を担ってきた。単に何かを知らせるだけでなく、人々のものの見方に影響を与えるものだ。従って、雑誌は単にページ上に表現される要素、すなわち "文章＋写真＋グラフィックデザイン" ではない。どのような情報をどのように編集して、それをどのように読者とコミュニケーションするか、という点が雑誌の本質だ」
各誌独特のテイストが表現された表紙
そのため、現在のデジタル技術を前提として最適化された雑誌を "再発明" するという志を掲げて、協業をいくつかの雑誌社に持ちかけた。そして、まず最初の一歩を踏み出すための、最適なパートナーとして選ばれたのが Wired 誌だった。
Wired とのエクスペリエンスデザイン作業
"デジタル版 Wired" のデザイン作業は、両社のチーム間の緊密な双方向コミュニケーションの元で行われた。アドビチームが雑誌の編成会議に参加して助言する一方、Wired チームがアドビのデザイン会議に出席してはフィードバックする。話が進む中で、プロジェクトの目的とされたのは、以下の 4 点だ。
- Wired 誌の個性である、ビジュアル表現、エディトリアルデザインを、デジタル版でもできるだけ同じように再現する
- 新しい広告の形を追求し、デジタルの利点を活用しつつ、紙媒体の広告との対応もとるように
- 新しいオーサリングツールが必要になるが、現在の制作ワークフローにできるだけ影響しない使い勝手を実現
- 読者を第一に考える。特に何かを学ばなくとも、コンテンツが閲覧できる操作性を提供
これらの目的の達成に必要な情報を取得するため、デザイン作業に先立って、実際の雑誌デザインや構造の監査、制作ワークフローの確認、編集スタッフのスキルや働き方の調査が行われた。
Wired 誌のスタッフとは様々な形のコミュニケーションが行われた
4 つの版のデザインを比較。ページデザインがテンプレート化され、アセットが再利用されていることが分かる
Wired 誌の構造を可視化した図。雑誌のナビゲーションを着想するヒントとなった
コンテンツの操作性を考える際、最も気を使ったのは雑誌の閲覧手順だそうだ。紙の雑誌ではページをめくることでコンテンツを移動するが、画面上では上から下にスクロールしてコンテンツを読むのが慣習となっている。そこで、各記事は縦に読み進め、記事間の移動は横に、という操作方法が考案された。
記事が横に並びページは縦に並ぶ構造。左はデバイスを縦に持ったとき、右は横に持ったとき
また、デジタル版の出版ワークフローの検討も行われた。全体のワークフロー、各スタッフの作業共に、従来から大きく変わらないことが重要視され、アドビのツールがどのような機能を提供するべきかという議論も行われた。
デジタル版の出版ワークフローを想定して描かれた図
ビジョンプロトタイプ
「紙の雑誌では印刷されたページがユーザーインターフェースだ。読者は誌面とインタラクションする。デジタル版でも同様のインタラクションをできるだけ再現したかった」と Bruce は語る。「一方、役に立ちそうな機能やツールも提供したかった。そこで、画面上部にツールバーを配置して、補助機能を使えるようにと考えた。また、画面下部に "Scrubber" と呼んでいるナビゲーションを置いて、雑誌の全ページを一気にプレビューできるようにと考えた」
その他にも、雑誌の構成が一覧できる表示機能や、目次のようにインデックス化された記事を表示する機能、検索機能や、ソーシャルネットワーキング機能の画面デザイン案も紹介された、いずれの機能もロードマップに組み込まれており、順次実装される予定だという。
一番最初のデザイン案。上部にはツールバーを配置
下部の "Scrubber" ではページをプレビュー付きで一覧できる
左から、ブラウズビュー、インデックスビュー、ソーシャルネットワーキング機能のデザイン案
制作開始
ビジョンプロトタイプがほぼ出来上がった頃、iPad が発売され、実機を確認しながらの制作作業が開始された。プロトタイプとしてデザインした UI は、制作レベルへと見直され、iPad のスペックに合わせてタッチ領域を始めとする各パーツの大きさや振舞いの再デザインが行われた。
また、このタイミングで、コンテンツの構造に応じたインタラクションパターンについても検討が行われた。コンテンツの構造を大きく 4 種類に分けて、それぞれに適したインタラクションがデザインされた。
コンテンツについては、ビデオ等のリッチメディアが積極的に採用される一方で、イラストレーションの多くは静的なまま使われた。ストーリーのサポート、あるいはエントリーポイントとして使用されるグラフィックスは、インタラクションを追加しない方が適切、という判断だ。
ただし、ストーリの中心をなすグラフィックスに関しては、インタラクティブなコンテンツとして再設計されているものがある。Wired 誌の編集者の言葉を借りれば「タブレットでは、読者がコンテンツを受け取るだけでなく、自らコンテンツの世界に参加して経験できるようになる」ためだ。
最終的なデザインスペックより
コンテンツの種類に応じたインタラクションパターンの整理
Wired 誌の特徴でもあるイラストレーション。デジタルでもそのまま
紙媒体の火星の特集。各地点と結びついたストーリーが紹介されている
iPad 版では読者が火星を回転してストーリーを発見する
将来に向けて
今後の方向性として、まず紹介されたのはデジタル誌の制作環境。Adobe Labs に公開された Digital Publishing Suite のベータだ。InDesign® CS5 と連携して iPad 用の雑誌制作が可能になる。自社ブランドで雑誌を売りたい出版社向けには、プレリリースプログラムも始まっているという。今後が楽しみな製品だ。
また、デジタル版の雑誌はアメリカの歴史に例えれば西部開拓時代としながらも、既に共通のインタラクションパターンが雑誌間で見られるようになっていることや、更に新しい形の雑誌の例として、Entertainment Weekly Must List、Cool Hunting、Twitter、Flipboard が紹介された。紙から独立して最初からデジタルを考える、ソーシャルネットワークとの連携、あるいは読者が自らコンテンツ収集や編集を行う、というのが新しいトレンドのようだ。解像度の異なるデバイスへの対応や、HTML5 の活用など、様々な進化を求められるデジタル雑誌の今後に注目したい。
