Jimdoで魅せる日本語Webデザイン（全12回）第4回：一瞬で伝える！魅力的なメインビジュアルの選び方執筆：服部雄樹（服部制作室） JimdoExpertとしてこれまで100件以上のJimdoサイトに携わってきた筆者が、Jimdoを使用して日本語のWebサイトをデザインするポイントについて解説する本コラム。前回のコラムでは詳細ページ作成のコツについて解説しました。第4回目となる今回は、メインビジュアルを選ぶ際のポイントを見ていきましょう。一瞬で何のWebサイトか分かる画像を何事もスピードが重視される現代では、ユーザーがWebサイトを訪れて「何が載っているか」を判断するまでの時間は、 5秒とも10秒とも言われています。その数秒の間に「欲しい情報が載っていない」と判断するとユーザーはページから離脱してしまいます。この極めて短い時間の中で「何が載っているか」を効果的に伝えるのが、メインビジュアルです。つまり、まずは大きな画像で「何が載っているか」を直感的に伝え、それがユーザーの求めるものと一致すれば、続きを読んでもらえる可能性が高くなります。デザインとはコミュニケーションの手段です。Webサイトを訪れる人に自社の商品やサービスを知ってもらう、伝える、ということが何よりも重要で、ただかっこ良ければいいというものではないのです。花屋さんであれば花の画像を使うここで1つ例を出します。数年前、ある友人からWebサイトのリニューアルを依頼されました。プリザーブドフラワー教室を運営する彼女が、Jimdoを使い自分で作ったというそのサイトはとても良くできていましたが、問い合わせは全くありませんでした。私はすぐにその原因に思い当たります。サイトを開くとウェディングドレスを着た新婦が砂浜でブーケを持っている画像が大きく掲載されていたからです。つまり、メインビジュアルが「花ではなかった」のです。花の教室の情報を探しているユーザーが訪れても、ウェディングの画像を見て「ああ、結婚式のサイトか」と勘違いし、「自分の知りたい情報は載っていない」と判断したかもしれません。「いや、でも文章を読んでもらえば…」という思いもありますが、5秒から10秒では読めるのは見出しぐらいです。これを改善するため、まずメインビジュアルに花の画像を使用することを提案し、全体のカラーリングも花の色に合ったものに調整しました。すると彼女のサイトの離脱率は大幅に改善し、リニューアル直後から3ヶ月間ほぼ毎日問い合わせが来るようになりました。このように、メインビジュアルの持つ力は非常に大きいのです。花のWebサイトであることを直感的に分かるようにした結果、離脱率が大幅に改善画像はプロのカメラマンに依頼するのがベストでは、画像はどのように入手すれば良いのでしょうか。画像には著作権があります。検索で見つけた画像などを無許可で使ってはいけません。そのため自前で用意する必要がありますが、予算の都合が付けばプロのカメラマンに依頼することをオススメします。数万円の費用はかかるものの、その画像によって得られる効果を考えれば決して高くはない金額です。もしそれが難しく自分で撮るという場合は、こちらのコラムなど参考にできるだけクオリティの高い画像を用意するようにしてください。 ● 写真撮影入門第1回：写真撮影の予備知識他には、画像素材サイトなどを利用するのも良いでしょう。有料／無料を問わず様々な素材サイトがありますが、オススメはPixabay（https://pixabay.com/）です。このサイトで配布されている画像は全て「Creative Commons CC0」のもとで公開されており、個人・商用問わず無料で自由に使用することができます。 ※ライセンスに関する詳しい情報は各素材の詳細をご確認の上、自己責任にてご使用ください。【番外編】Jimdoなら動画を使った表現も簡単また最近では、メインビジュアルに動画を使用した表現もよく見られます。動画は静止画に比べ多くの情報を伝達することができ、見る人に臨場感や驚きを与えられるので、業種によっては動画を使用するのも面白いのではないでしょうか。 JimdoならYouTubeやVimeoのURLを入力するだけで、背景に動画を配置することができます。私の運営しているWeb サイト（http://www.template-labo.com/）でもメインビジュアルに動画を使用していますが、とてもいいアクセントになっており、これからは動画を使った表現がさらに多用されていくと予想しています。もちろん動画を使用する際にも、画像と同じく著作権に注意して使用するのは言うまでもありません。メインビジュアルに動画を使うといいアクセントになるまとめ ● ● ● サイトを訪れた人が一瞬で「何が載っているか」分かること内容を端的に表す画像であること画像のクオリティにこだわることこの3つを意識してメインビジュアルを選定すると、より魅力的で分かりやすいWebサイトになるでしょう。次回は、テーマカラーの選び方や配色などの「色」をテーマに解説します。次回のコラムを見る » 服部雄樹（はっとり・ゆうき）服部制作室代表／JimdoExpert http://www.hattori-studio.jp/ http://www.template-labo.com/ 愛知県名古屋市出身。2014年までインドネシア・バリ島で活動し、世界各国のクリエイターと交流。多くの海外案件に携わる。帰国後、服部制作室を設立。Webサイトの制作だけでなく、各種WebサービスのテンプレートデザインやUI設計、セミナー登壇、コラムへの寄稿など精力的に活動中。"かっこいいを簡単に"をモットーに、海外のWebデザインを日本向けにローカライズした新しいデザインを提案している。著書に『いちばんやさしいHTML5&CSS3の教本人気講師が教える本格Webサイトの書き方』など。 Copyright 2017 はじめてＷＥＢ All Rights Reserved. http://hajimeteweb.jp/