余白を多めに取ったデザインサンプルです。画面を構成する線や本文タイトルのバック背景も設定せずに敢えて余白を多く見せることで、閲覧者の想像力を掻き立たせることができます。一方で、マウスオーバー時の色の変化する領域を広く取ることで、それが印象的に見えます。構成がシンプルに見えますので、「シンプルライフ」 などのシンプルさ、または 「ホッとさせる」 物やサービスをコンセプトとする事業を展開される企業様、店舗様に適したデザインです。　

(さらに…)

メニューボタンをスクエアに配列させたサンプルです。マウスオーバー時には各ボタンのデザインが変化する（四角形が大きくなる）仕様になっています。デザインが変わった際に、単なるボタン名称ではなく、メッセージ性を持った文言に表示が変わる様にすると効果的。FLASHを用いたサイトで見られそうな動きですが、FLASHを用いなくてもこの程度のものならば実現可能です。メイン画像からボタンが少しはみ出したデザインもポイントの一つです。　

(さらに…)

メイン画像のほぼ真ん中にメニューバーを配置した、大胆なデザインが特徴のサンプルです。当然メニューバーには透過性を持たせて後ろの画像が見えるようにします。このサンプルではメイン画像の中途半端な位置にメニューを配置するのではなく、思い切ってメイン画像のほぼ真ん中に被せることがポイント。それによってマウスオーバー時の色変化により、背景の見え方が変わり面白さが出ます。ただし、あまりごちゃごちゃし過ぎた部分に被せるとメニューボタンが見づらくなるので注意が必要です。　

(さらに…)

メイン画像を縦に配置して、本文を画面の高い位置に表示できるようにしている点がポイントのサンプルです。もう一つの大きなポイントとして、メニューを右端に配置しています。縦型のメニューは常にウィンドウ内に表示させるように画面の左側に配置するのがセオリーですが、このサンプルのメニュー部分は常に画面の右端に固定して表示させているので、ウィンドウ画面の幅によってメニューが隠れることがありません。スクロールによってもメニュー部分のみ固定されているので、実用性と同時に意外性を持たせることができます。　

(さらに…)

メイン画像の高さに合わせてメニューを縦に配置したデザインです。メニューボタンをマウスオーバーすると右にスライドする仕様がポイント。一見普通のメニューなのに、サイトの閲覧者に 「えっ」 と思わせる意外性があります。さらにスライドした部分の下にはメイン画像が見える。。。というもう一つの意外性も持たせています。メイン画像部分にメニューを収めることで、本文部分を広く取ることができ、より多くの情報を掲載できるようになります。　

(さらに…)

メニューバーに左右非対称のグラデーションを設定している点が特徴のデザインサンプルです。このようなグラデーションを加えることにより、神秘的なイメージをかもし出すことができます。ヘッダー部分にもグラデーションを加え、雰囲気に相乗的な効果を加えています。また、メイン画像は画面左に固定している一方で、本文は画面幅の変更に応じて位置がずれる（常にセンターに表示）仕様にしていますので、少し意外性のある動きを見せます。もちろん、文字がメイン画像に被ることが無いように計算してレイアウトしています。　

(さらに…)

ホームページデザインサンプル「Fusen」と同様、付箋紙をメニューデザインに採用したサンプルです。「Fusen」ではマウスオーバー時に付箋紙の端がめくれ上がる仕様にしていますが、本サンプルではノーマル状態でめくり上がっています（マウスオーバー時に真っ直ぐになる）。メイン画像にメニューをかぶせるという大胆な仕様ですが、付箋紙のリアリティから違和感がなく、親しみやすい雰囲気をかもし出しています。本文タイトルも付箋風のデザインにして統一性を持たせています。　

(さらに…)

付箋紙を模したタブ型のメニューを画面右側に配置したデザインのサンプルです。リアリティを出すために、マウスオーバー時に付箋紙の端がめくれ上がる仕様になっています。基本的にメニューはスクロール無しで表示されるように画面上部または左に配置するべきものですが、付箋紙というデザイン性から画面右側に配置。但し、操作性を損なわないために画面幅は広いものにせず、800ピクセルとしています。本文タイトルも付箋風のデザインにして統一性を持たせています。　

(さらに…)

メイン画像を左サイドに配置し、それを生かすために、敢えてロゴやメニューを右寄りに配置して余白を左側に大きく取ったデザインが特徴のテンプレートです。メニューの文字も右寄せに。ただし、マウスオーバー時は左寄りに変化させることで、文字だけでも十分ダイナミックな動きに見えるようにしています。この様にメイン画像をメニュー部分の左段に配置していますので、右段には本文を高い位置から表示させることが可能。本文タイトルのバックには下半分のみ色付きのグラデーションにして、メイン画像のイメージに合わせています。　

(さらに…)

オーソドックスな構成のデザインサンプルですが、メニューバーに高さを持たせている点が特徴。必然的に画面を占める領域の割合が大きくなりますので、同じような構成のホームページサンプル「Sky」のメニューバーのように、立体感を強調したデザインにすると、重たく見えます。そこで、ここでは軽くグラデーションを掛ける程度のデザインに。もう一つの特徴として、メイン画像上にロゴとメッセージを表示させるために、違和感無くフェードアウトさせています。それに合わせて本文のタイトルバックもフェードアウトするデザインにしている点もポイント。　

(さらに…)