年: 1999年

新年なので、羊ページの模様替えをした。これで、7回目のデザイン変更になる。

今日は少し、Web デザインの話をする。

何故、Web サイトのデザインに凝る必要があるのだろう。僕は、サイトのデザインとは、そのサイトの内容そのものだと思っている。ユーザーがそのサイトに触れるイン ターフェイス、ユーザーがそのサイトから感じ取る空気、ユーザーの頭の中に残る記憶、それらはすべてサイトのデザインと密接に関係している。

なぜなら、Web サイトというのは、ブラウザのウインドウに表示されているものが全てだからだ。それ以上でも、それ以下でもない。サイトの作者は、その四角い空間の中で、 勝負する。自分の伝えたいものを、いかに伝えきるか、あるいは、きちんと受けとってもらえるか。それは、ユーザーとサイトをつなぐインターフェイス、つま り、Webサイトのデザインによるのである。

もっと簡単に言おう。

汚いサイトは読む気がしない、でしょ？

---

今回の模様替えを考えたのはなぜか。「羊ページ」は、見やすくしようと改装に改装を重ねたことが、逆に裏目に出てゴチャゴチャになってしまった。これを、一から見直そうと思ったのだ。
「もう、このデザインじゃやってらんない」と、思ったのだ。

羊ページ Release 6 のデザインは、「赤・黒・白」を基本とした配色を意識していた。このもっとも基本的な色をベースにWebを構築することは、言ってみればWebデザインの王道ともいえる。
「赤・黒・白」の三色をうまく同時に使ったWebサイトはあまりないが、このうちの二色の組み合わせの実例ならば、いろいろと思いつく。 黒・白のデザインのいい例としては、wwww.apple.com が挙げられるし、Microsoft の BackOffice Web は赤・黒のデザインの典型的な実例だと言える。

しかし、赤と黒という配色は、見る人に過大なプレッシャーを与えがちだ（赤は「危険」を示す色で、人間が最優先で認識する色。その赤を最も栄えさせ るのが黒だ）。白・黒の配色は言うまでもなく色味が無くて寒々しい。僕は、「赤・黒・白」をどう組み合わせて、美しいサイトを作るか、試行錯誤を続けた。
「赤・黒・白」の生み出す、悪影響の部分を和らげるために、柔らかめの色（藤色など）を併用してみたり、グラデーションにしたりといろいろ工夫はしてみた。しかし、その結果は、悲惨なものだ。

最終的に、Release 6 のトップページには、様々な色味があふれてしまった。グレー系、赤系、青系のグラデーションが乱立し、視認性はいいものの統一感がまるで無い。そして、もっとも致命的だったのは、このページを見ていると、「なんとなく落ち着かない」のだ。

よく、初心者がいきなりホームページを作ると、ありったけの色やイラストを使おうとする。そうすると、見ただけでクラクラくるサイトができあがる。黄色地に緑の巨大な文字で「ゆっくり見ていって下さい」などと書かれても、早々に退散したくなる。

羊はさすがにそこまで酷くはなかったが、手を加えれば加えるほど、「いけてなく」なった。

さらに問題点を挙げれば、無駄なオブジェクトや指示が多かった。必要のないライン、無用の注意書き、ボタン、、。それらは、なんの役にも立っていないのに、目障りなものとしてユーザーの視界には入ってくるのだ。

他にも問題点はあった。全てをまとめてデザインしたわけではないので、画面を構成するオブジェクト（ボタンや、ラインやバナー）に統一感がなかっ た。Release 6 を訪れた人たちは、「なかなか手間をかけて（出来合の）オブジェクトを選んでいるな」とは思ったようだ。しかし、まさかあれが全部、僕の手作りだとは思う まい。

それは、「隠れた努力がいいんだ」とかそういう話ではなくて、デザインとしてバラバラだからそう見られてしまったのである。

たとえば、ディズニーランドに行って、小川に橋が架かっていたとしよう。ゲストは（入場者は、ディズニーランドではそう呼ばれる）その橋はきっと ディズニーランド専用に作られたものだと信じて疑うまい。なぜなら、ディズニーランドの橋は、周囲の雰囲気にうまくとけ込むように、カートゥーンチックに ディフォルメされている。更に、色は、厳重な色彩コントロールの行われた色台帳のなかから、景観にふさわしいものが使用されている。こうした、徹底した演 出のためのシステムが、橋を、違和感無く見せているのだ。

---

そうしたことをふまえて Release 7 を作ってみた。

いままで7回もWebサイトの再構築をやって分かったことは、「シンプルじゃないサイトはだめだ」ということだ。しかし、「シンプルに」というの は、とても難しい。色やオブジェクト、一つ一つに対して、「これは本当に必要なのか？何のために必要なんだ？」ということをきちんと考えられないと、うま くいかない。

今回の再構築では、いらなそうなものはとことん削った。賛否両論あると思うが、Back ボタンは廃止した。サイトの構造や利用の仕方は、シーケンシャルにコンテンツを追っていく方法から、ランダムに、思いつくままに、という方向に変化しつつ ある。そうなると、Backボタンといっても、どこにBackするのが適切なのかは誰も分からない。それならば、ユーザーがブラウザのBackボタンを使 用する方がよほど正しいし、事実、大半のユーザーはブラウザ側のBackボタンを使っているはずだ。

色も完全に見直した。赤は非常に限定した使い方しかしていない。黒は、本文の文字や、グラフィックのDropshadowなどにのみ使用している。他の種々雑多な色は、無くしてしまった。

そして、今回、基調色としたのは、見てもらえば分かるように青だ。理由は、ただ最近お気に入りだから。しかし、実際にこの色を使ってみると、非常に難しいことが分かった。青、というのは、種類がいっぱいあるのだ。

（会社で僕が管理しているWebサイトと同じデザインだと言う人がいるかもしれないが、青系を基調としている以外は、共通点はない。その青にしても、実は全く違う青を使っている。）

---

青は、人間が目にする頻度が最も多い色だ。

空は青いし、海も青い。地球上で最も広く普及している衣類である、ジーンズも青い（ドラえもんも青い）。人は、青という色をよく目にしている。それだけに、微妙な色の加減で印象がまるで違ってしまう。つまり、青という色は、微妙な違いが分かりやすい色なのだ。

このページの基調色は16進数で表すと、0x3069c8(RGB, 16bit)である。この色に落ち着くまで、さんざん試行錯誤した。落ち着けること、白・黒と組み合わせてもコントラストを失わないこと、明るいこと、な どなど。基調色だけにものすごく時間をかけて選んだ。

実は、この色探しが一番大変だった。これさえ決まってしまえば、あとはこの色に合わせた雰囲気でページを再構築していけば良いのだ。そして、約3日でこの新しいRelease 7が出来上がった。どうにか、新年には間に合ったというわけだ。

個人的には、なかなか良くできたと思う。しかし、このサイトの良し悪しを本当に判断するのは、読者であるあなただ。