人は余白に魅了される　レイアウトの新しいトレンド

2013年02月08日 09時00分更新

文● 前田知洋

余白のルーツ

　「産業革命」の絶頂期のビクトリア朝時代では、すべてのプロダクトを大量生産で生産効率を高めようとしていた。「情報」もその１つで、本も多く印刷された。しかし、19世紀のイギリスの詩人であり、芸術家、デザイナーであったウィリアム・モリスは「理想の書籍」を作るべくケルムスコット・プレスを設立。モリスは、フォントや用紙、挿絵、製本、レイアウトなどを追求した。モリスが参考にしたのは、中世における価値観で、美しさと機能を両立させたといわれている。

余白の大きい、W・モリスによるレイアウト。1892年に出版されたウォラギネの「黄金伝説」（ケルムスコット・プレス・ブック）

動的なレイアウトを採用しているGoogle

　2012年11月にGoogleが変更したレイアウト、PCのブラウザで見ると、「ウェブ」「画像」「地図」「ショッピング」が上部に変わり、右側に大きな余白があるのに気がつく。変更時にはネット上では不満の声もあったが、多くは慣れの問題だと筆者は思っている。

Googleの新しい検索結果のレイアウト。右側に余白があるのが特徴

　新しいレイアウトでは、カーソルを検索にヒットしたサイトに重ねたり、中央の「＞＞」をクリックすると、サイトのイメージが表示される。通常、サイトは上から下にスクロールする性質から、縦長にレイアウトされていることが多い。そうした性質を動的に解決したデザインになっている。コース型のレイアウトとビュッフェ型のレイアウトのハイブリッドともいえる。これは「レスポンシブウェブデザイン」と呼ばれ、PC、iPadなどのミドルサイズ端末やスマートフォンでの表示を似たレイアウトにする技術やポリシーにもかなう。

新しいレイアウトでは、カーソルを検索にヒットしたサイトに重ねたり、中央の「＞＞」をクリックすると、サイトのイメージが表示される

それって、偽のトランプ？

　筆者の仕事であるマジックをしていると、たまに「それって、偽物のトランプ？」と聞かれることがある。「トランプに本物や偽物があるんだろうか……」と思いながら、その理由を尋ねてみると「７のカードのマークのレイアウトが奇妙だから……」という。下の写真の右のカード、クラブの７を見ていただけるとわかるように、奇数のトランプのマークが中央にない。「奇数のトランプのマークは中央にあるべき」という思い込みによる誤解だ。

　たしかにハートの５は中央にマークがある。しかし、７は両サイドのマークの間隔が狭いので、中央に配置するとトランプ全体のマークが小さくなってしまう。こうしたことから、老舗のトランプメーカーは、７のカードの最後の１つのマークを中央より上に配置している。

マークを上にずらしたクラブの７のトラディショナルな配置。赤いサークルは画像を加工したものです

　レイアウトは美しさと機能のバランスの上に成り立っている。毎日アクセスするポータルサイトなどでは、情報が多く、どのジャンルの情報がどこにあるのかが、ひと目で分かるものの方がいい。しかし、初めてサイトを訪れる人を魅了し、顧客になってもらうためのレイアウトも大切。コース型とビュッフェ型は「デート型」か「家ゴハン型」と言い換えることもできる。

　コース型とビュッフェ型のもう１つの違いは「サプライズ」。時間軸に添って料理が運ばれてくるコース料理には、次の料理が出てきたときに「ワァ！」という驚きがあることも。冒頭で紹介したようなパスタと味噌汁のような同席者にドン引きされてしまうようなサプライズではなく……。

前田知洋（まえだともひろ）

　東京電機大学卒。卒業論文は人工知能（エキスパートシステム）。少人数の観客に対して至近距離で演じる“クロースアップ・マジシャン”の一人者。プライムタイムの特別番組をはじめ、100以上のテレビ番組やTVCMに出演。LVMH（モエヘネシー・ルイヴィトン）グループ企業から、ブランド・アンバサダーに任命されたほか、歴代の総理大臣をはじめ、各国大使、財界人にマジックを披露。海外での出演も多く、英国チャールズ皇太子もメンバーである The Magic Circle Londonのゴールドスターメンバー。

　著書に『知的な距離感』（かんき出版）、『人を動かす秘密のことば』（日本実業出版社）、『新入社員に贈る一冊』（共著、日本経団連出版）ほかがある。現在、（株）ビジスパからメルマガ「Magical Branding－セルフブランド活用法－」を配信中。

■関連サイト