ヒーローイメージって何？

ヒーローイメージとは？

ヒーローイメージとは
サイトのファーストビューで画面全体を覆い尽くす画像や動画のことです。
ヒーローイメージを変えて、ファーストビューの雰囲気を変えインパクをと与える事ができます。

ヒーローイメージの使い方

サイトに訪れた人が最初に目にするヒーローイメージは、あなたのサイトの自己紹介のようなものです。

ヒーローイメージを使って、あなたのWebサイトの内容と目的を伝えます。

明確なアクションへの誘導をデザインする。

ヒーローイメージ７つの説得要因

画像はキーワードを視覚的に表現しているか？

画像はサイトが伝えたいメッセージをはっきりさせるか？

ユーザーのアクションにつなげるまでのページの流れを滑らかにしているか？

画像はブランドを信頼できる形で表現しているか？

画像はユーザーにとっての妥当性を強化したり、利点を示しているか？

画像は、期待する動作の引き金になる感情を描写しているか？

画像は、製品を手にした顧客を主人公として描いているか？

アンジー・ショットミューラー７ Hero Shot Persuasion Factors

ヒーローイメージデザイン

シングルページ完結型レイアウトでごく限られた少ない情報やコンテンツのみを表示します。
レスポンシブデザインと相性が良いので、最近の「モバイルファースト」と言われるスマートフォンへの対応にもなります。

ヒーローイメージおすすめ５選

東京日本橋 | 日本文化の今と昔を体験できるまち、東京・日本橋

奈良 – ローカルが教える、今までにない奈良観光

TYOパブリック・リレーションズ

ヌフアントロワオフィシャル

NEST INN HAKONE

ヒーローイメージは
・フルスクリーン背景
・特集記事コンテンツ
・スライダー式ギャラリー
・モノクロ写真
・カラーオーバーレイ
・非対称レイアウト
・タイポグラフィ

＊タイポグラフィとは？
狭義の意味で
適切なフォント種類を選び、美しく文字を配置することを
文字を華やかに、アートのようにデザインする手法
指します。

などを駆使して、Webサイト訪問者にアクションを起こしてもらえるように作られます。

読み込みと表示を可能な限り早くする

アイコンを Font Awesome で代用する。
画像サイズをリサイズして最適化する。Regenerate Thumbnailsや EWWW Image Optimizer ラグインなどを使う。
僕はふだん Windows や Mac ではなく、Ubuntu というＯＳを使っています。画像変換や画像のリサイズは ImabeMagick の convert コマンドや mogirify コマンドを使います。