ホームページデザインサンプル
ここでご紹介しているデザインサンプルは、ホームページ制作の現場で実際に使われているものばかり。各サンプル画面の特徴を解説します。
ニューボタンのマウスオーバーで、メニューバーからはみ出して表示されるボタンが特徴のサンプルです。
画像の一部だけを提示、ボタンクリックで上下させることで画像の全体を確認できるという仕様がポイントのデザインです。
商品 （サンプルではWeb画面） のサムネール画像を陳列したデザインサンプルです。
メイン画像上のボタンをクリックすることで、画像上の一部が切り替わる仕様を持つサンプルです。
メインメニューの各ボタンのクリックによりメイン画面が切り替わり、サブメニューとなるリンクが表示されるサンプルです。
メインメニューからリンクした画面毎にサブメニューを配置したサンプルです。
マウスオーバーで表示されるサブメニューを実装したサンプルです。
メイン画像部分をショーウィンドウとして商品を二段陳列したサンプルです。
メイン画像部分をショーウィンドウとして商品を陳列したサンプルです。
メニューボタンにマウスオーバーすると、ボタンがメイン画像の下部に移動する仕様です。
タブメニューにマウスオーバーすると、メイン画像のタブより下の部分が切り替わる仕様のサンプルです。
各メニューボタンへのマウスオーバーで、異なるメイン画像に切り替わる仕様を持つデザインサンプルです。
メイン画像の余白部分 （サンプルでは青空） に、スクロールできるテキストエリアを配置したデザインです。
メイン画像の広い余白 (サンプルではグリーンの芝) を使って、フローチャートを表示したサンプルです。
メニューボタンにマウスオーバーすると、メイン画像上に関連情報を表示される点が特徴です。
メイン画像上にメニューボタンを配置したデザイン。ここにマウスオーバーさせると、各リンク先の説明が表示される点が特徴です。
マウスオーバー時にメニューボタンのイラストが動くという仕様が特徴。ホームページの雰囲気にマッチさせた動きにしています。
イン画像にメニューボタンを被せ、イメージ的な関連性を持たせたデザインです。マウスオーバー時にコミカルな変化をボタンに与えています。
メイン画像を複数の丸い穴が開いたシートを通して見たデザイン。その円形を使ってメニューボタンをレイアウトしています。
メイン画像に格子を被せ、その格子を使ってメニューボタンをレイアウトしたデザインサンプルです。
メイン画像を固定した仕様のサンプルです。本サンプルではサイドにメニューを配置して、メイン画像の一部を隠している点がポイント。
メイン画像がスクロールしても固定されている点が特徴のサンプルです。スクロールで見えていた部分が隠れ、隠れていた部分が見えるという独特の見え方になります。
透明感のあるボタンデザインを採用したサンプル。メイン画像の上にボタンを部分的に被せて連続性を持たせています。
メイン画像上と下側にメニューボタンを配置したデザインサンプルです。配置された二つのメニューを違う用途で用いることができる点がポイント。
デザインサンプル「BackSea」と同様、メイン画像をサイドに広く取ったデザインサンプルです。
画面構成はオーソドックスなデザインですが、メニュー部分をボタン形状にしたサンプルです。
余白を多めに取ったデザインサンプルです。敢えて余白を多く見せることで、閲覧者の想像力を掻き立たせることができます。
メニューボタンをスクエアに配列させたサンプルです。マウスオーバー時には各ボタンのデザインが変化する（四角形が大きくなる）仕様になっています。
メイン画像のほぼ真ん中にメニューバーを配置した、大胆なデザインが特徴のサンプルです。メニューバーには透過性を持たせて後ろの画像が見えるようにします。
メイン画像を縦に配置し、本文を画面の高い位置に表示できるようにしている点がポイントのサンプルです。もう一つのポイントとして、メニューを右端に配置しています。
メイン画像の高さに合わせてメニューを縦に配置したデザインです。メニューボタンをマウスオーバーすると右にスライドする仕様がポイント。
メニューバーに左右非対称のグラデーションを設定している点が特徴のデザインサンプルです。
付箋紙をメニューデザインに採用し、メイン画像上に配置させたサンプルです。マウスオーバーにより捲れあがった付箋紙の端が伸びるという、コミカルな動きを演出しています。
付箋紙を模したタブ型のメニューを持つデザインのサンプルです。リアリティを出すために、マウスオーバー時に付箋紙の端がめくれ上がる仕様になっています。
メイン画像を左サイドに配置し、それを生かすために、敢えてロゴやメニューを右寄りに配置して余白を左側に大きく取ったデザインが特徴のテンプレートです。
メニューバーに高さを持たせている点が特徴のデザインサンプルです。メイン画像上にロゴとメッセージを表示させるために、違和感無く背景をフェードアウトさせています。
右段に大きく印象的な画像を採用し、ブログテンプレートやアイドルのファンサイトなどで見られる様な、スクロールしても固定されたままの画像仕様を適用しています。
ヘッダーのデザインにメニューを組み入れたサンプルです。ロゴをヘッダーデザインと調和させているのも大きな特徴。
背景が透けて見えるクリアーなタブメニューを採用し、メイン画像と同化させているのが大きな特徴のサンプルです。
メイン画像をインパクトあるものにするために、大きな画像を採用。さらに、ヘッダー部分をメイン画像で透けて見える構成にしている点が大きな特徴のデザインサプルです。
ヘッダー部分にメニューボタンを配置したデザインサンプルです。メニューの項目数が少なく、かつ全体をすっきりした構成にしたい場合に適します。
背景に影を持たせ、角を丸く見せたテンプレートです。メイン画像のバックにグラデーションを掛けている点もポイント。
切れ目の無い画面構成が特徴。また、もう一つの大きな特徴として、ナビゲーションメニューを画像ではなく、テキストで作成しています。
二段構成の画面にして、ナビゲーションメニュー部分の背景は黒、本文部分の背景を白にすることで、締りのある構成にしています。
背景は単色の黒ではなく、光沢のあるグラデーションを加えているため、いやみ無く高級感をかもし出すことができます。
木目調のボタンデザインは自然を意識させると共に、「和」のテイストを持たせたい場合にも適します。
幅が広い画面構成。メイン画像の横に伝えたい重要な事項を画面の高い位置に表示させることができます。
落ち着いたデザインのナビゲーションメニューを持つテンプレート。メイン画像にどのような色調のものを配置しても馴染みます。
ナビゲーションメニューがタブの形状を持つテンプレート。シャープなイメージを出したい場合など。
画面構成・色調が落ち着いたデザイン。企業用、店舗用など広い用途が考えられます。
企業用のホームページに適したオーソドックスなスタイルを持つテンプレートです。
