第２弾■ボクいちメニュー・Fireworksによる「ナビゲーションバーの作成」

第２弾はボクいちの表紙に使っているメニュー部分。マウスをのせたり、クリックすると色が変わる「ナビゲーションバー」の作成の部分の作り方を紹介します。長いので２ページに分けてあります。使用しているツールはMacintosh上のFireworks 4とDreamweaver 4です。Windowsやver 3ではメニューやダイアログが多少違うかもしれませんが、基本的にできることは同じです。
（「ボクいち」は2002年3月に移転・リニューアルしてしまいました。ごめんなさい。）

１．まずは全体設計

まずはページの設計から。ボクいち（現在は違う画面になってしまっています。ごめんなさい）はフレームを使っているけれど、まずは試行錯誤しながら全体イメージを作成。下の図がほぼ完成型。いずれ書こうと思っているけれど、私のweb設計は全体像作りから始めるのが基本。HTML化を考えるのはイメージができたあと。

また今回のデザインも「640x480のディスプレイでも全体が見られる」ということも念頭においている。テーマは「黄色」！

左側の部分をフレームにして常に表示しておこうと考え、その部分だけ別ファイルに保存して作業開始！

２．ナビゲーションの設計

マウスを上に載せると色が変わることで「クリックできる」ことを強調するユーザインタフェース、実は私は結構好き。自動的にコロコロ動くものはキライだけれど、ユーザの行動にレスポンスを返すインタフェースというのはとても大切なのだ。

さて、別ファイルに保存しなおしたメニュー部分を眺めつつ、どんな風に色が変化するとわかりやすいか考える。私がボクいちメニューで使ったのは次のような色変化。

実はこの色が変わる仕組みはJava Scriptで実現される。Java Script〜〜〜？難しいんちゃう？…という心配はご無用。そのためにFireworksを使ってるんだから。Fireworksくんが私の代わりに書いてくれるというわけだ。でも、ここで覚えておかなくてはならないのは色の変化には４つあるということ。１つは普通のとき、次はマウスが上に来たとき（onMouseOver）、そしてクリックされたとき（onClick）、最後はクリックされた状態でマウスが上に来たとき（onMouseOverのオプション）。え？どれがどれだって？どんな動きになるの？とイメージが湧かない人は、ボクいち（今は違うデザインになってしまっています…が、似たような感じなので、昔のを想像しつつ見てみてください）のメニューをいろいろクリックして体験してね。

また、覚えておいたほうがいいのは、色の変化は画像ファイルの置き換えで行われるということ。上のような４種類の変化をさせるためには４つのファイル（GIFもしくはJPEG）が必要になる。そう、ここからやろうとしているのは、この４つのファイルを作ってJava scriptを作ること。

そうそう、それぞれの画像のファイル容量が大きいと読み込みに時間がかかったりすることがあることも覚えておこう。あまり大きなものや色数の多いものにしないのがコツ。

３．フレームを使うのであ〜る

この仕組みを作るためには、Fireworksの「フレーム」という機能を使う。上で示した４つの変化がフレーム１つ１つの対応するようになっている。

・フレーム１：普通の状態
・フレーム２：マウスが上に来た状態
・フレーム３：クリックされた状態
・フレーム４：クリック状態でさらにマウスが上に来た状態

フレームは通常はレイヤーと同じパレットウィンドウに入っているので開いてみる。最初は「フレーム１」しかないので、これを「複製」して２〜４のフレームを作成する。

このフレームは、もともとはアニメーションGIFを作るときに使われていたものなので、右側に数字（アニメーションに使う数字）が出たりするのだが（上の図では"7"ってやつ）、これは無視。気にしない、気にしない（笑）。

フレームを４つ作ったら、上で考えた色を実現してゆく。フレームパレットでフレームを選択すると、それぞれのフレームを修正できるようになるので、２〜４で作業をする。

フレーム１とフレーム２の作業中のショット。フレーム２ではメニュー部分の色を変えたりしているのがわかるかな？

最終的な４つのフレームのデザイン。一番上のタイトルがフレーム２以降にないのが気になる？フレーム２〜４の画像で使われるのは実際の「ボタン」として使われる部分だけ。なのでそれ以外の部分はなくてもよいのだ。消すのも面倒なのでメニュー上下の線はそのまま。上のタイトルは、デザインの最終段階で付けたものなの。作っているときにはなかったのさ。なので気にしない、気にしない（またかいっ！笑）

ここまでできたら、次はスライス分け。長くなってきたので次のページへ！

pege 2に続く >>