メニューの作成 プランができたので、まずはメニューから。 クリッカブルマップはその名の通り「クリックできるマップ」です。マップといっても地図だけでなく、gifやJPEGならどんな画像でもOKです。ただ、これもれっきとしたユーザーインターフェイスなので、あまりにも分かりづらいものはNGですが。 よくある使用例を挙げると ・多国籍企業のトップページ。世界地図を表示し、各国ローカルのサイトを選ばせる。 ・天気情報。地域選択を簡略化した地図で表記して選ばせる。 ・機械や部品などの説明図。説明を見たい部分をクリックして選ばせる。 といったところ。どれもメニューとして文字やアイコンを置く代わりに、画像そのものをクリックさせた方がわかりやすい例です。 今回はデザイン的な意味合いで、新製品の携帯情報端末を中央に置き、そのまわりに機能紹介と関連した数字の表記で、より詳しい情報へと誘います。項目は６項目なので、画像の周りにバランスよく配置します。 イラストはIllustratorで別途作成。Photoshopで文字を配置。 クリッカブルマップを作るときの注意事項はただひとつ。クリックさせる場所を意識しながら作ること、です。 のちほどDreamweaverでクリッカブルマップ指定を行いますが、そのときに領域を四角形・円形・多角形のいずれかで囲みます。「離れ小島」ができた、隣のクリックエリアと接近しすぎた、クリックエリアが極端に小さい……という場合は、画像を作りながら場所や位置関係を修正しておくと後がラクです。 今回は文字部分をクリックさせるだけで、かつ文字同士が離れているので問題なくクリッカブルマップにできそうです。 マップとなる画像ができあがったら、JPEGまたはgifで書き出しておきます。 htmlの作成 マップ画像とそれ以外の画像も用意できたら、メニューページと詳細情報のページを作成します。 メニューページはマップ以外を普通に制作します。詳細情報のページは通常よりもウインドウのサイズが小さいので、それを見越したデザインで作ります。今回詳細情報のウインドウ（以降、サブウインドウと呼びます）は、幅、高さともに300ピクセルで開きますので、その中で収まるような画像にしてあります。 サブウインドウのデザイン。実際には横幅をもう少し絞って表示される。 なおサブウインドウを閉じられるように、詳細情報の各ページ下には「閉じる」ボタンを付けています。作り方はボタンのタグの前後に 　<a href="javascript:window.close()">ボタンのタグ </a> というタグを入れるだけ。できあがったら試しにブラウザで詳細情報のページを開き、閉じるボタンをクリックしてみてください。もし閉じないときはタグが間違っていないか、そしてブラウザのJavascriptをONにしているかを確認してください。 Point　141：メニュー←→詳細ページ間の往復が多いなら、見せ方を工夫せよ！ 次回はクリッカブルマップを設定します。 順序を自由にに見せる　（１）　終わり [ ←BACK ]