これからのWEBサイトはレスポンシブ対応が必須です!

これからのWEBサイトはレスポンシブ対応が必須です!プロモーション

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

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

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

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

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

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

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

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

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

 

誰にでも見やすい「レスポンシブ対応」のWEBサイト

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

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

 

レスポンシブ対応にするメリット

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

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

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

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

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

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

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

 

レスポンシブ対応ページの作り方

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

 

① head内にmetaタグを入れる

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

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

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

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

 

② CSSを編集する

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

1 @media screen and (max-width: 450px) {
2  div {{
3  padding: 3px 5px;{{
4  font-size: 75%;{{
5  }

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

 

③ 表示結果を確認する

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

【Google Chromeでの確認方法】

  1. [Ctrl]と[Shift]と[I]を同時に押下する
  2. サイドバーの左上にあるスマートフォンのアイコンをクリックする
  3. 上部バーから表示結果を確認したい機種を選択する

 

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

 

まとめ

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

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

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

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

 

関連リンク

[注1] LINEニュース:「〈調査報告〉インターネットの利用環境 定点調査(2021年上期)」

 

関連サービス

東洋美術印刷:ホームページ制作

 

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