ブログ
勉強して学びを得たときの疑問や改善点などを日々記録しています。
是非ご参考までに覗いてみてください。
-
kimi -
前職はＳＥ。今は講師のお仕事をしています！分かりやすい授業を目指して日々勉強中です。クールに見えるといわれますがしゃべるとボロがでるので、普段は黙ってます(-×-)
レスポンシブデザインの特徴やメリットをご紹介します
レスポンシブデザインとは?
みなさんは今、どんなデバイスでこの記事を読んでいますか？
スマートフォンでしょうか？それとも、タブレットやPCでしょうか。
実は、同じWebページでも、デバイスによってレイアウトが変化しているのをご存知でしょうか？
これを実現しているのが、「レスポンシブデザイン」という技術です。
以下は、自社ブログページのモバイル版のレイアウトと、PC版のレイアウトです。
最近では、さまざまなデバイスからインターネットにアクセスすることができます。
でも、画面の大きさや操作方法はデバイスによってそれぞれ異なります。
| スマホ | 小さく縦長画面、タッチ操作 |
| タブレット | 縦横どちらも、タッチ操作、キーボード操作も可能 |
| PC | 横長の大画面、キーボード+マウス操作 |
そのため、スマホで見たときは縦長でスッキリと、PCで見たときは横に広く情報を表示する
といったように、デバイスごとに使いやすく見やすいレイアウトやデザインを切り替える必要があるのです。
「どんなデバイスから見ても快適に使えるWebサイト」をつくること。
それを実現するのが、レスポンシブデザインであり、ユーザーのデバイスに応じて自動的にレイアウトやデザインを調整する手法のことなのです。
レスポンシブデザインの実装上の特徴
レスポンシブサイトを作るときの基本的な考え方は、以下の２点です。
- 1つのHTMLですべての画面サイズに対応
（専用のページをそれぞれ作成するわけではない) - メディアクエリでスタイルを切り替える
なぜ必要なのか？
- スマホ利用者の増加
多くのユーザーがスマートフォンでWebサイトを閲覧するため、小さい画面でも見やすく表示することが重要。 - SEO対策
Googleが推奨しているため、レスポンシブ対応をしたWebサイトは検索順位にも有利。 - ユーザ体験の向上
どのデバイスでみても見やすく使いやすいということは、ユーザの離脱率の低下やコンバージョン率の向上が期待できる。
授業では、テキストをもとにHTMLやCSSの基礎学習を行ったあと、flex-boxを使ったレスポンシブデザインの演習を行います。
そして、実際に受講生の皆様にレスポンシブに対応したWebサイト制作にも取り組んでいただいています！
レスポンシブサイト実装のポイントはメディアへ掲載予定
flex-boxを使った実装例や、html側のビューポート設定、ブレークポイントの決め方など、レスポンシブサイト実装上のポイントについて掲載予定です！