Elementor レスポンシブ機能の使い方─モバイル対応の重要性

現代では多くの方がスマートフォン(モバイル)を使って情報を検索し、Webサイトを閲覧します。業界にもよりますが、ウェブサイトへのアクセスの過半数、多いところでは7〜8割以上がスマートフォンからのアクセスです。

モバイルファーストがあたりまえになりつつある現在、Elementorのレスポンシブ機能を理解して、どのデバイスからアクセスしても使いやすいサイトを構築しましょう。

レスポンシブ機能を使って、どのデバイスからアクセスしても使いやすいサイトを構築する

デバイスごとの表示・非表示を使いこなすことの重要性

これからのマルチデバイス対応では、ユーザーがどのデバイスからアクセスしても、一貫して快適な体験を提供できることが重要です。

具体的には、画面サイズや操作方法の違いに合わせてナビゲーションやレイアウトを最適化し、必要な情報に迷わずアクセスできるようにしておく必要があります。

そうするべき主な理由を2つ解説します。

理由1┃SEOへの影響

Googleは、Webサイトの評価(検索順位の決定)を、主にモバイル版のサイトを基準に行う「モバイルファーストインデックス(MFI)」を全面的に採用しています。

これは、モバイル対応が不十分な場合、検索順位が上がりにくいことを意味します。

Googleは、Webサイトの評価を、主にモバイル版のサイトを基準に行う「モバイルファーストインデックス(MFI)」を全面的に採用している

理由2┃ユーザーの大多数がスマートフォンを利用している

現代では、多くの方がスマートフォンで情報検索やWeb閲覧をしており、業界によってはアクセスの7〜8割以上がスマートフォン経由です。

モバイル対応していないサイトは、文字や画像が小さく表示され、操作しづらくなります。その結果、ユーザーはストレスを感じてすぐに離脱してしまう傾向が強くなります。

ユーザーに伝えたい情報を確実に届けるためにも、モバイル対応は必須です。

Webサイトへのアクセスは。業界によっては7〜8割以上がスマートフォン経由

Elementorの仕組み:「デスクトップファースト」が基本

まず知っておくべきことは、Elementorというツールは、デスクトップPC)での設定をタブレット・モバイルへと引き継いでいく「デスクトップファースト」の仕組みで設計されているという点です。

このため、タブレットやモバイル表示モードで行ったデザイン設定は、デスクトップ表示には反映されません。まずデスクトップ版で全体のデザインを作成し、その後タブレット・モバイルの順で細かく調整していくのが推奨されています。

しかし、ツールの仕様はデスクトップファーストでも、デザインの思考プロセスと編集手順を工夫することで、モバイルファーストを実践することが可能です。

  • モバイル用のシンプルなヘッダーと、デスクトップ用の多機能なヘッダーを別々に作る。
  • デスクトップでは詳細な料金表を見せ、モバイルではシンプルな料金プランと「詳細はこちら」ボタンだけを表示する。

このように、セクションごと表示・非表示を切り替えることで、各デバイスに最適化されたコンテンツ提供が可能になります。「高度な設定」タブにある「レスポンシブ」機能は、モバイルファーストを実践する上で非常に強力な武器です。

Elementorは、スマポンシブのサイトも作れます!作り方はこちらの動画をご覧ください!

レスポンシブのブレークポイント

Elementorの初期設定では、3つのブレークポイントが用意されています。

ブレークポイントとは、ウェブサイトのレイアウトが切り替わる特定の画面幅のことを指します。

  • デスクトップ:幅が 1024 ピクセルを超えるデバイス
  • タブレット:幅が 1024 ピクセルから 767 ピクセルのデバイス
  • モバイル:幅が 767 ピクセル未満のデバイス

ブレークポイントの数値を変更したり、ブレークポイントを増やしたりしたいという方は、こちらの記事をご覧ください。

>>Elementor│レスポンシブのブレークポイントの増やし方 – 大画面やスマホ横向きも設定できる

タブレット・モバイルモードでサイトを編集

Elementorの編集画面のトップバーの真ん中に、編集画面の切り替えボタンがあります。編集結果はライブで反映されるので、確認しながら調整しましょう。

Elementorの編集画面のトップバーの真ん中に、編集画面の切り替えボタンがある

ウィジェットの編集からレスポンシブモードを切り替えることも可能

ウィジェットの編集中に出てくるボタンをクリックすると、画面がそのモードに切り替わります。

ウィジェットの編集中に出てくるボタンをクリックしてもモードの切り替えができる

実践的なテクニック

ここでは、レスポンシブの具体的な使用例を紹介します。

カラム数の調整

デスクトップでは3カラム、タブレットでは2カラム、モバイルでは1カラムといったレイアウトで、情報を見やすく整理します。

デバイスごとのカラム数の調整例

回り込みの解除

デスクトップでは画像の周りにテキストを回り込ませ、モバイルでは回り込みを解除して縦積みにするレイアウトを設定してみましょう。

デバイス別の、回り込みのある・なしの例

デバイスごとの要素の表示・非表示

ウィジェットの編集画面で、①「高度な設定」タブをクリックして②「レスポンシブ」の項目を開くと、デスクトップ・タブレット・モバイルそれぞれで項目を「表示させる」「表示させない」の設定ができます。

ウィジェットの編集画面で①「高度な設定」タブをクリックして②「レスポンシブ」の項目を開くと、デバイス別に「表示させる」「表示させない」の設定ができる

モバイルでは情報量を絞るために一部のセクションを非表示にし、逆にモバイル限定の案内を表示するといった使い方ができます。

デバイスごとの要素の表示/非表示の例

FAQ

Q:「Elementorで作成したフッターがモバイルで表示した時に下に余白ができます。どうしたら消せますか?」

Q:「Elementorのレシポンシブ対応時のモバイル画像の大きさが上手く設定できません」

Q:「Elementorで制作したWebサイトを、スマホスクロール時に横ずれをしないようにしたい。」

上記のリンクにアクセスすると、その解決方法がご覧いただけます。

この他にも、TOFUラボのメンバーによるQ&Aをまとめたページがあります。サイト制作に迷った時の答えや、新しいヒントが見つかるかもしれません。

>>「質問と回答」

まとめ

レスポンシブは今の時代のウェブサイトに欠かせない要素ですが、Elementorだと簡単に設定できます。Elementor自体はデスクトップファーストの仕様ですが、セクションごと表示・非表示を切り替えたり、各デバイスごとに設定することで、最適化されたコンテンツ提供が可能になります。モバイルファーストの考え方を取り入れて、効果的でユーザーフレンドリーなWebサイト制作を実践してください。

Elementorの他の機能について知りたい方は、こちらもご覧ください。

>>Elementorの使い方シリーズ

Naomi Suzuki

このサイトを運営してるナオミです。エンジニア歴13年、海外在住歴20年。
WordPressの情報やハッキングを防ぐ脆弱性の情報と自分の海外での生活の一部を無料のメルマガで配信しています。

目次

「Elementor レスポンシブ機能の使い方─モバイル対応の重要性」への4件のフィードバック

  1. はじめまして。篠原ひろしと申します。初めて、ホームページ作成をさせていただいております。人に勧められるままエレメンターを利用してきました。最後の調整がこのレスポンシブかと思っています。上記にありましたように、試しているのですが、【デスクトップ以外のモードで、スタイルを編集すると、そのモードだけに反映される】とはならないのはなぜでしょうか。

  2. 初めてエレメンターを使います。
    PC版でサイトを作ったのですが、
    最初からスマホ版のサイトを作ることは可能ですか?
    PC版を全部隠して作り直すとか‥

コメントは受け付けていません。

Elementorの無料テンプレートサイト
新規追加されました。

WordPressの最新情報が
毎週届く無料メールマガジン

DiviやElementorの情報だけでなく、脆弱性が見つかったプラグインやテーマのリストも毎週届きます。セキュリティの強化につながります。 

管理人のナオミが書くメルマガ
海外でエンジニア歴10年以上
DiviとElementorに精通