これからのWEBサイトはレスポンシブ対応が必須です！ - コムデザわかりやすいコミュニケーションをデザインする

インターネットって、日々の生活の中で無くてはならない存在ですよね。

家でも外でもどこでも簡単に情報が得られてとても便利な反面、スマホで見ると正直見づらい…と感じるサイトも結構あるのではないでしょうか。

そんな悩みを解消してくれる「レスポンシブ対応」について見ていきたいと思います。

WEBサイトは「見てくれるデバイス」にも注目しよう

いまやスマホは一人一台どころか二台、三台持ちも当たり前という時代になりました。

とはいえパソコンを使わなくなったかと言ったら、そんなことありませんよね。

実は2021年にLINEが行った調査によれば、インターネットにアクセスするために「スマホだけを利用する」人と「スマホとパソコンの両方を利用する」人の割合はおよそ半々という形になりました。[注1]

私も家ではパソコン、外出先ではスマホでネットを使っているので、この結果はすごく納得できます。

WEBサイトはパソコンで作るため、どうしてもレイアウトデザインはパソコン寄りになりがちですが、調査結果から見ても「スマホでも見やすいサイト作り」が必須なのは言うまでもないでしょう。

レスポンシブ対応とは、パソコンやスマホといったデバイスの画面幅にあわせて表示するレイアウトを最適化することです。

当サイトもレスポンシブ対応で作られており、デバイスごとに使いやすいデザインになるよう設計されています。

レスポンシブ対応の一番の利点は、パソコンとスマホの両方で同じサイト・同じページに誘導できるということです。

異なるデバイス間で共有できるため、ユーザビリティの高さからSNSなどでのサイトの拡散性アップも期待できます。

またSEOの観点からも、レスポンシブ対応はメリットがあります。

Googleなどの検索エンジンはWEBページの被リンク（外部サイトでの自サイトへのリンク）数をもとに表示順位を生成しています。

デバイスごとに別々にページを用意して誘導するより、同じページに誘導したほうが被リンク数も多いため、検索結果でもより前方にWEBサイトが表示される確率が高くなります。

こうした理由からGoogleはレスポンシブ対応でWEBサイトを作成することを推奨しています。

また新しい機種のデバイスが登場しても、レスポンシブ対応なら自動で画面幅に合わせてサイトが表示されるため、こちらで何か対応する必要は一切ありません。

WEBページのソースコードを直接いじるため、レスポンシブ対応のページを作成するにはHTMLやCSSをある程度編集できるスキルが必要です。

まずはレスポンシブ対応にしたいWEBページのhead内に、以下のmetaタグを挿入します。

　meta name=”viewport” content=”width=device-width, initial-scale=1.0″

このタグにより、ページの表示幅がデバイスの画面幅と同じだとブラウザが認識します。

WordPressなどのCMSツールを使ったWEBサイトの場合、header.phpなどに挿入すれば、サイト全体にレスポンシブ対応が反映されます。

表示するデバイスごとに、背景や文字の大きさなどページ幅以外でのレイアウトを適宜変えたい場合は、CSSに以下のようなメディアクエリを記述する必要があります。

念のため、編集前のソースコードのバックアップをローカルで作成しておきましょう。

レスポンシブ対応にきちんとなっているかは、以下の方法で確認できます。

【Google Chromeでの確認方法】

iPhoneや各種Androidをいくつか選び、スマホで見てもレイアウトが崩れていないか見ておきましょう。

世界中の人々があらゆるツールでネットを楽しむ時代、単にユーザビリティが上がるだけではなく、検索エンジンの表示結果にもいい影響があるので、レスポンシブ対応のページを作ることはもはや必須条件の1つと言っても過言ではありません。

しかし、エラーやバグのないようCSSをきちんと編集するのって素人だとなかなか思ったようにいかないものです。

余談ですが、弊社は印刷会社ですがホームページ制作事業なども専門のスタッフが承っています。

興味ある方は関連サービスをご覧ください。

・関連サービス　

	業務変革を目的としたWEBサイト制作　お客様の業務の課題や目的をしっかり聞き出しながら、どのようなWEBコンテンツにしていきたいか一緒に考えることで、より大きな成果が見込めるWEBコンテンツを実現します。
	詳しくはこちら