iPad向け電子雑誌デザインの際に気をつけることまとめ
電子書籍はリーダーがいろいろ出ているので落ち着くまで待つとして、電子雑誌のデザインをする際に気をつける必要がありそうなことをざっとまとめてみました。
- サイズ、レイアウトの調整
- 縦／横時のレイアウト調整
- レイヤーを使ったレイアウト
- 今どこのページを見ているのかの明示
- 見出し／キャッチの作り方、見せ方
- 写真のレイアウト、見せ方
- アフォーダンスの整理
- 動画・スライドショーの扱い方
- 操作方法（メニューの表示／非表示切り換えなど）
- 検索性（雑誌のパラパラめくりに相当するもの）
1. サイズ、レイアウトの調整
紙媒体のA4レイアウトデータをA5にする場合、普通はそのまま縮小ということはしないわけです。にもかかわらず、現状出てきている日本の電子雑誌は紙のデータをそのままPDFにした物という形が多い（iPadの表示部分のサイズはだいたいA5くらい）。せめてA5で見ることを想定してレイアウトをやりなおしたいところです。実際に使ってみるとiPad上では紙媒体よりも大きな文字の方が読みやすいので、気持ち級上げするくらいがちょうど良いはず。
2. 縦／横時のレイアウト調整
「WIRED」では全ページ（広告も含めて）縦／横のレイアウトが用意されています。これはレイアウトや写真の大きさによって、デザイン上の意味合いが変わってくる場合があるので必ずしも取り入れる必要はありません。実際、明らかに縦と横で印象が変わっている広告もありました（本文はそんなことありません）。せっかく縦／横のレイアウトを変更するなら、意味合いを変えるなどの工夫を盛り込みたい。例えば縦位置では写真とキャプションなどを見せ、横位置では写真を全画面でじっくり見せる、といった使い分けなど。
3. レイヤーを使ったレイアウト
「POPULAR SCIENCE」ではレイヤーを使った見せ方を提案しています。地となる写真等の上にテキストのレイヤーが乗っており、これを上下にフリックすることで記事を読める。この見せ方がベストだとは思いませんが、一枚の固定したレイアウトをする必要はないというヒントになります。
4. 今どこのページを見ているのかの明示
現在地の表示をする必要があり、ノンブルの見せ方の工夫、柱の活用が考えられます。が、そもそも表紙から1,2,3,4…と見せることに意味があるのかという気もしてきます。
5. 見出し／キャッチの作り方、見せ方
6. 写真のレイアウト、見せ方
右開き／左開きという概念自体がなくなるので、見出し／キャッチ／写真のレイアウトの意味合いが変わるはずです。また、紙の雑誌ではパラパラとめくったときに目立つように工夫されているのでその辺りの法則も新しく探る必要があります。これは10の検索性と関わります。
7. アフォーダンスの整理
印刷物のように安易にボタン風のデザイン等をすることは避けなければいけません。紙をクリックできると思う人はいませんが、iPadではタップしてなにも起きないとちょっと戸惑います。紙のデザインを流用する場合には気をつけたい点です。
8. 動画／スライドショーなどの扱い方
記事の流れの中での効果的な見せ方を考えたい。これはまだ良い方法を思いついてないです。今まで見た中でも「これは」というものには当たっていません。
9. 操作方法（メニューの表示／非表示切り換えなど）
多様なジェスチャに対応しているのでいろいろできるとは思うんですが、あまり独自の操作方法になるととっつきにくくなるかもしれません。タップでメニューの表示／非表示切り換えなど、予想しやすい動きが良いかも。これもまだ良い方法は思いついてません。
10. 検索性（雑誌のパラパラめくりに相当するもの）
サムネ、リスト等がありますが、これもまだ良い方法は見つけられていません。文字での検索はできますが、人は文字だけではなくて写真や色、形、「こんなに後ろじゃなかった」といったように位置などでも記憶しています。うまい方法を探る必要があります。
いろいろ書いているうちに「本」を模倣する必要はないような気もしてきました。左右（巻物）、あるいは上下（webブラウザ）にスクロールしたり、一枚の大きな平面上をスクロール（map）する形でも良いわけです。結局はその記事で伝えたいことを一番うまく形にするにはどうしたら良いかを考えればいいということでしょうか。なんかすごく当たり前のことに戻ってきました。
Tweet
6月 20th, 2010 at 13:18
[...] iPad向け電子雑誌デザインの際に気をつけることまとめ #iPadjp [...]