第一印象で差をつける。メイン画像系コンテンツパーツの選び方ガイド

逆に、第一印象がイメージと合わないと、内容を読む前に離脱されてしまうことも少なくありません。

だからこそ、メイン画像（キービジュアル）は「どんな写真を使うか」だけで完成するわけではありません。
写真の見せ方、テキストの配置、余白のバランス——これらをひとまとめにコントロールするのがant2の「コンテンツパーツ」の役割です。

どれだけ素敵な写真を用意しても、レイアウトが合っていなければ、その魅力は半減してしまいます。
反対に、コンテンツパーツ選びがうまくいけば、シンプルな写真でも洗練された印象を与えられます。

つまり、「写真選び」と「コンテンツパーツ選び」はセット。
メイン画像を制するために、この両輪をしっかり押さえておきましょう。

既存のメイン画像系コンテンツパーツは大きく6種類に分けられます。

最も多いタイプで、メイン画像_ver.1や10、15、22など写真が画面いっぱいに表示されるレイアウトです。
企業サイトやサービスサイトなど、幅広い業種に向いています。

写真がダイナミックに表示されるため、信頼感やスケール感を出したいWEBサイトに向いています。

メイン画像_ver.6や14、20、23などはコンテンツパーツ自体はウィンドウ幅になりますが、写真自体はウィンドウ幅いっぱいにならずに、ほかの要素と分割されているタイプは画像とテキストをバランスよく配置できるデザインになります。
余白があることでテキストが読みやすく、落ち着いた印象を与えます。

派手さよりも安心感・やさしさを出したい場合にお勧めです。

メイン画像_ver.9や10、11、13、26などは画像と配置したブロックのメインカラーが透過されて重なり、写真が少し暗めに表示されます。
そのため白いテキストがとても読みやすくなるという特徴があります。
※少し暗めにはなりますが、明るい写真だとテキストが読みづらいこともありますので暗めの写真を使用することをお勧めします。

少しデザイン性が高く、スタイリッシュな印象になります。

メイン画像_ver.13や24、25、27などは2～3枚の写真を同時に見せることができます。

1枚では伝わらない情報を視覚的に伝えることができるのが特徴です。

メイン画像_ver.15と18は少し変わっており、画像を「背景」として設定し、
スクロール時に背景が固定されたままになるパララックスという演出が入る仕様になります。
パララックスとは、背景と前景が異なる速度で動くことで奥行き感や高級感を演出するデザイン手法です。

通常のメイン画像よりも印象に残りやすく、高級感が出るため、ブランドイメージを作りやすいというメリットがあります。

メイン画像_ver.19や31、35などはほかのメイン画像系コンテンツパーツとは違い、波のような装飾や、写真が特徴的な形に切り抜かれる、テキストが流れるように表示されるなど、視覚的な演出が特徴のパーツです。
一般的なコーポレートサイトよりも、デザイン性や印象を重視するWEBサイトに向いています。

こうしたパーツを使うことでWEBサイトの個性が出て記憶に残るデザインになり、若いユーザーに刺さりやすいというメリットがあります。
ただし、企業サイトや士業サイトなどでは少し派手すぎる場合もあるため、WEBサイトの目的に合わせて使用することが大切です。

メイン画像系コンテンツパーツ選びで覚えておきたいポイントを3つご紹介します。

最後に、業種別に最適化されたメイン画像の一覧をご紹介します。

制作するWEBサイトの業種に合わせ、メイン画像を構成するコンテンツパーツを絞り込み、デザインの方向性を掴む手がかりとしてご活用ください。

メイン画像（キービジュアル）は、訪問者が最初に目にする「WEBサイトの顔」ともいえる重要な部分です。

ant2 CMSには、35種類以上のメイン画像系コンテンツパーツがありますが、大きく分けると「フル幅タイプ」「余白タイプ」「透過タイプ」「複数画像タイプ」「パララックスタイプ」「個性デザインタイプ」の6種類に分類できます。

それぞれの特徴を理解し、WEBサイトの目的や業種、伝えたい雰囲気に合わせて選ぶことで、WEBサイト全体の印象や伝わり方は大きく変わります。

ぜひ今回の内容を参考に、写真とコンテンツパーツを上手に組み合わせて、より魅力的なWEBづくりに役立ててみてください。

デモ登録はこちら