1. ホーム
  2. コラム
  3. マルチデバイス対応時の画面設計におけるシンプルな考え方

マルチデバイス対応時の画面設計におけるシンプルな考え方

Webサイトの制作・運用の際、PCやスマートフォン・タブレットなど、『マルチデバイス対応』の話題がでてくることがあります。その際、決定すべき事柄が膨大になり頭を悩ませてしまう担当の方も多いかと思います。

今回のコラムでは、対象端末や配信方法選定など、いくつもある決定項目のうち、各デバイスごとの画面設計時にふと気付いたひとつの考え方を共有いたします。

マルチデバイス対応時の画面設計におけるシンプルな考え方1


各デバイスごとの要素比較

先に結論を言ってしまうと、マルチデバイス対応での画面設計は「ナビゲーションをどう配置するのか」という問題として集約することができる、ということになります。

下記の画像は、Webサイトの一般的な下層ページ(記事や製品ページなど)で の画面構成例です。

マルチデバイス対応時の画面設計におけるシンプルな考え方2

よくあるパターンとしてのおおまかな要素配置ですが、それぞれの要素に入るパーツを洗い出しているとあるひとつのことに気付きます。

マルチデバイス対応時の画面設計におけるシンプルな考え方3

そうです、ページの主役となるメインコンテンツ以外の要素に入るパーツは、主にナビゲーションの役割を持っている場合がほとんどなのです。


さまようナビゲーション問題

「コンテンツファースト」という言葉があるように、メインコンテンツとして入る内容はどのデバイスでも最も見やすい位置(主にヘッダー直下)にくることがはっきりしています。

そして、他の要素についてはなんらかのリンクが入る場合が多く、ナビゲーションとしての機能が少なからずあります。つまりマルチデバイス間での画面設計は、デバイスの違いによってどのようにナビゲーションを配置するのか、という「さまようナビゲーション問題」として捉えることができます。

あとはそれぞれのナビゲーションの役割と各デバイスごとのユーザーシナリオなどに沿って、実際のWebサイトでよく見られるような配置を参考に一つひとつ検討・決定していくことになります。


おわりに

マルチデバイス対応のみならず、Webサイトの構築はその担う役割の重さとともに複雑化しつつあり、細かい決定事項の積み重ねが必要になってきています。

そのような複雑になりがちな問題をできる限りシンプルに考えることで、打開策へのきっかけになることがあるのではないかと思い、今回は画面設計の際に気付いたことを文章にまとめてみました。
いつかどこかで役立つことがあれば幸いです。

■コラム執筆者

メンバーズ 第2ビジネスユニットアカウントサービス第8ユニット 木原慶仁

RSS