| 049.
【インターフェイス・デザイン】まずコレの置き場を確保せよ！ |
話は戻って、サイトデザイン（→043参照）の3工程目「インターフェイス・デザイン」の説明です。
この連載で何度も書いてますが、どんなにおもしろいサイトを作っても、そこにたどり着けなければ存在していないのと同じ。リンクやボタンといった来訪者をナビゲートする「インターフェイス」のデザインはとても重要です。
しかしインターフェイスのデザインはとても難しいのも事実。ならば、まず場所だけしっかり確保しましょう。なぜならインターフェイス・デザインの基本は「全ページ同じ場所に同じデザインで置け！」だから。
言われてみれば、企業のサイトはどれもインターフェイスの場所とデザインは統一されています。逆にシロートサイトには、ページごとにインターフェイスの場所があちこち変わったり、デザインがごちゃごちゃのものが多い……。たくさんのページから見たい情報へすばやくアクセスできると安心を感じるのに対し、操作しづらいページからは無意識のうちにストレスを感じるのです。それがサイトの印象につながるのは言うまでもありません。
なにはともあれ、インターフェイスのために確保する場所は、ページが表示されたときスクロールしないでも見える範囲。ページの下の方に置いてしまうと「スクロールしてからクリック」と来訪者にひとつ多くアクションさせてしまい「面倒だな」という印象を持たれてしまいます。目に付きやすい部分にインターフェイスがあると、すぐに移動できる安心感や他のコーナーへの興味を引かせるといった効果があります。たいていページの上部か左が多いようです。フレーム（ブラウザの画面分割）を使えば下部に固定して置くこともできます。
|
 |
代表的サイトのインターフェイスエリア（赤色）。
左からポータル系、マスコミ系、メーカー系。
どれもスクロールしないで見える範囲にあることに注目。 |
|
|
| 050.
【インターフェイス・デザイン】この4要素をおさえろ！ |
いいインターフェイスに求められるのはこの３つ。
１） 進める
当たり前ですが、希望する場所へ確実に行けること。そのためには「ここをクリックすると行ける場所」をしっかり明記。（→023参照）よくヘンテコフォントをボタンに使っているサイトがありますが、そんなの作った本人しか分かりません。
２） 現在地がわかる
たくさんのコーナーがあるサイトでは特に重要。現在地だけ色や大きさを変えるといったデザイン的な変化があると安心。（→024、054参照）
３） 戻れる
戻りたいときにブラウザのバックボタンをクリックさせるようでは失格。コーナーが多かったりその中での階層が深いときは、どこへ戻れたら便利かを考えて複数の戻り先を設定。（→022参照）もちろんサイトのトップページに戻れることも必須。
４） クリックしやすい形状
どこにリンクがあるのか分からないようなデザインでは困ります。ボタンならせめてボタンらしいデザインと大きさにしましょう。文字のリンクならリンク色を普通の文字色とはっきり異なるカラーにしたり（→005参照）太字にするなどの修飾をします。 |
|
|
|
| 051.
【インターフェイス・デザイン】計画通りにレイアウト！ |
ディレクトリ・デザイン（→046参照）でコーナー数、コーナーの中のサブコーナー数を決めていれば、その最大数が入るようボタンのレイアウトを調整します。あとからインターフェイスレイアウトを変えるのはとても面倒なので、あらかじめ数ぐらいカウントしておきましょう。
また将来増やす予定があれば、その余裕も見てレイアウトを組みます。横方向にボタンを配置するより縦方向にボタンを配置したほうが、数が増やしやすいでしょう。 |
|
|
| 052.
【インターフェイス・デザイン】使い回せ使い回せ使い回せ！ |
ブラウザにはキャッシュという機能があります。一度受信したデータをハードディスクに保存しておき、あとで再び表示する機会があったら保存しておいたデータを読み出すというもの。いちいちネット経由で呼び出すより高速に表示ができます。
ボタンなどインターフェイス用の画像はまさに使い回す定番パーツ。積極的にキャッシュを活用しましょう。ポイントは、使い回す画像は「imagesフォルダ」に入れて（→016参照）、同じパーツを各ページで貼り付けること。同じ画像があちこちにいくつもあって、それをバラバラに使っていたのではキャッシュになりません。あくまで「同じフォルダ内の同じファイル名の画像」を使い回すことに意味があります。 |
|
|
| 053.
【インターフェイス・デザイン】ボタンのサイズは揃えよ！ |
| すべてのページでインターフェイスは統一サイズ＆デザインが基本（→049参照）。そのときにボタンのサイズも揃えておくとボタンが増減したときにレイアウトが崩れにくくて便利です。もちろんボタンによってクリックしやすさに差がつくのを防ぐ効果もあります。 |
|
|
| 054.
【インターフェイス・デザイン】デザイン違いを用意せよ！ |
インターフェイスの中でひとつのボタンだけデザインを変えておくと……たとえばコーナー名が赤くなっていたら……それはおそらく現在地ということでしょう。
インターフェイス部品を作るときにこういったデザイン違いをついでにつくっておくと便利です。あとから追加で作るのは、案外手間がかかるものです。
このとき、デザイン違いのパーツには、ファイル名の末尾を変更して保存します（→019参照）。html制作やファイル管理のときにリスト表示が接近して便利です。
＜例＞トップページへ戻るボタン b-top.gif
色違いのボタン b-top-a.gif
ボタンに「b-」という先頭記号、色違いに「-a」という末尾記号をつけて分類した例。これでリスト表示の時にボタン類がまとまって表示されるうえ、色違いパーツも並んで表示される |
|
|
今回はインターフェイスをデザインするうえでのコツをまとめました。
次回は実際にインターフェイスの部品を作ってみます。 |
|
|
|
|
