Web事業部_クリエイティブ
Web事業部_クリエイティブ
2016.10.04
#19
WEBデザインをはじめよう

デザイナーがする情報設計のすすめ(前編)

もりた

今回の連載の趣旨

こんにちは、アートディレクターのもりたです。

アートディレクターなんて立派な肩書を最近名乗るようになったのですが、なにをすべきなのか暗中模索しています。
ただ、一つだけ言えるのは、誰かに指示を出さなければいけない場面が増えたこと……。

自分だけでは完結できないあんな表現やこんな作業、頭のなかには完成形が見えているのに、これを相手にどう伝えたらいいのかわからない。
今回はそんなお悩みに対して、LIGのデザイナーに「自分はこうしていますよ」を書いてもらいました。

みなさんの仕事の一助になれれば幸いです!

第1回のテーマは情報設計です

連載第1回のテーマは情報設計です。突然アートディレクションっぽくないですね!

でもまだページから離れないでください、もしもあなたが他のメンバーから渡されたワイヤーを元にデザインを作成していて、そのワイヤーに不満を持つことが多いのであれば、あなたは情報設計をすべきなんです。

あなたはワイヤーに従わないデザイナーですか?

私はかつてワイヤーをほぼすべて自分で変更するデザイナーでした。

LIGはWordPressを使用した制作が多いのですが、カスタムフィールドをデザイン段階でいくつも増やし、エンジニアの負担も増やしていました。
今振り返えるとなんて酷いデザイナーだったんだ……と反省してます。

幸いその頃は、ページ数や機能の少ないwebサイトの制作が多かったので、それでもなんとか破綻せずにやってこれましたが、ページ数や機能の多いサイトではそうはいきません。

それでもなぜ私がワイヤーに従わなかったかと言うと、「このサイトは誰が何をする為のものなの?」を考えた時に、足りない情報・過剰な情報がそこにあったからです。

なぜデザイナーが情報設計をするの?

デザインを作るとき、ターゲットユーザーやwebサイトの目的を意識しないデザイナーはいないと思います。

そしてターゲットユーザーやwebサイトの目的を意識してデザインしている最中に「この情報は出し分けたほうがいいよね」「こういう図版が入ったらターゲットユーザーに上手く情報が伝わるだろう」などを考えてしまい、デザイナーは機能を追加するのです。

ここからさらに一歩踏み込んで「ユーザーにどんな”よいこと”を提供するのか」を考えた時、ただの情報整理だけではない情報設計の領域へと入っていくことになります。

それってディレクターやプランナーに任せてもいいのかもしれませんが、きっとデザイナーが一番意識しながら制作する立場にいるはずです。

でも情報設計ってなに?

そろそろアレとかコレとか、情報とか提供とか、指示語や一般名詞で説明するのが難しいので、例を出しましょう。

私の好きな本屋のひとつ、紀伊國屋書店のお話です。

自分の知らない本を選ぶための情報

インターネット通販が普及した昨今、わざわざ本屋に直接足を運ぶユーザーには「新しい魅力的な本と出会いたい」という欲求を持った人が含まれています。

通常、本屋で見かける本(今回は文芸書に絞りましょう)の情報は、

  • 表紙
  • 本のタイトル
  • 作者名
  • 帯のあおり
  • ポップのあおり
  • あらすじ

があります。

帯は新刊、ポップは話題の文芸書に付けられることが多く、本屋に訪れるユーザーが手に取るべき本を選ぶ際に判断できる情報を増やすツールです。

情報が増えすぎると人は選ぶことをやめてしまうとよく言われますが、魅力を伝えるために情報を増やすという手段はスタンダードかつある程度有効な手段です。

本屋で新しい文芸書を探すユーザーは、情報を吟味してものを選ぶというより、意識的にエリアを区切り、エリア内の情報をテレビのザッピングのように一瞬で興味のあるなしによって取捨選択している(と思う)ので、「帯」「ポップ」=「他と違うもの」という形で興味のフックになる可能性は高いです。

しかし逆にすべての本に帯やポップが付いてしまえば、埋没します。

あえて表示する情報を制限する

一時期twitterで話題になっていた「ほんのまくら」フェアをご存知ですか?

「ほんのまくら」フェアとは、2012年に紀伊國屋書店で行われた、本の書き出し、冒頭の一文のみを印刷したカバーを文庫本にかぶせ、シュリンク(漫画本等にかかっているパック)をかけた状態で陳列するという販売促進です。

本を購入するユーザーは、

  • 作品の冒頭文
  • 金額
  • 手書きポップに書かれた少しのあおり文句

のみを手がかりに、本を選ぶことになります。

これは

  1. 「新しい文芸書に出会いたい」という欲求を持ったユーザーに的を絞り
  2. 取捨選択させる情報を「書き出しの一文」に限定
  3. 本を読み始める経験を本屋で直接体験させ
  4. 興味ある体験を提供した本を手にとってもらう

という、ユーザーの体験を考えて提供されたサービスと言えます。

「ほんのまくら」フェアに用いられた情報設計とは

通常の本棚ザッピングに用いている、

  • 表紙
  • 本のタイトル
  • 作者名

といった本のパッケージ情報を「見せない」

そして通常は本を開かなければ見えない冒頭文のみを「見せる」

さらに本にシュリンクをかけることで、冒頭文の続きが気になったユーザーは、必然的に今ここでこの本を買わなければおそらく一生続きがわからないという軽い心理的プレッシャーがかかった状態になります。

このように「ターゲットユーザーが提示された情報を得た時に、どう考え(感じ)、どのように動くのか」というユーザーに提供する体験をふまえて、どのように情報を提示すべきか考える、これが情報設計です。
……って勉強しました。

でもこれってアートディレクションなの?

私はアートディレクターとは、制作物の見た目に影響するすべてのものに対して責任をもつ職種だと考えています。

それが正解か間違いかはわかりませんが、「どの情報をユーザー提示するか」は見た目に直接影響します。

「どの情報をユーザーに提示するか」を取捨選択するため、つまり情報整理に、情報設計が必要ならば、情報設計を指示するのはアートディレクションではないでしょうか。

これはあくまで持論ですし、そもそも情報設計は一人でやるものではありません。
誰が指示してもいいけど、良いプロジェクトを作るためには誰かが情報設計をはじめないといけないのなら、アートディレクターの仕事ってことにして私がはじめたっていいじゃない?

そういうことなんですよ。

次回は「情報設計の流れについて」です

前段階の説明が長くなってしまったので、前後編にわけさせていただきました!

そういうわけで、次回は具体的な情報設計の流れについてご説明したいと思います。
それでは、もりたでした。

キャリアアップ
「Studio上野でWebクリエイターを目指す!」