スマホのために再度、サイトを作成？

質問

現在、幅８５０pxのサイトを作成してネット販売しています。

ｐｃでブラウザの、IEや、サファリ、クロームでの動作確認はしています。

一方、スマホ等でも動作確認はできているんですが、この場合、スマホ用に再度サイトを作り変えるほうがいいのでしょうか？

勿論、スマホ画面に合ったサイトがあれば、それに越したことはないですが・・

質問１
スマホ用に作り変えることは、重要なのでしょうか？

質問２
そもそも、スマホ用っていっても、URLは同じですから作り変えることに無理があるのでしょうか？

お詳しい方、宜しくご指導願います。

回答No.3

pringlez · ベストアンサー

>質問１
>スマホ用に作り変えることは、重要なのでしょうか？

誰に見てもらいたいかでしょうね。スマホを使う人はそもそも対象外のサービスなら対応不要でしょう。スマホの人にも利用してもらいたいのなら、対応したほうがより多くの人に利用してもらえるでしょう。

>質問２
>そもそも、スマホ用っていっても、URLは同じですから
>作り変えることに無理があるのでしょうか？

現代では「レスポンシブWebデザイン」が流行っています。「レスポンシブWebデザイン」とはWebデザインの手法の一つで、単一のページで画面サイズによって表示を変える手法です。

昔はUAによってリダイレクトしたりスタイルシートを切り替えたりしていましたが、UAは偽装される事も多いですし、PC用でも画面が小さいものと大きいもので見易さが異なりますので、十分な効果が発揮できないことがありました。

以下のサイトにレスポンシブWebデザインで作られたサイトのリンク集があります。そのサイト自体もレスポンシブWebデザインで作られています。PCで表示して、画面サイズを変更すると意味がよくわかると思います。特に画面幅を狭くすると、メニューのリンクがスマホ・タブレットっぽいアイコンに変わるサイトが多いのですが、なかなかいいと思います。多少の知識と技術が必要ですが、時代の流れに取り残されないために対応した方がいいと思います。

レスポンシブWebデザイン
http://responsive-jp.com/

補足

これはいいですね～

回答No.5

ORUKA1951

＞しかし、スマホで画面を大きくしたり、小さくしたりの作業が容易ですから、特別複雑な設定をするメリットってあるように思いませんがね～

　特別じゃないです。何度も書きますが、
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
2.4.1 構造とプレゼンテーションの分離
　HTMLは、常に構造的マーク付けを規定するところのSGMLをルーツに持っている。HTMLの性質上、プレゼンテーションに関する要素や属性は、次々と他の機構、とりわけスタイルシートに置換えられていく。 また、文書の構造をプレゼンテーションと切り離すことで広汎なプラットフォームや多様なメディアでの文書提供コストを低下でき、文書の改訂も容易になるということが、経験的に知られている。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )］より

　逆に製作はとっても楽なはずですよ。

　あなた自身が自白されているように
＞現在、幅８５０pxのサイトを作成して
＞・・・【中略】・・・
＞スマホ用に再度サイトを作り変えるほうがいいのでしょうか？
　No.4の回答で示した(1)～(3)なら、こんなことで悩む必要すらない。

　「ナビゲーションリストを様々にデザインしてみよう。」のHTMLをご覧になると分かるように、検索エンジンを含めて誰にでもわかる超シンプルなソースになっていますね。文書の改定も楽だと想像できますし、スマホに対応させようとしてもスタイルシートを書き換えるだけでよいはず。

補足

すみません。今回の回答で、

「しかし、スマホで画面を大きくしたり、小さくしたりの作業が容易ですから、特別複雑な設定をするメリットってあるように思いませんがね～」

を納得できるだけのご意見でありません。とにかく、画面が支障なしにみることが出来れば問題ないと思います。

そうすると、やはり特別複雑な設定をするメリットってあるように思いません。特別かどうかは問題ではありません。これは個人の主観ですから。

回答No.4

ORUKA1951

＞固定しないＨＰってどんなサイトですか？
回答で示した
ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HTML/nav/navigation1.html )
　とか・・

1) media="screen" でスクリーンブラウザ(PCやスマホ)用のスタイルシートを書く
　　携帯や印刷には適用させない
2) スクリーン用はリキッドで製作する。
　width:80%;
　min-width:630px;
　max-width:1000px;
　とか・・・
　　先の「ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HTML/nav/navigation1.html )」を開いてスタイルシートで任意のデザインを選択して、ウィンドウ幅を変えてみる。【Chromeだけは代替スタイルシート使えない】

3) さらに、必要ならmediaquery(mediatypeの拡張です。CSS3から。スマホはすべて対応)
　で、ウィンドウ幅で切り替える。

　それ以外に、
・HTTP要求ヘッダでUSER-AGENTによってスタイルシートを変更する方法
　htaccessにて振り分け、スタイルシートを動的に出力する。
　(例)DMM.com( http://www.dmm.com/ )のサイトをFireMobileSimulator( https://addons.mozilla.jp/firefox/details/8519 )でi-phoneなどに変更してアクセスすると分かる。
・ページ自体をユーザーエージェントを判別して動的に作成する。
※これらの方法は、新しい端末が登場するたびにサーバーの設定を変更しなければなりません。それでなくても膨大な種類の端末があるので大変です。
　基本は、リキッドで製作して、mediatypeやmediaqueryでスタイルシートを変更する方法になるでしょう。

　【HTMLさえきちんと書かれていたら】＝構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )がきちんと出来ていたら、プレゼンテーションはどのようにも変更できますからね。「ナビゲーションリストを様々にデザインしてみよう。」のように・・

　他にも色々な手法があります。いずれにしても基本は
【HTML文書が、ブラウザやプラットフォームの違いを超えてうまく働くべき】
【HTMLは、どんな環境からもWebの情報を利用できるようにすべきだ】
　です。そのためにわざわざwordなどを使わずにHTMLで作成するのですから・・

※製作者の立場になると、HPは論外としてホームページじゃなくウェブページ・ウェブサイトと言うほうが良いです。・・「ホームに戻る」という言葉ですら意味が分からなくなる。
　⇒ホームページ - Wikipedia( http://ja.wikipedia.org/wiki/%E3%83%9B%E3%83%BC%E3%83%A0%E3%83%9A%E3%83%BC%E3%82%B8 )

　私も一時期(十数年前)に固定幅で作成していた時期があります。HTML4.01の勧告(1999年)の普及以降は原則リキッドでしか作ってません。

補足

非常に専門的な解説ですが、しかし、スマホで画面を大きくしたり、小さくしたりの作業が容易ですから、特別複雑な設定をするメリットってあるように思いませんがね～

回答No.2

ORUKA1951

＞現在、幅８５０pxのサイトを作成してネット販売しています。
　ここがよくわからない。スマホでも横置きにすれば文字は小さく見え難いですが利用できるはずです。縦にするとさすがにつらい。

　しかし、そもそもHTMLでウェブサイトを構築する最大の目的は・・
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
　HTML文書が、ブラウザやプラットフォームの違いを超えてうまく働くべきであるということは、多くが認めるところである。 相互運用性の達成は、コンテンツプロバイダのコストを低下させる。なぜならただ1種類の文書しか作る必要がなくなるからだ。 もし【相互運用性確保の】努力が成されなければ、Webは互換性のないフォーマット毎に分け隔てられた世界に分割され、すべての関係者にとっての商業的可能性が減少することとなるであろう、大きなリスクを負うこととなる。
　・・・【中略】・・・
　HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )］より

　なのですから、そもそも850px幅で固定してしまうのが、根本的に間違っているのですよ。
例)
　ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HTML/nav/navigation1.html )
　は、表示メニューから「スタイル(シート)」に進み、[横並び]などのデザインでしたら、ウィンドウ幅に関わらず利用できるはずです。印刷プレビューもしてみること。

＞ｐｃでブラウザの、IEや、サファリ、クロームでの動作確認はしています。
　それってウィンドウ幅を変えても確認しましたか？？【重要】
　　自分しか利用できなくてよいなら別ですが、すくなくとも商用なら・・、誰もがウィンドウ幅同じとは限らないと考えるべきです。
　IE,Firefox,Sfari,Chromeであっても、ウィンドウ幅は皆違う。私だって--通常は最大幅ではブラウザは使ってない。
★ちょっと横道に・・製作者の立場でfirefoxが上がってないのはなぜ？？？
　開発者向けツール( https://addons.mozilla.jp/firefox/extensions/developer_tools/ )は必須でしょうに・・
　最低でも
　・ Firebug( https://addons.mozilla.jp/firefox/details/1843 )
　　　HTMLやCSS、javascriptの確認
　・ Html Validator( https://addons.mozilla.jp/firefox/details/249 )
　　　HTMLの文法チェック
　・ Open With( https://addons.mozilla.jp/firefox/details/11097 )
　　　他のブラウザでの確認　
　・ IE Tab V2 (Enhanced IE Tab)( https://addons.mozilla.jp/firefox/details/92382 )
　　　IEでの確認
　・ FireMobileSimulator( https://addons.mozilla.jp/firefox/details/8519 )
　　　スマホや携帯電話での確認
　・ Web Developer( https://addons.mozilla.jp/firefox/details/60 )
　は必要なのでは？？

＞質問１　スマホ用に作り変えることは、重要なのでしょうか？
＞質問２　そもそも、スマホ用っていっても、URLは同じですから作り変えることに無理があるのでしょうか？
　　その必要はない!そもそもスマホだろうが印刷だろうが携帯だろうが、スクリーンリーダーだろうが・・・もちろん検索エンジンだろうが利用できるように作るもの。そのためのHTML

再掲)
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
　HTML文書が、ブラウザやプラットフォームの違いを超えてうまく働くべきであるということは、多くが認めるところである。 相互運用性の達成は、コンテンツプロバイダのコストを低下させる。なぜならただ1種類の文書しか作る必要がなくなるからだ。 もし【相互運用性確保の】努力が成されなければ、Webは互換性のないフォーマット毎に分け隔てられた世界に分割され、すべての関係者にとっての商業的可能性が減少することとなるであろう、大きなリスクを負うこととなる。
　・・・【中略】・・・
　HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )］より

補足

・・850px幅で固定してしまうのが、根本的に間違っているのですよ。・・

固定しないＨＰってどんなサイトですか？
サンプルがあればわかりやすいのですが・・

回答No.1

Kaneyan-R

どんな利用者をターゲットにしたサイトかにもよりますが、特に作り変える必要は無いと思います。

スマホならPC用のサイトも普通に見れるわけですからね。

ご自身で言われている通り、スマホ用のサイトがあった方が便利ではありますが。

URLが同じでも、利用しているブラウザやOSによって表示内容を変えることは可能です。
ブラウザには「UserAgent：ユーザーエージェント」と呼ばれる、ブラウザやOSの情報を記録しているデータがあり、JavaScript等を使えばこの情報にアクセスできます。

ただ、この情報もブラウザの機能によって偽装することができるので、当てにはなりませんが。
※「偽装」と言っても悪い意味ではなく、例えばブラウザ判別で「IEのみ」にしか表示しないようにしているようなサイトを見たい場合に使う機能です。

お礼

参考になります。