SWELLのLPでスマホ向けに用意したアイキャッチ画像がPCでみると拡大され過ぎて見にくくなる時の対処法

今のWPのテーマ・テンプレートは「レスポンシブ」な対応になっています。
スマホで見る時とPCで見る時が自動的に切り替わるというか、キレイに見えるように自動的に調整されるようになっています。

でも、思うようにはいかない、ということもあります。自分の感覚・センスとそこから予想している見え方と、実際の見え方に差がでることもよくあります。

秋田です。
実は、昔は・・・(スマホ登場前でPCがメインのデバイスで、そこにガラケーが登場して少しずつ携帯でもネットを楽しめるようになった頃は)PC用と携帯用の2種類のページを用意していました。(ほんと面倒でした)

今やサイト閲覧の約8割はスマホらしいですね。PCでブログ記事を作成して投稿している人はPCでしかプレビュー画面を確認していないと思いますが・・・常にスマホで確認することがいかに大切か、ということになります。

【今回の記事を読んで欲しい方・アイキャッチ画像の見え方でお困りの方】
■ SWELLを使っていて、LPの見え方に少し不満がある人(PCとスマホでの表示の違い)
■ PC用にアイキャッチ画像を用意すると、スマホでは小さくなって(特にキャッチコピーなどの文字数が多いアイキャッチ画像などでは)よく見えない・インパクトが弱い・キャッチコピーが響かなくて困っている、という人
■ スマホ用にアイキャッチ画像を作成して用意すると、逆にPCで見る時にはアイキャッチ画像が拡大され過ぎて「見にくい・違和感あり」となってしまっている人

そんなお困りの方に見て欲しい内容です。

【結論】です。
二兎を追う者は一兎をも得ず、の世界です。割り切りましょう!

【解決策(スマホ優先)】
青色チェック スマホ用に(たとえば)600px・1,000pxで作ったアイキャッチ画像を用意する。
青色チェック LPのページ設定で「コンテンツの最大幅」と「アイキャッチ画像の表示設定」を調節する、というのがいちばんラクなやり方です。
青色チェック (わたし流の調整)コンテンツの最大幅 ⇒ 850px、アイキャッチ画像の表示設定 ⇒ コンテンツに収めて表示、に設定しています。

この850pxについては自分の好み・感覚で微調整してください。800pxでも900pxでもいいかと思います。

秋田秀一

ちなみに(スマホ用に見映えよくした)アイキャッチ画像のサイズは
私の場合は横600px、縦1,000pxで作成しています。

もし、可能であればサンプルとして下記のサイトをスマホとPCで見て比べてください。

https://www.super-success.net/lp/18my/

スポンサードリンク

目次

SWELLでLPのヘッダー画像部分が拡大され過ぎて「見にくい画像に」なってしまう時の対処法

ブラウザの表示倍率を普通にしている時(100%前後の倍率で表示している時)に、ヘッダー画像部分(アイキャッチ画像)が崩れる際に、ブラウザで縮小すれば「それなりに見える」場合のやり方になります。

SWELLのLPでスマホ用のアイキャッチ画像が崩れる時の対処法イメージ画像

前提条件(600px・1,000pxのスマホ向けに作ったアイキャッチ画像を使う時)

ズバリ、ランディングページですからキャッチコピー、リードコピー、お客さまへのベネフィットなどをヘッダー画像(ここでのアイキャッチ画像)に詰め込み過ぎました。

下の画像がスマホ用に作成した600px・1,000pxの画像です。

手取り18万円で借金返済が苦しくて夜も眠れない人へ【借金返済専用】の副業ツールを【無料】プレゼントイメージ画像
自分のiPhoneで見るとちょうどよい、画面いっぱいの表示となります

アイキャッチ画像というよりは、むしろ「ランディングページのヘッダー画像」としての機能重視で作成しました。
つまり、キャッチコピーやリードコピー、さらにターゲット、お悩みそのもの、解決策、ベネフィットなども盛り込んだ形の画像です。

これを・・・PCでサイトを見ると、拡大され過ぎて見にくくなっていたのです。

LP記事の設定で解決!

下図のように設定することで解決しました。

スマホ用のアイキャッチ画像を設定した時にPCでもキレイに見えるやり方イメージ画像
わたし流の設定方法

■ LP設定で・・・コンテンツの最大幅 ⇒ 1200px ⇒ 850px
■ アイキャッチ画像の表示設定・・・コンテンツに収めて表示にチェック

秋田秀一

今まで普通に1200pxでの表示(PCの場合)を見慣れていましたので最初は違和感がありましたが、すぐに慣れます。そもそも約8割がスマホユーザーだと考えるなら、それに合わせるのが当たり前の話です。

まとめ

1つだけ注意を・・・これはSWELLのLPでページを作成する場合の話です。

固定ページで作成したランディングページをトップページとして表示させてサイト作りをする場合は「外観」「カスタマイズ」の「メインビジュアル」から「表示設定」に進んで、「メインビジュアルの高さ設定」から微調整をしてください。

いずれにしても

青色チェック 自分のスマホでどう見えるのか、を常に確認しながら作成することが大切です。
(数字を変えて、更新して、プレビューを確認して、また数字を微調整して・・・の繰り返しです)

※ PCからの閲覧を切り捨てると、何となくメチャクチャ損をしているような気分になりますが・・・全体の閲覧者の約8割がスマホユーザーだというのを忘れないようにしてください。

ここまでありがとうございました。

スポンサードリンク

年末ジャンボで末等の300円しか当たったことがないあなた
ツイてる自分になりたいあなた
たくさんの夢をかなえたい・目標を達成したい・成功したいあなた
あれもしたい、これも欲しい、あれも買いたい、あそこにも行きたい・・・

【わずか3分で作って】あとは【簡単3ステップ】で今と同じ日常に戻るだけ!
夢実現預金通帳は元銀行員が考えついた当選体質・夢実現体質へと
変身する・体質改善するためのツールです

夢実現預金通帳へのバナー
1冊1,000円ですが・・・すいませんバラ売りはしていません

この記事が気に入ったら
いいね または フォローしてね!

よかったらシェアしてね!

この記事を書いた人

秋田秀一と申します。銀行に31年勤務して定年退職後、二足の草鞋を履いています。副業・起業・借金(資金調達と返済)についてお手伝いできましたらうれしい限りです。⇒ プロフィール

こんな借金返済相談をお受けしていっしょに解決するためのお手伝いをしています。⇒ ケーススタディ

目次
閉じる