スマホ対応

皆さん、こんにちは！
今回は、HPのスマートフォン対応をもう少し掘り下げて
現在検索を行う際に大半の方が使用されている
「Google」に好かれるスマートフォン対応を紹介していきます。

モバイルフレンドリーにページを対応させる方法は大きく分けて3つあります。

①ダイナミックサービングタイプ：ユーザーエージェントでページを分ける

②セパレートタイプ： URLでページをを分ける

③レスポンシブWebデザイン：ファイルもURLもPCとスマートフォンで同一

WEB用語に慣れていない方には、横文字の多い解りにくい説明かと思います。

なので、ざっくりと説明をさせて頂きます🧐

①「ダイナミックサービング」とは。

URLはPCもスマートフォンも共通ですが、

使用ブラウザ等に合わせ適切なサイトを表示す「ユーザーエージェント機能」を使って、

デバイスや画面サイズに合わせて、スマートフォン等の専用ファイルを動的に呼び出す方法です。

メリットとして、PCサイトとスマホサイトでメニューや表示させる内容を変える事ができるという事があります。

例えば、広告収益を柱とするサイトで表示させる広告メニューを変えたい場合や、登録フォームを入力のしやすさに考慮して、PCサイトとスマホサイトで変えたい場合などです。

②「セパレートタイプ」とは。

PCページとスマートフォンページのURLを分けるタイプです。

それぞれのURLを認識できるように、設定が必要になります。

メリットとして、PCサイト、スマホサイトと完全に別々に作成できる為、それぞれの環境に最適化したデザインにでき、カスタマイズ性も高まるという事があります。

③「レスポンシブWebデザイン」とは。

ユーザーが見ている画面のサイズに応じてページのレイアウト・デザインを変化させて表示させる技術のことをいいます。

画面サイズによってUI構成を変化させるタイプのため、ファイルもURLもPCとスマートフォンで同一になります。

それぞれのモバイルフレンドリー対応方法がありますが、Googleが実装を推奨しているのが「レスポンシブWebデザイン」なのです！

Googleも

「デザインパターンとしてレスポンシブデザインをおすすめしています。」

と明言しており、SEO対策としても有効です。

レスポンシブWebデザインにはメリットがあり、

１つめが、URLが1つなのでユーザーの使用機器を気にせずシェアができる事です。

URLと共にHTMLも同一ですので、ページの表示時間の短縮に繋がります👍

２つめが「セパレートタイプ」にはPCとスマホ版のHPは一緒のサイトですよ～、とGoogleに知らせる設定が必要となりますが、

「レスポンシブWebデザイン」にはこれらの設定が不要です！

また別URLで運用する場合、更新や管理も別々になってしまい、管理者側にも負担がかかります。

さらにPC版とスマホ版別々に制作するとその分費用も労力もかかってしまうのです。

スマートフォン対応をすることによって、ユーザーを考えているHPになり、

全世界の人々が使用するGoogleの推奨に対応し、

Googleに好かれるHPを運用することにより検索順位を上げることができ、

費用面、労力面も緩和できる「レスポンシブWebデザイン」、

ユーザーにも優しく、運営者にも優しい、そんなHPを運用する魅力が伝わればと思います🤗