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

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

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

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

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

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

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

理由1┃SEOへの影響

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

実践的なテクニック

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

カラム数の調整

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

回り込みの解除

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

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

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

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

FAQ

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

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

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

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

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

＞＞「質問と回答」

まとめ

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

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

＞＞Elementorの使い方シリーズ