Designの福田です(笑)みなさんはパソコンとスマホ、どちらでWebサイトを見ることが多いでしょうか?気軽に使えるスマホの方がWebサイトを見る機会が多いと思います。さまざまな端末でWebサイトを見れるこのご時世に、「レスポンシブデザイン」は必須になってきました。レイアウトを最適化するデザインのことを指します。現在はスマートフォンやタブレットなど画面サイズの異なるデバイスに変化したため、それぞれの画面サイズに対応するためにレスポンシブデザインを使います。1つずつでユーザのデバイスごとに表示を変えるようになりました。どのデバイスに対しても同じURL・HTML・CSSを使用するため「パソコンで表示されるがスマートフォンで表示されない」といったユーザビリティーの低下を回避できます。レスポンシブデザインのメリット・デメリットここからは、「レスポンシブデザイン」のメリット・デメリットをご紹介します。レスポンシブデザインのメリットURLが1つでいいHTML・CSSの管理が楽になるSEO対策に優位になるでは、1つずつ「レスポンシブデザイン」のメリットを見ていきましょう!URLが1つでいい先ほどご紹介したとおり、パソコンのHTML・CSSと、スマートフォンのHTML・CSSをわけて書く必要がないため、URL内でフォルダをわける必要がなくなりました。「global-web-design.com」のドメインに対して、パソコンとスマートフォンをわける場合、パソコンは「global-web-design.com/pc/」、スマートフォンは「global-web-design.com/sp/」とディレクトリをわけて書く必要がありました。パソコン版、スマートフォン版ともに、HTML・CSSが必要になるため作業量も増えてしまいます。「レスポンシブデザイン」では「global-web-design.com」のドメインでパソコン版とスマートフォン版の表示を変えれるので、ディレクトリを増やす必要がなくなりました。HTML・CSSの管理が楽になる2つ目は、HTML・CSSを1つで書けるので、Webサイトの管理がかなり楽になるということです。「パソコンの方さわってるっと思ったらスマートフォンだった」などの操作ミスも減らせます!また修正をする時もHTML・CSSが1つなので、どのファイルを修正すればいいかすぐに確認できます。SEO対策に優位になるパソコンやスマートフォンを個別に作った場合、URLが異なるためSEOの評価が分散する可能性があります。「レスポンシブデザイン」ではページURLが1つに統一されるので、ユーザの利便性が向上します。レスポンシブデザインのデメリットファイルの読み込みが遅くなるパソコン・タブレット・スマートフォンのHTML・CSSを1つのファイルに書いていくため、環境によって読み込み速度が落ちる可能性があります。スマートフォンで画像をリサイズしてサイズを小さくするといいでしょう。CSSは圧縮・軽量化を行い読み込みの速度を下げないようにするなどの工夫が必要になります。MinifyでCSSを圧縮・軽量化できるので、こちらを使うのもいいでしょう。レスポンシブデザインの作り方ここからは「レスポンシブデザイン」の作り方をご紹介します。viewport」タグを書く「メディアクエリ」をCSSに書くの順に設定していきます。viewport」タグを書いていきます。viewport」タグは、画面表示をデバイスの幅に応じて自動で調整してくれるコードになります。viewport」タグの中の記述の意味は以下の通りです。width=device-width訪問ユーザーの使っているデバイスの横幅を取得initial-scale表示倍率を指定するメディアクエリをCSSに書くつぎに「メディアクエリ」をCSSに書いていきます。「メディアクエリ」は「ブレイクポイント」を指定して画面のサイズを切り替えることができます。768px」で「最大幅が768px」以下の時に、「{}」の中のCSSが適用されます。紛らわしい記述ですので、スマホ版から作る場合と、パソコン版から作る場合を紹介していきます。先ほど「メディアクエリ」を「メディアクエリ」は「ブレイクポイント」を指定するとご紹介しました。「ブレイクポイント」は自分で設定できますが、今回はスマートフォンは768px以下タブレットは768px〜1024pxの間パソコンは1024px以上という設定で書いていきます。スマートフォンからWebサイトを構築することを「モバイルファースト」といいます。「モバイルファースト」で書く場合は「メディアクエリ」に「min-width」を使っていきます。この場合の「min-width」は画面幅の最小を意味します。}}「min-width」を使って書いた場合このようなCSSになります。1024px)はパソコンになり画面幅が1024px以上の時にpタグのフォンサイズが20pxのようになります。先ほどと同じようにパソコンの「メディアクエリ」を設定します。スマートフォンと同じブレークポイントにします。パソコンは1024px以上タブレットは1024px〜768pxの間スマートフォンは768px以下パソコンからCSSを書きはじめた場合、「メディアクエリ」に「max-width」を使っていきます。この場合の「max-width」は画面幅の最大を意味します。}}「max-width」を使って書いた場合このようなCSSになります。768px)はスマートフォンになり画面幅が768px以下の時にpタグのフォンサイズが20pxのようになります。1つ注意点として「max-width」と「max-width」は一緒に使わないようにしましょう。両方とも使うと「ブレイクポイント」が混乱してしまうため、どちらか1つに決めてCSSを書いていきましょう。まとめいかがでしたでしょうか?今回はレスポンシブデザインの意味や書きかたについてご紹介しました。パソコン版から作るか、スマートフォンから作るかは自由なので、自分に合った方法でやるといいと思います。私の場合はパソコンから作ることが多いので「max-width」をよく使います。Desingを立ち上げ。得意分野は、コーディング、CMS構築、ディレクション。現在はブログ、マーケティングなどを勉強中。関連記事キーワードCSSHTMLJavaScriptSEOVue.jsWeb制作WordPressガジェットブログあわせて読みたいWeb制作の費用についてご紹介!2022-07-05Web制作ブログ【初心者の方も安心】Web制作の流れをご紹介!2022-05-18Web制作ブログWebデザインの独学にオススメのツールとオススメの本をご紹介!(デザイン編)2022-05-07Web制作ブログWeb制作のフリーランスになるには?2022-04-30Web制作ブログWebで扱う画像ファイル形式(PNG・JPEG・SVG・WEBP)を理解しよう!2022-04-29Web制作ブログWebサイトのレイアウトについて解説!2022-04-24Web制作ブログSNSでシェアWeb制作に関するお悩みがある方はお気軽にご連絡下さい。ご相談・お問い合わせメールでWeb制作に関して相談や見積もり依頼をされたい方に、お問い合わせフォームよりお問い合わせを承っております。フォームからお問い合わせ下さい。