ビジネス

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

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
他カテゴリ

Decentralizationについて語る時に僕の語ること

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

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

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

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

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

ブロックチェーンの51%攻撃ってなに

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

ジョークコインとして出発したDogecoin(ドージコイン)の誕生から現在まで。注目される非証券性🐶

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

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

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

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

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

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

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

スーパーコンピュータ「京」でマイニングしたら

Like token Tip token
1.06k ALIS
Eye catch
ビジネス

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

Like token Tip token
20.02 ALIS
Eye catch
テクノロジー

iOS15 配信開始!!

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

NasdaqがDeFi(分散型金融)関連のインデックスを上場させると聞いたので、構成銘柄を調べてみた

Like token Tip token
33.60 ALIS