質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

CSSフレームワーク

CSSフレームワークは、Webページのスタイルを指定する言語であるCSSを容易に構築するためのツールです。ツイッター社が開発した「Bootstrap」や段組レイアウトが可能な「Foundation」など様々なCSSフレームワークがあります。

Q&A

解決済

4回答

357閲覧

スマホ用ページはどう分けるべきか?

zico_teratail

総合スコア907

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

CSSフレームワーク

CSSフレームワークは、Webページのスタイルを指定する言語であるCSSを容易に構築するためのツールです。ツイッター社が開発した「Bootstrap」や段組レイアウトが可能な「Foundation」など様々なCSSフレームワークがあります。

0グッド

1クリップ

投稿2018/02/09 18:07

かなり昔から運営しているサイトがあります。
元々PCで閲覧することを前提にして作ったデザインで、今となっては少々レガシーなHTMLと見た目ですが、一応あるワードでGoogle検索1位になっています。

近年これをスマホ対応してくれという要望が多くあるのですが、スマホ用ページを用意する上でGoogle様に嫌われないベストなやり方はどうするのが最善だと思いますか? あるいは技術的にはこれが標準だ!というのはありますか?

ドメインやURL構造を分ける

example.com - PC用
sp.example.com - スマホ用
あるいは
example.com/sp/ - スマホ用

これだとドメインパワーの分散とかSEOの点で不利になる可能性が心配?

同じURLでUA判別して自動振り分け

UAを見て、スマホだったらスマホ用のHTMLでレンダリング出力。

これだと、スマホでもあえてPC用のレイアウトで見たいという旧来からのユーザにとってはむしろ不便かも?
(※UA偽装は今回問題としない)

同じURLでワンソース・マルチデバイス対応にする

モバイル・ファーストを念頭に置きつつ、ワンソースHTMLでPCやタブレットも対応。

近年はこれが主流な気もしますが、これだと個人的にはPCでは見づらい・使いづらいデザインになってしまうことが多い印象です。

最適解は?

どれが正解、ベスト・プラクティスなのでしょうか?
あるいは他にもっと良い方法がありますでしょうか?

ぜひ皆さんのお考えをお聞かせください。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答4

0

ベストアンサー

今現在、スマホ対応が無くても上位表示されているサイトは多々あります。しかし、Googleが「モバイルファースト」を正式に発表し、影響が出始める時期だと個人的には思いますので、少しでも早く対策は必要と思います。

「レスポンシブ」がワンソースで管理しやすく、Googleも推奨しているので個人的にはオススメです。

モバイル・ファーストを念頭に置きつつ、ワンソースHTMLでPCやタブレットも対応。

近年はこれが主流な気もしますが、これだと個人的にはPCでは見づらい・使いづらいデザインになってしまうことが多い印象です。

UI/UXが悪いサイトは、レスポンシブサイトか否かは関係なく、いずれ訪問客も離れ検索順位も落ちて行きます。
メディアクエリ等である程度は対応出来ると思いますのでレスポンシブサイトで良いと思います。

投稿2018/02/12 06:06

yoshinavi

総合スコア3521

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

zico_teratail

2018/03/04 16:13

> 「レスポンシブ」がワンソースで管理しやすく、Googleも推奨している 私もそう思うのですが、やはりどうしてもレスポンシブだと「帯に短し、たすきに長し」となってしまいます。 どちらかに寄せるとしたらやはりモバイルファーストなのでスマホ側に寄せるしかなく、そうなるとPCで閲覧したときにだいぶ閲覧性が劣るサイトが多いなぁと自分は感じておりまう。
yoshinavi

2018/03/05 01:44

レスポンシブサイトの出始めの頃のモバイル寄りなサイトをPCで見ると、確かに違和感が大きいサイトもありますね。 しかし、夏になる前にスマホ対策が必至の状況ではいずれかを選択し実行しなければ、今の「PC検索1位」の財産がどこまで通用するか未知数ですし、下降に向かうのは間違いないです。 Gridシステム・Flex・フレームワーク等を駆使していけば、レスポンシブサイトに未来はあるように思います。 ページの変更や追加の手間は少ないほど間違いが無くなりますし、同じ内容を2度も3度もするのを嫌う人が多いと思いますので、レスポンシブにする事で解消されます。 また、極論ですが、Googleのモバイルファーストから、PCファーストに戻る可能性もゼロではない気がします。その場合もそのままで良いので、レスポンシブサイトが今後は良いと、個人的には思います。 結論らしい結論ではないですが、最終的にユーザーにとってレスポンシブかどうかは関係なく、UI/UXが上手なサイトが生き残ると思います。 (^^)
guest

0

Google様に嫌われないベストなやり方

これに対しての回答なら、PC組み直しつつレスポンシブがいいと思います。

定期的なコンテンツの見直しが必要なので、この期にPC側も組み直すのもいいと思います。
かなり前から運用しているのなら、書き方も古いはずですし。
最近の主流ですし。
ただ、PC側にも影響するので、もしかしたら写真撮り直す必要があったり、検証したりとか、コストや労力がかかってしまいます。

現在検索1位であれば、スマホ化して一時的に順位が落ちたとしても、しばらく経てばまた上のほうにあがってくると思います。

コストや労力を押さえるなら、URL構造を分ける方法がいいのかなと。

canonical設定をしておけば、特にサブドメインでもディレクトリわけでも問題はないので、
どのURLにしたいか、好みの問題じゃないかなと思います。

PC側のページをスマホで見た時、スマホ側に導線をつくるなど、そのぐらいは対応した方がいいですね。
既存のPC側に影響はですし、スマホページを設けたいという感じであれば、多分これでいいと思います。

同じURLでUA判別して自動振り分け

これは、サーバ側いじるのであまりオススメしません。

あと、何のためにスマホ化したいのか、対応した結果どうなっているのが予測できるか、などをもう一度考えて見るといいかもです。

投稿2018/02/10 05:10

編集2018/02/10 05:12
kszk311

総合スコア3404

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

zico_teratail

2018/03/04 16:11

> スマホ側に導線をつくる やはり既存のPCページを残しつつ、別途作ったスマホページへの導線を作るのが最も手堅いですかね。 どうしても既存ページが検索1位から落ちるリスクは取りたくないもので…。 > サーバ側いじるのであまりオススメしません 元々あるPCページはPHPで出力しているので、これはテンプレートHTMLをスマホ用のものも用意するだけでして簡単です。
guest

0

まず、対象コンテンツの性格を吟味せずして今の「流行り」とかSEOとかにこだわるのは方向性が間違っていると考えます。

  1. そのコンテンツは、絵や図表が主体なのか、文字が主体なのか?
  2. 旧来のデザインやレイアウトにこだわりがあり、できるだけそれを保存したいのか、あるいは、新旧・PC/スマホでレイアウトが全然違っていても全くOKなのか?
  3. ただ「観る」ことができればいいページなのか、それとも画面上で細かな操作を要するインタラクティブなものなのか?

これによって、どれを「最適」とするかは変わってくるはずです。

エンドユーザーの視点から言わせてもらえば、スマホだからといって強制的に「スマホ専用ページ」に飛ばされるのは勘弁してほしいと思います。PC版でしか表示できないリンクにアクセスしたくてアクセスしているのに、それらが省略されている「きれいな」スマホ用ページに飛ばされると、かなりイラっとします。余計なことすんなーと思います。たとえばウィキペディアとか。

投稿2018/02/10 04:36

KojiDoi

総合スコア13669

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

zico_teratail

2018/03/04 16:07

> スマホだからといって強制的に「スマホ専用ページ」に飛ばされるのは勘弁してほしい まったく同感です。
guest

0

まあこんなとこかしら

方法URL混在重複コンテンツ備考
サブドメインhttp://sp.example.com×コンテンツ管理が煩雑
サブディレクトリhttp://www.example.com/sp/コンテンツ管理が煩雑
レスポンシhttp://www.example.com/××表示テストが煩雑
```

レスポンシブ以外だが自動的にリダイレクトさせずに

1.「スマホページ」に同線をつくる
2.「スマホページ」に自動リダイレクトだがクッキーによりリダイレクトを制限する

が一般的

全部強制リダイレクトさせるのは愚の骨頂

投稿2018/02/10 01:21

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

zico_teratail

2018/03/04 16:08

ありがとうございます。 ただ、この表における「混在」と「重複コンテンツ」の語の意味・定義がよく分かりません。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問