ホームページにおけるメインビジュアルとは、画面の上部（特にトップページ）に配置する、大きな画像領域のことを指します。キービジュアルと呼ぶこともあります。

「目を引かせるためのインパクト」の役割があり、さらにキャッチコピーなどを加えることにより「ここは何のホームページなのか」を視覚的に伝える効果があります。

前回ご紹介した青銅比などを取り入れて、よい比率を見つけられたら、次は内容のクオリティをアップさせてみましょう。ここでは、メインビジュアルに画像やキャッチコピーなどの文字を配置する際の、デザインパターンをいくつかご紹介していきます。

1. メインとなる被写体は左右へ
2. 写真と文字エリアを分割
3. 適切な書体
4. 袋文字
5. 座布団を敷く

写真に人物や物など、キーとなる被写体がある場合は、左右に寄せて使用しましょう。よく、キャッチコピーや説明を掲載するケースが多いものですが、それらを組み合わせるスペースを確保するためでもあります。

新たに写真撮影をする場合は、これらを意識して、被写体を中央ではなく左右に寄せて撮影するのもポイントです。

文字を掲載する場合、写真の色や種類によっては、文字をただ打っただけでは非常に見づらくなる場合があります。そのようなときは、文字を掲載するエリアをべた塗りし、思いきって分割してみましょう。
少し半透明にすることにより、背景の写真が透けて見えるので全体のなじみがよくなります。

この手法は縦分割だけではなく、横分割にも応用が可能です。

書体は、全体の雰囲気を決定づけるとても大事な要素です。テーマにマッチした書体を選ぶことにより、統一感がとれ、違和感もなくなります。スタンダードな書体は「ゴシック」「明朝」と2つに大分されますが、これ以外のものを選ぶ場合、組み合わせる写真やホームページ全体に違和感がないか、吟味して選ぶようにしましょう。

例：ウィスキーバーでのメインビジュアルとキャッチコピーの組み合わせ

以下の例では「手書き風の丸文字」をチョイスしました。洋酒という大人の雰囲気と、全体が黒く引き締まった画像に組み合わせた場合、いささか違和感が感じられます。
この書体の持つ「女性」「丸い」「手書き」といった印象が写真とマッチしていないためです。

以下の例では「勘亭流」をチョイスしました。太く力強い書体ですが、勘亭流は本来「歌舞伎の外題や看板」などに用いられる書体です。和の雰囲気が強く、洋酒と組み合わせると、それぞれのキーワードにマッチしないため、こちらも違和感が感じられます。

以下の例では「明朝体」をチョイスしました。上記で説明した書体は、その書体が持つイメージとのマッチングに左右されましたが、広く一般的な明朝体は、あらゆるジャンルに組み合わせやすい書体です。
奇をてらって意外性を求めるよりも、見慣れた書体をチョイスするのがよいケースも多いものです。これはゴシック体にも同じことがいえます。

文字の周りに縁取りをつける手法です。色数の多い写真やごちゃっとした雰囲気の写真に文字を乗せたいときに有効です。文字の周りにつけるフチの厚みで、シャープな印象やポップな印象になります。背景を敷く以外の方法として利用される手法の1つです。

デザインの業界では、文字を見やすく強調するために、四角や丸などの色枠の上に、文字が乗るようにデザインすることを「座布団」と呼ぶ事があります。テレビ番組のテロップも、映像に埋もれてしまわないように背景の色分けをしていることがほとんどです。
このテクニックを応用すると、効果的に画像の上の文字を読ませることができます。

文字に対して、内側の余白に余裕を持たせた四角い背景を敷くことにより、視認性が高まります。

四角の片側をグラデーションで消えるようにアレンジをすれば、デザイン的な処理として印象を与えることができます。

背景がカラフルな写真であっても、スッキリと収まりのよい状態で文字を配置することができます。

• メインビジュアルは「目を引かせるためのインパクト」であり、「ここは何のホームページなのか」を伝えることもできる
• 画像に文字を乗せる場合、視認性に気をつかう
• 書体は組み合わせるもののテーマに沿って、適切なものを選択する

以上で全6回のコラム「Jimdoで「かっこいいホームページ」をつくろう！ ～プロが教えるかんたんテクニック集～」を終了します。

ホームページがひととおり完成したら、次はぜひクオリティアップを目指して手を入れてみてください。
今回のコラムが、ホームページデザイン向上の一助になれば幸いです。
最後までお読みいただき、ありがとうございました。