東京都新宿区のWeb制作会社 - ウェブラボ株式会社

スタッフブログ

レスポンシブデザイン~スマホユーザー向けのサイト作成~

2023.01.26 Posted by

ICTサービスの利用動向に関する総務省の調査によれば、主な情報通信機器の保有状況は、スマートフォンが8割を超えていることがわかっています。

 

【総務省】情報通信機器の保有状況
https://www.soumu.go.jp/johotsusintokei/whitepaper/ja/r02/html/nd252110.html

 

モバイル端末全体となる96.1%のうちスマートフォンは83.4%と非常に高く、パソコンが69.1%、固定電話が69.0%という状況からも、その割合の高さがうかがえます。

 

高度成長期に新たな三種の神器として台頭した3Cの普及率を今年ついにスマホが追い抜き、ますますレスポンシブデザインやスマホ前提のサイト作りが主流となりつつあります。レスポンシブデザインでは、左右にサイドバーが無く、1列ですっきりとしたデザインの1カラムが主流となり、今までとはWebデザインやサイト作成における向き合い方が変わってきています。

 

今回は、スマホユーザー向けのサイトを作成するために、レスポンシブデザインとはいったいどのようなサイトなのか、具体的なWebサイトの特徴についてわかりやすく解説していきます。

レスポンシブデザインとは

レスポンシブデザインとは、Webサイトを閲覧するユーザーの使用デバイスに合わせて、表示を最適化できるデザインをいいます。近年は、スマホやタブレット、パソコンなど、ユーザーの閲覧デバイスが多様化しつつあります。レスポンシブデザインを搭載していれば、ユーザーの使用デバイスに関係なく、正確な情報を表示できます。

 

現在、Googleは、モバイルファーストインデックスへと完全に移行することを発表しています。そのため、モバイル対応ページを有していないWebサイトは、検索順位が下がることがわかっています。

スマホユーザー向けのサイト

レスポンシブデザインのようなスマホ向けのWebサイトでは、ほとんどの場合、1カラムで作成されています。なぜなら、スマホは表示領域が非常に限られているからです。そのため、サイドバーは表示されておらず、ほとんどのケースで収納されています。

 

現在、若向けの向けのECサイトでは、1カラム設計となっているケースが多く、BtoC向けのサイトであればボタンを押すだけで電話発信ができたり、外出先でも情報を簡単に閲覧できたりします。また、地図アプリやSNSとも連携しやすく、難しい知識がなくても手軽に情報連携できることが特徴です。

 

一方で、BtoBの場合はPCからの閲覧が多いですが、出先や出張先でも見られる・SEOの為にスマホ対応しておくことが推奨されています。現代は、社用ケータイがスマホの時代です。そのため、どのようなデバイスでアクセスされても、閲覧しやすい表示にしておきましょう。

スマホユーザー向けにするメリット

スマホユーザー向けに見やすいサイトを制作すれば、地図アプリや電話アプリとの連携が簡単にできるため、コンバージョンを伸ばしやすくできるメリットがあります。そのため、レスポンシブ化されたサイトにすることで売り上げが伸びやすくなります。

スマホユーザー向けにするデメリット

一方で、スマホユーザー向けに1カラムにしてしまうとサイドバーの表示がなくなってしまうため、回遊率が下がるデメリットがあります。サイドバーがなかったとしても、ユーザーを回遊させる方法はたくさんあるため、試しやすいものから実行していきましょう。

レスポンシブデザインのメリットとデメリット

次に、レスポンシブデザインを実装するメリットとデメリットについてご説明します。

実装するメリット

レスポンシブデザインを実装すれば、Googleに対してSEOに強い(モバイルフレンドリー)なWebサイトであるとアピールできるメリットがあります。また、レスポンシブデザインは、あらゆる最適化の方法のなかでも管理しやすい点で人気があります。

実装するデメリット

一方で、表示するデザインが似てしまうため、レイアウトの自由度が下がるデメリットがあります。また、モバイル版ページの表示に少し時間を必要とするため、離脱率の上昇につながってしまいます。

まとめ

PCユーザーが多いサイトでも、仕事上の都合によっては出先から見ることもあるため、SEOやユーザビリティのためにスマホでも見やすくしておくことをおすすめします。レスポンシブデザインのWebサイトは、スマホから見やすくコンテンツがカテゴリ分けられているため、ページがすっきりとしており、欲しい情報を簡単に得ることができます。

 

実際に、レスポンシブデザインを実装する場合は、指の動きや画面サイズに合わせたデザインを考え、フォームは短くシンプルに(必須項目を減らす等)することでユーザビリティを高められます。

 

もし、レスポンシブ化していない場合は、速やかに実装しスマホユーザーを意識したサイト設計を行うことで、Googleからの評価を高めやすくなります。

オリエンシートダウンロード

採用サイト 絶対に外せない5つのチェックポイント

オリエンシートダウンロード

PAGETOP

お問い合わせContact

まずはお気軽にご相談ください。

Web制作・コンサルティング・システム開発に関するお問い合わせ・お見積もり依頼は、
電話・問い合わせフォームより受け付けております。(受付時間:平日9:30〜18:30)

〒160-0004 東京都新宿区四谷4丁目33-2
マーキュリースクエア4F

TEL:03-5366-3277 FAX:03-5366-3278