■ユーザー・インターフェースについて

■はじめて訪れた来訪者に優しいこと
ユーザーインターフェースのよし悪しで、来訪者へのイメージがかなり違ってくるといえます。このページは親切だ、とか、不親切だ、という印象はリピーターの数をも左右しかねない重要ポイントでしょう。ホームページは勝手知らない他人の家(?)なのです。初めてのお客さまを奥の部屋までご案内して、自慢の壷(?)を見ていただくには親切で、ゆきとどいた案内が必要です。

・分かりやすいこと。(直感的であること)
・初めて来ても、全体の様子がつかめ、自分の知りたい情報へたどり着けること。
・奥の階層に入ったとき自分が今何処にいるのか分かりやすいこと。
・迷い子になったとき、自分の位置が分かるところまで戻れること。
・プラス、遊び心
などを考慮したうえで、自分なりにアレンジしてみましょう。

■結局なにを伝えたいのか
ユーザーインターフェースの良し悪しは、実はコンテンツを構成している時点で半分は決まってしまうような気がします。内容につながりが無く散漫なページは、いくら頑張っても、何かしっくりこないものです。「あっちも見てね、こっちも見てね。」と、制作者が迷っていては、見る側も迷うに決まっているからです。こういうときは、メインとなる項目にを絞りこみ、あとはサブ的に流してしまえば、まとまりやすくインターフェースのよいページも自然とできるのではないでしょうか。まず、じっくりと自分が何を言いたいかを問い直すことから始めるといいでしょう。すると、スイッチひとつ作る時も、サイズの比率などが自然と絵になってくるはずです。

■GIFを用いたインターフェース

では、技術的な一例を書きだしてみましたので、参考にしてくださいませ。

■同じスイッチの使いまわしによる効果
同じボタンを使いまわすと、そのページが何処に所属するページなのかがはっきりと分かると思います。また、アイコンボタンがキャッシュされ、インターフェース部分での余計な転送時間も短縮できます。
●メインコンテンツ　「DIGITAL GALLERY」のアイコンをクリック。
●サブコンテンツ　　ここでも同じアイコンが。お好みをクリック。
●アンカーページ　　やはり、同じアイコンが。

■GIFアニメを利用したインターフェース。
●進んで欲しい方向を示す
このページの下までスクロールすると、GIFアニメによって点滅しているスイッチがあります。なんだかそちらを押したくなりませんか? 「進む」ボタンが強調され、進路を暗示しています。

●選択を促す
今度は「戻る」と「進む」の両方が点滅しています。どちらでも好きなほうへどうぞ、という選択できる雰囲気です。また、「進む」のスイッチは先ほどのページでキャッシュされているのでインターフェース部分で新しく読み込んだのは「戻る」のパーツだけです。

■スイッチの均等ヨコ配列
テーブルタグで紹介した均等配置するスイッチなどを参考にしてください。
●均等配置するスイッチ

■Shockwaveを用いたユーザーインターフェイス

インタラクティブなユーザーインターフェースといえば、Shockwaveの出番です。まじめなものから、遊んだものまで、考えてみましたのでご覧ください。

●Shockwaveのスイッチアイコン
手法はGIF、GIFアニメーション、Shockwaveとそれぞれ違いますが、インターフェースとしてのイメージは意図的に統一を図っています。

●Shockwaveのクリッカブルマップ
クリックした各キャストによって、それぞれのリンク先に飛んでいくというお馴染みのものですが、動きや音などShockwaveならではの効果が付けられます。
※Shockwaveについての詳しい説明は本書のShockwaveの頁を参照ください。

フレームを用いたインターフェース

●クリッカブルマップとフレームの連動
このページも何回か引用したページなのですが、インターフェースという点では、クリッカブルマップとフレームの連動という点にも注目してもらいたく思います。イベントの起こりそうなタイルをクリックすると、いきなり外界へリンクで飛んでいってしまうのではなく、サブフレームで、大まかな内容を説明して、気に入ればリンク先へ。というものです。何かの参考にしてくださいませ。

●告知のテロップ表示
また、このページの上のフレームは、メーターによって、10秒ごとにいろいろなインフォメーションを表示しています。系統的にリンクによってたどりつく他に、このようにスポット的に関係ページを紹介するのも効果的でしょう。

<META HTTP-EQUIV=refresh CONTENT="10; URL=next.html">
※メーターはHEADに上記の一行を追加するだけで簡単にできます。
※"10; には切り替わるまでの秒数を入れます。
※URL=next.htmlには、次のページのURLを入れます。

※ここでは、実例中心の解説部分だけを抜粋しています。
詳しくは本書をお読みください。

wwwPublishingにおけるdesign手法の最後に

僕は元々グラフィックデザイナーなので(今もそうですが)ついつい画像など重たいページを作ってしまう癖があるようです。本来は今まで書いてきたような手法を使って、データを軽くしなければならないのでしょうが、こと、自分のプライベートなページともなるとなおさら、画像が軽くなった分だけサウンドを足してしまって結局同じだったりと何をしているのか分からない時がよくあります。こういう書き方をすると関係各社に叱られそうですが、僕の手掛けたページの中では、僕自身のプライベートページが一番好きです。自分が一番やりたいことをやれる自由なページ。それを創っている時間が楽しいし、見てくれる人にも伝わるような気がします。個人で楽しむのなら、自分でホームページを創っていて、楽しくないと感じたら、方向を少しずつ変えて、自分の楽しいコンテンツに持っていくのが一番いいと思います。楽しく創れば、かならず思いは伝わりますし、伝わればアクセス数も自然と増えてくる。肝心なのはノってつくること! と、思うのです。
ではでは、みなさん、クリエイターの喫茶店「ROY」でお会いしましょう!

snobuy@leo.bekkoame.or.jp　幸形ノブユキ

[戻る]　[選ぶ]　[進む]