リノベーション

レスポンシブデザイン

オフィシャルサイトをスマートフォンでもキレイに見せたい。
モニターサイズによっては文字が小さい、写真をもっと大きく見せたい。
モニターサイズの多様化、スマフォ・タブレットからのアクセス・検索の増加に対応したい!

レスポンシブデザインにリノベーション!!

レスポンシブデザインとは、Webデザインの手法の一つで、
様々な種類の機器や画面サイズに単一のファイルで対応すること。
WebサイトやWebページをパソコンやスマートフォン、
タブレット端末など複数の機器や画面サイズに対応させる際、
内容が同じでデザインや動作をそれぞれに最適化した複数のHTMLファイルやCSSファイルを用意し、
HTTPリダイレクトなどでアクセスを振り分ける手法がよく用いられる。
レスポンシブデザインではこのような対応はせず、
表示された機器の種類やサイズに応じて表示内容が最適な状態に変化するよう設定された単一のファイルを制作し、
すべての機器に同じように送信する。
複数のファイルを用意する場合に比べ、デザインや機能の自由度は下がるが、
すべての機器に同じ内容を表示でき、更新作業の簡略化や更新漏れの防止が期待できる。
検索エンジンやアクセス解析に内容が重複した複数の異なるURLが出現することも避けられる。
responsive01_15

ユーザーの利便性

ユーザーがページをシェアしたりリンクしたりしやすくなります。

URLが2つ以上あると、どちらをシェアしたらいいのか分かりにくいですよね。ただしこれが当てはまるのは、
PCサイトとモバイルサイトを違うURLにする場合で、HTMLは別でも良いことになります。

ページの読み込み時間を短縮できます。

PCサイトとモバイルサイトでURLが違う場合、ユーザーの端末に応じてリダイレクトが発生するため、
その分RWDより読み込み時間が余計にかかります。また、PCサイトとモバイルサイトでHTMLが違う場合も、
動的に出し分けるために余計に処理時間がかかります。

Googleがページの表示速度をランキングの指標に使用すると発表したことも記憶に新しいと思いますが、
削れる処理時間は削ってしまいたいところです。

運用コストの節約

同じコンテンツのページをいくつも維持管理する手間が省けます。

もし積極的にモバイルサイトのコンテンツを別に管理する理由がなければ、
モバイル用のサイトがメインサイトと別にあることで、更新作業が単に二度手間と言うことになってしまいます。
これはPCページとモバイルページを同時に生成できるCMSを導入すれば多少は改善するかもしれませんね。

リダイレクトのミスが発生する可能性を下げることができます。

モバイルユーザーがPCサイトにアクセスした場合は、モバイルサイト内の該当のページにリダイレクトする必要があります。
もちろん、その逆もあります。PCサイトとモバイルサイトを分ける場合、
このリダイレクトを適切にメンテナンスする必要性が発生します。

その他に起こりやすいミスについては、
モバイルサイトのよくあるミスを回避するページにまとめられています。

ユーザーエージェントのリストの更新をしなくて良くなります。

PCからのアクセスなのか、モバイルからのアクセスなのかを判断する方法としては、
ユーザーエージェントの解析に頼ることになります。ユーザーエージェントとは、
ウェブページにアクセスする際にブラウザから送信される文字列で、
どんな端末のどんなブラウザでアクセスしているかを自己申告するものです。

このユーザーエージェント文字列は、「私はスマホです」のような単純なものではありません。
たとえば、多くのPHPアプリケーションで使用されているMobile Detectライブラリのソースコードを見ても、
膨大なパターンが羅列されており、一見してメンテナンスの大変さが分かります。世の中にはもっと簡便に、
PCとモバイルを見分けられるかのようなサンプルコードがたくさん落ちていますが、
実際には正しくモバイルデバイスを見分けるコードのメンテナンスは大変です。
単純なサンプルコードで実装している場合は、
おそらく一部のモバイルデバイスにモバイル用のコンテンツが配信されていないことでしょう。

Googleの都合

対応するパソコン用ページやモバイル用ページが存在することをGoogleが知る必要がありません。

同じページでデバイスごとに複数のパターンがあると、ページのインデックスがやりにくい、
ということのようです。完全にGoogleの都合ではありますが、
Googleでも分からないことはユーザーにとっても分かりにくいと思います。
特に、モバイルサイトに切り替えた場合に、
モバイルサイトのトップページにリダイレクトするようなミスを犯している場合は、
ユーザーは即離脱してしまうでしょう。

Googlebot がサイトをクロールするために必要なリソースを節約できます。

同じコンテンツなのにページが複数あると、Googlebotがクロールする手間がそれだけ増える、
ということのようです。これもGoogleの都合ではありますが、
作成したページがいち早くインデックスされるために、
Googleの手間を減らしてあげるというのも必要なことなのかもしれません。

ホームページ診断・提案・お見積りは無料です。お気軽にお問合せ下さい。

お問い合わせ内容

お名前・法人の場合は会社名(必須)

フリガナ (必須)

電話番号 (必須)

メールアドレス (必須)

現在のホームページURL(無ければ入力不要)

ご用件

ご依頼、ご質問等出来るだけ詳しくお書き下さい。

ご希望の連絡方法
 お電話 メール

必要事項をご記入いただき、「送信」ボタンを押してください。

メールの返信については24時間以内に対応しております。
※年末年始・日曜・祝日を除きます。