テーマ別事例

  1. HOME
  2. テーマ別事例
  3. ウェブサイト設計におけるモバイル対応へのアプローチ

ウェブサイト設計におけるモバイル対応へのアプローチ

既出のモバイルでの閲覧比率の事例のとおり、2018年7月の時点でウェブサイトのモバイル対応は業種・業界を問わず必須ともいえる要件になっています。

多様なウェブサイトのモバイル対応

ここ数年で標準的になったレスポンシブウェブデザイン以外にも、ウェブサイトのモバイル対応にはいくつか方法があり、それぞれメリットとデメリットがあります。

  1. レスポンシブウェブデザイン
  2. 独立したモバイル版ウェブサイトを構築
  3. ツール・サービスを使いモバイル向けに自動変換
  4. CMSの機能を使いモバイル版を表示切り替え

1.レスポンシブウェブデザイン

全てを作り変えるなら、迷わずレスポンシブウェブデザイン
ウェブサイトの新規立ち上げやフルリニューアル等の業務ですべてを作り変える場合において、当社(弊社)ではレスポンシブウェブデザインが最適な設計方法とおすすめをしています。
レスポンシブウェブデザインはURLやHTMLソースコードが一元化できるほか、画面幅による表示の切り替えのため、新しいサイズの端末が登場しても柔軟に対応できるメリットがあります。また検索エンジンとの親和性も高く、Googleも推奨しています。

2.独立したモバイル版ウェブサイトを構築

リニューアルの必要は分かっているものの、局所的にモバイル対応したい
すでにウェブサイトを公開済みで、今すぐフルリニューアルの必要性を感じていない。とはいえ早急にモバイル対応はしておきたい、そういった考えをお持ちの場合は、現サイトとは別にモバイル版ウェブサイトを持つことも選択肢に入ります。

レスポンシブウェブデザインはサイト全体に実施する点ではメリットとなりますが、部分的な実施には不向きです。たとえば「新卒採用にはスマホ閲覧時に適したリクルートページが必要」、「営業向けに製品ページをモバイル・タブレット対応したい」といった課題に対しては対象ページのみをモバイル対応とすることで費用や期間を抑えることが可能です。

3.ツール・サービスを使いモバイル向けに自動変換

モバイル対応の保守・運用コストを抑える
レスポンシブ・ウェブデザインでは、ある程度のパターンは想定しておくものの、運用を始めてみると例外・想定外の不具合が少なくありません。実際にレスポンシブウェブデザインを公開後「新規ページ作成時にモバイル端末で表示をもっと良くしたい」という相談がありました。CSSやHTML、さらにCMSの改修に範囲が及ぶ可能性が想定でき、社内のウェブ担当者の手に負えない可能性が高くなります。結果的に、外部の制作会社への依頼することを考えると別途費用が発生します。

こういったケースでは、月額コストやカスタマイズに制約はあるものの、ツール・サービスを使いモバイル向けに自動変換を使えば、管理画面等で容易に調整することが可能です。ただし、国内外の自動変換サービスは数多く存在するので、価格や機能などを慎重に比較、検討の上、選ぶ必要があります。

4.CMSの機能を使いモバイル版を表示切り替え

条件がそろえば導入障壁の低いCMSによるモバイル対応
ビー・オー・スタジオで導入実績のあるCMSの多くがモバイルに向けた機能を有しています。すでにCMSを導入済みのウェブサイトであれば、必要に応じてモバイル対応が可能です。ソースコードやURLの一元化というレスポンシブウェブデザインのメリットと、局所的な改修ができる独立したモバイル対応のメリットのどちらも享受できる可能性もあるため、導入済みのシステムに実装できることを模索してみましょう。

日々進化するウェブサイトのモバイル対応

iPhoneやAndroid等、モバイル端末は数カ月のサイクルで新機種が発売され、ブラウザ以外にもアプリや音声認識など短いスパンで次々に新機能が付加されています。常に最先端を追わずとも、ターゲットユーザーがどのような手順でウェブサイトに訪れるかを把握することで、成果を上げる可能性はより高まるでしょう。

テクノロジーよりも体験(モバイルエクスペリエンス)を視点に

デザイン上では問題がないものの、見落としがちなこととして表示速度の最適化があります。検証がPC版でしか行われず、実際に公開してみると、表示速度に時間がかかる、3Gでサクサク動かないといった画面では見えないトラブルについて相談を受け、ビー・オー・スタジオで改修作業に着手したことも少なくありません。

ウェブサイトの情報は、デスクトップ、タブレット、モバイル、その他あらゆるフォーマットで取得できることを考慮することで思わぬ発見ができます。モバイル対応で何を優先して成し遂げたいか広い視点から見定め、取り掛かりましょう。

SNS解析ツールNapoleonCat

テーマ別事例トップに戻る

お問い合わせ・ご相談はこちらcontact@bostudio.co.jp