SWELLでパソコン用とスマホ用のファーストビューをそれぞれ設定する方法！

この記事のハイライト

• 投稿記事ではなくLP（固定ページ）で設定する方法を解説
• SWELLは画像を「PCのみ」「モバイルのみ」表示に設定できる機能あり
• 画像ブロックにデバイス制限（表示条件）をかける方法を紹介
• アイキャッチ欄を使わず、ファーストビューを自由にデザイン可能！

---

SWELLでファーストビュー画像がズレる原因

「パソコンではかっこよく見えるのに、スマホで見ると画像が切れてる…」
そんな経験、ありませんか？

この原因の多くは、アイキャッチ欄を使ってファーストビューを作っていることにあります。

SWELLのアイキャッチ欄は便利な反面、スマホとパソコンで表示バランスを調整しにくいため、画像が見切れたり、文字がズレたりしやすくなります。

特に、ランディングページ（LP）などの「自由にデザインしたいページ」では、
アイキャッチを使わずに、ブロックで画像を配置する方がベストです。

そこで活躍するのが、SWELLの「表示デバイスを切り替える」機能！

画像ブロックごとに「パソコンだけ」「スマホだけ」と表示をコントロールできるので、
それぞれに最適なファーストビューを作ることが可能なんです。

---

パソコン用ファーストビュー画像を設定する手順

まずはパソコンに表示する画像を設定してみましょう！

1. WordPressの固定ページから、編集したいページを開きます
2. ファーストビューとして使いたい画像ブロックを追加します
3. 画像ブロックを選択し、右サイドバーの「ブロック」→「デバイス制限」を開きます
4. 「このブロックを表示するデバイス」で、「PC」を選択します

これで、パソコンで見たときだけ表示される画像になりました！

---

スマホ用ファーストビュー画像を設定する手順

続いて、スマホ専用の画像を設定します。

1. パソコン用を設置した時と同じ要領で今度はスマホ用の画像ブロックをもう１つ追加します
2. 画像をアップロードし、表示内容を調整します（ロゴやキャッチなど）
3. 「ブロック」→ 「デバイス制限」を開きます
4. 今回は「このブロックを表示するデバイス」で、「SP」を選びます

これでPCとスマホで画像が切り替わる設定が完成です！

💡ポイント
画像はどちらも中央にメインの要素（人物・ロゴ・メッセージ）を配置しておくと、どのデバイスでも“伝わる”ファーストビューになります！

---

⚠️SWELLの設定でよくあるミス＆注意点

❌画像を「すべてのデバイス」にしてしまうと…

PCとスマホで同じ画像が重なって2枚表示されてしまうことがあります。
必ずそれぞれの画像に「PCのみ」「モバイルのみ」の設定を忘れずに行いましょう。

---

スマホ用画像の注意点

スマホは通信速度や画面幅の関係で、

• 軽めの画像ファイル（100〜200KB以内）
• 中央に主役要素を寄せたレイアウト

がおすすめです。

---

パソコン用画像の注意点

パソコン用画像は横幅が広く、高解像度でもOKですが、

画像ファイルサイズが大きすぎると表示が遅くなる原因になります。
→ WebP形式などで軽量化しておくと安心です！

---

よくある質問（FAQ）

この記事を読んだ方におすすめの小冊子はこれ！

おすすめの関連記事はこちら！