レスポンシブデザインテスト

AD Area
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Table of Contents

この投稿は、Elementorの有益な機能の1つ「レスポンシブデザイン」のテストだ。

「ウェブサイト閲覧者のほとんどがモバイル端末(≒スマートフォン)である」という調査結果があちこちで見られるようになった。「ほとんど」とは、調査結果により異なるが70%~80%以上を指している。

ならば、デスクトップ(PC)表示/モバイルそれぞれで最適なコンテンツを表示する必要があるのだが…問題となるのは「画像」。特にCTAやFVなど「背景画像を使うコンテンツ」には注意が必要だ。

よくある「レスポンシブテーマ」の挙動と問題点

よくある「レスポンシブテーマ」の場合、モバイル端末閲覧時には下記のような挙動を示す。

  • アイキャッチ/投稿中に配置する画像:縮小表示
  • CTAなどで使う背景画像:デスクトップ用の画像をテーマ側で調整して表示。

画面が小さくなるのだから、縮小表示されるのは分かる。だが、背景画像は縮小ではなく「調整」だ。この調整がイケてない。実際に表示されるコンテンツを見ると、調整というより「トリミング」という表現が近いと思う。そこで発生する問題点は下記の通り。

  • モバイルの場合、画像の端は使えない。被写体や文字等は全て中央配置が基本となる
  • デスクトップでモバイル用の画像を使うと、小さくなりすぎて迫力が出ない

どんなデバイスでも最適表示される画像を作るというのは極めて困難だ。だが、ほとんどのテーマではデバイスごとにコンテンツを作ることが出来ない。そのため、表現上の制約はかなり大きくなる。これが現状だ。

そんな問題を解決してくれるのが、Elementorの「レスポンシブデザイン」だ。このコンテンツを見て、その優れた特徴を確認して欲しい。

Elementor「レスポンシブデザイン」の概要

Elementorの「レスポンシブデザイン」は、「デスクトップ」「タブレット」「モバイル」3種類のデバイスごとに異なるコンテンツを表示させることが出来る機能だ。例えば、こんなことが出来る。

  • デスクトップ:コンテンツAを表示、コンテンツB/コンテンツCを非表示
  • タブレット:コンテンツBを表示、コンテンツA/コンテンツCを非表示
  • モバイル:コンテンツCを表示、コンテンツA/コンテンツBを非表示

要するに、デバイスごとにコンテンツを使い分け出来るということ。これが最大のメリットだ。

Elementorなら、デスクトップでもモバイルでも最適な画像を表示出来る。画像、及びコンテンツは複数準備しなければならないが、その手間(デメリット)以上にメリットの方が大きい。

しかもElementorの場合、そもそもコンテンツの設置は実に簡単だ。そして「レスポンシブデザイン」の設定もわずか数クリックで完了する。設定方法は下記の通りだ。

「レスポンシブデザイン」設定方法

  1. コンテンツを作成
  2. 「高度な設定」タブ→「レスポンシブデザイン」と進む
  3. デバイスごとの表示/非表示を選択
  4. 公開または下書き保存をクリック→完了

「レスポンシブデザイン」確認方法

  • 自分のサイト:プレビューでリアルタイムに確認可能。
  • 他社(他者)サイト:Chrome Dev Toolsを使えば確認可能。

それでは早速確認してみよう。ここから下のコンテンツは、デスクトップ用とモバイル用に分かれている。

このコンテンツをデスクトップで見ているなら、モバイル用コンテンツは表示されない。モバイルで見ているならその逆だ(目次を見れば、このコンテンツがどういう構成になっているか確認可能だ)

もし余裕があるなら、Chrome Dev Toolsなどを使ってデバイスごとの違いを確認してみて欲しい

デスクトップ用コンテンツ(CTA)

こちらは、デスクトップ閲覧時のみ表示されるコンテンツ。モバイル(タブレット/スマートフォン)では表示されない。

Heading for Desktop
デスクトップでのみ表示されるCTA(カバータイプ)

モバイル用コンテンツ(CTA)

こちらは、モバイル(タブレット/スマートフォン)閲覧時のみ表示されるコンテンツ。デスクトップでは表示されない。

Heading for Mobile
モバイルでのみ表示されるCTA(クラシック)

まとめ

ご覧の通り、レスポンシブデザインを使えばデバイスごとに最適なコンテンツを表示させることが出来る。CTAやFVなどでは大いに活用すべき機能だ。

但し、この機能を使うと手間は単純に増える。なので、作業効率化という観点ではテンプレートの活用がポイントとなる。よって、Elementor Proの利用が望ましいという結論になるだろう。

Recommends
Sleeping Puppy

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Recent posts
This is the Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Table of Contents

BIOHAZARD®は株式会社カプコンの登録商標です。
Play Station®は株式会社ソニー・インタラクティブエンタテインメントの登録商標です。

CTA-Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Check it now
Shingo Matsuura
Shingo Matsuura

マーケター/コピーライター。STRATEGY SUPPLIER所属。お気に入りゲームは「バイオハザードシリーズ」。最近「バイオハザード0 HD」にどっぷりハマったのがきっかけで、このサイトの題材として取り上げることとしました。