ビジネス

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

wp908's icon'
  • wp908
  • 2019/09/28 21:59
Content image

WEBサイトを制作する上でよく聞くレスポンシブデザインという言葉

今回は、よく似たモバイルフレンドリーとあわせて解説してみたいと思います。

 

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

レスポンシブデザインとは、デバイスの画面サイズに依存しないwebサイトを構築する手法です。言い換えると、デバイスのウィンドウ幅に「responsive(良く反応)」して、見やすい表示に自動で切り替える仕組みを持つデザインのことです。

 

特徴

レスポンシブデザインを採用すると、PC用サイトとモバイル用サイトを別々に作る必要がありません。共通のwebサイトを1つ構築して、URLやHTML(画像やテキストを表示するために必要なコード)も、ページごとに1種類ずつ用意すれば良いのです。このサイト構造のシンプルさがレスポンシブデザインの特徴であり、数々のメリットをもたらす要因となっています。

以前は、スマホなどが普及しておらずパソコン用表示のHTMLと携帯電話向けサイトなどと言われHTMLなども別々に作っていた時代もありました。

現在ではそういったことではなくCSS(カスケードスタイルシート)により画面サイズに合わせた表示方法を採用しておりワードプレスなどではテーマでレスポンシブデザインを採用するのがお約束になっているほどですね。

そういう意味では、アメブロFC2ブログなどは、レスポンシブデザインではないのです。

 

モバイルフレンドリーとは

モバイルフレンドリーとは、モバイルサイトがユーザーにとって使いやすいことを示す概念です。スマートフォンなどのモバイル端末で来訪したユーザーがサイトを問題なく閲覧できるサイトを、Googleはモバイルフレンドリーと評価します。

 

モバイルフレンドリーの基準

モバイルフレンドリーなサイトと認められるには、モバイルユーザーにとってサイトが使いやすい設計になっていることが必要です。Googleはモバイルフレンドリーの基準として、以下の4点を挙げています。

・携帯端末では一般的でないソフトウェア(Flash など)を使用していないこと
・ズームしなくても判読できるテキストを使用していること
・ユーザーが横にスクロールしたりズームしたりする必要がないよう、コンテンツのサイズが画面のサイズと一致していること
・目的のリンクを簡単にタップできるよう、それぞれのリンクが十分に離れた状態で配置されていること

よく同じように捉えられている方も多いのですが、似て非なるものでレスポンシブデザインがイコールモバイルフレンドリーではないのでご注意ください。

といっても初心者の方には同じようなものと説明することもありますけどw

 

 

Article tip 0人がサポートしています
獲得ALIS: Article like 5.47 ALIS Article tip 0.00 ALIS
wp908's icon'
  • wp908
  • @wp908
WEBサイト作成全般がお仕事な感じです。サイトではテーマの紹介やカスタマイズ情報などを掲載しています。動画があったりするので動画も参考にしていただけるとうれしいです。

投稿者の人気記事
コメントする
コメントする
こちらもおすすめ!
Eye catch
ビジネス

海外企業と契約するフリーランス広報になった経緯をセルフインタビューで明かす!

Like token Tip token
16.10 ALIS
Eye catch
ビジネス

最低賃金の推移2021。

Like token Tip token
26.94 ALIS
Eye catch
ビジネス

Gamestonk!! 〜ゲームストップ株暴騰の背景〜

Like token Tip token
6.02 ALIS
Eye catch
他カテゴリ

ウッドショック(´°д°`)↯↯

Like token Tip token
5.39 ALIS
Eye catch
クリプト

いま頑張って働いている人たちへ【仮想通貨】でカンタン貯金UP!~バイナンスの使い方初心者編~

Like token Tip token
8.64 ALIS
Eye catch
クリプト

【第8回】あの仮想通貨はいま「テレグラム-TON/Gram」

Like token Tip token
69.90 ALIS
Eye catch
クリプト

Bitcoinの価値の源泉は、PoWによる電気代ではなくて"競争原理"だった。

Like token Tip token
159.32 ALIS
Eye catch
クリプト

Floki Inuトークンを紹介~イーロンマスクにインスパイアされて開発~

Like token Tip token
68.12 ALIS
Eye catch
クリプト

Bitcoin史 〜0.00076ドルから6万ドルへの歩み〜

Like token Tip token
947.13 ALIS
Eye catch
クリプト

NFT解体新書・デジタルデータをNFTで販売するときのすべて【実証実験・共有レポート】

Like token Tip token
121.79 ALIS
Eye catch
クリプト

イーロンマスク(Elon Musk)とビットコイン(BTC)

Like token Tip token
11.52 ALIS
Eye catch
ビジネス

【最新】Braveブラウザの素晴らしさを語る【オススメ】

Like token Tip token
20.02 ALIS