前回はモバイルファーストについて紹介しました。

HTLM(23)モバイルファーストについて

今回は、携帯やパソコン以外の端末での視聴の際に使われるモバイルファーストについて記事にしています。

今回はレスポンシブWEBデザインについて紹介したいと思います。

【もっと詳しく知りたい人は是非これを読んでください！！】

【中古】1冊ですべて身につくHTML＆CSSとWebデザイン入門講座 /SBクリエイティブ/Mana（単行本）

価格:747円 (2024/12/16 23:17時点) 感想(2件)

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

最近、インターネットを使うときにスマホやタブレット、パソコンといったいろんなデバイスを使う人が増えていますよね。レスポンシブWEBデザインとは、こうした多様な画面サイズに対応できるように、サイトのデザインを柔軟に作る方法のことです。これを使うと、どのデバイスでも見やすいサイトが作れちゃいます！

レスポンシブWEBデザインってどう作るの？
レスポンシブWEBデザインのメリット
レスポンシブWEBデザインを作る流れ
よくある悩みとその解決方法
1. 画像が重い
2. 複雑なレイアウトが大変
参考リンク
おすすめツール

レスポンシブWEBデザインってどう作るの？

レスポンシブWEBデザインを実現するには、次の3つのポイントが大事です。

1. 柔軟なレイアウト（フルードグリッド）

サイトの幅や要素のサイズを固定のピクセルではなく、「割合」で指定します。これで画面の幅に合わせて、自動的にサイズが調整されるようになります。

例:

.container {
  width: 80%;
  margin: 0 auto;
}

このコードでは、コンテナの幅が画面の80％になり、どんなデバイスでもバランス良く表示されます。

2. 柔軟な画像（フレキシブルイメージ）

画像が画面サイズをはみ出さないように、最大幅を指定しておきます。

例:

img {
  max-width: 100%;
  height: auto;
}

これで画像は親要素の幅に合わせて縮小され、キレイに表示されます。

3. メディアクエリ

画面幅に応じてデザインを変える技術です。「スマホでは縦並び、パソコンでは横並び」などを設定できます。

例:

@media (max-width: 768px) {
  .menu {
    display: none;
  }
}

このコードでは、画面幅が768px以下の場合にメニューが非表示になります。

レスポンシブWEBデザインのメリット

どんなデバイスでも見やすい

スマホでもPCでも、画面サイズに合わせた見やすいデザインが表示されます。横スクロールや小さすぎる文字を避けられるので、ユーザーにとって快適です。

サイト管理がラク

1つのサイトで済むので、スマホ用とPC用の別々のサイトを作らなくてOK。更新や修正が一度で済みます。

Googleにも好印象

Googleは「スマホで見やすいサイト」を高評価します。レスポンシブデザインにすることで、検索順位アップにもつながります。

レスポンシブWEBデザインを作る流れ

1. デバイスごとの使い方を考える

最初に、スマホやタブレット、パソコンでどう見えるべきかをイメージします。例えば、スマホでは縦にシンプルに並べる、パソコンでは横並びにするなどの工夫が考えられます。

2. モバイルファーストで作る

スマホ用にデザインを作り、そこからタブレットやPC用に広げていく方法です。この順序だと、作業がスムーズになります。

例:

/* スマホ用のスタイル */
body {
  font-size: 16px;
}

/* タブレットやPC用のスタイル */
@media (min-width: 768px) {
  body {
    font-size: 18px;
  }
}

3. テストして調整

実際に作ったデザインが、スマホやパソコンでちゃんと表示されるか確認します。ブラウザの開発者ツールやオンラインのテストツールを使うと便利です。

よくある悩みとその解決方法

画像が重い

高解像度の画像をそのまま使うと、スマホで読み込みが遅くなることがあります。こんなときは、srcsetを使ってデバイスごとに適した画像を出し分けます。

例:

<img src="small.jpg" srcset="large.jpg 1024w, medium.jpg 640w" sizes="(max-width: 768px) 100vw, 50vw" alt="サンプル画像">

複雑なレイアウトが大変

FlexboxやCSSグリッドを使うと、複雑なレイアウトも簡単に作れます。