【Web】レスポンシブ対応とは？Webデザイン用語を初心者にもわかりやすく解説

レスポンシブ対応とは

レスポンシブ対応とは、スマホ・タブレット・PCなど画面幅が違う端末に対応してWebサイトのデザインや、アプリの表示を柔軟に対応することです。

レスポンシブ対応ができていないと、画像や文字が見えにくくなったり、SEOに影響が出ます。そのため特にWebデザインは様々なデバイスから閲覧されるのでレスポンシブ対応の導入が必須です。

スマホの普及で今後ますますレスポンシブデザインの重要性が高まっています。全ての端末で内容を変えずにデザインする分更新は簡単にできますが、PC、タブレット、スマホ用のデザインを作るためより時間がかかります。

元々Webページを閲覧する時にスマホやPCなど、どの端末で開くのか自動で確認して、それぞれの端末別ページにれダイレクトする方法がありました。
しかしレスポンシブ対応ではhtmlファイルが一つで済みますし、作成も更新も簡単なので端末別ページを作成するのはお勧めできません。

端末別ページを作成するのに対して、レスポンシブ対応の特徴は以下の通りです。

レスポンシブ対応ができていないとGoogleからの評価が下がります。
またURLが統一されていることから分散せずにサイトが評価されます。

一つのhtmlを変更するだけで削除や更新ができるため、すぐにサイトの内容変更ができます。

リダイレクトをする必要がないためhtaccessファイルを作るなど高度な知識が必要ないです。
先ほど表記したように一つのURLで公開するのでGoogleの評価がページごとに分散することもありません。

cssによるレスポンシブ対応の記述、柔軟なデザイン、全ての画面幅でのテストなど時間がかかります。
妥協したデザインは簡単に作れます。しかしバランスを崩さずに良いデザインを作成するのが、とても難しく、手間やコストが増えます。

現在、スマホのスペックが高まっているのでそこまで気にすることではないですが、PC用のページをスマホに読み込ませると遅く感じることがあるので気をつけなければいけません。

Webレスポンシブデザインはhtmlファイルでの端末の画面幅の取得と、cssファイルでのデザイン設定で実装することができます

htmlファイルのヘッダーにviewportというメタタグを記述することで、サイトを見てくれた端末横幅を取得できます。

WordPressを利用している場合基本的に記述されていると思いますが、記述されていない場合追加しておきましょう。

htmlファイルで訪問してきた端末の横幅を取得したので、cssファイルでmedia screenを利用して横幅に応じて画像や文字の大きさを変えれるようになります。

大体のスマホの横幅が約500px以下で、タブレットが約400~800pxほど、PCが約750px以上ほどなのでmin,max-widthに役立ててください。

media screenを使わずとも、max-widthとwidthを設定することでスマホではwidthの大きさで見え、PCではmax-widthの大きさで見える記述の仕方もあります。

display設定をしてPCではプロフィールやナビゲーションを表示するが、スマホではプロフィール、ナビゲーションをdisplay:noneして表示しないこともできます。

safariやChromeで表示から開発ツールを利用して、それぞれの端末での表示がわかるレスポンシブデザインモードや、自分で横幅や縦幅を自由に変えるモードがあります。

実際に確認しながら開発しないと、後から全てのページを変更したり、ある一定の横幅で予期せぬ動作が起こる可能性があります。
それぞれのブラウザに初期設定からある開発ツールで良いので、正常に動いているか確認しながらコードを書いていきましょう

当記事ではレスポンシブ対応について説明しましたが、レスポンシブ対応はWebデザインにおいて必須な知識となっています。

SEOの観点からも、ユーザビリティについてもやらない理由はないので新しくサイトを作る方は頑張ってください。