Archive for the ‘think’ Category

iPad向け電子雑誌デザインの際に気をつけることまとめ

月曜日, 6月 7th, 2010

電子書籍はリーダーがいろいろ出ているので落ち着くまで待つとして、電子雑誌のデザインをする際に気をつける必要がありそうなことをざっとまとめてみました。

  1. サイズ、レイアウトの調整
  2. 縦/横時のレイアウト調整
  3. レイヤーを使ったレイアウト
  4. 今どこのページを見ているのかの明示
  5. 見出し/キャッチの作り方、見せ方
  6. 写真のレイアウト、見せ方
  7. アフォーダンスの整理
  8. 動画・スライドショーの扱い方
  9. 操作方法(メニューの表示/非表示切り換えなど)
  10. 検索性(雑誌のパラパラめくりに相当するもの)

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)する形でも良いわけです。結局はその記事で伝えたいことを一番うまく形にするにはどうしたら良いかを考えればいいということでしょうか。なんかすごく当たり前のことに戻ってきました。

iPad / iPhoneアプリ開発・今後デザイナーがやるべきこと

水曜日, 5月 26th, 2010

iPhone / iPadアプリ開発の勉強を始めました。目標はとりあえず一つはアプリを公開すること。

で、アプリの開発について、デザイナーとしてやらなければいけないと思うことを少々。

公開できるレベルのアプリは作れなくても、デベロッパと話が通じる程度には開発について知っておきたい。webデザイナーが、コーディングまではやらなくてもHTMLくらいは知っておかないといけないのと同じではないかと思うのです。

今後エディトリアルデザインは(電子書籍へと)大きく変わっていくので、早めに対応する必要があります。雑誌なんかは紙媒体をやめて電子書籍に乗り換えるところが出てくるはず。そのときに、ただ紙のデザインを移植してもしょうがないのです。再生するデバイスの特性を活かした物を作る必要が出てきますが、そこをうまく考えるのがデザイナーの役割となります。

そのためには、電子書籍で何ができるのか、向いているのか、知る必要が出てきます。雑誌アプリなら動き等も加えた新しい表現の可能性がありますしね。逆に従来の紙媒体の良さもあらためて見えてくるのではないかと思っています。

テンセグリティ

月曜日, 5月 24th, 2010

Tensegrity

いつか作ってみようと思いつつ実行してなかったテンセグリティ(写真右)のキットが売っていたので即購入。Make: Tokyo Meeting 05にて。作るのは楽しかったものの、面倒くさがらずに自分でやらないといけないなと反省。

左の小さい方はダイマクションマップを組み立てたもの。自分たちは地球の表面にくっついているんだ、ということを忘れないように常にデスクの上にぶら下げています。

見るドラッグ(合法)

木曜日, 5月 20th, 2010

NEXTEFX

これはもう、考えるとかそういう問題じゃない。見た瞬間に持っていかれる。うごめく空間、はじける色彩。

Koutaro Ooyama a.k.a. MONNEXTEFX。必見になっています。5月30日まで。最大限に体感できる夜がおすすめ。
USTREAM

派手靴下

月曜日, 5月 17th, 2010

ayame

おもしろい靴下がありそうだったのでAyame weavesここが詳しい)に行ってきました。

お店の人が男性にも進めていきたいと言っていたんですが、こういう凝った靴下って、実はメンズこそ良いような気がしてます。スーツの時に柄物使えるところってネクタイ以外にはあまりないので、靴下でこっそり遊ん でみるのも良いのでは。

なぜ男性用の派手靴下があまり無いのか。男性が履いたときどんな感じになるかイメージしずらいのではないでしょうか。ということで、自分の手持ちの靴下を履いて何点か写真を撮ってみました。服を買うときでも店員さんやマネキンが着ているとぐっと良く見えることがありますが、その効果を狙っています。

派手な靴下を履く人が増えると市場が大きくなって選択肢が広がる、競争が起きて値段も下がる。と、僕にとってもメリットがあるので、この写真が参考になって派手靴下を履く人が増えると良いんですが。

Happy Socks