かつて、Webデザインにおける「ヘッダー」とは、通常、ロゴ、ナビゲーションバー、そして、連絡先や検索バーを含む、Webサイトの上部に常にある帯のことを指しました。
ソーシャルメディアで共有されたブログ投稿や他のサイトからの紹介であなたのサイトを見つけた人以外は、ホームページから入ってくる可能性が高いでしょう。
以前、Web サイトの特定の要素 (ロゴやCTA など) の配置が予測可能な場合に、訪問者の反応が良くなることについて書きました。 彼らの期待に応え、体験をある程度予測可能にすることで快適さを高めることを目標に Web サイトを設計することで、クリックスルー率やコンバージョン率を効果的に向上させることができます。
ほとんどの人は、会社やWebサイトが何であるかを一望できるトップページに信頼を置いており、その期待を実現するためには、この機会を無駄にできないことを意味しています。 もちろん、トップページのヘッダーデザインは、あなたのブランド独自のものにすることができますが、その中にある要素は、そうであってはなりません。 訪問者は、サイトが何をしてくれるのか知るために、スクロールが必要ないことを期待しています。
では、訪問者の興味を引くために、このスペースで何をしますか？
では、2017年のヘッダーデザインのトレンドについて、この非常に目に付く領域を利用するために何ができるか、そしてその過程でいくつかの興味深いヘッダー例を見てみましょう。
14 Trends in Header Web Design in 2017
訪問者が、サイトの背後にあるブランドについてもっと知るために、ページをスクロールしたりナビゲーションをクリックしたりすることを知らないわけではありません。 しかし、なぜ彼らはそれをする必要があるのでしょうか。 ヘッダーには十分なスペースがあり、訪問者が知るべきことを簡潔に伝えることができます。
何よりも、ホームページのヘッダーは訪問者の第一印象を左右するものであり、このセクションに釘を刺すことが非常に重要な理由です。
サイトを勢いよくキックオフする方法を見つけるのに苦労しているなら、もしかしたら、2017年の次のヘッダー デザインのトレンドで何らかのインスピレーションを得られるかもしれません：
Oversized Hero Image
応答性の高いサイトを設計するためのモジュール式のおかげで、ほとんどのデザインは個別のブロックやセクションに分割されています。 このデザインのスタイルは、多くの Web サイトに存在する全幅のヒーロー画像によく適しています。 これは、訪問者を歓迎するために、シンプルなテキストと重ね合わせた一枚の印象的な画像を使用しています。 シンプルな美しさです。
スライドする画像
あまり遠くない過去に、多くの人がスライダーを有効なデザイン要素として疑っていた時期があったように思うのです。 しかし、多くのデザイナーは、ヘッダーでそれを使用する素晴らしい仕事をしました。 美しい高解像度の画像から次の画像へと自動的にスクロールするスライド画像もあれば、ピエールのように訪問者自身がその体験をコントロールすることを求めるものもあります。
Transformative Parallax Imagery
視差スクロールはまだ強く成長しており、ヘッダーはこの種の視覚的「幻想」を Web デザインに適用するには最適の場所だと実証されてきました。 しかし、最近見られるのは、おそらくスクロールの予期せぬ結果で訪問者を驚かせるために、デザイナーがパララックス スクロールに変形エッジを与えているものです。 オーストラリアの UX デザイン エージェンシー August は、ヘッダーでそれを行いました。
Video Backgrounds
ビデオの背景も最近のトレンドの 1 つで、ホーム ページのヘダーに適用すると最もうまくいきます。 Le 28 のこの作品は、レストランのウェブサイトのムードを盛り上げ、ダイニング施設の正面と背面のビデオを紹介しています。
Hidden Navigation
Hamburger menu はモバイル機器で見るべきものであると主張することもできますが、この種のナビゲーションのミニマリズムがヘッダーに対して行うことについて、何か言わなければならないことがあるはずです。 rehabstudioのウェブサイトは、その良い例です。 ナビゲーションを隠すことで、プラス記号の中のエキサイティングなビジュアルにすぐに目が行きます…そして、その周りに小さなタッチのアニメーションがあることに気づきます。
Header が訪問者をサイトに紹介する場所である場合、途中で出会う「キャラクター」を紹介する以外に良い方法はないでしょう。
Eye-Catching Typography
コンテンツ優先
訪問者に大量のコンテンツを提供することに主眼を置いているウェブサイト（大手ニュースサイトやブログなどを想像してみてください）では、ヘッダーに対するコンテンツ優先戦略は最も理にかなっていると言えます。 ここで言葉を濁すことは本当に意味がありません。 人々は、コンテンツを読むためにあなたのサイトに来たのですから、トップページで追加の読み物に煩わされる必要はなく、Glamourのようにすぐに取り掛かることができます。
それと同じように、e コマース サイトでは、わざわざヘッダーを使ってキャッチーな見出しを書いたり、会社についての説明ビデオを提供したりする必要はありません。 訪問者は何のためにこのサイトに来たのか分かっているので、すぐに本題に入ることができるのです。
CTA Front-and-Center
鮮やかな色とテクスチャ
Google Material Design から生まれた最も素晴らしいことの1つは、Web デザインでより鮮やかな色、レイヤー、グラデーションを積極的に使用することかもしれません。 Stripe がカラフルでテクスチャ付きのヘッダーで行っているように、これらはもはやコール トゥ アクション ボタンに追いやられる必要はなく、Web サイトのブロック全体に使用することができます。 訪問者が意図したアクションを取るのを邪魔するものがないように、シンプルにしてください。 しかし、読者とメッセージを共有するための興味深い方法を求めているウェブサイトでは、アニメーションは賢明な選択といえるかもしれません。 Baianat は、小さなアニメーションを使用して、同じスペースで多くのメッセージを共有し、雑然とした印象や情報の過密さを抑えています。 ですから、Perspective API のように、幾何学的な要素をヘッダー デザインに統合する Web サイトが増えているのは、驚くことではありません。 Stripe や WPMU DEV のように、斜めの線を使用して、訪問者にユニークで予想外の視覚的な風景を作り出しているものもあります。 これらのキーは、通常、ヘッダーが突飛なほど奇妙で珍しいものであることではありません。 それは、訪問者にとってあまりにも気が散ることでしょう。 その代わりに、ヘッダーを横切る単純な動きによって生じる予期せぬ効果を生み出すことに焦点を当てるべきです。
Teamgeek のデザインを例にとって説明します。 ページの中央にあるロゴとメッセージに「何か」があることはわかりますが、それに関与して初めて、特別な工夫が組み込まれていることに気づきます。
Wrapping Up
ご覧のように、WordPress サイトのヘッダーをデザインできる方法はさまざまあります。 しかし、上記の例をよく見てみると、デザイナーはどのようなスタイルのヘッダーを使用し、どの要素をその中に含めるかについて非常に戦略的であることに気づきます。
- Logo
- Traditional vs. hidden
- Hero header section vs. hidden
- Hero header section vs. hidden
- Hero header section vs. hidden
- Hero header section vs. hidden
- Logo logo
- Traditional vs. hidden。
- タグラインまたはミッションステートメント
- 連絡先
- ソーシャルメディアリンク
- 検索バー
- 多言語トグル
- ショッピングカート
- ブランドのマスコット
- ストックフォト vs. ブランドマスターズ
- 静止画像 vs. スライド画像 vs. 背景ビデオ
- 埋め込みプロモーションビデオ
- コールトゥアクションボタン
- 問い合わせフォーム
- ハローバー
!
ホームページのこのトップヘッダーセクションに属する他の項目も見つけられるかも知れません。 それは本当にちょうどあなたのサイトに最も理にかなっているものに帰結する。 また、そのような場合にも、「痒いところに手が届く」「痒いところに手が届く」「痒いところに手が届く」「痒いところに手が届く」「痒いところに手が届く」「痒いところに手が届く」「痒いところに手が届く」「痒いところに手が届く」「痒いところに手が届く」「痒いところに手が届く」「痒いところに手が届く」………………………………………………….痒いところに手が届く！！！！！！！！！痒い所に手が届くとは、このこと。
Tags:
- design
- headers