レスポンシブとは、PCやスマートフォン、タブレットなどデバイスの画面サイズに合わせてWebサイトのレイアウトを最適にすることです。
現在はほとんど見かけなくなりましたが、以前はPCのレイアウトのままスマホでは縮小して表示されるサイトもありました。
その場合どうしても見にくくなってしまうのでレスポンシブ対応にする必要があります。
レスポンシブデザインをすると良いこと
レスポンシブデザインの特徴として以下のことが挙げられます。
⚫︎ 表示調整が自動でされ、ユーザーがストレスなく閲覧できる。
デバイスの画面幅に応じて文字や画像のサイズが切り替わることで見やすくなります。
⚫︎ SEOにも影響あり。
Googleがモバイルファーストインデックスを採用し、スマホで使いやすいかどうかというモバイルフレンドリーは検索順位の評価対象となります。つまり、スマホで見にくいサイトは検索順位の上部に上がりくくなるということです。
⚫︎ 1つのURLで対応。
Gデバイスごとに別々のサイトを作る必要がなく、同じURLで対応可能です。
⚫︎ ユーザーの多くがスマートフォン。
2025年現在、多くの方がスマートフォンでウェブサイトを閲覧しています。スマホ対応していないサイトは見にくく、操作もしづらく、ユーザーがストレスに感じると離脱につながりやすくなります。
エレメンターでのレスポンシブデザインはとても簡単
これまでの記事でも、Elementorはまずデスクトップ表示のレイアウトで紹介しました。Elementorはまずデスクトップのデザインから作成するのが基本です。
ウィジェットを選択時に、画面左に表示されるパネル内にて、デスクトップ、タブレット、スマートフォンのアイコンが表示されている項目については、それぞれの設定が可能です。
例えば上の画像の見出しウィジェットでは、モバイルの時には文字の配置は中央揃えを選択しています。
他にも、タイポグラフィ内の文字サイズなどの設定やマージン、パディングなどの余白設定、z-indexなどが設定できます。
このように、テキストや画像のサイズ設定をデバイスに合わせるだけで見やすくなる点が多いと思います。サイズ設定はレスポンシブの基本中の基本です。他にもさらに難易度の高い設定もあります。次回からより詳しく紹介していきます。
