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

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

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

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

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

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

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

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

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

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

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

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

LINEの企業サイト

キリンのサイト

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

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

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

スターバックスジャパンウェブサイト

cinra.net

BBCラジオのウェブサイト

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

無料でBiNDクラウドを試してみる