なぜマルチデバイスに対応したウェブサイトを作らなければならないのか？

Writer： otsubo　更新日：2024/04/24

こんにちは、デジナーレ福岡オフィスの大坪です。

今回はなぜマルチデバイス対応のウェブサイトが必要なのか、その重要性と具体的な設計・実装方法について深掘りします。

 

モバイルファーストインデックスとは何か

Googleが2018年から導入した「モバイルファーストインデックス」というものがあります。これは検索結果の順位を決める際に、従来のPC版ウェブサイトではなく、モバイル版のウェブサイトを重視するというものです。

私たちは普段、何かを調べたいと思ったらまずキーワードで検索し、その検索結果の中で上位に表示されるサイトから情報を得ることが多いと思います。このランキングはSEO（検索エンジン最適化: Search Engine Optimization ）の対策次第で変わりますが、モバイルファーストインデックスの導入以降、モバイル版のパフォーマンスが重要になっています。

スマートフォンやタブレットなどのモバイルデバイスでの検索が増えている昨今、Googleはこのような変化に対応して、モバイルでのユーザーエクスペリエンスの質が直接、ウェブサイトの検索順位に影響するようにシステムを変更しました。つまり、モバイルでサイトが使いやすいかどうかが、そのサイトのSEO評価に大きく影響するわけです。

この変更は、ウェブサイト運営者にとっても大きな意味を持ちます。モバイルユーザーにとって使いやすいサイト設計を心がけることが、これまで以上に重要になってくるのです。

 

モバイルデバイスの普及はどのぐらいなのか？

今ではスマートフォンのない生活は考えられず、ほとんどの人がスマートフォンを持っている時代です。では実際の普及率はどのくらいなのでしょうか？

総務省が毎年行っているメディアの利用時間と情報行動に関する調査によると、日本国内でのスマートフォンの普及率は全世代の97%に達しており、ほとんどの人がスマートフォンやタブレットを利用して日常的に情報を収集していることが分かります。この結果を見ても、私たちはウェブサイトはモバイルファーストのアプローチで設計されるべきです。

 

モバイルデバイスの特性とデザインのポイント

ではどのようなことに気を付けて私たちはモバイルファーストな設計を行っていけばよいのでしょうか？いくつかポイントを挙げてみました。

 

パフォーマンスの最適化

モバイルデバイスは処理能力が限られるため、軽量で高速に動作するウェブページの設計が求められます。検索してウェブサイトに遷移したときに、ページの読み込みが３秒を超えると半数近くのユーザーがモバイルサイトから離脱してしまいます。そのためには画像の最適化、ページの読み込み時間を短くすることが不可欠になります。このページの読み込み速度などの測定はGoogle Chrome Devtools にある Performance タブで見ることが出来ますし、googleが提供しているPage Speed Insightsを利用すると、SEOやパフォーマンスなど、ウェブサイトのパフォーマンスを診断することが出来ます。

 

タッチデバイスへの最適化

モバイルデバイスは小さい上に直接指で操作するため、タップしやすいサイズと間隔でボタンやリンクを設計することが重要になってきます。また、必要な情報を拡大などせずいち早く見つかるようなインターフェイスの設計にしなければなりません。

また、スワイプ、ピンチといったジェスチャーは、モバイルデバイスならではの操作です。これらの操作が可能なデザインを考慮に入れ、ユーザーが自然にサイトを操作できるよう配慮しましょう！

 

技術的実装のポイント

CSSメディアクエリを追加する

異なるデバイスサイズに対応するために、CSSメディアクエリを使用してスタイルを調整します。
メディアクエリとは、画面幅が特定の基準を満たすと、そのデバイスに適したデザインにコンテンツの配置を変更する技術です。

このコードだとプリンター以外のPC、スマホやiPad等のデバイス（@media screen）で画面幅が480px以下(max-width: 480px)の時に見出しの幅が200px、テキストのサイズが30px、文字の位置が中央揃えになります。
それ以外の見出しのスタイルは変更がありません。
画面幅をどのviewpointで変えたいのかは、プロジェクトによって異なるかと思いますが、実際に実装しながら必要に応じてレイアウトの調整ポイントを追加することもあります。

 

ビューポート設定

HTMLファイルに以下のようにメタタグを追加すると、ウェブサイトがどのデバイスにも適切に表示されます。これにより、ユーザーはズームインやズームアウトをすることなく、コンテンツを快適に閲覧できます。

上記のコードはviewport幅が画面幅と同じ(width=device-width)で、縮小表示を行わない(initial-scale=1)設定になります。

 

イメージの最適化

レスポンシブイメージはsrcsetやpicture要素を利用して、デバイスの画面解像度やサイズに応じた画像を提供します。

また、 SVGやアイコンフォントの使用により、任意の解像度でクリアなビジュアルを保ちつつ、ページの読み込み時間を短縮します。

 

まとめ

モバイルデバイスの普及はウェブデザインにおいて無視できない要素です。マルチデバイス対応のウェブサイトを設計することで、より多くのユーザーにとってアクセスしやすい、快適な閲覧体験を提供することが可能となります。今回のブログが、マルチデバイス対応の設計と実装の参考になれば幸いです。