最近流行りのヒーローイメージとは

［更新日］2020/11/18
［公開日］2015/08/17
1205 view

最近流行りのヒーローイメージとは

「ヒーローイメージ」という言葉をご存知ですか？ 2014年頃から多く見受けられるようになった傾向で、画面を覆い尽くすような大きなサイズの写真を用いたWebデザインの事をいいます。特に、ページの最上部にあたる箇所は「ヒーローヘッダー」と言われ、フルスクリーンのイメージ写真にテキストやメニューを最上部に配置するレイアウトの事を示します。今、この「ヒーローイメージ」が注目を集めている理由に、巨大で魅力的なヘッダーデザインが人々の注目を集めやすいからということが挙げられています。

ヒーローイメージはコンテンツ内容に即したものであることが一般的

例えば、個人のブログサイトでこのヒーローイメージを採用している人は、フルスクリーンのイメージ画像に自身の肖像画をあてがっているというケースもあります。そこに「About Me」というテキストリンクをつなげれば、Webサイトを訪れた人は一目見ただけで「この大きな画像の人物についての詳細が書かれているのだな」と理解することができ、思わずリンク先をクリックしたくなります。他にも、企業が使用した例として、アパレルのWebサイトなどではこのヒーローイメージを使用することで、人々に与える影響力に差をつけています。ファッション関連のWebサイトで、最も重要な情報は「画像」だと言えるでしょう。そしてフルスクリーンのイメージ画像というものは、想像している以上にインパクトの大きいものとなっています。アパレルのサイトでモデルが美しく新作の服を着こなした写真を画面一面に張り出し、「New Arrival」というテキストリンクを繋げるだけで、「他にもどんな新作があるのだろう」という風に人々の興味関心を喚起することができます。このように、画像とごく限られたテキストというとてもシンプルなデザインにも関わらず、ユーザーをサイト内部・見てほしいコンテンツに誘導するに極めて有効的な手法だと言えます。

ヒーローイメージにはフルスクリーンのイメージ画像のみではない。

他にも注目されている例として、動画を使用したものがあります。フルスクリーンの動画をWebサイトの背景として利用することは、Webサイトを訪れた人の関心を引く度合が静止画の時よりも高まるため、人々に「お、なんだ？」と思わせるのにとても効果的な手段だと言えるでしょう。しかし、静止画の場合とはことなり、スマートフォンでは背景を動画にしていても閲覧できないケースが多いので、ターゲットユーザーはパソコンを使用している人になるということに注意が必要です。スマートフォンでの閲覧を希望している場合は、動画を使用するよりも静止画である方が強い影響を与えることができます。このように、フルスクリーンの画像・動画をWebデザインとして使用するヒーローイメージは、利用法によっては、サイト内誘導の効果を高めたり、情報の影響力を高めたりすることができます。しかし、使用する画像には気をつけねばなりません。例えば、派手すぎる画像というものはヒーローイメージにはあまり相応しいとは言えません。多彩な色を使いすぎると、閲覧者の目を疲れさせてしまい、サイト内誘導することができるどころか、ブラウザを閉じられてしまう可能性があります。モノトーンなどの色を抑え目にしたものでかつシンプルな写真であることがヒーローイメージには望ましいです。それに半透明の要素を加えると、そこに人々の視点を集めやすくなります。使用する画像の注意点は以上ですが、次に使用するテキストについても、色を使いすぎることは望ましいとは言えません。それに加え、メニューに使用するテキストは大きな文字で細い書体を使用することが一番人気の高いスタイルだと言えます。以上の点に気をつけてヒーローイメージを使用すると、メリットを得られるかもしれません。企業がヒーローイメージを使用した例として先にアパレルをあげましたが、他にも、飲食店や美容院など、「店の雰囲気」を伝えるにも効果的です。そのため、一般企業でもWebサイトでオフィスの雰囲気を伝えたいと言う時に、ヒーローイメージを使用することも効果的だと言えるでしょう。このようにヒーローイメージを用い、ビジュアル的にアピールすることで新たなターゲットの心に刺さるかも知れません。