このシリーズは、代表の著書「Webサイト制作・運営に役立つ!ホームページ担当者が最初に覚える100の基本」から、Webサイト制作・運営に役⽴つノウハウをシリーズで紹介しています。
目指せWebマスター! >>目次ページ
本シリーズ3回目にして早くも(本には書いていない)番外編。。(^^;
CEOブログで、スマートフォンサイトを公開させていただいた話を書きました。
このときはスマフォ専用サイトとしてPCサイトとは別に作成しましたが、PCサイトと共通で作ることも可能です。
最近お問い合わせの中でも増えてきている「Webサイトのスマフォ対応」について、その中でも特に「レスポンシブWebデザイン」についてご紹介します。
ご存じのようにスマフォのブラウザではPCサイトを表示することは可能です。
ただし、画面サイズが小さいのでコンテンツを読むには
拡大縮小したり、横スクロールしたりしながら読むことになるので、一応見ることはできるが使い勝手はイマイチ、、ですね。
慣れている人は、PC用サイトでもガシガシ普通に読んで、そこから商品を注文しちゃったりもしていますが、やはりコンテンツを提供する側としては、スマフォユーザーに対応させたサイトを提供したいものです。
スマフォ対応させるにはいくつか技術的手法があります。
最近よく耳にするのが「レスポンシブWebデザイン」という、画面サイズによって自動的にレイアウトを変えて横スクロールなしで見ることができる技術。
これだとスマフォ用に別途サイトを作る必要がなく、ソースも1本化できるので効率的なように思えます。
が、やはり万能な技術ではないので、デメリットや注意して導入しなければならないこともありますので、そこを押さえておきましょう。
まず第一に、レスポンシブ対応にするには最初の設計段階からレスポンシブデザインを考慮した設計・レイアウト構成を行う必要があります。
レスポンシブを考慮していないデザイン・レイアウトのサイトに、後から適用するのはとても困難です。
レスポンシブデザインは、コンテンツがブロック単位にまとまっているようなサイト構成に向いています。このようなサイトは画面サイズを縮めていったときに、まとまった単位でレイアウトを変えやすいからです。
会社案内のようなクールでカッチリしたコーポレートサイトなどには比較的向いていますが、メルヘンチックやキャラクター系の自由なレイアウトを好むようなサイトには導入しづらいという傾向があります。
レスポンシブデザインは、基本的にはPC用と同じコンテンツを小さい画面で見やすくする用途で使われることが多いです。
そもそもスマフォユーザーには、そのターゲット層に見せるべきコンテンツ(ページや見せ方)があるのではないでしょうか。
であれば同じコンテンツを見やすくするだけではなく、スマフォユーザーを対象とした企画設計の「スマフォ専用サイト」を別途作ることも選択肢としてありかと思います。
もちろんレスポンシブデザインで、画面サイズが小さくなったときに見せるコンテンツを制限したりすることもできますが、そこまで凝ってしまうと、もはや何のために1ソースで作るのか、、という根本的な疑問に行き着いてしまいます。
レスポンシブデザインにすることで技術的難易度が上がります。
そうすると、場合によっては後で自社の担当者が更新しようとしても簡単にはできないケースなどもあり得ますので、事前にそのあたりの考慮も必要です。
また、データベースやシステムと連動しているサイトの場合、システムとの連携がスムーズに行くか考える必要があります。
レスポンシブデザインは、その導入するサイトによって、便利になるケースもありますし、逆に返って不便になる(手間・コストがかかる)ケースもあり得ます。
また そのサイトの目的によりPCサイトと同じコンテンツで良いのか考える必要もあります。
導入しようとするサイトの目的や意義をよく考えて、導入可否を慎重に判断しましょう。
iPadなど、幅広い閲覧環境に対応
厳しいアクセシビリティ・ユーザビリティ等の基準をクリアするために様々な施策を施しました。コンテンツに最適なUIとなるよう、目的別に探せるインターフェースを中心としたページ構成、Javascriptによる動的な効果を実現し、さらにスマートフォンによるブラウザ閲覧を可能にしました。
アットライズがすぐにお客様の元に
かけつける理由とは
最短で「目的=ゴール」に
たどり着くために
Webサイト制作・運営に役立つ
情報をシリーズで紹介