独学デザイン入門

レスポンシブWebデザインで何ができるの?メリットや作る方法を解説

この記事は次のような方へ向けて書いています。

・レスポンシブWebデザインで何ができるのかを詳しく知りたい

・レスポンシブWebデザインにしたらどんなメリットがあるのか知りたい

・レスポンシブWebデザインを作る方法を知りたい

・HTMLやCSSに詳しくないんだけれど、レスポンシブWebデザインにしてみたい。

この記事を読んだら、このような疑問を解消させるきっかけが掴めるかもしれません。

どうぞ最後までご覧になってください。

レスポンシブWebデザインって何?

出典:レスポンシブWebデザインについて調べてみました

デザイニャー
デザイニャー
そもそもレスポンシブWebデザインってなんだニャン?

先生
先生
レスポンシブWebデザインというのは、PC、スマートフォン、タブレットなど、どんなサイズの画面でも見やすくて使いやすいWebサイトにするためのものなんだ。

1つのHTMLに対して、CSSをサイズごとに用意して、表示を変えさせたものをレスポンシブWebデザインと言います。

デザイニャー
デザイニャー
内容は全部同じなんだけれど、サイズによって見せ方が違うということだニャン。

理想は、コストをかけてパソコンとスマホといったように別々デザインで作るのがいいのですが、そうなるとWebサイトを作るデザイナーやコーダーにとって、Webサイトの更新のコストが倍になって、運用を継続することが難しくなってしまいます。

先生
先生
そんな場合に、レスポンシブの考え方が役に立つんだ。

パソコンやスマートフォンなど、Webサイトを利用する媒体によって画面の大きさが変わるので、どんな大きさでもわかりやすいような画面表示が求められます。

先生
先生
この時に、効率よく切り替えをする考え方や具体的な方法のことをレスポンシブWebデザインと言うんだ。

また、画像やテキストなど、Webサイトの元となるものは共通のものを使うので、修正や更新の時にファイルを一元化して管理できます。

先生
先生
そして、GoogleがレスポンシブWebデザインを推奨しているので、これからはますますレスポンシブWebデザインの重要性が高まっていくと言うことが予想されているんだよ。

WordPressはレスポンシブWebデザイン?

デザイニャー
デザイニャー
最近Webサイトを作るのにWordPressで作ることが多いようだけれど、WordPressもレスポンシブWebデザインになのかニャン?

先生
先生
それは使っているWordPressのテーマ次第で違ってくるよ。

WordPressのテーマは静的サイトのテンプレートと似たようなもので、コンテンツやデザイン、レイアウトをコントロールしています。

先生
先生
例えばTwenty Twentyなど、デフォルトのテーマを使っている場合は、デザインはレスポンシブだけれど、シングルカラムのデザインだから、いくつかの端末で見比べてみても、レスポンシブWebデザインだと気がつかないかもしれないね。

他のWordPressを使っている場合、いくつかの端末で、見比べるか、Chromeの開発者ツールを使ってレスポンシブなのかどうかを確認することができます。

Webデザイナーに必要なWordPressのスキルが身につく勉強法この授業では次のような方におすすめです。 ・WordPressとはどんなものなのかを知りたい ・WordPressを学ぶ...

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

先生
先生
レスポンシブWebデザインのメリットとデメリットを見ていくよ。

レスポンシブWebデザインの3つのメリット

先生
先生
レスポンシブWebデザインのメリットは次の3つだよ。

・管理するのが楽

・シェアされやすい

・検索エンジンの上位表示がされやすい

管理するのが楽

先生
先生
レスポンシブWebデザインのメリットとして、まず挙げられるのは、管理するのが楽、と言うことなんだ。

媒体ごとにHTMLがある場合は、修正したり、更新したりする時に、HTMLの数だけしなければいけないですが、レスポンシブWebデザインにすると、HTMLが1つで済むので、Webサイトに載せる情報を修正したり更新したりするときに作業が1度で済みます。

デザイニャー
デザイニャー
つまり、Webサイトの手間を削減できて楽なんだニャン。

先生
先生
だから、サイト管理の人件費や事業にかかるコストを削減できるんだ。

シェアされやすい

先生
先生
レスポンシブWebデザインだったら、WebサイトのURLが1つだけなので、Webサイトを見たユーザーからシェアされやすくなるんだ。

パソコン用のPCサイトとスマホ用のモバイルサイトがあった場合だったら、見せたいユーザーの媒体に合わせて、違うURLを送らないといけなくなります。

その点、レスポンシブWebデザインのサイトだったら、媒体が違っても1つのURLで表示できるので、見たユーザーがWebサイトをSNSでシェアすることが簡単に済みます。

さらにシェアされたWebサイトはいろんな媒体で表示することが可能なので、レスポンシブWebデザインではないURLと比べてシェアされる数を向上させることにも繋がります。

検索エンジンの上位表示がされやすい

先生
先生
レスポンシブWebサイトを使っていると、SEOに有利になって、検索エンジンの上位に表示されやすくなるんだ。

デザイニャー
デザイニャー
どうしてSEOに有利になるのかニャン?

先生
先生
なぜならGoogleからスマホに最適化されていると判断されて、評価が高くなるからなんだ。

現代社会ではスマートフォンが普及していて、事業者のWebページもスマホ対応にしてほしいというニーズが高まってきています。

Googleなどの検索エンジンも、レスポンシブWebデザインで作ったWebサイトを優先的に表示させようと取り組んでいます。

先生
先生
現代ではスマホユーザーが圧倒的に多いので、スマートフォンなどモバイルデバイスにフレンドリーなサイトが評価されている傾向にあるんだ。

デザイニャー
デザイニャー
だから、Webサイトを作るときにレスポンシブWebデザインを使うメリットは大きいってことだニャン。

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

先生
先生
一方、レスポンシブのデメリットは次のようなことが挙げられるよ。

・スマホに表示されるのに時間がかかる

・デザインが制限される

・制作工数がかかる

・CSSに書き込む量が増える

スマホに表示されるのに時間がかかる

レスポンシブWebサイトでは、HTMLは1つだけです。

なので、サイトの管理が楽な反面、PCとスマートフォンに同じデータを読み込ませるのですが、スマホサイトで表示しない不要なデータまで読み込もうとしてしまって、サイトの表示速度が遅くなることが少なからずあります。

Webサイトの表示速度が3秒遅れると、ターゲットの離脱率が50%くらい上がるというデータも出ているので、レスポンシブWebデザインをつくる時には、全ての媒体で同じデータを読み取るように考慮して、あまり大量のデータを詰め込まないように注意することが大切です。

デザインが制限される

HTMLが1つなので、パソコンとスマホで載せるコンテンツの順番を変えるなど、大幅な見せ方を変えることができないといったように、デザインが制限されます。

制作工数がかかる

パソコンやスマホなどの媒体ごとにデザインを作って、それに合わせてコーディングをするので、複雑になるため、制作工数がかかります。

CSSに書き込む量が増える

レスポンシブWebデザインだと、HTMLは1つで媒体ごとの見た目を調整するため、パソコンとスマートフォンを分けた場合と比べたら、1つのファイルのCSSに書き込む量が増えます。

デザイニャー
デザイニャー
CSSに書き込む量が増えると不便なのかニャン?

先生
先生
1つのファイル内の量が増えると、ファイルの重さも増えていくことになるから、Webサイトの表示スピードにも影響があるんだ。

CSSの量が増えてきたら、圧縮をするなどして、Webサイトが重くならないように工夫することが必要です。

レスポンシブWebデザインの事例

先生
先生
優良なレスポンシブWebデザインを集めたサイトをリンクしておくね。

Responsive Web Design JP | 日本国内の秀逸なレスポンシブWebデザインを集めたギャラリーサイト

SANKOU!Webデザイン制作の参考になる国内のステキなサイト集

レスポンシブWebデザインを作ってみよう

先生
先生
ここからは、レスポンシブWebデザインを実際に作るためのレイアウトや表示の設定方法や、注意点についてをお話ししていくね。

レスポンシブWebデザインのレイアウトの3つの種類

先生
先生
レスポンシブWebデザインのレイアウトの種類は主に3つあるよ。

・レスポンシブレイアウト

・リキッドレイアウト

・フレキシブルレイアウト

【わかりやすく徹底解説】Webデザイン制作|基本のレイアウトとは?この記事は、次のような人に向けて書きました。 ・センスのが良くて使いやすいWebサイトを作りたい ・それにはどこから手を...

レスポンシブレイアウト

先生
先生
レスポンシブレイアウトとは、ブレイクポイントと言う、CSSが変わる画面幅の数値でレイアウトが変わるもののことを指すんだ。

デザイニャー
デザイニャー
う〜ん、もう少しわかりやすく説明してほしいニャン。

例えば、800px〜1000pxはこのレイアウトでと指定したとします。

その場合、パソコンでウィンドウサイズを小さくしていくと、途中でレイアウトがガクンと変わる部分があります。

デザイニャー
デザイニャー
ニャルほど、わかったニャン。

リキッドレイアウト

先生
先生
リキッドレイアウトというのは、表示する媒体の画面幅に合わせて全体の表示サイズも変わるレイアウトのことを指すんだ。

例えば、パソコンで作ったWebサイトをスマートフォンで表示した時に、サイトの全体が見えなくて、何度も横にスクロールをして不便に思ったこともある人もいると思います。

リキッドレイアウトは、それぞれの要素の単位をパーセントで指示するので、パソコンでもスマートフォンでもどの媒体で見ても見やすく仕上げることができます。

フレキシブルレイアウト

先生
先生
フレキシブルレイアウトも、リキッドレイアウトと同じで、それぞれの要素の単位をパーセントで表示するものだよ。

さらに、フレキシブルレイアウトでは、画面の最大幅と最小幅を設定することができるのですが、設定していた最大幅よりも大きな媒体で表示した時には、見た目を整えるために、外側に余白を作る機能があります。

なので、パソコンで表示した時のレイアウトだけを固定したい場合には、このフレキシブルレイアウトを使うのが良いでしょう。

レスポンシブWebデザインで何ができるの?メリットや作る方法を解説この記事は次のような方へ向けて書いています。 ・レスポンシブWebデザインで何ができるのかを詳しく知りたい ・レスポンシ...

レスポンシブWebデザインを作る2ステップ

デザイニャー
デザイニャー
レスポンシブWebデザインを作るって、難しいんじゃないのかニャン?

先生
先生
全然そんなことはなくて、やり方はとても簡単だよ。

大抵の場合は、次の2つのステップでレスポンシブを実現できます。

①meta  viewportタグを追加

②CSSファイルで指定

実際に作業するには細かい調整が必要で、場合によっては表示画面を確かめながら検証するので、時間がかかる場合もあります。

①meta  viewportタグを追加

デザイニャー
デザイニャー
まずは、meta  viewportタグを追加してみよう。

HTMLファイルで作られたWebサイトは、全てのHTMLファイルのheader部分にこのmeta  viewportタグを追記す必要があります。

でもその一方、WordPressで作ったWebサイトだったら、共通のテンプレートファイル

(header.php)に追記する形で大丈夫です。

このmeta  viewportタグを追加することで、Webサイトを訪問した時に使われた媒体の画面サイズなどが読み取れるようになります。

【追加するソースコードの例】

先生
先生
meta  viewportタグを追加する時のソースコードの例は次のようなものだよ。

<meta name=”viewport” content=”width=device-width,initial-scale=1.0″>

先生
先生
指定方法にも色々あるけれど、大抵の場合はこのソースコードで通用するよ。

デザイニャー
デザイニャー
この記述ってどんな意味なのかニャン?

先生
先生
それは、大体次の通りだよ。

・ターゲットがアクセスした時に使用したパソコンについて、画面サイズなどの情報を手に入れる

・この情報にある画面の横幅のサイズで、パソコン向けかスマートフォン向けを判断する

先生
先生
この判断の後に別ファイルのCSSなどの指示に従って、Webサイトの表示がパソコンなのかスマホであるのかを切り替えられるんだ。

②CSSファイルで指定

メディアクエリを使って、提要されるCSSの指示内容を媒体の画面サイズによって切り替えます。

これによってパソコンとスマホで違う表示やレイアウトができる、レスポンシブWebデザインになります。

パソコン用の場合

例えば、表示画面が451px以上の画面サイズの場合、この451という数字をブレイクポイントと呼びます。

このブレイクポイントのサイズになると、パソコンとスマホでの指示内容が切り替わってレスポンシブが行われます。

この451pxという数字の部分は、任意の数字を指定でき、この場合のmin-width:451pxというのは、451pxサイズ以上の場合の指示内容になります。

【ソースコードの例】

@media screen and (min-width: 451px) { }

{ }内に、通常のCSSを入れます。

スマホ用の場合

スマホの表示画面のサイズが0pxから450pxの場合は次の通りです。

この場合のmax-width:450pxというのは、サイズ以下の場合の指示内容になります。

【ソースコードの例】

@media screen and (max-width: 450px) { }

{ }内に、通常のCSSを入れます。

レスポンシブWebデザインで使われることが多いCSS

先生
先生
パソコンとスマートフォンで使い分ける代表的なCSSは次の通りだよ。
【基本】画像サイズを変更する

Webサイト上の画面を見るときに、パソコンでは判別できるんだけれど、そのままの状態でスマートフォンで見ると、画像が小さすぎてわからないことがあります。

この場合、画像の横幅をスマホの横幅一杯に合わせて表示させれば、見やすくなります。

そこで、スマホの場合だけに、次のように画像の横幅サイズが100%になるように記述しましょう。

【ソースコードの例】

@media screen and (max-width: 450px) {

img {

width: 100% ;

}

}

【基本】非表示にする

パソコンとスマートフォンのどちらかで不要なものを表示させないためには、メディアクエリとdesplay:noneの指示を組み合わせましょう。

【ソースコードの例】

@media screen and (max-width: 450px) {

img {

display:none ;

}

 

【応用】横並びを解除

パソコンで表示されている画像が横並びになっている場合、それをスマートフォンで表示させると、画像サイズが小さくて見にくい場合があります。

この場合は、float:noneという指示で、横並びを指定しているCSSをスマートフォンの場合だけ解除するように指示ししましょう。

そして、画像の横幅を画面一杯に指定すると、さらに見やすくなります。

【ソースコードの例】

@media screen and (max-width: 450px) {

test {

float: none;

}

img {

width: 100% ;

}

}

 

正しく切り変わるかをチェックする3つの方法

先生
先生
主に次の3通りの方法で、正しく切り替わるかをチェックすることができるよ。

①ブラウザの機能を使ってチェック

②Webサービスを利用してチェック

③実際にスマホでチェックする

①ブラウザの機能を使ってチェック

Chromeの場合、画面を右クリックして、(Macの場合)次の画面が出たら、「検証」をクリックします。

 

次に、②の部分をクリックします。

③「dimensions:responsive」をクリックします。

するとスマートフォンの機種名が出てくるので、③任意の機種名をクリックすると、その機種のサイズで表示された画面が現れます。

④の欄では、設定されたCSSが表示されています。

②Webサービスを利用してチェック

「スマホ ブラウザテスト」と検索すると、色々なWebサービスが出てきて、チェックすることができます。

有料のものや無料のものなど色々なサービスがあります。

先生
先生
次の記事に、スマホブラウザテストに関することが詳しく書いてあるよ。

   

↓      ↓

Web担当者なら知っておきたい、スマホ画面チェックツール7選

 

③実際にスマホでチェックする

実際のスマートフォンを使って、ウェブブラウザでの表示をチェックする方法がいちばん確実です。

レスポンシブWebデザインを作る際の5つの注意点

先生
先生
レスポンシブWebデザインを作る際には次の5つの点に気をつけよう。

・対応デバイスを考慮しよう

・スマホから設計しよう

・画像サイズは小さく少なく使用

・高解像度ディスプレイに対応させよう

・適した文章量にしよう

対応デバイスを考慮しよう

パソコンとスマートフォンに対応すれば良いと、言われたままに作っても、タブレットで見た場合、デザインが崩れてしまうケースもあります。

ユーザーがいろんな媒体からWebサイトを見ることを考慮して、レスポンシブにする必要があります。

スマホから設計しよう

横幅があるコンテンツや文章量が多いコンテンツの場合、スマートフォンで見るととても見にくくて使いにくくなることがあります。

なので、画面幅に余裕があるパソコンからではなく、スマートフォンから設計するようにすると楽で良いです。

画像サイズは小さく少なく

スマートフォンは読み込むときに時間がかかるので、画像を作る時には次のようなことに気をつけましょう。

・画像ファイルは小さいものを

・CSSやウェブフォントを使用する

・CSSスプライト(何枚かの画像を1枚の画像に載せて、CSSで表示する部分を指定する)を使う

・画面幅に合わせて読み込む画像を小さい画像に切り替える

高解像度ディスプレイに対応させよう

何年か前から、高解像度ディスプレイを搭載した端末が増えてきています。

高解像度ディスプレイ(Tetinaディスプレイ)は、これまでのものに比べて解像度が倍以上なので、そのまま通常画像を使うとぼやけてしまいます。

その対応策として、使用する画像は縦横2倍にして作成しましょう。

Web上で画像を幅250pxで表示したい場合は、実際は幅が500pxの画像を使うことで、灰の解像度の高解像度ディスプレイでも、綺麗に画像を表示させることができます。

適した文章量にしよう

パソコンとスマートフォンで文章量を変えることはできませんので、そのどちらにも適する文章量で対応しましょう。

【Webデザイン制作で迷わない】最適な画面サイズとレイアウトの種類この記事は次のような方に向けて書きました。 ・見やすく操作しやすいWebサイトを作りたい ・Webデザインをするときの推...

レスポンシブWebデザインに対応するテンプレート

これまでレスポンシブWebデザインの方法について解説してきましたが、HTMLやCSSに自信がないという方もいらっしゃると思います。

そこで、WordPressでWebサイトを作るのであれば、WordPressのテーマで、レスポンシブWebデザインに対応したものを使うと、比較的簡単にできます。

次の記事にレスポンシブに対応したワードプレスのテーマについて詳しく書かれているので、参考にされてください。

レスポンシブ対応のWordPressテーマおすすめ5選!有料/無料【2021最新】

Webデザインとはどんな職業か?未経験からの勉強方法から就職までこの記事は次のような人のために書いていています。 ・未経験からWebデザイナーになりたい ・Webデザインの勉強はどんな...
レスポンシブWebデザインで何ができるの?メリットや作る方法を解説この記事は次のような方へ向けて書いています。 ・レスポンシブWebデザインで何ができるのかを詳しく知りたい ・レスポンシ...

まとめ

先生
先生
この授業では次の32のことを解説してきたよ。

レスポンシブWebデザインって何?

WordPressはレスポンシブWebデザイン?

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

レスポンシブWebデザインの3つのメリット

管理するのが楽

・シェアされやすい

・検索エンジンの上位表示がされやすい

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

・スマホに表示されるのに時間がかかる

・デザインが制限される

・制作工数がかかる

・CSSに書き込む量が増える

・レスポンシブWebデザインの事例

・レスポンシブWebデザインを作ってみよう

・レスポンシブWebデザインのレイアウトの3つの種類

・レスポンシブレイアウト

・リキッドレイアウト

・フレキシブルレイアウト

・レスポンシブWebデザインを作る2ステップ

・①meta  viewportタグを追加

・②CSSファイルで指定

・正しく切り変わるかをチェックする3つの方法

・①ブラウザの機能を使ってチェック

・②Webサービスを利用してチェック

・③実際にスマホでチェックする

・レスポンシブWebデザインを作る際の5つの注意点

・対応デバイスを考慮しよう

・スマホから設計しよう

・画像サイズは小さく少なく使用

・高解像度ディスプレイに対応させよう

・適した文章量にしよう

・レスポンシブWebデザインに対応するテンプレート

デザイニャー
デザイニャー
Webデザインに一歩踏み込んだ、レスポンシブWebデザインのことについて理解できたニャン。

先生
先生
これからはWebサイトを見るときにパソコンやスマホ、そしてタブレットなど、画面のサイズの違う媒体で対応できるように、レスポンシブWebデザインでサイトを作るのが主流になってきているからね。

デザイニャー
デザイニャー
HTMLやCSSに詳しくなくても、WordPressのテーマやテンプレートを使うことで簡単にレスポンシブ化できるようになっているようだニャン。

私たちは頑張るあなたを応援しています。