【基礎解説】表示領域によってデザインを切り替える「レスポンシブWebデザイン」とは

Web

みなさんこんにちは!

「Webサイトエンジニア」×「臨床検査技師」のハイブリットおじさんこと、ウエノです。

今回はWebサイトまわりの知識である「レスポンシブWebデザイン」について解説します。

みなさんは「レスポンシブWebデザイン」という言葉を聞いたことがありますか?

何だか難しそうなイメージですね。

ざっくりいえば、

「Webサイトページのデザインを、表示するデバイスの画面サイズによって切り替えるシステム」

です。

え?何言ってんのかわかんない。…ですか?

いいんです、それで。わかっていたらこのブログを読む必要はありませんから。

レスポンシブWebデザインについて、これからいちから解説していきますのでご安心ください。

このブログでは「レスポンシブWebデザインとは」からはじまり、開発相談時の論点となるポイントを3つお教えします。

読み終えたころには、レスポンシブWebデザインについて人に教えられるくらいの知識を得られ、同時に開発相談時に論点となるポイントを事前に知ることができ、その考え方も理解している状態になれています。

開発相談時の論点となるポイント…え?となったかと思います。

じつはレスポンシブWebデザインは理解するには簡単なシステムですが、その適用範囲といいますか、デザインを切り替える画面サイズを決めるのが大変な、一筋縄ではいかないシステムなのです。

ですので外注する場合はしっかりと相談する必要がありますし、自前で作るときもその切り替えポイントを決めるのに一苦労します。

ということで、しっかり最後まで読んでノウハウを身につけることをおすすめします。

ここまでいろいろ言いましたが、本文を読めばこれまでのことがわかるようになりますので、気にせず読み進めてください。

では、どうぞ!

【レスポンシブWebデザイン】とはデバイス画面の横幅によって表示を切り替える機能である

ではまずはじめに、「レスポンシブWebデザインとは」から解説しますね。

この話、開発者よりの内容もありますが、レスポンシブWebデザイン自体がシステムですので、どうしても専門用語を使ってお話しなければなりません。

ご閲覧いただいている一般の方々でも簡単に理解できるようには努力しますので、前置きとしてご理解いただければと思います。

まず知っておいてほしい言葉として、「HTMLファイル」という言葉と「CSSファイル」があります。

「HTMLファイル」というのは主に本文内容が書かれたファイルであり、今みなさんが読まれているこの文章はHTMLファイルに書いて設定しています。

機械はどの文章がどういう役割をしているのかわかりませんので、HTMLファイルにてこれはタイトルですよとか、これは見出しですよとか、ここはリスト形式ですよとか、文章だけでなく文章の意味合いも設定してあげます。

要はHTMLファイルは「文章」と「文章の意味合い」を設定していると覚えておいてください。

他にも画像ファイルの呼び出し設定やページのリンク設定とかもしていますが、知らなくても問題ありませんのでもっと知りたい方はググってみてください。

余談ですが、「レスポンシブWebデザインを使用しますよ」という宣言文を書くのも、じつはこの「HTMLファイル」なんです。

ウエノアイコン

ウエノ

次に「CSSファイル」についてですが、これは文字の大きさや背景色、余白などを設定する修飾用のファイルです。

要するに、見た目を変えるのがこのCSSファイルの役目です。

「HTMLファイル」と「CSSファイル」という2つの言葉の意味がわかったところで、さっそく「レスポンシブWebデザインとは」という本題に入りますね。

みなさんは同じWebサイトを複数のデバイス(スマートフォン、タブレット、パソコンなど)で見たことはありますか?

2つのデバイスで確認できる方は、このウエノロジーブログを見比べてみてください。

スマートフォンで見たときとパソコンで見たとき、カラムレイアウトや文字の大きさはまったく同じように表示されましたでしょうか?

ちなみにカラムレイアウトがわからないという方は、下のブログで解説していますのでさくっとマスターしてきてくださいね。

Web

Webサイトのページデザインはなんとなく作られているわけではありません。ユーザーが見やすいように、かつ情報を受け取りやすいように最適化されて構成されています。その手法として「カラムレイアウト」というものがあります。カラムレイアウトについての知っておくべき知識や選び方などの基礎的な解説をします。

スマートフォンとパソコンのように、まったくサイズ感の違うデバイスで見た時が1番わかりやすいのですが、表示されている内容は同じでも、見た目は全然違いましたよね。

例えばこのブログのように、スマートフォンで見たときは1カラムレアイウトだったがパソコンでは2カラムレイアウトだった、とかですね。

これは単純に、「パソコンでは画面が比較的大きいので2カラムレイアウトで表示するのが見やすく、スマートフォンでは画面が小さいので1カラムレイアウトが見やすい」、というサイト運営側の判断に基づくものです。

ちなみにその大きいだの小さいだのの基準は、Web業界では表示画面の横幅で判定します。

このようにサイズ感の異なるデバイスで、見やすい表示に切り替えることを「レスポンシブWebデザイン」といいます。

HTMLファイルは1つで管理しているので、どのデバイスで見ても表示される内容は同じです。

ただ見やすさを管理しているのは先ほども解説しましたがCSSファイルで、「いくつからいくつの画面の横幅の場合はこのように表示する」といった具合に、表示するデバイス画面の横幅によって見た目を切り替えるように設定します。

これがレスポンシブWebデザインの仕組みなんです!昔はWebサイトを見るデバイスはパソコンだけだったんですが、スマートフォンの普及で画面が小さくても見やすいWebサイトが必要になったためにできた、便利システムなんですよ!

ウエノアイコン

ウエノ

開発側としてもそれぞれ1つのHTMLファイルとCSSファイルで管理できるので、急な変更にもすぐに対応できるのが嬉しいポイントです。

そう、「急な変更にもすぐに対応できる」のです!

ひと昔前、まだレスポンシブWebデザインがなかった頃、まだ時代はガラケー全盛期だったときはパソコン用のWebサイトとガラケー用のモバイル専用サイトを別個に作る必要がありました。

もちろん、それぞれ管理しているファイルも別になりますので、何か変更があった場合は該当する箇所を複数のファイルにまたがって変更する必要がありました。

例えばWebサイトでクリスマス用のキャンペーンを告知するとなった場合に、パソコン用のファイルとモバイル用のファイル両方に変更を加えなければなりません。

ということは、リスクマネージメントとしては、当然「変更漏れ」を考える必要がありますよね。

少し変更を加えるだけでもかなりの手間であったことはいわずもがな。

時は流れてスマートフォンが流行り始め、デバイスの横幅も様々なものが登場するようになりました。

さすがにこのままではWebサイト制作が大変だ、何か良い手はないか、となって開発されたのが「レスポンシブWebデザイン」なのです。

レスポンシブWebデザインが開発されてからは、HTMLもCSSも1つのファイルで管理できるようになりましたので、Webサイトもデバイスごとに用意する必要がなくなりましたし、先ほどのような「変更漏れ」を考えなくて良くなりました。

1か所の変更で済みますので、昔に比べて本当にメンテナンス性が非常に高くなったのです。

なので「急な変更にもすぐに対応できるのが嬉しいポイント」と言ったわけです。

いや~、素晴らしいですねレスポンシブWebデザイン!

考えついた方は本当に天才です。

この話の内容は完全に開発者よりの内容ですが、こういったことを一般の方にも知っておいていただけるとWebサイト開発への理解が深まりますし、なにしろITリテラシーも上がるので知っておいて損はないですよ。

【レスポンシブWebデザイン】の導入状況

さて、そんな素敵なレスポンシブWebデザインというシステムですが、どこのWebサイト制作者にWebサイト制作をオーダーしても付随して適応してくれるのか、という疑問がわいた人もいるのではと思います。

それにも回答しておくと、「ほぼすべてのWeb制作者はレスポンシブWebデザインを適応します」と断言します。

正確な統計を取ったわけではないですが、これは断言できます。

なぜなら、Webサイト制作者はGoogleの検索順位に対して常に気を配っており、そのGoogleが提唱する「Googleが掲げる10の事実」という企業理念、すなわち検索エンジンのアルゴリズムに繋がる部分で「5. 情報を探したくなるのはパソコンの前にいるときだけではない」としています。

これは言い換えれば「モバイルフレンドリーでなければならない」と考えられ、要はスマートフォンで見たときもパソコンで見たときと同様に整頓された状態で見れなければならないとしていることが伺え、レスポンシブWebデザインであることが必須であるといえます。

という理由で、Webサイト制作者は何が何でもレスポンシブWebデザインを取り入れなければならない状況なので、これを対応させていない人はまずいないと言い切れます。

そもそもレスポンシブWebデザインも実装できないようではお客様はつきませんからね。

という理由で「ほぼすべてのWeb制作者はレスポンシブWebデザインを適応します」と断言できるのです。

スマートフォンで見たときでもパソコン表示と同じように3カラムレイアウト表示のまま、要はレスポンシブWebデザインを対応させていないWebサイトもまれにあります。特に行政関係のWebサイトですね。はっきり言って見やすさも利便性も最悪です。みなさんが所属する企業も放置させていたりはしませんか???

ウエノアイコン

ウエノ

【レスポンシブWebデザイン】の開発相談時の論点3つ

レスポンシブWebデザインはそれ自体を実装するのはとても簡単ですが、「これが正解」というルールはないので、デバイスの横幅いくつからデザインを切り替えるのかを決めるのは大変な作業です。

なぜなら、レスポンシブWebデザインの対応のさせ方についてはケースバイケースだからです。

各々、いい塩梅になるように考えていく必要があります。

どんなことを考慮していかなければならないのでしょうか。

それを1つずつみていきましょう!

【論点①】デバイスはどうする?

レスポンシブWebデザインを考えるうえで、開発相談時に論点となるポイント①は「対応デバイス」です。

Webサイト表示を大きく分けて何タイプにレスポンシブさせるのか、それを目安としてどのデバイスのサイズ感で対応させていくのか、これが論点となります。

よくある例としてはスマートフォンとパソコンの2タイプで分けるパターンですが、さらに分けたい場合はタブレットを追加することもあります。

対応デバイスを増やすと開発工数が増え、その分開発期間が長くなるので開発費用が上がります

ですので、なるべく最低工数で済むように対応デバイスを絞りましょう。

【論点②】カラムレイアウトどうする?

レスポンシブWebデザインを考えるうえで、開発相談時に論点となるポイント②は「カラムレイアウト」です。

論点①で対応デバイスを考えたら、それぞれのデバイスでどうカラムレイアウトを表示していくのか、これが論点となります。

よくある例としては、スマートフォンで1カラムレイアウト、パソコンでは2カラムレイアウトのようなパターンです。

ここで1つ注意です。

例えばですが、スマートフォンでもパソコンでも1カラムレイアウトで表示しているとします。

ということは、「カラムレイアウトの変更がないのでレスポンシブWebデザインはいらないのではないか」、と考える方もいるのではないかと思います。

答えとしてはそれは間違いです。

スマートフォンとパソコン画面ではやはり表示領域が圧倒的に違いますので、カラムのサイズや余白の空け方など、見やすいように設定を変更することが大半です。

このように表示するデバイスによって、見やすいように細かく変更を加えていきます。

変更しなくてもダメではありませんが、見やすさや見栄えの観点からいえば設定は必須ですので、カラムレイアウトが同じでもレスポンシブWebデザインの適応は必要と考えた方が良いですよ。

【論点③】ブレイクポイントどこにする?

レスポンシブWebデザインを考えるうえで、開発相談時に論点となるポイント③は「ブレイクポイント」です。

論点①で対応デバイスを決めるというお話をしましたが、同じデバイス種類でも機種によって画面横幅が違います

ちなみにWeb業界では画面の幅をpx(ピクセル)で表記します。

スマートフォンでいえば、iPhoneSEでは320px(ピクセル)と現時点では最小サイズであり、iPhone12 Pro MAXでは428pxとまったくサイズが違います。

タブレットではiPad Miniが768pxであり、iPad Pro12.9では1024pxと小型パソコンに匹敵します。

さらにここで細かい話もしておくと、スマートフォンとタブレットは横持ちもでき、そうした場合に縦幅がそのまま横幅になりますので、表示領域が1つ上のデバイスサイズになることもあります

パソコンではどうでしょうか。

小さめの1024pxから、4K対応型ともなりますと2560pxと、幅がとんでもなく広がります。

このようにデバイスひとくくりにしても画面の横幅はまったく違います。

さて、何が言いたいのか。

レスポンシブWebデザインで最も大切なのは「ブレイクポイント」なのです。

実際にレスポンシブWebデザインを決めるのは「対応デバイス」ではなく「ブレイクポイント」であり、「対応デバイス」は大まかな目安でなのです。

「ブレイクポイント」はpx単位でどこでレスポンシブWebデザインを適応させるのか、すなわちどこで表示の切り替えを行うのか、これを決めます。

先ほどもお話しましたが、開発会社がある程度指定したり、Webサイトのデザインを鑑みて提案してくれる場合もありますが、ブレイクポイントに正解はありません。

昨今のデバイスの普及具合も考慮して良い塩梅になるように考えていくしかなく、ただやはり最終的にGOサインを出すのはお客様です。

「よくわからないので開発会社におまかせ」でも良いですが、こだわりたいなら自身で決めるのも良いです。

知識を持っておくだけでも理解度がまったく違ってきますので、こういう相談内容があるということだけでも覚えておいて損はないですよ。

【まとめ】レスポンシブWebデザインはプロにお任せしましょう

レスポンシブWebデザインで最も悩むのはやはりブレイクポイントです。

作りたいWebサイトのデザインやデバイスの普及具合で変わってきますが、必ず決めなければならない項目です。

とはいえ、みなさんがいちから決めることはなく、各開発会社が独自のブレイクポイントルールを持っていたり、何かしらの提案がありますので、お客様はどっしり構えていれば大丈夫です。

ブレイクポイントのような小難しい項目も、カラムレイアウトはどうすればベストなのかも、プロに相談してお任せするのが安心です。

その間、みなさんはコンテンツ作りなどのオンリーワンの仕事をするのが効率的ですよ。

レスポンシブWebデザインを理解するのは簡単ですがその対応は難しいので、ここまでいろいろと解説してきましたがみなさんは用語と意味を知っておいてもらえれば大丈夫です。

それだけでも開発時の相談の質がグンと上がりますので、ぜひ頭の片隅にでも置いといてもらえれば嬉しいです。

このブログがみなさまのお役に立てれば幸いです。

最後まで、ご閲覧いただきありがとうございました。

関連ブログのご案内

Web

Webサイト開設にはサーバーが必要であり、数あるサーバーの中からエックスサーバーを選ぶユーザーが多く、またWebサイトエンジニアの僕としてもおすすめするサーバーです。そのエックスサーバーについて「使ってみたいけどどうやればいいのかわからない」という人向けに、契約手順やWordPressの始め方を画像付きで解説します。また、初心者向けに基礎の解説も行います。

Web

Webサイトのページデザインはなんとなく作られているわけではありません。ユーザーが見やすいように、かつ情報を受け取りやすいように最適化されて構成されています。その手法として「カラムレイアウト」というものがあります。カラムレイアウトについての知っておくべき知識や選び方などの基礎的な解説をします。

Web

Webサイトに設置するボタンデザインは制作者の好みに合わせて作ればよいのかというと、ある程度は好みで決めて良いですが注意するべき項目が6つあります。その項目とは「色」「形」「大きさ」「テキスト内容」「アニメーション活用」「設置数」です。ユーザーに好まれやすいボタンデザインについてそれぞれ詳しく解説します。

TOPへ戻る