※回答一覧

 出題者   カテゴリ   作成日

ムラヤマユウスケ		 うまくいくインハウス担当 2014-11-30 18:33:28
 問題   ヒント   回答数 
■PCサイトとスマホサイトの運用方法

お久しぶりです、ムラヤマです。日が暮れるのも早くなり、すっかりと冬になった印象を受けます。年末と言えばクリスマスに、大掃除にと、必要なグッズ、アイテムを何かと購入することが増えますが、皆様どのように購入されてますか?もし、ネットで購入しようとした商品がなかったら、Webで検索してみて下さい。「あれ?全然思っていた商品が出てこないぞ」とか「この商品の名前をはじめて知った!」などの驚きが色々落ちてますよ。

さて、今月の課題ですが、実際のお客様であったケースを基に作成させていただきました。下記の前提から最善と思われる施策と、その理由をお答えいただければと思います。

あなたの企業では主力となるサイトを二つ運用しています。それぞれにPCサイトとスマホサイトが存在します。
・ダイナミックサービングでURLが共通のサイト
www.a.com
・PCとスマホサイトでドメインが異なるサイト
www.b.com (PCサイト)
smp.b.com (スマホサイト)

1.HTTPヘッダーやアノテーションタグ、カノニカルタグなど、PCサイトとスマホサイト間で必要な要件を、a.comとb.com、それぞれのサイトにてお答え下さい。

2.a.comのサイトは一部のページがスマホ化されておらず、スマホで閲覧してもPCサイトのページが表示されてしまいます。そのような一部のページをスマホ化しようと判断する場合、どのような視点からスマホ化を判断すればよいでしょうか?		 ダイナミックサービングとは、サーバー側でユーザーエージェントを判断し、同一URLですが、別のHTMLを返すという実装です。

レスポンシブウェブデザインが同一HTMLに対して別CSSを適用すのに比べ、異なるHTMLを使用できるので、デバイス毎にコンテンツの中身を変えることも可能です。		 5

 

メンバーの回答一覧　お疲れ様でした！
※講師コメント詳細は冊子に掲載されています。

なるほど
票数		 回答 講師コメント
1 丸田
(1)
サイトA
VaryHTTPヘッダを返すようにWebサーバの設定ファイルを変更する

サイトB
b.comからsmp.b.comに対してアノテーションタグを設定する(link rel="alternate")
smp.b.comからb.comに対してカノニカルタグを設定する(link rel="canonical")
VaryHTTPの設定は不要

※質問なのですが、マルチデバイスの環境下において、カノニカルタグ、アノテーションタグの張り方について、考慮すべき点はあるでしょうか?

(2)
視点:スマホ化することが、ユーザ、あるいはサイトオーナーにとって総合的にメリットがあると考えられるか?

ユーザにとって
・利用度合い(スマホからのアクセスが十分にあるか?アクセスログを確認して推測する)
・コンテンツの内容(スマホ向けに提供すべき理由があるか?)
・スピード(ストレスなく使えるか?)
・動線に不備が発生しないか?(既存サイトとのつなぎ目のところでリンク切れを起こさないように)

オーナーにとって
・スマホ化することで対投資効果が見合うか?
・検索サイトからの評価を維持できるように留意する必要がある

以上です。		 金 (ムラヤマユウスケ)
1では、サイトA、サイトBともに設定内容に間違いはございません。 いただいた質問内容を正確に理解することができなく申し訳ないのですが、回答に記載いただいた以上に注意しなければいけない点はありません。 2の回答も完璧だと思います。ユーザーとオーナーの2つの視点で考えることが重要ですね。 スマホ化できるのであればした方がよいにきまっていますが、ログ等にて判断することが重要ですね。 今回、回答いただいた中で、唯一の金でした。
1 kamino
1.弊社はPCもスマホも同じURLです。
一部のページがスマホ化されておらず、スマホで閲覧してもPCサイトのページが表示されます。
ユーザーエージャントで判断し、別のHTMLを返すということをやっているはずなので、
ダイナミックサービングになると思いますが、それ以上はわかっていません!

2.弊社はECサイトですが、弊社の場合、スマホ化するときの判断はコンバージョンにどれだけ影響するかで決めました。
といってもそんなに明確な数値基準があるわけではありませんが、優先順位を決めてスマホ化しました。
現状では、TOP、一覧、詳細、カートはスマホ化してあり、ガイド系のページや特集ページなどはまだPCサイトを表示させています。

この問題を機に勉強します!		 銅 (ムラヤマユウスケ)
kaminoさんのサイトのように、UA判別でサイトの出し分けは当然行っているが、VaryHTTPヘッダーを設定していないサイトは多く見かけます。 2では数値基準というか、判断する際の材料があれば、さらによいですね。
0 YN
1.
a.com:
メディアクエリーを使って表示デバイスに対応するよう書き分ける。

b.com:
www.b.comの各ページにrel="alternate"タグを記述し、対応するsmp.b.comのURLを記入。smp.b.comの各ページにはrel="canonical"タグを記述し、対応するwww.b.comのURLを記入。

2.
・そのページへアクセスするユーザの環境(スマホからのアクセスが多いか否か)。
・コンテンツ量、レイアウトの複雑さがスマホ表示に適しているか。		 銅 (ムラヤマユウスケ)
1のa.comやCSSでの表示切り替えでしょうか。SEOを考慮すると、VaryHTTPヘッダーも記載した方がよいので、未設置でしたらぜひご検討下さい。 2,データでの判断、コンテンツ内容での判断ともによいかと思います。
0 yukko
1.HTTPヘッダーやアノテーションタグ、カノニカルタグなど、PCサイトとスマホサイト間で必要な要件を、a.comとb.com、それぞれのサイトにてお答え下さい。

・a.com の場合
キャッシュされているPC用のコンテンツをスマホに返却してしまう可能性があるのでVary HTTP ヘッダを設定する

・b.comの場合
PCサイトとスマホサイトの関連をアノテーションで記述する

正直ちょっと分からない分野なのでこれをきっかけに勉強してみます。


2.a.comのサイトは一部のページがスマホ化されておらず、スマホで閲覧してもPCサイトのページが表示されてしまいます。そのような一部のページをスマホ化しようと判断する場合、どのような視点からスマホ化を判断すればよいでしょうか?

自社サイトが正にこの状態です。現在はTOPページ→一覧ページ→商品詳細ページ→カートとスマホ化が完了しています。スマホ化にあたって最も重視したのがユーザービリティとCVへの影響力です。ECサイトなので「買う」という行為に対してユーザーがいかに離脱せずに買い物をスムーズにできるか?ということを優先的に考えてスマホ化を進めました。全てをスマホ化できれば1番良いのですが開発コストなどを考えると企業の目的に応じて(ECサイトならば物を買いやすくする流れ)スマホ化する部分の優先順位を決める必要があると感じています。		 銀 (ムラヤマユウスケ)
1.a.comは回答内容、理由ともに正解です。 b.comはアノテーションだけでなく、カノニカルタグも必要ですね。ぜひ、回答内容から現サイトの設定内容を見直していただければと思います。

0 gabber1090
1.HTTPヘッダーやアノテーションタグ、カノニカルタグなど、PCサイトとスマホサイト間で必要な要件を、a.comとb.com、それぞれのサイトにてお答え下さい。

⇒【a.comの場合】
PC⇔スマホのそれぞれでキャッシュサーバからの誤送信を防ぐためGoogleが推奨するVary HTTP ヘッダーを利用します。

【b.com】の場合
PC⇔スマホでドメインが異なる=URLが異なる場合には、スマホに対応しているPCページにはlink rel="alternate"(アノテーション)を記載し、それに対応するスマホページにはカノニカルタグlink rel="canonical"を記載します。

2.a.comのサイトは一部のページがスマホ化されておらず、スマホで閲覧してもPCサイトのページが表示されてしまいます。そのような一部のページをスマホ化しようと判断する場合、どのような視点からスマホ化を判断すればよいでしょうか?

⇒「一部」が部分的か大半かは別として(必要な作業ボリュームは置いておいて)、判断材料はやはり実際の参照UAにスマホが含まれる割合を見ます。サイト全体の割合に準ずる場合やそれを上回る場合にはスマホ化が必要なページとして見るべきと思います。逆にサイトの平均を下回るページであっても「ユーザーのデバイスに関わらず有用なページ(コンテンツ)か否か」が判断基準となると思います。総じて有用でないページというのはあまり出てこない気がしますが……		 銀 (ムラヤマユウスケ)
1.の回答内容は完璧です。 2.の判断基準も記載いただいた内容にて間違いないかと思います。ただし、平均と考えるとサイト全体の平均とすることより、CVに影響を与えるページを中心に抽出した平均から判断すると、より投資に対する価値を出しやすいのではないかと感じます。