n2p blog
キャンペーンやSNSの
“ためになる”情報を
執筆しています。
かっこいい！と思わせるデザインの裏には情報(量)操作があった！メリハリの効いた作品の秘密
公開日:2015/09/21
情報量って？デザインの「重心」って？重心がはっきりしているデザインほど、メリハリが効いた良いデザインってほんと？
■この記事を読むと
・デザインにおける「情報量」とは何か
・[fusion_builder_container hundred_percent=”yes” overflow=”visible”][fusion_builder_row][fusion_builder_column type=”1_1″ background_position=”left top” background_color=”” border_size=”” border_color=”” border_style=”solid” spacing=”yes” background_image=”” background_repeat=”no-repeat” padding=”” margin_top=”0px” margin_bottom=”0px” class=”” id=”” animation_type=”” animation_speed=”0.3″ animation_direction=”left” hide_on_mobile=”no” center_content=”no” min_height=”none”][検証]既存のデザインの重心の場所 が分かります！
■今回の課題
いくつかのウェブサイトの重心（情報量が偏っている場所）がどこにあるのかチェックする。
重心がはっきりしているデザインはたいていメリハリが効いているので、メリハリも検証する。
■「情報量」って？
私たちに「情報」として感知される写真やイラスト、文字。そのままですが、その情報の量を情報量といいます。実は、パターン（柄）を除いて、デザインには箇所によって「情報量」に差があるのだとか。情報量が一番多いところを、そのデザインの「重心」といい、重心がはっきりしているデザインほど、メリハリが効いた良いデザインなんだそう。つまり、「情報量のコントロールがしっかりなされているデザインほど良い」ってことですね。実際そうなのか、既存のウェブサイトを見ながら、ポイントをまとめてみました。
■「７０年目の戦争と平和」
このサイトは文字を中心揃えにし、背景の動画を白黒にすることで文字を目立たせる効果を狙っています。動画は目を引いて主役になりがちですが、彩度を奪うことで情報量をコントロールしています。
■「株式会社エンファクトリー」
写真と文字を交互に載せることで段落ごとに区切る意味もある。文字の横ラインを揃えて均整な雰囲気を出す効果もあります。このサイトの場合は文字が情報と言えるでしょう。写真を挟んで情報量を小分けにしているんですね。
■「SUSTENA」
背景は奇抜な黄色と白のチェッカー。でも、そのパターンをマス目として活用することで、メインの文字という情報を、背景の色が殺していません。規則的に重心を拡散させるために、一つ一つの文章の長さも均等です。
■HONDA「ROAD TO VEZEL」
写真や文字を全て中心に持ってきて、その他の上下背景を黒塗りにすることでメリハリが出ています。
■「SEA BREEZE」
人物と文字を交互に並べることで、重心を三つ作っています（人物、キャッチコピーとロゴ、人物）。三点でバランスを取ることで、それぞれが主張しすぎず、主役となっているのです。
■「MeDu」
全面の写真が鮮やかで文字を載せるには情報量が大きすぎます。そこで、画面上部の白い部分に文字を載せているんです。白＝情報量０。白に載せることで、文字という情報を目立たせています。
■「P.I.C.S」
リンクを左、会社ロゴを大きく右。注目すべきは、リンクの中でも一番目立たせたいコンタクトだけを下部分に色を変えて載せていること。リンクと会社ロゴ、コンタクトの三点重心です。文字サイズと色味で三つのバランスをとっています。リンクは全体の面積が大きくなりますが、会社名（ロゴ）は一行なのでサイズを大きく、そしてコンタクトは黒背景にする代わりにサイズを小さめにしているんですね。
■ITRA
渋谷の大きなスクリーン、「Information Technology Research Agency」の文字、その下のトピックの三つが大きな情報。スクリーンとほかの情報をあえて外して情報を拡散させています。 
