レスポンシブデザインとは – まーくんのアフィリエイト学校【afb】

アフィリエイトを始めるために知っておきたいことなどの基礎から、運営に関する知識やテクニックなどの応用まで様々なノウハウを学ぶことができます

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

公開日 最終更新日

レスポンシブデザインとは、どんな画面サイズでも見やすい・使いやすいデザインを用意しておく手法のこと。元のレイアウト自体がデバイスに合わせて変化するリキッドレイアウトとは似て非なるもの。

レスポンシブデザイン

画面サイズごとの対応?今はもう当たり前で疑問にも思わなかったくま~
スマホが普及したての時は「PCデザインのまま」「ズームができない」「文字が小さすぎてクリックすら大変」とか色々問題がありましたからね~
いつの間にかみんな適応してたくまね~

 

 

レスポンシブデザインとリキッドレイアウトの違い

どちらも同じく「スマホでもPCでも見やすくする手法」ですけど、それぞれ「仕組み」や「得られる結果」が違うのでしっかりと違いを覚えておきましょ~

 

レスポンシブデザインってこんな感じ

▲こちらがレスポンシブデザインのイメージ

デバイスに合わせたデザインを予め用意しておくのがレスポンシブデザイン。

レスポンシブデザインとリキッドレイアウトの違い

▲こちらはリキッドレイアウトのイメージ

元の素材自体がデバイスに合わせてある程度変化するのがリキッドレイアウト。

 

つまり、

 

レスポンシブデザイン

「デバイスに応じたCSS(デザイン)をレスポンスする(返す)」デザイン

リキッドレイアウト

「画面に合わせてサイトのサイズが変化する」レイアウト

 

というのが大まかな二つの特徴です。

 

レスポンシブデザインではどんなことが求められている?

スマホに対応しているかどうかで、ユーザーの離脱率がグンと変わってくるから、しっかりと最低限のポイントは抑えておきましょう~

 

 

1.マウスとキーボード(PC)から指で操作するタッチパネル(スマホ)に変わることを意識した操作性。

・入力フォームの簡略化

パソコンと違い、スマホでのキーボード入力は手間がかかるので、なるべく入力が少なく済むような工夫が必要です。

レスポンシブデザイン_入力フォーム簡略化

 

2.縦長の画面を意識したレイアウトに変更する。

・横並びデザイン→縦並びデザインへ

この状態のままスマホ画面に持っていくととても見にくいレイアウトです。

なので、モバイル用のCSSはレイアウトがしっかり縦になるように工夫が必要です。

レスポンシブデザイン_縦レイアウトに変える

この設定はCMSなら既にできていることが多いので、あとはレイアウトが崩れていないかのチェックが必要ですね~

 

 

3.そして文章量にも注意。

・テキスト量の見直し

パソコンでは最適な文章量でも、スマホでは画面いっぱいに文字ばかりになって読みにくくなったりします。

スマホでの文章量によるレイアウト(読みやすさ)を意識して、小まめに挿絵を入れたり、改ページをするなどして、ストレスなく読めるようにした方がいいでしょう。

 

「レスポンシブデザイン」のおさらい

簡単に今回のまとめをしておくです~。
レスポンシブデザインのまとめ

・レスポンシブデザインは、PCでもスマホでも快適な操作性・レイアウトを維持するという考え方

・レスポンシブデザインは「デバイスを想定したレイアウトを複数用意しておく」

・リキッドレイアウトは「元の素材自体がデバイスに合わせて変化するよう設定する」

 

関連用語

metaタグ

CSS

リキッドレイアウト

jQuery

 

その他参考になる記事

レスポンシブデザインとは|今更きけない基礎知識とメリット・デメリット:ferret

 

 

アフィリエイト用語辞典 一覧に戻る

この記事を書いた人

著者:afb運用チーム

高収入アフィリエイター様からの満足度11年連続1位の評価※をいただいているafbの運用チームです。
経験豊富な専門スタッフが、アフィリエイトの知識やノウハウを解説します。

※ 2013〜2023年6月に実施された、特定非営利活動法人アフィリエイト・マーケティング協会の 「アフィリエイト・プログラムに関する意識調査」における利用者満足度調査による