プログラミング

【最初に読む記事】レスポンシブデザインとは何か。なぜ主流になったのか

イケゾー
この記事は、こんな人におすすめ!
・レスポンシブデザインとは何か知りたい
・これからWEB制作の勉強をする人

このような疑問にお答えします。

本記事の内容

  • レスポンシブデザインとは何か
  • レスポンシブデザインが主流となった背景

筆者情報

Ikezooo

 
  • Web制作フリーランス
  • ブログ3年目。
  • 執筆記事数200本以上
  • ブログ実績:最高15万円
  • SEO検定3級保有
  • Twitterフォロワー3,100人
   

Web制作を学習していて、レスポンシブデザインという言葉を初めて知った方も多いかと思います。

そこで今回は、初心者向けに基本を解説します。
レスポンシブデザインが流行った背景も解説していきます。

それでは、どうぞ!

当ブログでは、WordPressテーマ 「ACTION(AFFINGER6)」 を使用しています。

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

現在のWebページは、レスポンシブデザインが当たり前になっています。

これは、さまざまなデバイスに合わせてデザインを変化させ、表示するデザインのことです。

デバイスは様々ありますが、主に上画像のような特徴を持っています。

さまざまなデバイスに合わせて表示を変えるデザインのことだね

イケゾー

レスポンシブデザインがない頃

スマホが普及する前は、レスポンシブデザインの概念はありませんでした。

なぜなら、Webページは、PCで閲覧することを前提に作られており、スマホ用のページは用意されていなかったのです。

サイトごとに、必要があればスマホ用のページを別途用意するといった対応をしていました。

したがって、デバイスが増えるたびにページ制作が必要となり、Web制作者の負担は大きかったことが分かります。

スマホでWebサイトを見る人が増えてきた時代だね

イケゾー

レスポンシブデザインが始まった頃

PC用デザインをそのまま縮小表示することが、レスポンシブ対応でした。

しかし、徐々にスマホユーザーが増えるにつれて、「読みにくい」という声が増えてきます。

  • 文字が小さすぎて読みにくい
  • 縦に長くなりすぎて、読みにくい
  • 画像のサイズがおかしくて、読みにくい

ここから徐々に今のレスポンシブデザインに近づいていきます

イケゾー

現在のレスポンシブデザイン

スマホでの「読みにくい」を解決するために、モバイルファーストという考え方が生まれました。

モバイルファーストは、スマホでの使い勝手やUXを優先して、Webページをデザインすることです。

Web制作者の中で、「モバイルファースト」という言葉が、違った意味で使われることもあります。
実際にコーディングをするときに、最初にスマホ用デザインを作っていくことを「モバイルファースト」と呼びます。

その中で、スマホで読みやすいサイト設計を求めつづけた結果、世界的に標準となったのがワンカラムレイアウトです。

ワンカラムレイアウトとは、「コンテンツを伝えたい順に上から並べる」というシンプルな考え方です。これは、スクロールして閲覧するスマホの特性とも合っていますよね。

PC用をワンカラムで設計すれば、スマホ用も設計もとてもシンプルになります。ユーザーが迷うこともないでしょう。

こうした背景から、現在ではレスポンシブなワンカラムレイアウトが主流になっています。

WordPressで高品質なホームページ制作します 初心者でも安心の「1ヶ月間無料サポート」付き!

まとめ

Webサイトのレスポンシブデザインとは何か、なぜ主流になったのかを解説しました。

ポイント

・スマホが普及し始めてから、レスポンシブデザインの必要性が言われた

・レスポンシブデザインとは、様々なデバイスに合わせてデザインを変えること

・現在では、ワンカラムレイアウトが主流になっている

イケゾー
最後まで読んでいただき、ありがとうございました。
ご不明点やご意見は、コメントやTwitterにて、お寄せください 🙂
では、またお会いしましょう

  • この記事を書いた人

ikezooo

愛知県30歳のフリーランスエンジニア。 サイト制作とブログで生き抜く。 ブログでは、月10〜15万ほど稼いでいます。 SEO検定3級保有。

-プログラミング