ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

    ウェブプログラミング講座

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テンプレートモンスター
ホームページテンプレート

Free Templates Online JP
無料ホームページテンプレート
Free Templates Online JP

株式会社ネットオン
採用Webマーケティング
indeed広告代理店

海外 SEO対策 トラッキングツール
海外 SEO対策
ランキングチェックツール

Rank Tracker

テクニック

Homeウェブデザイン基礎講座 > ヒーローヘッダーを採用した優秀な15のテンプレート

ヒーローヘッダーを採用した優秀な15のテンプレート

投稿日:2015年11月13日

このチュートリアルでは、ヒーローヘッダーはじめにのテンプレートをご紹介します。

Step1:はじめに

最近のウェブデザインの大きなトレンドの一つに、ヒーローヘッダーがあります。ヒーローヘッダーとは、サイトのトップに大きな画像を表示しているデザインのことです。最初のころは、ヒーローヘッダーといえば、コンテンツに直接関係する大きなサイズの写真のことで、通常はウェブサイトのオーナーや仕事(主に、ポートフォリオサイトで)の写真が使われていました。

最近は、ヒーローヘッダーで使われる写真は、シンプルで高解像度のものが主流です。デザイナーも好んでよく使うので、イラスト、ベクター形式の画像、アニメ要素のある画像、画像のスライダー、ビデオなど、いろんな形式のヒーローヘッダーに出くわします。ヒーローヘッダーには、テキストやナビゲーション要素と一緒に用いることもでき、制限はありません。

ウェブサイトにヒーローヘッダーを採用した場合、そのサイトを見た人にまず質の高さを訴えないといけません。ヒーローヘッダーはサイトに関連があるもので、興奮するようなものであるべきです。また、少なくとも、見た目にインパクトがないといけません。



Step2:導入の際に考えておくべきこと

ウェブサイトにヒーローヘッダーを導入する際、考えておくべきことを以下に列挙してみます。

・ブランド名を含めたい場合、ロゴやブランドマークなどが、画像から浮かないようにしましょう。可能なら、モノクロのカラースキーマを使ったロゴを使用し、左上の隅に配置しましょう。
・太文字を使いましょう。しかし、最も重要なテキストだけに大きな文字を使い、残りの部分(ナビゲーション含む)は小さめで目立たないようにします。
・1つの大きな画像、1つの大きなテキストを使います。
・フォントについては、大きくて細いものを選びましょう。それが最近のトレンドですし、目にも優しいです。
・言うまでもないことですが、すべての文字を読みやすくしましょう。
・シンプルなカラースキームを選びましょう。
・サイトを訪問した人が、次に何をすればいいかわかるような視覚情報を与えましょう(クリック、スクロール、その他のナビゲート)。





Step3:ヒーローヘッダーのテンプレート集

ヒーローヘッダーが素晴らしいことを示すために、有料テンプレートのコレクションの中から、ヒーローヘッダーを用いたものを15個紹介します。気に入ってもらえるものを厳選しています。

料理サイト向けのWordPressテーマ
料理サイト向けのWordPressテーマ

ファッション向けMagentoテーマ
ファッション向けMagentoテーマ

ギフトサイト向けWooCommerceテーマ
ギフトサイト向けWooCommerceテーマ

モーターホーム向けウェブサイトテンプレート
モーターホーム向けウェブサイトテンプレート

スポーツ向けWooCommerceテーマ
スポーツ向けWooCommerceテーマ

モータースポーツ向けMagentoテーマ
モータースポーツ向けMagentoテーマ

サッカーショップ向けOpenCartテンプレート
サッカーショップ向けOpenCartテンプレート

ナイトクラブ向けJoomlaテンプレート
ナイトクラブ向けJoomlaテンプレート

メンテナンスサービス向けWordPressテーマ
メンテナンスサービス向けWordPressテーマ

不動産向けOpenCartテンプレート
不動産向けOpenCartテンプレート

イベントプランナー向けDrupalテンプレート
イベントプランナー向けDrupalテンプレート

ロデオ向けWordPressテーマ
ロデオ向けWordPressテーマ

欧州レストラン向けJoomlaテンプレート
欧州レストラン向けJoomlaテンプレート

電化製品向けPrestaShopテーマ
電化製品向けPrestaShopテーマ

エクステリアデザイン向けJoomlaテンプレート
エクステリアデザイン向けJoomlaテンプレート



引用:Web Design Library 著者:AliceL 翻訳:なかけん



スポンサードリンク

コメント

ランダム記事5件

2016年5月の人気記事ランキング