「ウェブデザイン」の「枠」のほうのデザインのおはなし

ウェブデザインには、枠と、コンテンツ（中身）の２つのデザインがある

「ウェブデザイン」という作業のなかでも
「見える」部分。人に印象を与える、色や、かたちや、文字の大きさ、空間などがあたえる「雰囲気」の部分には、「枠」と「コンテンツ（中身）」があります。

これは、結構混乱しやすい部分で。「作れない」って思うときは、このどちらをつくろうとしているのかわからなくなっていることも多いとおもいます。

ウェブデザインというものを、
「クリエイティブなもの（本体）」として見るか
「クリエイティブなものを載せる器」として見るか
その両方を表現する「何か」なのか。

新しいインターフェイスを考えるときは、「枠」のほうを見ているはず。
情報をとりまとめて、構成するときも、「枠」だ。
けれど、文字や文章を書いたり、絵や図を作るときは、「中身」を見ているはずで。

では、ウェブサイトのポートフォリオサイトを作るときはどうだろう。
ポートフォリオ自体は、「枠」です。
作ったウェブサイトは、スクリーンショットになった時点で「コンテンツ（中身）」ですが、そのサイト自体が生きているなら、その中で「枠」と「中身」があって、と、無限ループです。

「枠」で認識されているサイト

Pinterestなどがいい例ですね。

SNS系は、「枠」自体にキャラクターがあるように思われているものが多いですね。
枠、ナビゲーション、ボタン、情報の配置などに重きを置いているサイトでは、中身をユーザーに投げても大丈夫なように出来ています。

・「枠」のデザインが高性能であれば、
　「コンテンツ（中身）」をさらに見たい気持ちにさせられる
・「枠」が中身以上に強い印象を持つものであれば、
　　中身があまりなくても説得力を持たせることもできる
＝「枠」と「中身」のバランスがよければ、相乗効果でいい雰囲気を出すことができる

コンテンツを置くステージは、装飾が多いのがいいのか、シンプルなほうがいいのか
どんな風に情報を整理すれば見やすいのか、そういったことを考えて組み立てていきます。

存在感があるのに、存在感がないかのように溶けこませたい

わたしが「枠」のデザインを考えるとき、
もともと得意だったのは、装飾で固めて、説得力を強めるほうのデザインでした。
テクスチャや、線で囲って、あたかもそこにその世界があるかのようなイメージを作り出す。
（コンテンツが少々ダメでも、大丈夫なように。）

いま研究しているのは、悪目立ちせず、悪い印象を与えず、溶け込んでいるのに、キャラクターのある、そういう「枠」のこと。
当たり前のようにあるのに、すこしだけ特別な。
いらないものは削ぎ落とし、必要なものをかっこ良く。
透明なのに、体積がある空気みたいな。

そういう普通なのに普通に難しいことを追求するのって面白いですよね。

☆

「枠」を追求するのと、コンテンツを追求するのは全然違うものなのかなぁって思うのです。
UIとかは、枠のほうだとおもう。

枠と中身を同時に考えて、全部を「ウェブデザイン」とかんがえてしまうと
「では、中身は？」ってなった時に、きっと混乱してしまう。
整理する情報や、デザインしたいデータが用意しきれなくて、ボタンやナビゲーションなんかの、すでにフォーマットのある「わかりやすいもの」に頼ってしまって進めなくなるのかなーとか思いました。

フォーマットのあるものは、すでにデザインされているもので
装飾を足しているだけのような気もしますね。
装飾はデザインかな、どっちかな。
装飾も他のフォーマットから持ってきていたら、どうかな。
そんなことを考えたりします。


これからも、ちょっとずつ掘り下げていけたらとおもいます。
ご参考にどうぞ。