概要
実際スマートフォンサイトを準備するのに行っていること、その中でも「画面サイズごとのサイトの内容、デザインの検討」についてお話します。さまざまな機器に同じ内容、デザインを出していいわけではない、ということを書いています。
情報システムの及川です。
賃貸館サイトのスマートフォン版の準備を絶賛行っているところです。
前回はスマートフォンについて、スマートフォンとコンピュータの違いをお話しました。今回からは現在私が賃貸館のスマートフォン用のサイトを準備するのに何を具体的にしているかについてお話ししようと思います。
スマートフォンサイトの準備に必要な工程
今回のスマートフォン案件で私は
・画面サイズごとの内容、デザインの検討
・現在のコンピュータ用サイトから変更点の洗い出し
・実際変更する作業
・それぞれの画面機器での検証作業
・公開
のような工程を行おうと思っています。
画面サイズごとの内容、レイアウト、デザインの検討
前にもお話しましたが、コンピュータ(デスクトップやノート)とタブレット、スマートフォンではそれぞれ
・画面サイズ
・通信量制限
・使用方法
などに違いがあり、同じものを提供することができません。
このことで内容、レイアウト、デザインで、それぞれ別のものを準備する必要があります。
どのように違いを出していくかについて考えていきますが、その基準は、
・共通して伝えたいことを決定する
・優先順位による選択
・使用方法による選択
・機器の特性による選択
となります。
それぞれについて説明していきたいと思います。
共通して伝えたいことを決定する
コンピュータ用のサイトには、空間が広く取れることもあり、様々な情報を組み込んでいます。
たとえばYahoo! Japanのサイトは、検索サイトと呼ばれることを考えると、検索バーや、カテゴリーで絞り込んでいくリンクだけあればいいことになりそうです。同じ検索サイトのGoogleではコンピュータ用サイトでも検索バーしかありません。ですが、Yahoo!にはそれ以外の様々なリンクが用意されています。
これは、このサイトのトップページにさえアクセスすればいろんなページに移動することができるというユーザーの安心感を表現したものと考えられます。
ですが、スマートフォン版では、ページ最上部のリンク以外の多くは省略されています。
つまり、スマートフォン版とコンピュータ版では、検索バーとメインとなるカテゴリーが共通して残したいもの表現したいもの、とYahoo!側はみなしていることになりそうです。
ここでお話したいのは、様々な機器によって表示できるものは変わりますが、共通して変わらず表示させたいものを検討する必要があるということです。
そして現在ではその最小の単位となるはずのスマートフォン中心に、もしくはこのように共通して伝えたい内容の最も中心になるものから、様々な機器の情報を検討しようという考えが主流になってきています。
前者をモバイルファースト、後者をコンテンツファーストと呼びます。
優先順位による選択
賃貸館のサイトのトップページに来ていただく場合、コンピュータとスマートフォンで全く同じ内容を提供すべきでしょうか。
これについては色んな考えがありますが、たとえば現在コンピュータ版では、各県エリアごとの地図を用意し、そこに各店の場所に店アイコンを配置しています。これを押してもらい、各店ページに移動してもらうことを想定しています。
ですがスマートフォン版では、これは適切に思えません。というのも横拡がりの地図を縦向きがメインなスマートフォンに配置したり、そもそも圧倒的にせまい画面に地図画像を置くのは、無理があると思えます。
ですので、今回スマートフォン用には、エリアごとの店舗リンクが下に伸縮するようなアコーディオン型のメニューを検討しています。
これが正解の方法というのかは正直なところ現時点では分かりません。視覚的にわかりやすい地図上のメニューの方がよいとも思えますが、それを提供するには無理がある環境では、何かを捨てることが必要になり、この案では直感的な分かりやすさを犠牲にしました。
表示順位についてもコンピュータとスマートフォンによって表示する順位を変える、そもそも表示させないという検討が必要になります。
たとえば現在コンピュータサイトでは2列レイアウトにしています。それを今回のスマートフォン版では右側サイドは左側サイドの下に表示させ、そこにある多くのデザインされたバナーリンクをテキストに変更したり、一部は表示させないことを検討しています。
というのも、これらバナーは
・表示ページのメインの内容でない
・すべてを表示させるにはあまりにもスクロール操作が発生する
などの考えからです。
使用方法による選択
たとえば、コンピュータ用サイトに掲載している賃貸物件情報を、スマートフォンではばっさり掲載しないということを選択することもありえます。
これは、賃貸物件情報をスマートフォンで見るユーザーはいないことはないにしても、スーモやホームズといったポータルサイトでさんざん見てきているだろうから、自社サイトでは物件を用意することはあまり意味が無い。それよりも店舗に関する地図や詳細なアクセス情報やネット上でもスタッフを信頼していただくため、人となりについてのページを充実させる、という判断がなされた場合です。
これは
・スマートフォンの機器の特性
・ウェブ上での賃貸サイト全般での自社サイトの立場
を踏まえた判断であるといえます。実際ここまで極端な例は少ないかもしれませんが、それでもスマートフォン用ページを準備することが大変であることなどの効率的な理由でもこうした選択がなされる可能性があります。
機器の特性による選択
以前に述べたように、機器ごとの特性があり、それによってデザインやレイアウトにも影響があります。
たとえば、スマートフォンは
・外で使用されることが多く通信速度や容量の制限がある
・画面サイズがコンピュータに比べ大幅に小さい
・使用目的がはっきりしているため閲覧に効率的なデザインが望まれる
・小さすぎるといいわけでなく指でボタン操作を行える大きさが望まれる
などの特性があります。
このことで、画像による華美で複雑なデザインをしないことが主流になっています。
これまでのコンピュータ用のデザインはほとんどの場所で画像を使用しできるだけインパクトを求めるサイトも多く作られてきましたが、上記のことからシンプルで素早く表示でき操作しやすいデザインが望まれるようになっています。
最初の項目だけで大分長くなってしまいました。
今回はこのくらいで。
#
by chintaikanfc
| 2015-10-25 16:56
| システム