【SWELL】「PCのみ」「スマホのみ」コンテンツを出し分ける3つの方法

ホームページやLPを制作している時、PCとスマホで違うコンテンツを表示したいケースがあります。
例えば、PCでは横長のバナーを表示したいけど、スマホでは縦長のバナーに切り替えたいときなど。

この記事では、SWELLでデバイスごと（PC・SP）でコンテンツを出し分ける方法を3つご紹介します。

方法1：SWELLの標準機能「デバイス制限」を使う

SWELLには、ブロックごとにデバイス別の表示・非表示を設定できる機能が標準搭載されています。これが最も簡単な方法です。

設定手順

ブロックエディタで表示を制御したいブロックを選択
右サイドバーの「ブロック」タブを開く
「デバイス制限」セクションを探す
「表示するデバイスサイズ」の項目で表示したいデバイスにチェック

PCのみ表示したい場合

「PC」にチェック

スマホのみ表示したい場合

「SP」にチェック

この方法のメリットは、プラグインやカスタムコードが不要で、直感的に操作できる点です。
画像ブロック、ボタンブロック、カラムブロックなど、ほぼすべてのブロックで利用できます。

右側のサイドバーに「デバイス制限」が出てこない、非対応のブロックについては、グループ化するとデバイス制限ができます。

対象のブロックを選択
ツールバーの「︙」（3点リーダー）→「グループ化」をクリック
グループ化されたブロックを選択し、右側サイドバーのブロックタブを開く
下の方へスクロールすると「デバイス制限」が出てきます
「表示するデバイスサイズ」で「PC」もしくは「SP」を選択
保存

方法2：CSSクラスを活用する

「デバイス制限」の設定ができない要素や、より細かい制御が必要な場合は、SWELLが用意しているCSSクラスを活用する方法もあります。

追加CSSクラスで設定する

出し分けしたい要素を選択し、右側のブロックタグの高度な設定 > 追加CSSクラスに、pc_onlyまたはsp_onlyと入れると、PCのみ、スマホのみの出し分けができます。

PCのみ表示したい場合

pc_onlyを追加CSSクラスに設定

スマホのみ表示したい場合

sp_onlyを追加CSSクラスに設定

カスタムHTMLとCSSクラスを組み合わせる

PCとスマホで異なる画像を表示

<!-- PC用画像 -->
<div class="pc_only">
  <img src="pc-banner.jpg" alt="PC用バナー">
</div>

<!-- スマホ用画像 -->
<div class="sp_only">
  <img src="sp-banner.jpg" alt="スマホ用バナー">
</div>

この方法は、「カスタムHTML」ブロックを使って実装します。HTMLの知識が少し必要ですが、複数の要素をまとめて制御できるため便利です。

方法3：追加CSSで独自のレスポンシブ対応をする

より高度なカスタマイズが必要な場合は、メディアクエリを使った独自のCSSを書く方法もあります。

SWELLで設定されているブレイクポイントは600pxと960pxです。

実装手順

「外観」→「カスタマイズ」→「追加CSS」を開く
以下のようなメディアクエリを記述

/* スマホ（599px以下）のみ表示 */
@media screen and (min-width: 600px) {
  .custom-sp-only {
    display: none;
  }
}

/* タブレット（600px〜959px）のみ表示 */
@media screen and (max-width: 599px), screen and (min-width: 960px) {
  .custom-tab-only {
    display: none;
  }
}

/* PC（960px以上）のみ表示 */
@media screen and (max-width: 959px) {
  .custom-pc-only {
    display: none;
  }
}

対象のブロックに「追加CSSクラス」で上記のクラス名を設定

この方法は自由度が高い反面、CSSの知識が必要になります。

SWELLのブレイクポイント（600px、960px）以外にも、WordPressのコアやプラグインが独自のブレイクポイントを持っている場合があります。
カスタマイズ後は、ブラウザの幅を動かしながら様々な画面サイズで崩れていないか確認してください。

実践例：画像の出し分け

実務でよくあるケースとして、画像バナーをデバイスごとに出し分けたい時の手順です。

設定手順

「画像」ブロックを2つ用意
1つ目（PC用）：横長の画像をアップロード
画像ブロックを選択し、右サイドバーの「ブロック」タブ→「デバイス制限」で「PC」にチェックを入れる
2つ目（スマホ用）：縦長の画像をアップロード
画像ブロックを選択し、右サイドバーの「ブロック」タブ→「デバイス制限」で「SP」にチェックを入れる

これで、PCでは横長バナー、スマホでは縦長バナーが自動的に切り替わります。

どの方法を選ぶべき？

初心者の方→方法1（SWELL標準機能）

プラグインもコードも不要で、最も安全で簡単です。ほとんどのケースはこれで解決できます。

ある程度HTMLがわかる方→方法2（CSSクラス利用）

複数の要素をまとめて制御したい場合や、カスタムHTMLを使いたい場合に便利です。

CSSに慣れている方→方法3（メディアクエリ）

特殊なブレイクポイントや、より細かい制御が必要な場合に便利です。

他の実践例

実践例１：表（テーブル）のレイアウト変更

PCでは横スクロールなしで表示できる複雑な表も、スマホでは見づらくなります。

対処法A：シンプルな表に差し替え

PC用
詳細な6列の比較表
スマホ用
重要項目のみの3列の表

対処法B：カード型レイアウトに変更

PC用
テーブルブロック
スマホ用
グループブロックでカード風に表現

実践例２：動画コンテンツのサイズ調整

YouTubeなどの埋め込み動画は、デバイスによって最適なサイズが異なります。
カスタムHTML＋CSSで表示サイズを調整しつつ、出し分けることができます。

<!-- PC用：16:9の大きめサイズ -->
<div class="pc_only">
  <div style="aspect-ratio: 16/9; max-width: 800px;">
    <!-- YouTube埋め込みコード -->
  </div>
</div>

<!-- スマホ用：画面幅いっぱい -->
<div class="sp_only">
  <div style="aspect-ratio: 16/9;">
    <!-- YouTube埋め込みコード -->
  </div>
</div>

トラブルシューティング

問題1：設定しても表示が切り替わらない

原因と解決策

キャッシュの問題
ブラウザのキャッシュやキャッシュプラグインが原因の可能性があります
- 解決策：Ctrl+F5（Windows）またはCmd+Shift+R（Mac）で強制リロード
- キャッシュプラグインを使用している場合はキャッシュを削除
テーマのアップデート未実施
古いバージョンでは機能が制限されている場合があります
- 解決策：SWELL最新版にアップデート
カスタムCSSの競合
他のCSSが優先されている可能性があります
- 解決策：ブラウザの検証ツール（F12）で要素を確認し、display プロパティをチェック

問題2：タブレットでの表示が意図と異なる

原因と解決策

SWELLのブレイクポイントは以下の通りです：

PC：960px以上
タブレット：600px〜959px
スマホ：599px以下

タブレットを「PC寄り」にしたいか「スマホ寄り」にしたいかで設定を調整します。

問題3：CSSクラスが効かない

チェックポイント

クラス名のスペルミス
pc_only・sp_onlyは正確に入力する（アンダーバーに注意）
追加CSSクラスの設定場所
ブロック設定の「高度な設定」→「追加CSSクラス」
カスタムHTMLの閉じタグ
<div> には必ず </div> が必要

問題4：ページ速度が遅くなった

デバイスごとに大量の画像を読み込むと、ページ速度に影響します。

改善策

画像の最適化
WebP形式を使用し、適切なサイズにリサイズ
遅延読み込みを活用
SWELL設定→「高速化」を確認し、使用できそうな機能を検討
非表示の画像も読み込まれる点に注意
CSSで非表示にしても画像は読み込まれるため、重要でない画像は削減を検討

SEO的な観点からの注意点

1. 重複コンテンツの懸念について

PCとスマホで異なるコンテンツを表示しても、実際にはHTMLに両方のコンテンツが含まれています。
これは重複コンテンツのペナルティ対象にはなりません。

理由：

同一URL内の表示切り替えであり、別ページではない
Googleのクローラーは両方のコンテンツを認識し、デバイスごとの最適化として評価する

2. クローラビリティへの配慮

推奨される実装

重要なコンテンツ（テキスト、見出し）は必ずすべてのデバイスで表示する
デバイス別で変えるのは主に「画像サイズ」「レイアウト」「補足要素」に留める

避けるべき実装

メインコンテンツ（記事本文）をデバイスで大きく変える
PCのみに重要な情報を記載し、スマホでは非表示にする

これらは検索エンジンに不自然と判断される可能性があります。

3. モバイルファーストインデックス（MFI）対策

Googleは「モバイル版のコンテンツ」を基準にサイトを評価します。

重要なポイント

スマホ版を優先的に充実させる
MFIでは主にスマホ版が評価対象
重要な情報はスマホでも表示
PC限定の重要コンテンツは評価されない可能性
構造化データもスマホで表示
FAQや口コミなどの構造化データは両デバイスで表示

4. ページ表示速度への影響

デバイス別表示は、適切に実装すれば速度に悪影響を与えません。

SEOに良い実装

軽量な画像を使用（WebP推奨）
非表示要素でも画像は読み込まれるため、本当に必要なものだけ配置
SWELLの遅延読み込み機能を活用

SEOに悪い実装

高解像度画像を複数デバイス分用意して全て読み込む
JavaScriptで動的に切り替える（SWELLの標準機能ならCSS制御なので問題なし）

5. ユーザビリティとSEOの両立

理想的なアプローチ

コアコンテンツ
全デバイスで同じ（文章、見出し、主要画像）
レイアウト
デバイス最適化（カラム数、余白、フォントサイズ）
補助要素
デバイス別出し分け（バナー、CTA配置、装飾）

この構成により、SEOを損なわずにユーザビリティを向上できます。

6. Core Web Vitals（コアウェブバイタル）との関係

注意すべき指標

CLS（Cumulative Layout Shift）
非表示要素が多いとレイアウトシフトが発生しやすい
- 対策：非表示要素にも適切な高さを確保するCSSを設定
LCP（Largest Contentful Paint）
大きな画像の読み込みに注意
- 対策：ファーストビューの画像は遅延読み込みを使わない
FID（First Input Delay）
重いJavaScriptは避ける
- SWELLの標準機能はCSS制御なので影響小

まとめ

SWELLでは、標準機能だけでPCとスマホのコンテンツ出し分けが簡単にできます。
まずは方法1の「デバイス別表示設定」を試してみて、必要に応じて他の方法を組み合わせるのがおすすめです。

適切に実装すれば：

ユーザー体験が向上する
SEOにも悪影響はない
むしろモバイルフレンドリーとして評価される

注意点：

重要なコンテンツは全デバイスで表示
ページ速度に配慮した画像最適化
キャッシュクリアで動作確認

ユーザーのデバイスに最適化されたコンテンツを提供することで、サイトの使いやすさとSEO評価の両方が向上します。

ぜひ活用してみてください。

WordPress個別サポート

自分でやってみたけれどうまくいかない
やりたいことはあるけど方法がわからない

そんなときはお気軽にご相談ください。
マンツーマンでサポートいたします。

詳細はこちらから

方法1：SWELLの標準機能「デバイス制限」を使う

設定手順

方法2：CSSクラスを活用する

追加CSSクラスで設定する

カスタムHTMLとCSSクラスを組み合わせる

方法3：追加CSSで独自のレスポンシブ対応をする

実装手順

実践例：画像の出し分け

設定手順

どの方法を選ぶべき？

初心者の方→方法1（SWELL標準機能）

ある程度HTMLがわかる方→方法2（CSSクラス利用）

CSSに慣れている方→方法3（メディアクエリ）

他の実践例

実践例１：表（テーブル）のレイアウト変更

実践例２：動画コンテンツのサイズ調整

トラブルシューティング

問題1：設定しても表示が切り替わらない

問題2：タブレットでの表示が意図と異なる

問題3：CSSクラスが効かない

問題4：ページ速度が遅くなった

SEO的な観点からの注意点

1. 重複コンテンツの懸念について

2. クローラビリティへの配慮

3. モバイルファーストインデックス（MFI）対策

4. ページ表示速度への影響

5. ユーザビリティとSEOの両立

6. Core Web Vitals（コアウェブバイタル）との関係

まとめ

関連記事