Webサイトをビジネスで運用している企業であれば「ランディングページ（LP）」が必要になってくるシーンって少なくありませんよね。
ホームページ作成ソフトや制作ツールなどのサービスを使ってWebサイトを作っている場合、サービス内のテンプレートを使うか、自分でデザインするかのどちらかです。
「サービス内のものではなく、もっとチラシと同じようなデザイン性の高いものにしたい」
と思うことってありますよね。
そんな時、すぐに対応できる裏技。
それが「画像貼りつけ」です。
つまり、ページデザインをイラストレーターなどで作成し、画像にしてペタッと貼りつけるだけで作ってしまうことです。
「なんだ。裏技っていうほどでもないじゃん」
と、思われるかもしれません。
でも、Webサイトの勉強をしていけばいくほど画像貼りつけでページを作ることができなくなっていくんです。
もし、あなたが「そんなのLPじゃなくてもやってるよ」と思っているとしたら、この記事の中でSEOのキホンも知ることができるでしょう。
「画像だけでページを作るのはダメなのでは？」というあなたは、この記事を読めば、なぜ本来NGとされている画像だけでのページ構成が裏技なのかに気付けるはずです。
目次
画像貼りつけはSEOでマイナス評価って聞いたけど？
SEOについて少し勉強をすれば、ページ構成を画像だらけにすることはSEO上マイナス評価だということはすぐに気づきます。
ただ、正確には「検索エンジンがわざと順位を下げてしまう」ということではありません。
簡単に解説すると「検索エンジンは画像の中身が何なのかを知ることができない」ため、そのページに何が書いてあるのかが分からないということです。
つまり、1万文字の長い説明文が書かれた画像も1文字も書かれていないキャラクターの画像も、扱いが変わらなくなってしまうというのが、画像貼りつけをNGと言っている最大の理由です。
じゃあ、結局画像貼りつけはしちゃダメじゃん！
と思ったら、もう一度ランディングページの集客方法を思い出してください。
ランディングページにSEOは必要ない？
本来、ランディングページとは「もともと高い成約率を持ったユーザーの集客が見込める」ページです。
つまり「自然検索ではなく、別の方法でユーザーをページに呼ぶことができる手段」を既に持っているページとも言えます。
Web広告やメールマガジン、SNSの投稿など、手段は違っていても入口の確保ができている。
つまり、検索エンジンに対するページの評価をそこまで気にしなくても良いページと言い換えることができるでしょう。
もちろん、きちんと整理すれば結果として検索エンジンに評価されることはあるので、整理しておくに越したことはありません。
ただ、一番気にしなければならないユーザーは、たまたま検索エンジンからたどり着いた人ではなく、今、商品・サービスに興味を持ち「情報を知りたい」と思っているユーザー。
「だから、過度に検索の評価を気にしなくても良い」ことになり、画像だけでページ構成をしてもそこまで大きな問題にはならないことが多いのです。
画像を貼りつけでページを作る際の注意点
画像を貼ってページを構成させるとき、注意しなければならないことがあります。
それは、文字のサイズ。
例えば、こちらの画像を見た時、文字が読めない！
と思いますよね。
実はこれ、当社のWebサイトの一部分で表示されているPC画面を切り抜いて、iphone7以降の横幅とされている375pxのサイズで貼りつけたものです。
つまり、PCで見ている方は「もっと大きい画像をはってほしい」と思うかもしれませんが、スマートフォンで見ている方はこれで横幅いっぱいの表示になります。
通常、Webサイトにスマホ対策を施されていればスマートフォンで文字が読めなくなることはありません。
でも、文字の入った画像を貼ってしてしまうと等倍で縮小されてしまうので上記の画像のように文字が読めなくなってしまうことがあります。
そうならないようにするためには「スマートフォンでも文字が読めるサイズで画像を作る」ことをおすすめします。
文字と画像をうまく組み合わせる
大きい文字の画像はPCで縮小してもうまく表示されますが、小さい文字の場合はやっぱり読みにくくなってしまいます。
これを回避するためには、小さい文字はWebで表示させてあげるのが最も手っ取り早いです。
つまり、画像と文字を組み合わせてページをデザインしていくのです。
装飾して目立たせたいタイトルは画像にして、説明文は通常の文字で構成していく。
これなら、スマートフォンで文字が読めなくなる心配がありません。
ポイントは「白バックをうまく活用すること」です。
画像の淵が白バックなら境目がどこかは分からないため、構成次第でうまくページをデザインすることが可能になります。
画像に見出しタグを入れる
要所に画像を使い、本文は文字情報にしてページを構成すれば、デザイン性の高いサイトを構成することが可能になります。
ここまでできれば、文字を目立たせた見出しの画像は「h2」などの見出しタグで囲んでしまいましょう。
画像を見出しにしても文字が入っていないので意味がないのでは？
と思うかもしれませんが、実際にこの方法はよく用いられています。
例えば、Webサイトの左上にあるロゴにh1タグが入っているWebサイトは山のようにあります。
画像を見出しにする場合代替テキストを入れる
Webサイトに画像を入れる場合「代替テキスト」を設定できるようになっています。
コードで「alt”見出し”」と書かれている部分です。
代替テキストは通常画像に隠れているため表には出てきません。
画像がエラーで表示されない時、代わりに表示されるため「代替テキスト」という名前になっていますが、検索エンジンは代替テキストの文字情報は読んでくれます。
そして、画像が見出しになっていれば、代替テキストは見出しと同じ扱いになります。
だから、見出しを画像で設定する場合、ここに画像に表示されている内容と同じ言葉を入れておけば、見た目だけでなく検索エンジンにも同じことが伝わるようになります。
何のためにランディングページを作るのか
画像だけでWebサイトを構成するのは、本来はおすすめする手段ではありません。
だから今回、あくまでも初心者に向けた裏技として紹介させていただきました。
ランディングページの目的はユーザーに内容を理解してもらい、成約に結びつけることです。
- SEOを意識しないなら全部画像にしても問題ない
- スマホユーザーがアクセスしないのならPCユーザーだけを意識して構成しても良い
- PCとスマホの両方のユーザーを意識するなら文字サイズに注意する
持っている役割を考えつつ、効果が最大限に獲得できる手段でページを構成すれば、きっとより大きな成果につながるはずです。
一足飛びに上級者のマネをしても結果は出ない
もちろん、上級者になれば画像だらけのページを作るようなことはしません。
それはそれでさまざまな理由があるのですが、説明をしているとそれだけで記事が1本書けてしまうので今回は省略させていただきます。
少なくとも初心者ではないというプライドで画像を使っていないわけではありません。
だから、技術が伴わないうちから「上級者のマネをして装飾や文字に画像を使わない」ことばかりを意識しても意味がありません。
思うようにページを構成できないことが原因で逆に成約率が下がってしまっては本末転倒だからです。
まずは、何のためにランディングページを作るのかを見失わないようにし、自分の技術の範囲内で最大限に効果が発揮できるページ構成にしましょう。
この事業についてもっと詳しく知りたい方は、
ランディングページ制作