Elementor実装時の「横ブレ」大丈夫？

こんばんは、安東です！

シルバーウィーク、皆さまいかがお過ごしでしょうか？
お出かけする方も、お家でゆっくり過ごす方も、少しでもリフレッシュできるといいですね！

さて今回は、Elementorでスマホを実装するときに気をつけたい「横ブレ」についてお話しします。

PCはデザインカンプ通りにきれいに実装できている。
スマホも、見た目はちゃんとできている。

でも実際にスマホで確認してみると……

画面が左右に動いてる〜？！

こんな状態になっていませんか？
「見た目はできているから大丈夫！」と思っていると、意外と気づきにくいのがこの横ブレです。

今回は、横ブレが起こる原因を確認しながら、スマホ実装で気をつけたいポイントをご紹介します。

スマホで画面が左右に動いていませんか？

まず、「横ブレ」とはどんな状態なのか見てみましょう

（※動画の音声はありません）
通常、スマホで見るときは、画面を上下にスクロールして閲覧しますよね。
ところが横ブレが起きているサイトでは、上下にスクロールしているつもりでも、画面が左右にも動いてしまいます。

Elementorの編集画面だけをみていると問題なく実装できているように見えるため、なかなか気づかないこともあります。

では、どうしてこのような状態になってしまうのでしょうか？

横ブレはなぜ起こる？

横ブレにはいくつか原因がありますが、そのひとつが
スマホの画面幅よりも大きな要素がページ内にあることです。

先ほどの動画のデザインを使って見てみましょう↓↓

PC版では、電話アイコンと電話番号が横並びになっています。
見たところ、特に問題はなさそうですね。
では、スマホ版ではどうでしょうか？

アイコンと電話番号の位置がズレていれているような…

原因はPCで設定した「500px」

Elementorの設定を確認してみると、電話アイコンを配置しているコンテナの幅に「500px」が設定されていました。

PCでは問題なく収まっていた500pxという幅ですが、
その設定がスマホにも引き継がれることで、スマホの画面幅よりも大きなコンテナができたことになります。

その結果、要素が画面からはみ出し、ページ全体が左右に動いてしまう状態になってしまっていました。

ここで覚えておきたいのが、
PCで問題なく表示されている＝スマホでも問題ない、ではない
ということです。

その設定、本当に必要？

そして、横ブレを修正するときにもうひとつ意識してほしいことがあります。

それは、「その設定、本当に必要？」
と考えてみることです。

Elementorには、幅・高さ・余白・配置など、たくさんの設定項目があります。

デザインカンプに近づけようとして、

「もう少し右にしたいから、ここを調整しよう」
「幅が合わないから、数値を入れてみよう」
「まだ合わないから、今度は余白を変えてみよう」

と設定をどんどん追加してしまうこともあると思います。

ですが、設定を増やしていくと、PCではきれいに見えていても、
スマホに切り替えたときに思わぬ崩れにつながることがあります。

そんなときは一度、
・不要な設定をしていないか？
・もっとシンプルな設定で実装できないか？
を意識してみましょう。

設定を重ねすぎて、どこが原因かわからなくなってしまったときは、
一度設定をリセットして組み直してみるのもおすすめです。

必要以上に設定を増やさないことも、レスポンシブ対応をしやすくするポイントです。

まとめ

今回は、Elementorのスマホ実装で起こる「横ブレ」についてご紹介しました。

ポイントは次の4つです。

①PCで問題のない設定でも、スマホでは画面幅を超えてしまうことがある
②PCで設定した幅や余白が、スマホでどうなっているか確認する
③うまくいかないときは設定を増やすだけでなく、不要な設定がないか見直す
④カンプと見比べるだけでなく、実機で操作して確認する

デザインを再現することはもちろんですが、
実際にユーザーがサイトを見るときと同じように「実機で確認する」ところまでが実装です。

ぜひ最後の確認まで忘れずに行ってみてくださいね！