モバイル対応の必要性と実現方法

訪問者の半数以上がスマートフォンというWebサイトが多くなってきました。 MacやPCを使用してWebサイト制作をしていると、デスクトップで確認することが多くなり、ついついモバイル版のことを忘れがちです。 プロジェクトの後半になって「ところでスマートフォンで見た時なのですが…」と指摘されないよう、最初からヒアリングをしておきましょう。

モバイルレイアウトは必要か

大半のウェブサイトはモバイル版の表示が必須と思っていて間違いないですが、例外もあります。 業務用システムのWebアプリケーションなどが良い例です。

業務用に使われるシステムは、大量の情報量を表示することが多く、そもそもモバイルでの利用を想定されていないこともあります。 また、セキュリティの観点から、オフィスのPCからのみにアクセスを限定しているWebサイトもあります。 良かれと思ってモバイル版を制作しても、使われないのでは余計な費用を請求することになってしまいますので、不要であればタスクリストからバッサリと落としてしまいましょう。

モバイルレイアウトの実現方法

モバイル版レウアウトを作成する場合、実現方法は大きくわけて2つあります。 「モバイル専用レイアウト」と「レスポンシブレイアウト」です。 下記に2つの特徴を説明していきます。

モバイル専用レイアウト

スマートフォン、タブレット、デスクトップの3つのデバイス用に専用のデザイン及びマークアップを用意する方法です。 デザインの雰囲気は共通にしますが、細かな要素の配置は個別に変更され、それによってHTML&CSSのコーディングもカスタマイズする必要があります。 3種類のデザインとマークアップを用意する必要があるため、時間と費用がかかりますが、それぞれに最適化されたレイアウトが可能です。

また、どのレイアウトを表示するかを判断するためのプログラムを組み込む必要があります。 通常は、スクリーンサイズやユーザーエージェントと呼ばれるデバイスをおおよそ判定できる文字列などを利用してレイアウトを切り替えます。

レスポンシブレイアウト

スマートフォンかデスクトップ、何れかを基準にして、その他のレイアウトを1つのコードで実現してしまう方法です。 各要素が伸び縮みするように設定し、スクリーンサイズが変更されると、 それに応じてレイアウトも動的に変更されるようなHTMLとCSSを記述していきます。

1種類のマークアップで完結するので、時間と費用を圧縮できますが、レスポンシブレイアウトのテクニックを習得しておく必要があります。 また、1種類のコードですべてのデバイスに対応しようとするため、時にはレイアウトを妥協する必要があり、必ずしもデバイス最適化と言えない場合もあります。 完全な最適化はできないかもしれませんが、必要十分なデザインとレイアウトが実現可能ですので、個人的にはこちらを選択するケースが圧倒的に多いです。

そして、レスポンシブレイアウトを採用しているCSSフレームワークが数多く存在します。 最も有名なフレームワークは Bootstrap で、最小限の工数でレスポンシブレイアウトを実現するデファクトスタンダードとなっています。

もちろん、シンプルなWebサイトであれば、フレームワークを導入するまでもなく、自分でレスポンシブレイアウトを実現することができます。Webデザイン初学者は、まずフレームワークに頼らずコーディングを学習し、受注案件など、効率を必要とする場合にフレームワークを積極的に利用していきましょう。

---

このように「モバイル専用レイアウト」と「レスポンシブレイアウト」では大きな違いがあります。 実現方法に関しては、クライアントが判断するのが難しいところです。 パーフェクトなレイアウトが求められるケースでは「モバイル専用レイアウト」を、 なるべくコストを抑え効率的に進めたいプロジェクトでは「レスポンシブレイアウト」を採用する方向に持っていくと良いのではないでしょうか。