情報を整理しよう!

現役Webディレクターによる「嫌われないウェブデザイン」秘密講座ブログ!

トップページ > ホームページ作成塾> デザインの考え方 >

情報を整理しよう!

突然ですが。
「デザイン」ということばを聞いて、あなたはどんなものをイメージしますか?

  • オシャレでカラフルな広告や、流行ブランドのロゴをデザインすること?
  • アンディ・ウォーホルのように、ポップでモダンなアート作品を作ること?
  • お金持ちのヒルズ族が住んでいるような(笑)高級マンションの内装をデザインすること?

確かに、こういったものも、「デザイン」の枠組みに入るもの。

しかし、です。
「デザイン」ということばを世間一般で考えられているような杓子定規(しゃくしじょうぎ)のイメージだけでとらえてしまうと、あなた自身が大変な遠回りをすることになります。

  • キレイな色使い
  • かっこいいレイアウト
  • クリエイティブなFlashアニメーション

このような要素も確かに大切ですが、「本質」ではありません。

なぜか?
Webサイトの「デザイン」に限って言えば、いちばん大切なのは、「情報のデザイン」だからです。

デザインを考えるときに、イチバン大切なことは?

Webサイトをデザインするときに、私たちがいちばん気をつけなければいけないのは、「情報をデザインする」という目的を見失わないこと。

(1)訪問者に伝えたい情報を、リストアップする
(2)リストアップされた情報を、区分けする
(3)情報の区分けを、「視覚的に」表現する

このステップを踏めば、あなたのサイトは、だんぜん見やすくなります。
逆に、このステップを省いてしまうと、極端な話、あなたのサイトはワケの分からないものになってしまいます。


●情報デザインの例

例えば、次のような情報の「集まり」があるとします。

私のカメラ生活。カメラコレクション紹介。デジタルカメラ。キャノン。EOS。EOS 10D DIGITAL。EOS 20D。ソニー。サイバーショット。サイバーショット DSC-M2。サイバーショット DSC-R1。中古カメラ。ライカ。ライカ M3。ライカ M6チタン。ペンタックス。 ペンタックス67。ペンタックスLXチタン。私の撮影日記。上野動物園(9月15日)。代々木公園(10月2日)。東京ディズニーランド(10月9日)

「なんじゃこりゃ!?」
・・・そう思います?
やっぱり、これは激しく読みづらいですよね(^ ^;
でも、このような情報の並べ方をしているサイトは、実は非常に多いんです(ココまで極端ではないにしても)

ちょっと考えてみてください。
なぜ、上記のような情報は、読みづらいのでしょうか?
なぜだと思いますか?

読みづらい理由は↓
情報の「区分け」が、視覚的にまったく表現されていないから。
つまり、情報が「デザイン」されていないからです。

情報を「デザイン」する

情報を整理するときには、次のポイントにマトを絞って考えていきます。

  • 他の情報よりも、「地位の高い」(レベルの高い)情報はどれか?
  • 複数の情報を、ひとつのカテゴリーにまとめられないか?

この考え方に従って、上にある情報の集まりを、もう少し整理してみましょう。


<私のカメラ生活>

■カメラコレクション紹介

デジタルカメラ。
キャノン。EOS。EOS 10D DIGITAL。EOS 20D。ソニー。サイバーショット。サイバーショット DSC-M2。サイバーショット DSC-R1。

中古カメラ。
ライカ。ライカ M3。ライカ M6チタン。ペンタックス。 ペンタックス67。ペンタックスLXチタン。

■私の撮影日記。
上野動物園(9月15日)。代々木公園(10月2日)。東京ディズニーランド(10月9日)


区分けすると、↑このようになりますね。

いちばん上の<私のカメラ生活>は、この情報の集まりの「親分」。
情報の主題テーマを表すいちばんエラい(?)項目なので、目立つように「<」「>」の記号をつけてみました。

さらに、本体コンテンツは、大きく分けると、「カメラコレクション紹介」と「私の撮影日記」に分類できます。

・・・と、とりあえず、大まかに整理してみました。
でも、まだまだ不十分ですね。情報の区分けは、これだけでは完全とはいえません。

↓さらに、キッチリと「視覚的に」整頓してみましょう。
(「視覚的に」表現することがキモです!)


<私のカメラ生活>


■カメラコレクション紹介

【デジタルカメラ】

キャノン
EOS
EOS 10D DIGITAL
EOS 20D

ソニー
サイバーショット
サイバーショット DSC-M2
サイバーショット DSC-R1

【中古カメラ】

ライカ
ライカ M3
ライカ M6チタン

ペンタックス
ペンタックス67
ペンタックスLXチタン


■私の撮影日記。

上野動物園(9月15日)
代々木公園(10月2日)
東京ディズニーランド(10月9日)

カメラの各メーカーの名前と、メーカーごとの機種名をひとつのブロック(塊)にまとめました。
さらに、各項目ごとに改行を入れてあります。

いかがでしょうか?ここまで整理すれば、情報もだいぶ見やすくなったハズ。

せっかくなので、最後まで徹底的にデザインしてしまいましょう(^ ^)
さらに情報を「視覚的に」整理してみます。

<私のカメラ生活>


■カメラコレクション紹介

【デジタルカメラ】

*キャノン
     EOS
     EOS 10D DIGITAL
     EOS 20D

*ソニー
     サイバーショット
     サイバーショット DSC-M2
     サイバーショット DSC-R1

【中古カメラ】

*ライカ
     ライカ M3
     ライカ M6チタン

*ペンタックス
     ペンタックス67
     ペンタックスLXチタン


■私の撮影日記。

*上野動物園(9月15日)
*代々木公園(10月2日)
*東京ディズニーランド(10月9日)

いかがでしょうか?
自分で言うのもナニですけど(^ ^;
最初のものに比べたら、かなり見やすくなったのではないかと思います。

とくに、下記の点に注目してください。
「同じ階層の情報(=テキスト)は、同じ記号で装飾」

これが、「情報をデザインする」ということの一例です。

情報を区分けして、「より上位の階層の情報」と「下位階層の情報」を整理しない限り、視覚的なデザインも施しようがありません。

今回は、かなり抽象的な考え方を紹介したので要領を得ない説明になってしまいましたが・・・(^ ^;
とにかく、あなたのサイトをデザインするときに、次のことだけは忘れないでください。

「まず、情報の整理・整頓ありき!」

最初に考えなければならないのは、キレイな色使いでもイラストでもない。
「情報の見せ方」なんです。


このエントリーのトラックバックURL :


メルマガ「嫌われないWebデザイン」
さらに突っ込んだデザインノウハウは、メルマガでお届けします!メルマガ読者限定の、サイト無料診断企画もたまにやってます。
>>バックナンバーを見る

登録アドレス:
解除アドレス:
Powered by まぐまぐ