PCサイトとモバイルサイトの設計について

いずれ遠くない未来にGoogle検索はモバイルページの評価を中心としたランキングに変わります。仮に今はモバイルページがある意味あれば良いくらいの感覚だとすると、今後はモバイルサイトが必須というくらい重要な役割となるでしょう。

▼Googleがモバイル ファースト インデックスを導入予定、影響は？対応は？
https://www.suzukikenichi.com/blog/google-will-shift-to-mobile-first-index-soon/

PCサイトとモバイルサイトの提供方法はいくつかあります。

［レスポンシブに提供］

一つのHTMLでPC版とモバイル版を構築する方法です。デバイスにより表示をCSSで切り分けます。CSSの切り分けはウィンドウ幅、またはUA（ユーザーエージェント）で行います。Wordpressを始め、情報が文字中心であるブログは導入しやすい形式です。全デバイスを考慮した設計となるので、レイアウトのパターンが決まりがちという側面もあります。

［アダプティブに提供］

簡単に言うとPC版とモバイル版でHTMLを変える方法です。それぞれのデバイスに最適化した情報設計ができます。今のPCサイトがモバイル環境に対してレスポンシブに情報を提供できない場合、新規でモバイルサイトを構築するという選択肢になります。多くのサービスがアダプティブにコンテンツを提供していますね。各デバイスに適した情報設計ができることが一番のメリットです。
反面、管理コストが単純に2倍となることも意識が必要です。例えば会員専用のサービスをアダプティブに提供する場合、全環境でテストする必要があります。レスポンシブのように見た目が崩れていなければ良い訳ではなく、動作検証を全デバイス（平たく言うとテンプレート数分）で行います。多機能・高機能なサービスであればあるほど、その労力は大変になります。

アダプティブな設計における注意点

とまあ考え始めるとキリがないので割愛しますが、アダプティブな設計にする場合、PC版とモバイル版の振り分け方法は幾つかあります。

1. 同一URLでPCサイトとモバイルサイトを展開する場合
2. モバイル環境からのアクセスをモバイルサイトへリダイレクトをする場合
3. モバイル環境からのアクセス時にモバイルサイトへのバナーを表示する場合

当然①が一番良い提供方法です。余計なことを考えずに済みます。①が難しい場合は②になります。その上でPCページとモバイルページの関係性をタグで明示します。

• PCページのHTMLに「rel=”alternate”」属性を設置してモバイルページのURLを指定
• モバイルページのHTMLに「rel=”canonical”」属性を設置してPCページのURLを指定

▼（参考）別々の URL／パソコン用 URL とモバイル用 URL のアノテーション
https://developers.google.com/webmasters/mobile-sites/mobile-seo/separate-urls

③のケースが存在する意図は掴みかねますが、おそらく簡易的な対応なのでしょうか。この場合も上記PCページとモバイルページの関係性のタグを設置しておかないとPCページとモバイルページの関係性の判断をGoogleに委ねることになります。重複コンテンツと判断されないと言い切れない、少なくとも余計なことを考える必要が生じます。サイトリニューアルでURLを変えるケースは未だにあります。前述の③のケースでさらにURL変更が起きた場合のストレスといったら・・・。なので、可能な限りシンプルな構造で設計することを提案いたします。