管理人 MASARU さんは茨城県在住、28歳、B型の男性。サッカーチームに所属し、最近はコーチも務めていらっしゃるスポーツマン。Flash や 3DCG にも興味があり、あちこちへ旅行しては写真を撮る趣味も。こうした多彩な人生を送る MASARU さんが、身の回りのあれこれを詰め込んだ Web サイトが NeoCool です。
NeoCool のメインコンテンツは写真と Flash ムービーで、力作が多数公開されています。しかしこのところ更新が続いているのは、所属されているサッカーチームの活動状況。最近、一番の関心事なのでしょう。また意外に（?）きちんと作られているのが地域情報のコーナ。近所のお店の紹介なのですが、主なメニューや店先の写真など、ていねいにまとめられています。さらに3次元モデリングによるイラストも少しだけ用意されています。
典型的なごった煮サイトですが、管理人 MASARU さんのパーソナリティーを表現するサイトとしては、よくまとまっていると思います。デザイン上の制約からコンテンツを増やせないのが気になるところですが、そのときには向上した技術を駆使してリニューアルされるのでしょうから、大きな問題とはいえません。このサイトで人気を得ようとすると大変なのですが、ローカルで日記をつけている人（最近はどうだかわかりませんが、一昔前までは意外に大勢が地道に日記をつけていたものです）のように、現在・未来の自分自身のために作成されている Web サイトであれば、現在の方向性は間違っていないでしょう。
自分の身の回りの出来事（趣味とその足跡）ばかりです。デザイン系のアドバイスなど頂けたらお願いします。それとは別になるのですがデザインの勉強になる本がありましたら紹介お願いします。
デザイン系のアドバイスをご希望とのことですから、その点に的を絞って意見させていただきます。
問題は大きく3つあります。
- レイアウト
- 配色
- Flash の使い方
順に解説します。
- 1．レイアウト
NeoCool のレイアウトには、初歩的なミスが多数あります。例えば、以下のスクリーンショット（図1）をご覧ください。
たしかに、ひどいレイアウトではありません。すっきりと情報を整理できています。けれども、どこか垢抜けない、隙の多い印象があります。それは何故か、と考えてみると、このレイアウトが基本的なデザインルールを押えていないことに気付きます。
図2では、図1をグレースケールに変更しオレンジ色の補助線をいくつか重ねてみました。画面を構成する各要素のエッジを延長した、ごく単純な補助線です。簡単のため、鉛直方向の補助線だけ示しました。左寄せの文字列は左側、右寄せの文字列は右側、長方形の要素は両側に補助線を引いています。
一見して、補助線が多すぎることがわかります。レイアウトがちぐはぐになっているのです。
こうなってしまった理由は、予想がつきます。各部分に注目すれば、たしかに現在の配置は美しいのです。
例えば最上位のナビゲーションの領域。「Information」と「BBS」では文字数が違いすぎますから、同じ幅を割り当てたのではアンバランスに思われたのでしょう。そこで「Gallery」と「BBS」という文字数の少ないもの同士を縦に並べ、等間隔ではなく文字数に見合った幅を割り当てたわけです。第2階層のナビゲーションも同様です。「Motion」「Photo」「Monochrome」の文字数にあわせて、幅を決めていらっしゃる。そして写真のサムネールは全部同じ大きさなので、幅は3等分となります。
画面の構成を考えるとき、積み木のようにやっていってはダメなのです。まず全体を考え、次に部分を考えねばなりません。部分は全体の構成要素に過ぎないのであって、そのデザインは全体のバランスの中で決めていく、という意識をきちんと持っていないと、どれほど知恵を絞ってもうまくいきません。
今回、サムネールの画像は全て同じ大きさにすべきなのですから、これが動かしようのない前提条件となります。とすると、基本的な配置を現状維持とするならば、幅は3等分しかありえません。これが出発点です。文字数と幅の釣り合いをとるには、長い単語と短い単語を上下に並べればよいのです。このとき長い単語を上、短い単語を下に置きます。そうすれば違和感が落ち着きます。きちんと目標を見定めれば、よいアイデアはどんどん浮かんできます。
今、私はひとつの例について意見しましたが、こうした考え方は他の多くのページのデザインにおいても適用できます。一気に全部、改善しようとする必要はありません。ひとつひとつ、考えていくことを勧めます。
- お勧めの解説書
-
この本は、デザインの初歩的な知識を得るのに最適です。デザインのポイントを「近接」「整列」「反復」「コントラスト」の4項目に整理し解説しています。
私が先ほど説明したのは「整列」の考え方でした。せっかくですから他の3項目についても指摘しておきましょう。
- 近接
いくつかの項目を近づけると、それらは関連するグループと判断されます。この性質を使用して、画面の構成要素を組織化することにより、情報がきちんと伝わるようになります。たいていの閲覧者は階層化されていない項目がずらずら並ぶことを嫌がりますので、各要素の間隔にはきちんと差異をつけていくべきです。
NeoCool では、ナビゲーション周りに改善の余地が大きいのではないでしょうか。再び図1をご覧ください。2行にわたっている第1階層の行間と、第1階層と第2階層の間の距離が同じですよね。そして第2階層とサムネールの中間に「1/1」という第3階層のナビゲーションがあります。私なら、第1階層の行間を縮め、第3階層はサムネールの近くへ寄せます。一方、「Site Map」が離れた位置にあるのは正解だと思います。
- 反復
繰り返しは、孤立する各要素に関連があることを示します。逆に、本当は同じような役割を担っている要素であっても、見た目を違えてしまうと異なるものとして認識されてしまうわけです。
NeoCool では、全体としては反復に注意が払われています。左半分がコンテンツの表示領域、右下が第1階層のナビゲーション、右上が下位のナビゲーション、という配置は、別画面に開かれる掲示板とサイトマップを例外とすれば不動です。難があるのは下位のナビゲーションのデザインがいろいろだということでしょう。
- コントラスト
デザインに強弱をつけることで、情報を整理することができます。
NeoCool では、情報の整理が大まかなレイアウトだけで終わってしまっていて、それ以上の工夫があまり見られません。ナビゲーションの階層は、文字の大きさやフォントの選択によっても示されるべきです。
今、重要なものほど、大きく目立たせましょう。写真のサムネールを切り替える「1/11」といった文字列は、定期的に文字を光らせるくらいに目立たせてもいいと思う。その代わり、文字は少し小さくしてもいい。逆に第1階層のナビゲーションは、もっと地味でいいはずです。場所も取り過ぎています。私ならサイトマップや著作権表示と同様に、枠の外へ追い出しているだろうと思います（そしてその方が第1階層のナビゲーションだとわかりやすい）。
結局、デザインを考える4つのポイントは、すべて情報を整理する手段です。作者の頭の中では情報が整理できていても、表現が平板では閲覧者に伝わりません。「近接」「整列」「反復」「コントラスト」は、いずれもクールなデザインを実現するために有用な方法ですが、それと同時に、情報の性質を閲覧者に伝える大切な手段でもあるのです。
- 2．配色
配色のポイントもレイアウトと同様です。関係の深いものは色を「近接」しましょう。同じ役割の構成要素は色を「反復」させましょう。重要な部分とそうでない部分には「コントラスト」をつけましょう。そして全体の色調を「整列」しましょう。
「整列」は他の3項目と少し性質が違っていることに注意してください。「近接」「反復」「コントラスト」は、各要素をグループにしたり、上下関係を作ったりして、意図的に変化を作る方法です。これに対して「整列」は、意図しない変化をつぶす方法なのです。それによって雑音を消去し、表現したい箇所をきちんと目立たせるわけです。ですから、「整列しない」ことで変化を生み出すのはもちろん OK です。例えば、見出しと本文の整列線をずらすのは常識的なデザイン手法です。
重要なことは、まず地ならしをして、真っ白なキャンバスを作ることです。そして、きちんとコントロールしながら、変化を作っていくことです。コントロールの基本はトップダウン方式です。レイアウトの基本的な考え方は、配色とまったく変わりありません。
NeoCool の配色は、どこか垢抜けない感じがします。具体的には、例えばナビゲーションの赤い下線、「Gallery」第2階層ナビゲーションの黒帯と青地のコントラスト、地域情報の薄黄の背景色……どうにも統一感がない。ひとつひとつがそれほどひどいとは思いません。例えば紺に鮮やかな赤の取り合わせ、かなり冒険的だと思いますが、ありえない組み合わせではないというところ（常識的には補色を狙いますからオレンジ系にします）。でも、使うなら徹底しないといけません。
色というのは簡単なようで、センスだけではうまくいかないものです。その道のプロが配色サンプルをたくさん公開されていますから、まずはそれらを探して選んでいくことを勧めます。また色相環などの色彩の基礎知識は、持っておくに越したことはありません。
- 3．Flash の使い方
最後はまあ、与太話です。
Flash を使ってみる、というのがひとつの意図だと思いますので、それ自体はどうこういうつもりもないわけなのですが、使い方に改善の余地が多いのは事実です。一番、気になったのは、リンクの反応でした。まず「これかな?」と思った文字列がリンクなのかどうか、カーソルを重ねてみてもわからないんですね、Flash の場合。ふつうのリンクだったら、ステータスバーにリンク先の URI が表示されるので、装飾の下線とリンクは見分けがつきます。Tab でフォーカスを移しても判別できます。
WWW ブラウザの HTML 文書の解釈機構はけっこうよくできていて、細かいところでいろんな仕事をしているわけです。Flash で Web サイトを作るときに、一番考えなければいけないのは、それで不便が生じないようにすることだと思う。もちろん、そもそも Flash のプラグインを許可していない閲覧者の場合にはどうしようもないのだけれど、それは NeoCool の対象層でもないから、こちらからお断りでもいいのかもしれない。だからそういう極端な話を抜きにして、ふつうの訪問客について、ちょっと考えてみたい。
Flash を使えば、かなり自由にインターフェースをいじれるのだけれど、結局のところ「リンクをクリックして情報を切り替える」「所定の領域に収まりきらない情報は縦スクロールで表示する」というシステムを採用するケースがほとんどですよね。何故かというと、それが閲覧者のほぼ全員が特別な説明抜きで迷いなく使える唯一のインターフェースだからです。Flash でこのインターフェースに取り組む際、気をつけるべき点は2つ。
- リンクはリンクとわかるようにする（操作感もできる限りブラウザ標準の挙動に似せる）
- スクロールバーはスクロールバーとわかるようにする（同上）
一部で用いられているスクロールバー、私は問題ないと思いました。でも、リンクは問題あり。2点、改善されるとよいでしょう。
- カーソルを重ねたときに、何か変化させる
- リンクをクリックしたときに、何か変化させる（ちょっとしたことでいいから、最小のタイムラグで何か変化がほしい。IE でテキストリンクをクリックすると、細い点線が生じます。そのことをきちんと認識している方はそう多くないのですが、人間の目は無意識であっても変化を敏感に感じ取っています。だから、しばらく画面が切り替わらなくても、「クリックし忘れたかな?」と不安にならないのです）
NeoCool のリンクは、私のような低速回線の利用者の場合、クリック後しばらく画面に何の変化も生じないので不安になります。なんでも自由にできる代わりに、何でも自分で作りこまないといけないのが Flash によるインターフェースのつらいところだと思います。
と、いうわけで、長い長いアドバイスもこれでお終いです。最後までお付き合いいただき、どうもありがとうございました。