皆様いかがお過ごしであろうか？ ついこの前、飲み会の帰りに終電電車で寝過ごし小田原駅に遭難、深夜に人ならざる顔色で小田原市を横断していた野地である。小田原市に在住の方で、最近の深夜「ファッキュ～ワ～ルドレッツダイッッッ♪♪」という歌声を聞いたという方がいたらこの場で謝らせて頂く。
さて最近、自分で書いた過去の記事を読み返していたのだが、webデザインというカテゴリを作った割にはコーディングに関する記事ばかり書いていたなぁと思い、次回はデザインの話をできたらなぁと思っていた。
しかし近頃の自分が受け持っている仕事ははデザインよりもコーディングの比重がかなり大きいので、コーディング関連の話よりは比較的サックリとした記事に仕上げたいと思い、逆に今回は同業者の方や学生さんだけでなく、一般の方にもちょっと面白く感じるように書こうと思う。ハードルがかえって高くなった気もするが、肩の力を抜いてムフフな色の話をいざ、始めてみよう。
念のため言っておくが、本気でムフフな展開を期待してもそれは無駄なことである。このブログは全年齢向けであるし、第一、webの世界でムフフなコンテンツを扱うのは、需要がデカイだけあって、色々と面倒なのである。いや、ホントに。
背景色の二大派閥「白系」と「黒系」
色に関して、webの世界は紙の世界よりもかなり自由が効く。
基本的に、紙にグラフィックを印刷する時は白い紙に対してインクをのせていくので、ベタ塗りの面積が多かったり、写真などを美しく印刷しようとするとそれなりのコストがかかるし、元のデータが同じでも、印刷環境やに実際に見る時の環境によって色合いはだいぶ異なる。
しかし、液晶にグラフィックを映し出すwebであれば、グラフィックの複雑さによるコストに左右されることはないし、意図がぶれるほどの色合いの違いは生まれない。
そしてなにより、印刷用のCMYKによる色（シアン、マゼンタ、イエローという色料の三原色と黒を混ぜて色を作る方式）よりも液晶用の色であるRGB（レッド、グリーン、ブルーという光の三原色を混ぜ合わせて色を作る方式。もっと言えばテレビ画面を近くで凝視した時に見えるアレ）のほうが鮮やかな色が出せる点でアドバンテージがある。厳密には違うのだが、人間の目から見て、印刷用よりも使える色数が多い、という認識でほぼ間違いない。
他にも、見ている途中で色が変わる（例えばカーソルが乗っかると色が変わる文字とか）なんていうのはwebならではの効果と言えるだろう。
しかし、いくら自由に色を選択できるからといって、実際に機能的なwebサイトを作ろうとしたら、選択肢はかなり絞られてしまう。
その結果、最近のwebデザインにおけるほぼすべてのケースで、背景色は二つの派閥に分けることができるようになった。「白系」と「黒系」だ。
彩度が高い色は派手で目立つ反面、人間の目には疲れる色である。ポイントとして目を引くには適しているのだが、画面の一定範囲を覆っていたり、長時間目にするには適さないので、背景色向きではない。
なので、背景色に使われる色というのは大抵の場合、だいぶ彩度を抑えた色が主流になるのだが、有彩色はどんな色でも、彩度を落としていくと白～灰色～黒という明度だけの違いしかない無彩色に近づいていく。
つまり、そういった経緯で作られた背景色は閲覧者側からすれば「赤」とか「青」ではなく、「やや赤みがかった白」や「青みを含んでいる黒」といった印象になるので、最近のwebデザインにおける背景色のほとんどは「白系」と「黒系」の二つに分類可能と言えるのだ。
Apple
白系のサイトとして日本版Appleのページ。とにかく白い。
Firefox Developer Edition
黒系のサイトとして、自分のメインブラウザであるFirefox Developer Editionのページ。完璧な黒ではなく、青みがかってる上に、グラデーションも入っている。
ちなみに、「灰色系」はないのかと言えば、あることにはあるのだが、前述した二つに比べると数は圧倒的に少ない。なぜかというと灰色は明度が中間の色であるため、文字を明るくしようが暗くしようが、テキストがやや読みづらくなってしまうのだ。なので文字との明度差を活かすために、「白系」と「黒系」の二つに選択が偏るのである。
「白系」と「黒系」、それぞれの長所と短所
現状を個人的な感覚で言えば、黒系のサイトより白系のサイトの方が数が多い。憶測になるが、人間にとってはやはり、文字というのは白い紙の上に黒い色で書いてあるのが自然なのが原因であると思われる。
また、黒にも高貴というイメージはあれど、できるだけ「良い」イメージを与えたいのであれば白に軍杯が上がるのは当然だろう。清純で潔白、シンプルで明るい白に対して、黒はネガティブなイメージも多分に含んでいるため、わざわざそういうイメージを与える目的でもない限り白を選択するのは無難と言える。
また、現在のトレンドであるフラットデザインやマテリアルデザインと相性が良いのも、どちらかといえば白系である。
シンプルである、といったイメージにこれほど合う色も無いし、同じスペースでもその言葉が示す通り「余白」という意味を最も感じさせるのも白である。
また、マテリアルデザインにおいて重要な要素である「影」を表現するのも背景が白ベースであることが前提である。黒系の背景では紙の重なった効果を演出する「影」の恩恵は薄くなってしまう。google material design の影について（英語）
このような長所が重なって白系のwebデザインを選択するデザイナーが多いようだ。
しかし、そんな白系のデザインにも短所がある。実は目に一番疲れる色は白であるという点だ。
先ほど、彩度の強い色が目に疲れるので無彩色に近い色を使用するという話をしたばかりで意外かもしれないが、それは人間の心理作用面で見た場合である。
白という色はすべての色を含んでいる色で、そこから緑と赤を除くと青に、青を除くと黄色になる。つまり、白という色は全ての色の中で最もエネルギーの大きい色なので、人間の目に対する作用も最大なのである。
なので、白背景の画面を長時間見ていると閲覧者の文章を読む気力に障りかねない。なので、最近の白系webページは純粋な白ではなく、かなり明るめの灰色や僅かに黄色を混ぜた生成り色などを使うケースが増えている。
世のwebデザイナー達はこれらの一見些細に見えるテクニックで、白系の持つ長所を保持したまま、長時間の閲覧にも耐えうるwebページを作り出しているのだ。
さて、では反面黒系のページはどだろう。
短所は前述したが、長所としては目が疲れ辛いという利点がある。閲覧者のとっつきは白系のデザインよりも悪いかもしれないが、長文をじっくり読ませる場合には黒背景に白抜きの文字の方が読み手のストレスを少なく抑えることができる。
また、白系のデザインよりも写真等のコンテンツが映えるという点は見逃せない。例えば、YOUTUBEは基本的に白系のデザインを採用しているが、動画が表示されている範囲の背景色は黒である。写真を明確に映すという意味では白い背景が望ましいが、より魅力的に映す場合は黒い背景の方が一枚上手なのである。
高貴な色というイメージも有効活用すれば武器となる。黒という色が持つイメージは基本的にネガティブなものではあるものの現代日本においては、ネットリテラシーの変遷や、現実世界でのファッションの影響により、高貴、またはクールで格好良い、オシャレといった意味合いが強くなってきてるように思われる。ちょっと前までは大々的に使われるのをためらう色だったかもしれないが、今日ではそれらプラス方向のイメージを伝えるために使用されて当たり前の色となっている。
旧勢力「テクスチャパターン系」と新勢力「写真系」
さて、ここまでは単純に「色」で構成されるデザインを説明してきたが、webデザインの世界には色だけではなく、何かしらの物体を用いた背景も存在する。
それに当たるのが「テクスチャパターン系」と「写真系」の二つだ(これら名称は自分の勝手な命名である。念のため。)。
まず、webが一般的なものになってから流行りだした比較的古い歴史を持つのが「テクスチャパターン系」である。
色のみによるベタ塗りやグラデーションだけで表現された背景よりも、より個性を求めた結果選択されることの多い背景なのだが、その分本来目立たせるべきテキストや写真等のコンテンツを目立たてなくしてしまうなど、非常に使いどころの難しい背景であり、webデザイナーが陥りやすい罠の代表格であると言えるだろう。
そのため最盛期の頃に比べあまり見かけなくなったものの、現在でもその長所を理解し、短所を抑え使っているページも存在する。
一昔前に見かけたこの系統のデザインは、正方形に切り抜かれた写真を繰り返し表示しているものが多かったが、最近では単純な水玉模様や菱形の並んだデザインが多くなってきた。これは写真だと繰り返して表示される画像のつなぎ目が見えてしまう事で閲覧者にチープな印象を与えてしまうのと、繰り返し表示されることによる見た目の煩わしさを回避した結果であろう。
alfredapp
MACアプリのサイト。背景パターンが繊細で美しく、まさに現代のテクスチャパターン系デザインと言える。
すかいらーく バーミヤン
すかいらーくグループのファミリーレストランであるバーミヤンのサイト。こちらは大胆で大きめなパターンを使用し「ファミレスらしさ」と共に、「かっこよさ」とは違う「親しみやすさ」を演出している。
もう一つの「写真系」は今、前述した白系黒系のデザインに追いつく勢いで事例の増えているまさに背景デザインのトレンドである。特に、感覚的なイメージではなく、意味的なイメージを重要視するサイトで効果的なデザインだ。
テクスチャパターン系との違いは、小さい画像を繰り返して表示するのではなく、背景を大きめの一枚写真で覆い尽くすという点である。これによりテクスチャパターン系の弱点であったチープさや煩わしさを回避し、サイトイメージを閲覧者へダイレクトに伝えることができ、その有用性から多くのwebデザイナーが選択している背景であるのは間違いない。
ただし、写真とは言っても背景であるので、その上に載るコンテンツをどう目立たせ、見やすくするかがこのデザインの悩みどころだろう。解決策としてはコンテンツ部分に半透明のベタ塗り背景を敷いたり、写真をぼかしたり暗くしたりすることが挙げられるが、個人的に一番スマートなのが、コンテンツの載る部分をあらかじめ空白（または騒がしくない状態）にしておき、コンテンツが表示されてないところに写真の肝となるマテリアルを位置させる方法である。
シンプルなフラットデザインが流行っているからといって、現実的なマテリアルを使ってはならないというわけではなく、ちゃんとイメージを伝えたい部分では画像を使い、情報を読ませる部分ではシンプルにすることで、メリハリのあるwebサイトが出来上がる。それを背景でやってしまうのが、最近の閲覧者が求めるニーズと上手く合致しているのだ。
tumblr
多機能SNSであるtumblrのサインアップページ。更新するたびに、ユーザーが投稿した写真がランダムに背景となるが、前面に載っているコンテンツがごくシンプルなため問題になっていない。
MESHUGGAH
メタルバンドMESHUGGAHの公式サイト。アーティストサイトで必要な圧倒的個性を出す場合は写真やイラストが有効であるが、このサイトは背景にモノクロのアーティスト本人たちがデカでかと映っているのがシンプルかつ、インパクト大だ。ぼかしや色調の調整により、背景がコンテンツ部分にほとんど悪影響を与えていない。
まとめ
一切ムフフ要素はないし、結局サックリした解説でもなかった気がするが、いかがだったろうか？
webデザインを職業としてない人でも、何か人に見せるものを作る時は、上に載る主役のコンテンツだけでなく、背景にもちょっとした気を使うと制作物のクオリティがグッと上がるだろう。
また制作物のみならず、現実世界でも「背景」という名で表される事象は全体の９割以上を占めるものである。それら全てを操作できたら世話ないのだが、背景によって主役の見え方は大分変わってくるものである。
たまには自分を磨くばかりではなく、周りのものを整理するのも、周囲の人間にとっては大切なことなのだ。
とりあえず、自分は早くもゴミ屋敷一歩手前の新居を掃除することにした。背景の操作は手間がかかるのである。