スマートフォンサイトを表示する

  1. TOP
  2. Jimdoで魅せる日本語Webデザイン : 第4回 一瞬で伝える!魅力的なメインビジュアルの選び方

エキスパートコラム

Jimdoで魅せる日本語Webデザイン(全12回)

第4回:一瞬で伝える!魅力的なメインビジュアルの選び方

執筆:服部 雄樹(服部制作室)

2016年7月4日更新

  • このエントリーをはてなブックマークに追加

閲覧数3,025views

このコラムをPDF形式でダウンロードする

JimdoExpertとしてこれまで100件以上のJimdoサイトに携わってきた筆者が、Jimdoを使用して日本語のWebサイトをデザインするポイントについて解説する本コラム。

前回のコラムでは詳細ページ作成のコツについて解説しました。第4回目となる今回は、メインビジュアルを選ぶ際のポイントを見ていきましょう。

一瞬で何のWebサイトか分かる画像を

何事もスピードが重視される現代では、ユーザーがWebサイトを訪れて「何が載っているか」を判断するまでの時間は、5秒とも10秒とも言われています。その数秒の間に「欲しい情報が載っていない」と判断するとユーザーはページから離脱してしまいます。

この極めて短い時間の中で「何が載っているか」を効果的に伝えるのが、メインビジュアルです。つまり、まずは大きな画像で「何が載っているか」を直感的に伝え、それがユーザーの求めるものと一致すれば、続きを読んでもらえる可能性が高くなります。

デザインとはコミュニケーションの手段です。Webサイトを訪れる人に自社の商品やサービスを知ってもらう、伝える、ということが何よりも重要で、ただかっこ良ければいいというものではないのです。

花屋さんであれば花の画像を使う

ここで1つ例を出します。数年前、ある友人からWebサイトのリニューアルを依頼されました。プリザーブドフラワー教室を運営する彼女が、Jimdoを使い自分で作ったというそのサイトはとても良くできていましたが、問い合わせは全くありませんでした。

私はすぐにその原因に思い当たります。サイトを開くとウェディングドレスを着た新婦が砂浜でブーケを持っている画像が大きく掲載されていたからです。つまり、メインビジュアルが「花ではなかった」のです。

花の教室の情報を探しているユーザーが訪れても、ウェディングの画像を見て「ああ、結婚式のサイトか」と勘違いし、「自分の知りたい情報は載っていない」と判断したかもしれません。「いや、でも文章を読んでもらえば…」という思いもありますが、5秒から10秒では読めるのは見出しぐらいです。

これを改善するため、まずメインビジュアルに花の画像を使用することを提案し、全体のカラーリングも花の色に合ったものに調整しました。すると彼女のサイトの離脱率は大幅に改善し、リニューアル直後から3ヶ月間ほぼ毎日問い合わせが来るようになりました。このように、メインビジュアルの持つ力は非常に大きいのです。

花のWebサイトであることを直感的に分かるようにした結果、離脱率が大幅に改善

画像はプロのカメラマンに依頼するのがベスト

では、画像はどのように入手すれば良いのでしょうか。
画像には著作権があります。検索で見つけた画像などを無許可で使ってはいけません。そのため自前で用意する必要がありますが、予算の都合が付けばプロのカメラマンに依頼することをオススメします。

数万円の費用はかかるものの、その画像によって得られる効果を考えれば決して高くはない金額です。もしそれが難しく自分で撮るという場合は、こちらのコラムなど参考にできるだけクオリティの高い画像を用意するようにしてください。

他には、画像素材サイトなどを利用するのも良いでしょう。有料/無料を問わず様々な素材サイトがありますが、オススメはPixabay(https://pixabay.com/)です。このサイトで配布されている画像は全て「Creative Commons CC0」のもとで公開されており、個人・商用問わず無料で自由に使用することができます。

※ライセンスに関する詳しい情報は各素材の詳細をご確認の上、自己責任にてご使用ください。

【番外編】Jimdoなら動画を使った表現も簡単

また最近では、メインビジュアルに動画を使用した表現もよく見られます。動画は静止画に比べ多くの情報を伝達することができ、見る人に臨場感や驚きを与えられるので、業種によっては動画を使用するのも面白いのではないでしょうか。

JimdoならYouTubeやVimeoのURLを入力するだけで、背景に動画を配置することができます。私の運営しているWebサイト(http://www.template-labo.com/)でもメインビジュアルに動画を使用していますが、とてもいいアクセントになっており、これからは動画を使った表現がさらに多用されていくと予想しています。もちろん動画を使用する際にも、画像と同じく著作権に注意して使用するのは言うまでもありません。

メインビジュアルに動画を使うといいアクセントになる

まとめ

  • サイトを訪れた人が一瞬で「何が載っているか」分かること
  • 内容を端的に表す画像であること
  • 画像のクオリティにこだわること

この3つを意識してメインビジュアルを選定すると、より魅力的で分かりやすいWebサイトになるでしょう。次回は、テーマカラーの選び方や配色などの「色」をテーマに解説します。

  • このエントリーをはてなブックマークに追加
このコラムをPDF形式でダウンロードする

服部 雄樹(はっとり・ゆうき)

服部 雄樹(はっとり・ゆうき)

服部制作室 代表/JimdoExpert
http://www.hattori-studio.jp/
http://www.template-labo.com/

愛知県名古屋市出身。2014年までインドネシア・バリ島で活動し、世界各国のクリエイターと交流。多くの海外案件に携わる。帰国後、服部制作室を設立。Webサイトの制作だけでなく、各種WebサービスのテンプレートデザインやUI設計、セミナー登壇、コラムへの寄稿など精力的に活動中。"かっこいいを簡単に"をモットーに、海外のWebデザインを日本向けにローカライズした新しいデザインを提案している。

著書に『いちばんやさしいHTML5&CSS3の教本 人気講師が教える本格Webサイトの書き方』など。

HTML&CSSとWebデザインが 1冊できちんと身につく本

  • はじめてWEB 読も読もキャンペーン「テーマ別セレクト本」プレゼント!
  • 「はじめてWEB」でホームページをはじめよう!
  • Jimdoリメイク | プロがあなたのホームページを50,000円(税抜)でリニューアル!
  • 問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール
  • 文具、通信、オフィスのことなら何でもお任せ!まとめてオフィス

ホームページを作るのがはじめてのかたはまずこちらをご覧ください

コラム週間アクセスランキング[期間:2017/9/17~2017/9/23]

おすすめコンテンツ

はじめてWEBおすすめ本

創業・経営のお役立ち情報

  • ソウギョウノート

    飲食・小売・サービス業の開業スケジュールから、融資申込に必要な書類までをカンタン作成

  • 経理通信

    経営者と経理ご担当者必見!中小企業・小規模事業者のための経理サポートサイト

  • まとめてオフィス

    文具、通信、オフィスのことなら何でもお任せ

  • フリーコールS

    問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール

  • auオフィスナンバー

    事務所開設するなら固定電話番号で信頼アップ
    今ならキャンペーン実施中!