マウスオーバーで表示されるサブメニューを実装したサンプルです。サブメニューの表示のさせ方としては本仕様の他に、メインメニューをクリックし、リンク先の画面で表示させる仕様の二つに大きく分かれます。本仕様の場合は直接各サブメニューのコンテンツにリンクしますのでクリック数は少なくなりますが、サブメニューのタイトル名が直感的に閲覧者に理解できるものにする必要があります。また、マウス操作に慣れていない高齢者などがホームページのメインターゲットの場合も注意が必要です。　

(さらに…)

デザインサンプル「Slide」は、商品表示は一段で左右にスライドする仕様ですが、本サンプルではより多くのアイテムを画面上に提示することができます。表示は二段、スライドする方向は上下で、「↑次へ」「↓戻る」をクリックすると、一段ずつ上下にスライドします。カスタマイズで一度にスライドする距離を二段にすることも可能。さらに、表示段数を多くする等のカスタマイズを施せば、商品カタログとして応用できます。サンプルでは商品を並べていますが、飲食店のメニュー、芸術作品の一覧等の用途が考えられるデザインサンプルです。　

(さらに…)

メイン画像部分を単なる企業イメージをアピールするものにするのではなく、実用的なショーウィンドウとして商品を陳列したサンプルです。「次へ」または「戻る」ボタンをクリックすると、ショーウィンドウが左右にスライドし、次の商品を表示します。単なるリンクによる商品画面の切り替え表示ではなく、スライドする動きがサイトの高級感を演出します。サンプルでは通販サイトとして商品を陳列していますが、飲食店のメニューや様々な製品を扱うメーカー様など、アイテム数が豊富でそれらをアピールしたい場合に適しています。　　　

(さらに…)

メニューボタンにマウスオーバーすると、ボタンがメイン画像の下部に移動する仕様です。ボタンの始めの位置から移動した位置までの領域はすべてクリックでき、さらにデザインにも変化を与えることができます。メイン画像の一部に大きな変化を与えることができるこの仕様は、その部分に注目が集まり、アイデア次第で印象的なものに仕上げることができます。例えば、サンプルでは三枚の画像を組み合わせてマウスオーバーで変化をつけていますが、一枚の画像を三分割してそれぞれ異なる動きにしてもインパクトがあります。　

(さらに…)

タブメニューにマウスオーバーすると、メイン画像のタブより下の部分が切り替わる仕様のサンプルです。一般的にタブメニューでは、他のページへリンクする際、タブの切り替わりでページ変化を見せるものですが、ここではマウスオーバー時に切り替えるという点が特徴。さらに、その切り替えは単なるタブの切り替えではなく、リンク先のページのイメージ（そのページで伝えたいこと）を提示し閲覧者に伝えることができる点がポイントになります。　

(さらに…)

各メニューボタンへのマウスオーバーで、異なるメイン画像に切り替わる仕様を持つデザインサンプルです。FLASHでよく見られる仕様ですが、複数のメイン画像を再生させるためにFLASHファイルが重くなり、回線状況によってはメニューボタンを含むFLASHが中々表示されないという状況に陥りますます。本サンプルはFLASHによらず、さらにメイン画像とメニューボタンの画像ファイルは別ファイルであるため軽いメニューボタンが先に表示。ホームページのナビゲーションに支障をきたすことがありません。　

(さらに…)

メイン画像の余白部分 （サンプルでは青空） に、スクロールできるテキストエリアを配置したデザインです。メイン画像下の本文部分より目立ちますので、企業ポリシーや他とは違う砕けた表現、新着情報など、注目して欲しい情報を配置すると効果的です。もちろんメイン画像上にスクロールしない文章を配置することも可能ですが、ここでは敢えてスクロールさせる様な長文を配置することによって意外性を出しています。また、このテキストエリアは背景画像に馴染ませる様に配色している点もポイントです。　

(さらに…)

メイン画像の広い余白 (サンプルではグリーンの芝) を使って、フローチャートを表示したサンプルです。このフローチャートはクリック （サンプルでは「買いたい」「売りたい」の部分） することで、折りたたまれて非表示だった部分が展開されるという仕様になっています。展開されたフローチャートの末端（サンプルでは各プラン名称）をクリックすることで、該当ページへリンクするという形にすれば、ナビゲーションメニューにはできないページ誘導が可能です。　

(さらに…)

構成はオーソドックスなデザインですが、メニューボタンにマウスオーバーすると、メイン画像上に関連情報を表示される点が特徴です。マウスオーバーするボタン毎に表示させる情報はもちろん、表示させる位置も変えることが可能。この様にメニューボタンから離れた場所に別の情報を異なる位置に表示させることができる自由度が高い仕様は、アイデアによって面白い動きを実現できるものです。ただし、あまり突飛な動きにすると、メニューボタンへのマウスオーバーとの関連性が認識されないこともあり得ますので注意が必要です。　

(さらに…)

メイン画像上にメニューボタンを配置したデザイン。このメニューボタンにマウスオーバーさせると、ボタン下に各リンク先（サンプルでは各プラン）の説明が表示され、リンクもできる様になる点が大きな特徴です。マウスオーバーしていない時にはこの領域には何も表示されず、当然ですがリンクもできません。リンク領域とは異なる部分にこの様な動きを発生させるために、FLASHを用いる場合が多いですが、FLASHでなくても同様の動きを実現できます。　

(さらに…)