読むウェブ ~本とインタラクション

第2回 ページをめくる

この記事を読むのに必要な時間:およそ 3 分

ブック・メタファと「ページめくり」

オンラインマガジンのように読ませるWebコンテンツの場合は「ブック・メタファ」がよく使われる。参考事例として,今回はWeb上のデジタルマガジンディーマ:dima.jpを紹介していこう。dima.jpでは,総合誌「Manyo⁠⁠,男性ファッション誌「DUCA⁠⁠,アクティブシニア向けマガジン「ginger⁠⁠,働く女性のためのヘルシーマガジン「Aura⁠⁠,1クラス上の旅を味わうためのリゾート誌「Travel Generation HAWAII」の5誌を無料で読むことができる。コンテンツはHTMLではなく「FlipBook」形式で作られており,ブック・メタファを採用した良質なWebマガジンに仕上がっている。⁠ページをめくる」という感覚を味わいながら閲覧することが可能だ。

デジタルマガジンディーマ:dima.jpのトップページ画面

デジタルマガジン「ディーマ:dima.jp」のトップページ画面

閲覧するには,無償で使用できるビューワソフト「FlipViewer」をダウンロードする。脱ブラウザ系のコンテンツはWindows環境でしか使用できない場合が多いが,FlipViewerはMac版も用意されている(OSのバージョンなどはWebサイトを参照してほしい⁠⁠。ダウンロード後,FlipViewerをPCにインストールすれば,すぐにマガジンを閲覧することができる。また,FlipBookのブック・コンテンツを管理するための「パーソナルライブラリ」も同時にインストールされる。ダウンロードしたFlipBookやオンラインのFlipBookを一元管理し,⁠本棚」のように扱うことができる便利なツールである。

FlipBookを一元管理できるサポートツール「パーソナルライブラリ」

FlipBookを一元管理できるサポートツール「パーソナルライブラリ」

FlipViewerのブック・メタファは,リアルな「本」を忠実にシミュレーションしており,操作に慣れてくると単なるページ切り替えではない「気持ちよさ」につながっていく。通常,クリックして「ページをめくる」という機能は,⁠進む]⁠戻る]にページがめくれ上がるアニメーションが加わったものだが,FlipViewerには「ページをつまんで持ち上げる」という操作も用意されている。実際に使ってみると,思っていたよりも早く「マウス操作によるページめくり」に慣れることができた。これは,アニメーション処理が軽く,クリックやドラッグの速度に遅れることなく対応しているからだろう。このあたりのバランスは家庭用ゲーム機とゲームソフトの関係と同じである。

インタラクション(1)ページをつまんで持ち上げる~クリック&ドラッグ

インタラクション(1)ページをつまんで持ち上げる~クリック&ドラッグ

インタラクション(2)ページをつまんで持ち上げる~ドラッグしてページをめくる

インタラクション(2)ページをつまんで持ち上げる~ドラッグしてページをめくる

「ページをつまんで持ち上げる」以外には,連続クリックによる「パラパラとページをめくる」という操作がある。実際の雑誌を手にとってパラパラめくるように,各ページの内容をラフに捉えながら全体像を把握することが可能だ。また,ページの上部でクリックすると「早くめくる」ことができ,ページの下部をクリックすると「ゆっくりめくる」といった使い分けもできる。ビジュアルが中心のマガジンの場合,静的なインデックスよりも便利ではないだろうか。例えば,タッチパネルなどに対応すると,もっと自然なインタラクションが可能になるかもしれない。

インタラクション(3)連続クリックでページをパラパラめくる

インタラクション(3)連続クリックでページをパラパラめくる

「ページめくり」によるラフな検索を補足する機能が,ページ番号の表示である。マガジンの側面にマウスを重ねるとページ番号が表示され,クリックすると該当するページが開く仕組みだ。マウスを動かしながら表示されるページ番号を見ていくだけで全体のページ数を見積もることができ,⁠このあたりは総ページ数の半分くらいのところ」といった見当をつけることが可能だ。もちろん,しおりでブックマークする機能もある。

インタラクション(4)表示されるページ番号を見て開く

インタラクション(4)表示されるページ番号を見て開く

「しおり」の編集とカスタマイズ(スタイル変更)機能

「しおり」の編集とカスタマイズ(スタイル変更)機能

dima.jpが提供するマガジンにはFlashを使ったアニメーションやズーム機能,ビデオなどリッチメディアも盛り込まれており,ページ内の情報を詳細に見ていくことができる。さらに,ビジネス展開において必須となる著作権保護機能も適用されている。例えば,常駐タイプのキャプチャソフト(ユーティリティ)などが起動していると閲覧できないようになっている(画面キャプチャソフトを終了させてください,というアラートが表示される⁠⁠。

著作権保護機能が適用されているコンテンツを閲覧する場合,画面キャプチャユーティリティなどは終了させる必要がある

著作権保護機能が適用されているコンテンツを閲覧する場合,画面キャプチャユーティリティなどは終了させる必要がある

仮想世界の「雑誌」編集

通常のWebデザインではユーザビリティや可読性などが重視されるが,コンテンツの娯楽性やゲーム性を強調した場合でも制作の考え方に大差はない。新しいルールを採用してもPCオペレーションの慣例を大きく逸脱しなければ,ユーザーを混乱させることはないはずだ。電子ブックという読書専用端末も売られているが,⁠現在のところ)PCベースのWebコンテンツ内にバーチャルな電子ブックを構築するほうがサービスとしても展開しやすいようだ。⁠ページをめくる」という直感的な振る舞いをどのように演出し,ユーザビリティの向上につなげていくか,とても興味深い。

今回は「脱ブラウザ」のWebコンテンツを取り上げてみたが,次回はブラウザベースのオンラインマガジンを検証しようと思う。

著者プロフィール

境祐司(さかいゆうじ)

インストラクショナル・デザイナー[Instructional Designer]として学校,企業の講座プラン,教育マネジメント,講演,書籍執筆などの活動をおこなう。2000年より情報デザイン関連のオンライン学習実証実験を始める。現在,教育デザイナー育成を目的としたフォーラムを立ち上げるため準備中。著書に「速習Webデザイン Flash CS4」(技術評論社),「Webデザイン&スタイルシート逆引き実践ガイドブック」(ソシム)などがある。

URLhttp://admn.air-nifty.com/monkeyish_studio/

著書