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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

LP記事の設定で解決！

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

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

まとめ

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

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

いずれにしても

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

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

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