レスポンシブデザインとは、Webサイトを閲覧する環境(スマホ、タブレット、PC)に合わせた可変式のレイアウトデザインです。インターネットユーザーのほとんどがスマホを利用してWebサイトを閲覧しているため、スマホからでも記事コンテンツが読みやすいデザインはWebサイトには必須の要件といえます。

@mediaによる4つのブレイクポイント

Emanonは、Webサイトの訪問者が閲覧に使用るう環境(ブラウザ幅)に合わせて、画像サイズを自動でリサイズし、可読性を損なわないようフォントサイズも調整しています。

767px以下のブラウザ幅をデフォルト(初期値)のレイアウト設定とし、ブラウザ幅が768px以上(タブレット)、992px以上(ノートPC/デスクトップPC)、1200px以上(大きめのデスクトップPC)の4段階に対応するよう設計されています。

  • スマホ:767px以下のブラウザ幅
  • タブレット:ブラウザ幅が768px以上991px未満
  • ノートPC/デスクトップPC:ブラウザ幅が992px以上1999px未満
  • 大きめのデスクトップPC:ブラウザ幅が1200px以上

スマホやタブレットから閲覧した場合、グローバルメニューは、ハンガーメニュー(Xのアイコン)としてヘッダー右側に配置する仕組みとなっています。

Googleのレスポンシブデザインをチェックするツール「Resizer-Google Design」を使うことで、スマホ、タブレット、PCの各デバイスでどのようデザインが変化するのか確認することができます。

Resizer-Google Designに次のURL https://wp-emanon.jp/emanon-pro/ を入力しEnterを押してご確認ください。

resizer