シングルページで映える、トップ画像のポイントまとめ

Webサイトのデザインでもっとも重要な場所は、なんといってもアクセスしたとき一番最初に目にするトップ画像です。スマホサイトが主流な今、このトップ画像のサイズ感や特性も以前とは変わってきました。ここでは、ターゲットごとに適したいいトップ画像とは何かを紹介します。

スタートアップやスモールビジネス向けのサイトに限りませんが、効率よくシングルページのサイトを作りたい/作っているという方は、かなり多いのではないかと思います。前回の記事では、このシングルページがいかにスマホ時代のサイトとして最適かを解説しました。

→成功スタートアップ企業に見る、シングルページに学ぶ勝ちパターン

しかしシンプルな構成がゆえ、意外に悩むのがトップページのヒーローエリアと呼ばれる一番最初に目に入る場所の画像です。他との差別化を図るうえでも重要な’個性’を引き出すには、何としてもこのトップ画像だけは工夫すべきです。
そこで今回はトップ画像(BiNDではビルボードと呼んでいるエリアです)を作るうえでのポイントを紹介します。

istock-514627514

トップ画像はどんなものが「イケテる」サイトに見え、しかも訴求力が高いでしょうか。
ポイントは2つ。

1.スマホを意識したデザインを心がけること
2.読みやすさや閲覧のしやすさを意識すること

です。では、具体的に解説しましょう。

ポイント1:スマホを意識して、軽量・適度な情報量に

Webサイトのデザインは昨今レスポンシブWebが主流ですが、それはつまりトップ画像もPCサイトとスマホで共有することになります。制作時にPCの環境ばかり気にしていてはスマホで見づらい画像になってしまいます。
そこで、スマホで好まれる画像のポイントは次のようなものです。

  • とにかくページが軽い。読み込みが早いとイライラせず好感度アップに
  • スマホを縦にしたとき画面半分かそれ以下程度の大きさが望ましい。
    文字がPC向けに小さすぎては読むことができませんし、ワイド画面に対応した画像はスマホではむしろ小さすぎます。幅:高さが4:3くらいの比率もしくは正方形に近い程度が、文字情報を完全に隠すことなく、また画像のインパクトも保てるので最適です。
  • 適度な情報量がある。
    写真だけでなく文字があるほうが断然引きがあります。イメージだけでは意味が伝わりづらくなるので、キャッチコピーを用意しましょう。

各有名サイトをスマホで閲覧するとどう見えるかをチェックしてみましょう。

モンティパイソンの公式ページ

カルトなファンが多いアーティストなどのサイトは凝ったデザインが正解。とはいえ、一般のサイトではこのようなヘッダーはボタンも小さく画像文字も読みにくいので避けたほうがいい。(MontyPython’s Official Website)

LINEの企業サイト

背景画像にテキスト形式の文字、ゴーストボタンを使ったトップ画像は、スマホで見たとき画像もゆったり見られる最適な正方形に近いサイズに調整されている。(LINEコーポレートサイト)

キリンのサイト

PCサイトと同じ画角の横が長めのトップ画像を使っているが、カルーセルの切り替えボタンは大きく使いやすく、メニューとの比率もよく計算されているのできれいなまとまりになっている。(キリン)

ポイント2:読みやすさや閲覧のしやすさを重視

以前は、スマホでの閲覧時わざわざ拡大して見ることもありましたが、最近ではスマホに最適化されたサイトも増え、文字サイズが小さいものは見る気さえ失うようになってきました。これはトップの画像でも同じように言えることです。

  • 文字サイズはPCよりスマホを基準に考える
    もしも画像にする場合はスマホでも読める分量と大きさを基準にします。
  • 文字を画像にせずテキストのまま使うのも手。
    レスポンシブWebでは、デバイスのサイズによってレイアウトが変化するので、文字は画像化せずテキストとして扱うほうが、小さくなったりぼやけたりせず読みにくくなる心配が減ります。
  • スマホの操作で問題ないデザインかをチェック。
    現在でも人気のカルーセルなどスマホでも操作できるボタンのデザインになっているかを確認。タップできないなどユーザー・フレンドリーでないデザインは、一見凝ったものでも逆に嫌われます。
スターバックスジャパンウェブサイト

スターバックスのページ。スマホをメインにデザインされているため画像文字でも読みやすいサイズに調整済み。(スターバックス コーヒー ジャパン)

cinra.net

文字の下に半透明の黒地などを置くと、写真の上の文字も読みやすくなる。こちらはPCサイトのほうに最適化された画像文字のため、スマホでは多少小さく見える。(cinra.net)

BBCラジオのウェブサイト

最近では少なくなったが、スマホでのタッチのしやすさを優先すると、このように多数あるメニューをボタン化するというサイトのデザインもありうる。(BBC Radio)

スマホ対応サイトには、トップ画像の作り方にも注意が必要です。次回の記事では上記を踏まえた上で、BiNDの画像ソフト「SiGN」を使ったカンタンなトップ画像の作り方を解説します。

  • ホームページのトップ画像もスマホを意識してデザインする
  • 文字の読みやすさや読み込みの速さなど、スマホで好まれる条件を考慮
  • 表示サイズによって可読性が変わる文字は画像文字でなくテキストを使うほうが安心

関連記事