Webサイト（ホームページ）のレスポンシブ化における動的ナビゲーションの注意点1
Webサイトもスマホで見る時代に
近年スマホやタブレット等のモバイル端末の急速な普及から、その利便性もどんどん上がってきており、PCがなくてもモバイル端末で大体の事が出来るようになってきました。Webサイトもそれに合わせてモバイル化が進み、スマホやタブレット用サイトを用意し、閲覧する端末に応じて切り替えるような仕組みが構築されてきましたが、技術の進化に伴い、様々な技術を駆使したデザイン・レイアウトのWebサイトが増え、またスマホやタブレット端末の画面サイズの多様化や機能面の向上などにより、モバイル用サイトのあり方や求められる事が変わってきています。
そういった中、既存のPCのWebサイトをスマホやタブレットなどそれぞれの画面サイズに最適かつデザイン性も損なわれないようなサイトレイアウトにする事が可能なことから、レスポンシブ化の流れがモバイル化の主流となってきています。そこで今回は、レスポンシブ化についてのメリット・デメリットを紹介しながら、実際にレスポンシブデザインのコーディングを行ってみました。
レスポンシブ化とは
レスポンシブ化とは、PC、タブレット、スマホなど、異なる画面サイズの幅を基準にWebサイトのレイアウトデザインを柔軟に流動的に調整し、どの端末でも見やすく最適化されたWebサイトを表示させるようレスポンシブデザインにする事です。一つのCSSファイルで、PC・タブレット・スマホ等すべての表示に対応させる事が可能なため、更新・修正等を行う際に管理しやすく、PCサイトの画像・文章をそのまま流用できるので、レスポンシブデザインはとても優れた方法です。
URL、HTML・CSSのファイルが共通であるため、モバイルサイトを別のURLで端末毎に切り替えて表示させる従来の方法でおこるURLエラー等の危険性が少なくなります。またモバイルフレンドリー化におけるSEOへの影響の観点からgoogleもレスポンシブ化を推奨しています。
レスポンシブ化のメリット
先述した通り、Webサイトをレスポンシブ化するメリットは共通のHTML・CSSファイルで全ての端末サイズに対応させることができるため、更新や管理がしやすい事や、モバイル毎のURL表示エラー等が回避できる事です。具体的には以下の通りとなります。
- 一つのCSSファイルの記述で様々な画面サイズの端末に合わせて流動的にデザインを調整でき、更新・修正の際にも工数が削減できて管理が楽
- PCとモバイル用サイトでURLを切り替える必要がないため、表示エラーが起こりにくくなる
- PC・モバイル用サイトが一つのURLのためGoogleのクローラーにコンテンツを適切にインデックスさせる事ができる
- PC・モバイル用サイトが一つのURLのためSNSでシェアする際に一つのURLで済む
しかし、上記のメリットを持ち合わせている反面、レスポンシブ化にもデメリットがあります。モバイルサイズにした時に表示させない要素があっても、読み込みは行なわれるので、表示速度が遅くなる場合があります。PCサイズの画像をそのまま使用する場合も、表示速度が遅くなる原因となる可能性があります。 またPCサイトが複雑なデザインの場合、別のモバイルサイトを作成するより、レスポンシブ化の方が工数がかかる場合があります。
このようにレスポンシブ化にはデメリットもありますが、様々なメリットがあり、またGoogleの評価の一つであるモバイルフレンドリーに対応する事でSEOの向上にもつながります。
モバイルフレンドリーに対応するための改善点としては以下があります。
- ビューポートを設定する
- 小さすぎて読めないテキストを無くす
- 互換性のないプラグインを使用しない（例："Flash"ほとんどのモバイル端末でサポートされていない）
- クリック可能な要素同士を近づけすぎない
- コンテンツの幅は画面の幅を超えない
今回はレスポンシブ化とは何か書きましたが、SEOの他にも実際の作業ではポイントになるところが様々あるとわかりました。次回はユーザビリティに配慮しながら実際にレスポンシブ化するために行ったコーディング作業についてお伝えしたいと思います。
ライター：松田
|
御相談、ご質問はこちら |
サービスご案内資料や、特別資料「Webサイト運用における注意点～コンテンツやセキュリティ対策、基盤運用まで」がダウンロードできます。 |
|
最新事例の公開情報や、イベント・セミナー情報をお届けします。 |
