✨SNS嫌いのITサポーター✨
☆IT苦手な起業家向けWebサイト作成支援
☆業界歴24年3,000人以上の個別サポート
☆対面&オンラインレッスンで即解決/大阪豊中
☆スピリチュアル系カウンセリングで挫折なし!
プロフィールはこちら
Webサイトを作成しようとしている、またはサイトを作成しているあなたなら
目にしたことはあるかと思います
レスポンシブデザインってどんなデザイン?と思うこともあるかもですね
レスポンシブウェブデザイン (英: responsive web design、 RWD) はウェブデザインの手法のひとつで、
デスクトップ版のウェブページを閲覧者の画面サイズまたはウェブブラウザに応じて表示できるようにする。
加えて、1つのウェブサイトで多様なデバイスを同様にサポートすることも、
そのタスクに含まれる点を理解しておくことが重要である。
また、最近の取り組みでは、閲覧のコンテキストの一部として閲覧者の「近さ」
をRWDの延長部分と見なしている。ニールセン・ノーマン・グループは、
「コンテンツ、デザインそしてパフォーマンスは、すべてのデバイスでユーザビリティと
満足を確保するために必要である」と述べた
※Wikipediaより引用
なんのこっちゃ・・・![滝汗](https://stat100.ameba.jp/blog/ucs/img/char/char3/039.png)
![滝汗](https://stat100.ameba.jp/blog/ucs/img/char/char3/039.png)
ですね
専門用語大好きなWikipediaではちょっとアレなので
めっちゃ簡単に説明すると
パソコンの画面サイズでも
タブレットでも、スマートフォンでも
どの機種で見てもWebサイト(ホームページ)が
見やすく綺麗に表示されるデザイン
色々なデバイス(機種の事でパソコン、タブレット、スマートフォン)で
Webサイト(ホームーページ)を見る場合に、表示する大きさを同じに
してしまうと大きすぎたり小さすぎたりしてしまいます
例えば、一番小さい画面のスマートフォン用にページを作ったとします
それをパソコンの大きい画面でみるとスマートフォンの画面サイズなので
とっても小さく表示されてしまいます
逆にパソコンで表示される丁度良い画面の大きさに設定したとします
それをスマートフォンで表示すると大きすぎて一画面に表示しきれませんね
少し前までは、パソコン用とスマートフォン用と両方の
画面の設定で別々にページを作る必要がありました
とっても面倒でしたが
今は自動で切り替わるようにデザインできるようになったので
両方を更新する必要がなくなりました!
ありがたや〜〜〜〜![笑い泣き](https://stat100.ameba.jp/blog/ucs/img/char/char3/050.png)
ちなみに、各デバイスのサイズはこちらです
こうして数字で見てもそれぞれ大きさにかなり違いがあることがわかりますね!
- モバイル(スマホ): 360~375 x 640~812
- タブレット: 768 x 1024
- ノートパソコン: 1366 x 768
※標準的なサイズですが、今後も機種が増えてきて変動がかなり
あると思われます。