2022年5月20日

レスポンシブWEBデザインについて

パソコンで見ているWEBサイトが、
そのまま“縮小”されてスマホの画面に表示されたら…
スマホで見ているWEBサイトが、
そのまま“拡大”されてパソコンの画面に表示されたら…

😨 文字は読みにくく…
😨 ボタンは押しづらい…
そんなWEBサイト、ユーザーは反射的に離脱してしまう可能性があります。

と、言うことは…
パソコンで見た時も 💻 、スマホで見た時も 📱、
😊 文字が読みやすく
😊 ボタンが押しやすい

そんなWEBサイトが “良い👍” に違いありません！！

今回は、高品質&高評価なWEBサイトに欠かせない、
「レスポンシブWEBデザイン」をご紹介したいと思います。

レスポンシブWEBデザインとは

パソコン、タブレット、スマホなど、
画面サイズが違うデバイスで同じURLページへアクセスした際、
画面サイズに最適化された見やすいページが表示されるWEBサイトを
「レスポンシブサイト」と呼んでいます。 🧐

「レスポンシブWEBデザイン（Responsive Web Design）」とは、
この「レスポンシブサイト」用のデザインの名称です。 👌

画面サイズ毎に見やすいページを表示させる方法は他にも、
特定の画面サイズに最適化された複数のWEBサイトを準備し、
画面サイズを判別して適したWEBサイトに転送させる方法があります。
ただし、管理や修正面で「レスポンシブサイト」よりも煩雑になるため、
Googleは「レスポンシブサイト」を推奨し「SEO」上も有利としています。 🧐

レスポンシブWEBデザインの特徴

「レスポンシブWEBデザイン」の特徴は、
パソコン用もスマホ用も基本的に同じ要素で構成されていることです。

同じ要素の「配置」や「サイズ」を調整することで、
各画面サイズに最適化されたWEBページを構築します。

大きい画面では横並びの要素を、
小さい画面で縦並びに組み替える方法は、
比較的使用しやすい「レスポンシブWEBデザイン」テクニックのひとつになります。

レスポンシブデザインのコーディング

レスポンシブデザインのコーディングには、
「viewport」と「メディアクエリ」を使用します。

viewport

レスポンシブデザインをコーディングする際は、
HTMLの「<head>」内に「viewport」の「meta情報」を指定する必要があります。
当サイトでは、下記の「viewport」を記述していますが、
「content」の内容はサイト毎に適宜指定する必要があります。


        <meta name="viewport" scontent="width=device-width" >

メディアクエリ / ブレイクポイント

「メディアクエリ」とは、CSS内に条件を記述し、
条件に該当する環境で閲覧されている場合のみ、
特定のスタイルを適用する機能です。 🧐

閲覧する画面サイズによりデザインが最適化される、
「レスポンシブデザインサイト」では必ず使用されています。

「ブレイクポイント」は「メディアクエリ」でスタイルが切替わるポイントのことです。
下記のコードの場合、画面幅が480px以下（ブレイクポイント）の場合に、
「<head>」の背景をブラックに指定します。 🎨


        @media screen and ( max-width : 480px ) {    
          header{
            background-color : black ;
          }
        }

レスポンシブサイトの画像について

レスポンシブサイトの「画像」は、
「HTML」や「Java Script」を使用して切り替えます。

「画像」は「解像度」という数値情報をもっており、
この「解像度」が高いほど鮮明な画像となる分、
データ容量が重くなり、読み込みにかかる時間が長くなります。 🧐

パソコンやスマホのディスプレイには、
鮮明な画像を表示できる「解像度」の上限があるため、
一定の「解像度」を超えると、
見た目は変わらず、読み込むデータ容量だけが高い画像となってしまいます。 😨

そのため、WEBサイトに読み込む画像は、
鮮明に見える上限ギリギリの「解像度」が理想です。
この上限が、パソコンとスマホのディスプレイでは大きく違うので、
それぞれに最適な「解像度」の画像を読み込む必要があります。 🤲

この調整をしない場合、
パソコン用の大きな画像であれば、スマホで読み込む際に時間がかかり、
スマホ用の小さな画像であれば、パソコンで読み込む際にボヤけた印象になります。

HTMLの「<picture>」を使用

HTML内で読み込む画像を切り替える場合、
「 <picture> 」タグを使用します。

下記のコードの場合、
画面幅 960px以上の場合「A.jpg」を表示します。
601px 〜 960px の場合「B.jpg」の画像を、
600px以下の場合に「C.jpg」の画像を表示します。


        <picture>
            <source media="(max-width: 600px)" srcset="img/C.jpg">
            <source media="(max-width: 960px)" srcset="img/B.jpg">
            <img src="img/A.jpg" alt="text">
        </picture>

「CSS」で画像を切り替え

「CSS」で表示する画像を切り替えることも可能です。

その場合、パソコン用とスマホ用の画像を両方読み込み、
パソコン時には、スマホ用の画像を「CSS」で非表示に、
スマホ時には、パソコン用の画像を「CSS」で非表示にするといった方法を取ります。

この方法だと非表示画像も含めた2枚の画像を読み込む必要があるため、
不必要な画像の読み込みが発生してしまいます。 😨
そのため、「HTML」や「Java Script」での対応が推奨されています。 😊