茨城県土浦市、あなたの広報・PR戦略室。ウェブ制作全般・ホームページ制作・映像制作・グラフィック制作ならヘレナメディアリサーチにおまかせ。

ウェブ制作

レスポンシブとモバイル対応

モバイルフレンドリーなウェブサイト制作

スマートフォンの普及に伴い、ウェブサイトの閲覧にスマホを利用するユーザーが増えいます。
アクセスの50%がスマホからといったウェブサイトも最近では少なくありません。
PCの画面サイズで設計されたウェブサイトをスマホで表示した場合、横幅がスマホ画面に収まるように縮小されてしまい、そのままでは文字を読むのが非常に困難です。読むためには、部分的に拡大しなければならず、ユーザビリティ的にあまりよくありません。

イメージ

 

拡大しなくても、そのままで文字が判読できるようにスマホ画面にあわせてウェブサイトを設計する必要がでてきました。そのように設計されていれば、下にスクロールことで読み進めることができるようになり、ユーザー負担の低減につながります。このように今、スマホで見やすいウェブサイトが求められています。

 

また検索サイト大手のGoogleも、スマホ表示に最適化されているWebページの制作を推奨しています。
「モバイルフレンドリー」という独自の基準を打ち出し、その基準に適合しているサイトの順位を優先すると発表しました。これまで検索結果の上位に表示されていたサイトも、この基準を満たしていなければ今後どんどん順位を下げてしまうことになるでしょう。

Googleモバイルフレンドリーの条件

携帯端末では一般的でないソフトウェア(Flash など)を使用していないこと

ズームしなくても判読できるテキストを使用していること

ユーザーが横にスクロールしたりズームしたりする必要がないよう、コンテンツのサイズが画面のサイズと一致していること

目的のリンクを簡単にタップできるよう、それぞれのリンクが十分に離れた状態で配置されていること

 

[引用]「検索ユーザーがモバイル フレンドリー ページを見つけやすくするために」〔Googleウェブマスター向け公式ブログ〕

 

レスポンシブウェブデザインという構築方法

 

スマホ画面に対応させるための構築方法はいくつか存在します。
そのひとつとして近年注目されている技術がレスポンシブウェブデザインです。
ひとつのHTMLファイルを画面幅に応じて変化させコンテンツの見え方を制御し、複数のデバイス(PCやスマホ)で見ても適切な文字サイズで表示させるという技術です。画面サイズを適切にするだけではなく、PC用とスマホ用に別々のファイルを作成しないことで、どのデバイスで閲覧しても同一URLで同じ内容が表示されます。これによってウェブページを共有する場合など、便利になるといったメリットもあります。

であれば、すべてのウェブサイトをレスポンシブにすればいいのでは?と思ってしまいがちですが、残念ながらそうもいきません。
取り入れるには様々なメリット・デメリットを考慮する必要があります。

 

メリット

1つのHTMLファイルを更新することで、すべてのデバイスに対応できる

同じ内容のページが複数存在しなくなり、検索エンジンに拾われやすくなる

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

各デバイスで表示されるURLが統一され、共有しやすくなる

動的なプログラムを使用することなく、静的なHTMLとCSSのみで構築できる

 

デメリット

PC版のみのサイトと比べて、制作・更新作業の時間が大幅にかかる

HTMLやCSSの構造が複雑になり、制作・更新作業に高いスキルが必要となる

一つのページを様々なデバイスのブラウザで確認するため検証に時間がかかる

画像を多く使用したり、1ページの容量が多い場合、スマホで表示させるのが難しくなる

表組、図表、掲載レイアウトは、スマホ表示を考慮し作成する必要がある

新規コンテンツを増設したり、ページのレイアウトを変更するのに多くの工数がかかる

スマホ表示上不要なファイルも読み込んでしまい、ページ容量が大きくなる

古いブラウザでは表示が崩れる

 

また、レスポンシブデザインではどれだけの画面サイズに対応させるかによっても制作コストに大きく影響します。
PCとスマホの2画面対応よりも、タブレットも含め3画面に対応させる方がはるかに作業時間は増加します。

 

CMSのプラグインによる構築方法

レスポンシブと似たような方法のひとつに、CMSなどのプログラムを使用し表示を切り替えるという方法があります。訪問してきたユーザーの端末情報を判断し表示を切り替えます。
1つのページ内容を、同一URLで複数のデバイスに対応させるという点でレスポンシブと同義ですが、画面の幅に応じた切り替えではなく、アクセスしてきた端末の情報で振り分けを行うところが大きな違いです。

 

単なるHTMLによるレスポンシブデザインよりこちらの方が優れいている点として、ヘッダーやフッター、グローバルナビゲーションやサイドバーといった共通部分を、PCとスマホで分けて表示できます。
そうすることで、スマホの表示では不要ファイルの読み込みを抑え容量を軽くしたり、表示位置や形をより柔軟に変更することができます。これはHTMLだけのレスポンシブデザインではできないことです。
コンテンツの中身については、PCとスマホで同じものを表示しますので、そこに関してはHTMLによるレスポンシブデザインと同じように各デバイでの表示のされ方を考慮した作り方が求められます。
デメリットとしては、ウェブサイトを構築するためにCMSなどのプログラムファイルを動かさなければならず、サーバーの構築やCMS用テンプレートの構築などより複雑な作業を必要とします。

 

スマホ専用サイト

スマホでの表示はスマホ専用ページを別に作成するという方法もあります。
この場合PCでの見え方を気にする必要が無いので、スマホ表示だけを考えて自由に作成できるというメリットがあります。一方で、URLが別になる、同じ内容のファイルを2つ更新する必要があるなどのデメリットが挙げられます。
この方法は、スマホ版はPC版より簡易的に表示させたい、逆にスマホ版の方をより魅力的に作りたいなど、スマホに特化してPCとの作り方が全く異なるサイトに向いていると言えます。

 

レスポンシブウェブデザインと向き不向き

いずれにしても一長一短がありますので、作成するサイトの特徴や運用・更新の方法など複合的に判断して、どの構築方法が適しているか見極めて制作することが大事です。
スマホからのアクセスをどれくらい見込んでいるのか、どこまでの対応を行うのかを先に考えてから制作に入るとよいでしょう。マルチデバイスに自動で簡単に対応できる方法はいまのところ存在しません。

向いているサイト

デザイン性より更新頻度や内容を重視している

デバイスごとにコンテンツの見せ方を大きく変えない

スマホから検索エンジンを利用してくるユーザーが多い

訪問するユーザーの割合から、マルチデバイス対応が必要である

古いPCブラウザへの対応は必要でない

 

 

スマホ専用を検討すべきサイト

PCサイトではよりデザイン性を重視した作りにしたい

スマホでのアクセスを最も重要としている

更新作業の手間は惜しまない

1ページのコンテンツ量が多い

PCサイトでは古いブラウザにも対応させたい