デジタルカタログに最適なレイアウトデザインってどんなの？

先日の記事で、デジタルカタログのワークフローではPDFから変換して作成するケースが多い、ということをご紹介しました。では、読みやすく使いやすいデジタルカタログにするためには、PDFの中身はどのようなレイアウトデザインにすれば良いのでしょうか？今回はデジタルカタログの実例を通じて考えてみたいと思います。

デジタルカタログ作成サービスのほとんどがPDFを簡単にデジタルカタログへと変換できるため、印刷メディアと並行してデジタルカタログを発行すること自体は簡単に実現できますが、元のレイアウトデザインによっては、デジタルカタログにした時に読みづらくなってしまうというケースもあります。

例えば、多くの旅行会社で導入されているデジタルパンフレットを見てみましょう。
旅行会社の店頭にあるものと同じ旅行案内パンフを、PCやスマートフォンなどでじっくり見られるデジタルカタログが各社で公開されています。

A4サイズのパンフレットには情報がぎっしり詰まっていますが、そのままデジタルパンフにした場合、スマートフォンやタブレットの画面で見ると文字が小さく、見づらくなってしまうのでは？　といった心配があります。

試しに、手元にあった旅行会社のパンフレットの一部をスキャンしてPDF化し、iPhoneとiPadで表示させてみました。
iPadの方はなんとか文字を読むことができますが、iPhoneでは、ぱっと見ただけでは文字サイズの小さなところの判読が難しいです。

こうなると、ユーザーには何度も画面表示の拡大・縮小・移動といった負担をかけてしまうことになります。
かといって、印刷版とは別にデジタルカタログ向けのデザインをするのはコストと手間がかかってしまうので、このあたりは本当に悩ましいところです。

一方で、スマートフォンでも比較的読みやすいデザインになっているデジタルカタログがあります。
ebook5を導入して下さっているクライアントの実例から、いくつかご紹介したいと思います。

まずは、バーの文化を発信するオンラインマガジン『BAR LIKERS』。

オンラインマガジンということもあって、雑誌のような雰囲気のデザインなのですが、文字サイズや余白などはPC画面で読むのにちょうど良い感覚です。

iPhoneとiPadでも表示させてみました。iPadでは拡大表示の操作なしにそのまま読めますし、iPhoneでも、ちょっと画面に顔を近づければそのまま読めそうです。

ここからさらに文字サイズを上げれば、iPhoneで快適に文字が読めるようになるのでしょうが、そうするとiPadやPCなどディスプレイの大きな環境で見た場合に、文字が大きすぎて違和感につながる恐れもあるでしょう。
おそらく、さまざまな閲覧環境を考えて、平均的なところを狙ったデザインと考えることができます。

もう一つ、デザインの実例を見てみましょう。

こちらは、女性のための写真加工・共有サイト「SWEET PHOTO」内のコンテンツ「OLYMPUS PEN STYLE BOOK」。

（出典：http://fotopus.com/sweetphoto/）

美しい、かわいらしいビジュアルで魅せるデザインです。スマートフォンで読むにはちょっと文字サイズが小さいかも知れませんが、あまり気になりませんね。ページごとの情報量をコンパクトにしている点がポイントと思います。

印刷版が発行されているかどうかは確認できていませんが、こうしたカメラ入門者向けの無料ハンドブックは小さめのA5サイズあたりでつくられているケースが多いはずです。
判のサイズが小さな印刷物の場合は、そのままデジタルカタログ化しても、モバイル端末でわりと快適に閲覧できる可能性が高そうですね。

もう一つは、見やすさだけでなく、使いやすさの面でご紹介したい実例です。

（出典：http://my.ebook5.net/jobby/79a8qt/?page=112）

学生団体エスポアールが毎月発行するWebマガジン「JOBBY」

北海道の学生たちが企画・編集・発行しているWebマガジンで、ページ数は圧巻の120ページ。デザインも学生によるものですが、注目したいのは、その「押しやすさ」です。

各ページの求人情報には詳細Webページへのリンクが貼ってあるのですが、このくらい大きなバナーであれば、スマートフォンでも確実にタップすることができます。

デジタルカタログはただ閲覧するだけでなく、指を使って操作する部分も重要になりますので、例えば商品カタログや資料といった内容でリンク機能を使いたい場合は、ユーザーがタップする場所の視認性や押しやすさを考慮したデザインが必要になるでしょう。

まとめると、
●情報量の多い印刷物をそのままデジタルカタログ化すると、スマートフォンでは読みづらくなる恐れあり
●版のサイズが小さければ、そのまま変換しても読みづらさは軽減される
●最初からページの情報量を少なくしておけば、さらに読みやすくなるかも？
●ユーザーに押して欲しいリンクバナーなどは、指でタップしやすいデザインが望ましい

結局のところ、デジタルカタログでやりたいことやコストとの兼ね合いをふまえて最適なデザインを選択するということになるのでしょうが、こうした実例をたくさん見たり、実際にサンプルを作ってスマートフォンでテストしてみたりと試行錯誤をするのも良い参考になりそうです。
ぜひ、いろいろなデジタルカタログを見ていただければと思います！