格安ホームページ制作のことならスマホームページにお任せください。
低コストで高品質なスマホ対応ホームページをご提供します。

ブログ

今日から実践できるWEBデザイン 〜ヒーローヘッダー編〜

今日から実践できるWEBデザイン 〜ヒーローヘッダー編〜

ホームページ を開いて一番最初に目に飛び込んでくるメインイメージ。
その領域をヒーローヘッダー、ヒーロー動画なんて言ったりします。
今回はヒーローヘッダーをより印象がよくなるコツをお教えします。

ヒーローヘッダーを取り入れる理由

最近ではほとんどのホームページがヒーローヘッダーを取り入れていますね。
ヒーローヘッダーには企業イメージやコンセプトをビジュアルとキャッチコピーで端的に表現し、ユーザーにメッセージとインパクトを与える役割があります。
要するに「ユーザーの心を掴む」ということです。
採用サイトでは和やかな社内風景、ブランドサイトではエッジの効いたビジュアルで上手くインパクトを与えてたりしています。
魅力的なホームページは、ヒーローヘッダーをうまく使っていますね。
そんなヒーローヘッダーはホームページの印象をガラッと変えることができますが、取り入れる際の注意点もあります。
簡単に解説していきます。

ホームページの趣旨やコンセプトを表現している

NYLE CAREER RECRUIT

NYLE CAREER RECRUIT
https://mid-career.nyle.co.jp

大きな写真や動画は初めてホームページに訪れた多くの人を惹きつけ、強烈なインパクトを与えることができます。
しかしいくらインパクトがあり、かっこいい写真でもホームページ と関係のないヒーローヘッダーではユーザーの心に届きません。
さらに方向性が定まってないため、ホームページ としての完成度が低くなります。
極端な話になりますが、ヒーローヘッダーで言いたいことが完結できるくらいの完成度が必要です。

質の高い写真とキャッチコピー

guntû

guntû
http://guntu.jp

ヒーローヘッダーは、ユーザーの目に最初に飛び込んでくる領域です。 質の高い写真を使いましょう。低解像度の画像やトリミングが変な写真は逆にイメージダウンに繋がります。 皆さんも初対面の人に会う時に身だしなみを気を付けませんか? 特にヒーローヘッダーに採用する写真については吟味して選んでください。 「お!」と思わせるような質の写真で、さらに巧みなキャッチコピーで心を掴めば100%と言っていいほど読み進めてもらえるでしょう。

動画を取り入れる

LIVESENCE RECRUITMENT

LIVESENCE RECRUITMENT
https://recruit.livesense.co.jp

動画をヒーローヘッダーに取り入れることにより、さらにホームページの世界観へと惹きつけることができます。 特に最近では採用サイトなどで企業イメージや社内の空気感を動画で表現することが多いです。
しかしどれくらい綺麗な質の高い写真や動画を使おうと、ページの読み込み速度が遅ければ、ユーザーはホームページから離脱してしまいます。
特に動画ですが、適度に圧縮するなどの加工をした方が良いケースがあります。
その際に圧縮した粗さを目立たなくするため背景を暗くしたり、ドットなどのテクスチャを敷くのも一つの工夫です。

全体的にシンプルに

プロレド・パートナーズ

プロレド・パートナーズ
https://www.prored-p.com

これは個人的な考えですので、「違うよ!」という方もいるかもしれませんが、
ホームページによってはシンプルにした方が、よりヒーローヘッダーが際立つ場合があります。
特に無形の商材はビジュアルで表現することが難しいので、ヒーローヘッダーを取り入れる際は、他のパーツ(ボタンアイコンやフォント)のトーンを抑えて、ヒーローヘッダーのインパクトをより大きくするなどの計算をした方がいいでしょう。

以上がヒーローヘッダーについてです。
ヒーローヘッダーは容易にホームページの印象を変えられるので、是非皆さんも色々と試してみてください。

今日から実践できるWEBデザイン 〜ヒーローヘッダー編〜

この記事を気に入っていただけたらいいね!フォローをお願いします!