デザインサンプル「Smile」と同様、マウスオーバー時にメニューボタンのイラストが動くという仕様が特徴のテンプレートです。動きがあるデザインにはコミカルなものが多いですが、本サンプルの様に、ホームページ全体の雰囲気にマッチさせた誠実なイメージを出すことも可能です。イラストを用いたボタンはサイズが大きくなりますので、メイン画像に被せてなるべくコンパクトに見せることがポイント。メイン画像はそれを考えて被せる部分がシンプルな構図のものを選択した方がベターです。　

(さらに…)

メイン画像にメニューボタンを被せ、両者にイメージ的な関連性を持たせたデザインです。サンプルでは子供がテーマですので、メニューボタンも子供を意識したデザインにしています。さらに、マウスオーバー時にボタンに描かれている表情が変化（スマイル）、さらにボタンの位置が上に跳ね上がります。メニューボタンはサイト内リンクの役割を果たすパーツですが、この様なコミカルな動きにより、ホームページのイメージを作り出す中心パーツとすることも可能です。　

(さらに…)

メイン画像を複数の丸い穴が開いたシートを通して見たデザイン。その円形を使ってメニューボタンをレイアウトしています。このようなデザインもデザインサンプル「FieldBtn」と同様、よく見られるものです。格子状の四角いレイアウトに比べて円形の方がボタン間の距離が離れて見えますので、隣り合わせてボタンを配置しても違和感がありません。また、サンプルでは、幾つかの穴でメイン画像とは異なる画像をはめ込み、にぎやかな雰囲気を出しています。これは格子状のレイアウトでも良く用いられるデザイン手法です。　

(さらに…)

メイン画像に格子を被せ、その格子を使ってメニューボタンをレイアウトしたデザインサンプルです。このような格子を用いたデザインは雑誌の表紙などでよく見られ、各項目を違和感無く整然と配置できる点が利点です。ここではそれを利用して、格子をボタンとして採用しています。ボタンの配置には自由度がありますが、余り各ボタンを離れて配置させると、メニューボタンとして認識されないかもしれませんので、 「飛び石」 に配置するのが無難です。　

(さらに…)

デザインサンプル「Fixed」と同様、メイン画像を固定した仕様のサンプルです。本サンプルではサイドにメニューを配置して、メイン画像の一部を隠している点がポイント。これにより、横方向へのスクロールで隠れた画像部分が現れることになり、広がりを持ったものに見えます。横長のメイン画像を用いたい場合に有効です。なお、本サンプルは「B&W」とほぼ同じ画面構成ですが、横方向へのスクロールを意識して、画面幅を広くしています。　

(さらに…)

オーソドックスな画面構成ですが、メイン画像がスクロールしても固定されている点が大きな特徴のサンプル。デザインサンプル「BackWed」でも固定画像を用いていますが、画像が動かないという仕様は背景画像に用いられることが多いです。一方、このサンプルではメイン画像を固定している点がポイント。これによって、スクロールすることで、見えていた部分が隠れ、隠れていた部分が見えるという独特の見え方になります。サンプルでは美味しそうなお菓子の全景を敢えて見せずに、スクロールすることで見ることができるという形にしています。　

(さらに…)

透明感のあるボタンデザインを採用したサンプル。メイン画像の上にボタンを部分的に被せて連続性を持たせています。デザインサンプル「Clear」でも触れましたが、透明感のあるデザインは清潔感と同時に神秘性をかもし出し、他のサイトとは少し違った雰囲気を演出してくれます。また、このボタンには背景から浮き出している様に見せるために影をつけていますが、マウスオーバーによってボタンが押されているようにボタンが微妙に動き、影も変化する仕様になっています。　

(さらに…)

メイン画像上と下側にメニューボタンを配置したデザインサンプルです。配置された二つのメニューを違う用途で用いることができる点がポイント。サンプルでは、一番見てもらいたい項目である事業内容を目立つメイン画像上のメニューに、企業の基本情報などは下のボタンに配置しています。メイン画像上のメニューは大きいので、マウスオーバー時は簡単なキャッチフレーズ的なものを表示させることができる利点があります。この様にメイン画像を単なるホームページのイメージとしてだけではなく、メニューとしての実用性を持たせるとインパクトが増します。　

(さらに…)

デザインサンプル「BackSea」と同様、メイン画像をサイドに広く取ったデザインサンプルです。「BackSea」のメイン画像と異なり、ごちゃごちゃとした構図のため、ヘッダー部分をコーポレートカラー（サンプルではピンク）にしてロゴを配置。さらにメニュー部分はクリアーボードを敷いたデザインとして、背景を見せつつも文字も読見やすいようにしています。マウスオーバーのリアクションはおとなし目にして軟らかい雰囲気をかもし出しています。　

(さらに…)

画面構成はオーソドックスなデザインですが、メニュー部分をボタン形状にしたサンプル。メニューバーと異なりボタン間に隙間があるので、メイン画像の上に配置しても重苦しさがありません。さらにボタン名称の左サイドに三角形（矢印）を配置し、マウスオーバー時にこの三角形が右に移動するという仕様にしています。多くのサイトで見られるマウスオーバー時のリアクションは、ボタン色が変化するというものですのですが、この様な動きが入ると新鮮に感じられます。　

(さらに…)