スマートフォンやタブレットからのインターネットアクセスが増加し、WEBサイトの制作側もユーザーの閲覧環境の変化に合わせてどんなデバイスでもストレスなく閲覧できることが求められるようになりました。
ユーザーが閲覧する端末(PC、スマホ、タブレットなど)の画面サイズに合わせてページレイアウトを最適化する方法は二つあり、それぞれにメリットとデメリットがあります。
- PC版、タブレット版、スマホ版などそれぞれに別のページを用意する方法
-
- それぞれの環境ごとに表示する内容を大きく変えられる。
- デバイスごとの作成になるため、混乱しにくい。
- デバイスごとにHTML文書を作成するため、文言の修正などがあった場合それぞれに修正しなければならずチェックの手間もかかる。
- それぞれのHTML文書ごとにURLが異なるため、異なるデバイス間で共有しにくい。
- 複数のデバイスで一つのページを共有する方法…レスポンシブ
-
- HTML文書が一つなので修正や更新が一度で済み、チェックも一度で済む。
- URLも共通なので、異なるデバイス間でも共有しやすい。
- Googleなどの検索エンジンが推奨している「モバイルフレンドリー」に対応し、SEOの効果がある。
- 同じセレクタに対して条件分けの記述をする必要があるため、CSSが複雑になり、そのぶん重くなる。
- 文言や内容そのものを大きく変更することは出来ない。
→レスポンシブデザインを実装することによってPC版とモバイル版など複数ファイルを管理する必要がなくなる一方で、「表示するデザインが元のページに依存する」といったデメリットもありますが、このページでは2つめの方法を解説していきます。
SEO対策
検索エンジンのGoogleでは、WEBサイトのインデックス登録や検索順位にPCサイトではなくスマホサイトを基準に評価すると発表していますので、Webサイト作成時はスマホ対応を必ず実施しましょう。
スマホ対応ができているかの確認を行う時は、Googleの公式ツールである「モバイルフレンドリーテスト」を使用してみましょう。
モバイルファースト
スマートフォンなどでページを閲覧した時にユーザーにストレスを与えないような配慮をモバイルファーストと言います。
スマートフォンは画面が小さく、屋外や移動中に閲覧することが多いため、フォントが小さすぎると読みにくかったり、ボタンなどのクリックできる領域が小さすぎると指ではタップできなかったりととても見づらいサイトになってしまう可能性があります。
「スマートフォン向けサイトを優先的に制作・公開する」という意味で、モバイルファーストという言葉が使われることもありますが、必ずしもスマートフォン向けサイトを先に公開したりPCユーザーをないがしろにするという意味ではありません。
ユーザーの利用状況などの情報を元にWebサイトを設計し、スマートフォンでもストレスなく利用できるデザインにするということです。