WEBCRE8.jp > 考える > [webデザイン]ブラウザーの中のセカイ ― デザインや世界観のレイヤーを認識する

[webデザイン]ブラウザーの中のセカイ ― デザインや世界観のレイヤーを認識する

この記事は約11分ぐらいで読めます

webサイトのビジュアル的なデザインを作るとき、全体の雰囲気を作るとき、そのどこまでを「webサイトの世界」と考えるでしょうか。デザインに存在する「レイヤー」のことを考えます。

デザインによる世界観の統一

先日[webデザイン]スキュアモーフィックデザインとフラットデザイン、リアリズムとミニマリズムという記事を書きました。

[webデザイン]スキュアモーフィックデザインとフラットデザイン、リアリズムとミニマリズム – WEBCRE8.jp

こうしたコンセプトというものはサイト内で一貫していてこそ意味があります。フラットならフラット、スキュアモーフィックならスキュアモーフィックなデザインを、そしてその加減を貫かないと、何が何だかわからなくなってしまいますよね。

そして統一したデザインのコンセプトというものはそのサイトの世界観を作りだします。それはそのままターゲットに、もしくはそのサイトがフィーチャーしているプロダクト等にしっくりくる雰囲気を持っているはずですし、デザイナーはそれを選んで使わなければいけません。

ごちゃごちゃしてしまって統一感のないデザインをしてしまったとしたら、それはデザイナーがそのサイトの世界観を頭の中で確立できていないということになります。

世界観のレイヤー

しかし、そうした違う世界観のエレメントを一つのデザインの中で同居させられる方法があります。それがデザインや世界観のレイヤーを駆使する事です。この場合のレイヤーとは単にPhotoshopのようなツールのレイヤーではなく、「ここからここまではwebサイトの中の世界」、「ここからここまではそれを包んでいる世界」というような見せ方の問題です。

単なる「webサイト」という世界観

例えばYahoo! JAPANのようなレイアウトのサイトがあります。このサイトの世界観は純然たるwebサイトのポータルでしかなく、置かれているエレメントは全て単なるwebサイトの世界観に則っています。

Yahoo!のwebサイト

そこにはロゴがあり、見出しがあり、リンクの塊があり、普通のwebサイトのナビゲーションを備えています。

何らかのコンセプトを投影した世界観

次に、何らかのものをモチーフにしているwebサイトデザインを見てみます。

デビルメイクライのwebサイト

これはゲームデビルメイクライデビルメイクライ4のwebサイトです。モチーフはゲームの世界であり、通常のサイトが持つエレメントにそれらしい雰囲気の装飾があしらわれています。重々しいファンタジックな世界観で、ゲームをプレイしていないものにもそのゲームの雰囲気を感じとらせます。

しかし、このサイトはこうした雰囲気の中に唐突にその世界観とは相いれない開発コラム＆関連情報のようないかにもwebサイト的なリストエレメントが置かれていても不思議とぶち壊しにはなっていません。それは、このページのデザインがレイヤーをわきまえているからです。

つまり、このサイトの中にはデビルメイクライの世界というレイヤーとデビルメイクライを紹介するwebサイトというレイヤーがあるわけです。

こうしたデザイン上のコンセプトをではっきり分かれるレイヤーという考え方があれば、ガチャガチャとしたデザインを作ってしまうことはありません。

コンセプトの比重が高い世界観

そして上記のサイトよりも更に表現する世界の世界観の比重が高いサイトもあります。絵本を見るような感覚だったり、それをwebサイトとは感じさせないような飛び出す絵本のようなサイトだったり、webサイト自体を作品と考えて作っているようなイメージです。海外にはそうしたコンセプトでクオリティーの高いサイトが多かったですね。Duirwaigh Studiosとか。

Duirwaigh Studios

フルFlashだったり、この手のサイトは何よりwebサイトの世界としての没入感を重視していました。ナビゲーションを選択するカーソルは剣だったり、ローディングのメーターはリアルな砂時計だったり。ゲームのような雰囲気に近いかもですね。

そういうサイトは、使って便利というだけのものでもなく、一つの作品の側面も持ちます。機械的なダイアログなんて興ざめ！出来る限りその世界に没入させて欲しいです。

で、そこまで作り込んでいてもwebサイトとしてどうしても必要な表記や権利上の注意書きなんかがどうしても存在していたりしますよね。そういうものは、やむを得ず別ページに追いやったり、ブラックアウトした画面上にポップアップさせたりします。つまり、レイヤーを分けます。

ブラウザーの中で展開する世界

どんなに独自の世界観でデザインを作ってもそれはブラウザーという機械的な枠の中に入ったものにすぎないわけですが、枠の中だけで完結するというのは液晶画面の中で展開される時代劇、スクリーンの中で展開されるファンタジー映画も一緒ですよね。

つまり、このスクリーン、デバイスというものは現実の中というレイヤー、ブラウザーはPC画面の中というレイヤーの一つと考えることが出来ます。

画面の中の世界に集中する時、「枠」の外は無視できる

こうしたことのように、見る側にここからここは枠の外の世界、違うレイヤーだよと視覚的に訴えることで、違ったコンセプトや違った世界観のエレメントを画面やwebサイトの中で同居させることが出来るようになります。

平面デザインやバナーにも応用できる

デザインの仕事は未経験のデザイナー志望者にもこうしたことを無意識に理解している人はいますが、そうでない人はデザインの同じレイヤー上でかみ合わないエレメントを一緒に使ったりします。それでは整合性が取れなくなり、コンテンツの優先順位づけや分類も上手くいきません。

コンテンツの役割を切り分け、グループ化していけば、デザインのレイヤーをどう用いればいいかも決まってくるはずです。

そしてこのレイヤーは、webデザインだけではなくバナーのような小さな盤面の中やチラシなどの平面デザインの中にも存在しています。

平面デザインにも存在するレイヤー

例えば時代劇映画のチラシやバナーの上に、先行上映券発売中！というような文言を配置したいと思います。これをどのように配置するかはデザイナー次第だとは思うのですが、ざっくり二つのアプローチがあると思います。

一つは世界観を合わせ同レイヤーで表現する事。その場合は雰囲気を合わせたフォントやエレメントでテキストをあしらいますが、世界観を損なわずにエレメントを配置できる半面、その世界の中にメッセージが埋もれてしまう可能性はあります。

もう一つは世界観を外したエレメントにして違うレイヤーを作る事。単純に全然違う雰囲気の文字を盤面に置いてしまうと統一感を失いガチャガチャになってしまいますが、視覚的なレイヤーを作ることで、アリになります。

レイヤーを使わない表現とレイヤーを使う表現の例

File:Koishikawa-Mon.JPG – Wikimedia Commons

恐らくこのような表現の仕組みを言葉で説明したところで、デザインのことを考えていない人は理解出来ないはずです。

しかしデザインの統一感のなさは意識としてわからなくとも、普通の人でもなんとなく素人っぽい、ダサい、といった感覚で気づくことはできます。注意を払ってデザインしたいところですね。

レイヤーの形成

ではこのレイヤーは具体的にどのように作ることが出来るのでしょうか。

レイヤーは、

境界線
エレメントの重なり
明らかなテイストの変化
ブラックアウトなどのフィルター表現

などで作りだすことができます。

わかりやすいのは境界線を用いたボックス的な表現ですね。

バナーはボックスによってwebページの世界観から切り離される

エレメントの重なりというのは、下のエレメントをまたぐようにエレメントを置くことで下のものより上のレイヤーにあるように見せることです。同時にブラックアウトやホワイトアウト、ドロップシャドウを使うことでよりレイヤーがあることを印象付けられます。

明らかなテイストの変化というのはテクスチャーやリアリスティックなデザインの中に単色のエレメントを出すことなどです。明らかに異質であればそれらのエレメント同士が違った役割を持つことがわかるでしょう。

重なり、ブラックアウト等で別レイヤーのエレメントであることを表す

ブラックアウトやホワイトアウトは前述のポップアップの他にライトボックス表現、写真とテキストを同居させる場合などにも使われます。

こうした表現は今話題のiOS7でも採用、というより推奨もされています。世界観こそ統一されているものの、レイヤー的な表現でエレメントを差別化する手法が取られているようです。

iOS 7のフラットデザインでアプリを開発するための移行ガイドをAppleが発行 | TechCrunch Japan

まとめ

人にとってのリアルな世界は自分の足のついたこの世界だけですが、ポスター、スクリーン、ブラウザー、ページ、ブロックという風に感覚的な枠組みを作りそこに集中させることで、人はいくらでも意識を世界に入り込ませることができます。ですがその集中は、ちょっとした違和感で解けてしまい、見る人を我に返らせてしまいます。

こうしたとき見る本人が満足するタイミングまではその世界から見る者の意識を離さないためには、この世界観の認識、統一が必要なのだと思います。

今回の記事は以前に書いたデザインを言語化しようよって話で述べたデザインの言語化というようなことに取り組んだものです。