名古屋でホームページ制作を通じてWEB集客を支援する(株)オンカの「お知らせ・コラム」ページ

ホームページのメインビジュアルは、ユーザーの印象に残るようなインパクトのあるビジュアルを使用したり、「何のホームページであるか」といったコンテンツに関する情報を表現することが重要です。また、ホームページ全体の印象を左右する為、競合他社との差別化を図る上ではオリジナリティを出すことも重要となってきます。
今回のコラムでは、こういったポイントを押さえつつもデザイン的な工夫が凝らされたオリジナリティあふれるホームページを紹介していきます。
印象に残るWEBデザインを制作したいと考えているデザイナーの方や、WEB担当の方はぜひ参考にしてみてください。

メインビジュアルを制作する上でのポイント

メインビジュアルとは「ホームページの顔」とも言える重要なブロックです。前述の通り、ユーザーに製品や企業に対する第一印象を決めるため、デザイン的なインパクトやオリジナリティ、コンテンツに関するわかりやすいキャッチコピーが重要となってきます。
大きなロゴを使って注目させたり、背景全面に動画や画像を敷いて雰囲気を演出したり、アップの商品画像を使ってインパクトを出したりとさまざまなデザインがあります。ただし、オリジナリティを意識するあまりユーザーに伝えたい情報が伝わらなければ、ただの「デザインがかっこいいだけのホームページ」となってしまい、コンバージョンには繋がりにくくなってしまいます。キャッチコピーや他ページへの導線をしっかりと配置し、ユーザーを見せたいコンテンツへ促すことができるようにするのも重要です。

メインビジュアルが印象的なWEBデザイン

ここからはメインビジュアルが印象的なWEBデザインをいくつか紹介していきます。

株式会社東海モデル

株式会社東海モデルのコーポレートサイトでは雰囲気のある工業系の写真をメインビジュアルとして大きく使用することで、ホームページ全体のモダンな雰囲気を演出しつつ、インパクトのあるデザインとなっています。写真をメインビジュアルとして大きく使用する「ヒーローヘッダー」と呼ばれるものは、写真のシズル感や訴求力が重要となります。写真のレタッチによっても雰囲気が大きく変わるので気をつけましょう。

東海モデル：https://www.tokaimodel.com/

清水屋

振袖や着物を取り扱っている清水屋のホームページでは、縦長の写真や縦組みのナビゲーションを使用することで、縦の流れが強調されています。縦組みの文字は和風な印象をユーザーに与えることができます。縦の要素と横の要素をうまく取り入れて、すっきりと見せることでユーザーにも分かりやすいホームページとなっています。
また、背景に市松模様の和風柄を取り入れ、和風の雰囲気を演出しているのもポイントです。

清水屋：https://www.ceremony.shimizuya.co.jp/

社会福祉法人 愛和会

縦に分割されたバナーレイアウトが印象的な社会福祉法人 愛和会のホームページです。それぞれのバナーをクリックすることで、愛和会が行なっているサービスページに遷移することができます。メインビジュアルいっぱいにデザイン的にバナーを掲載することで、コンテンツを見やすくすることができます。またスライドショーを取り入れてリズミカルな流れを作り出しているのもポイントです。ただし、メインビジュアルにリンクを並べすぎるとスマートフォン表示になった時に見栄えが悪くなってしまう場合があるので注意が必要です。

社会福祉法人 愛和会：https://swc-aiwakai.jp/

今回のまとめ

今回は参考にしたいメインビジュアルが印象的なホームページを紹介しました。メインビジュアルはホームページの顔とも言える重要な部分です。今回紹介したようなオリジナリティやインパクトのあるメインビジュアルを使って競合他社と差別化が図れるようなWEBデザインを制作しましょう。