賃貸館FC本部、FC加盟店、お客様の交流の場として「情報共有」「意見交換」をして皆様にお役にたてる情報発信をしてまいります。


by chintaikanfc

<   2015年 10月 ( 2 )   > この月の画像一覧

概要
実際スマートフォンサイトを準備するのに行っていること、その中でも「画面サイズごとのサイトの内容、デザインの検討」についてお話します。さまざまな機器に同じ内容、デザインを出していいわけではない、ということを書いています。

情報システムの及川です。

賃貸館サイトのスマートフォン版の準備を絶賛行っているところです。

前回はスマートフォンについて、スマートフォンとコンピュータの違いをお話しました。今回からは現在私が賃貸館のスマートフォン用のサイトを準備するのに何を具体的にしているかについてお話ししようと思います。


スマートフォンサイトの準備に必要な工程

今回のスマートフォン案件で私は

・画面サイズごとの内容、デザインの検討
・現在のコンピュータ用サイトから変更点の洗い出し
・実際変更する作業
・それぞれの画面機器での検証作業
・公開

のような工程を行おうと思っています。



画面サイズごとの内容、レイアウト、デザインの検討

前にもお話しましたが、コンピュータ(デスクトップやノート)とタブレット、スマートフォンではそれぞれ

・画面サイズ
・通信量制限
・使用方法

などに違いがあり、同じものを提供することができません。

このことで内容、レイアウト、デザインで、それぞれ別のものを準備する必要があります。

どのように違いを出していくかについて考えていきますが、その基準は、

・共通して伝えたいことを決定する
・優先順位による選択
・使用方法による選択
・機器の特性による選択

となります。

それぞれについて説明していきたいと思います。


共通して伝えたいことを決定する

コンピュータ用のサイトには、空間が広く取れることもあり、様々な情報を組み込んでいます。

たとえばYahoo! Japanのサイトは、検索サイトと呼ばれることを考えると、検索バーや、カテゴリーで絞り込んでいくリンクだけあればいいことになりそうです。同じ検索サイトのGoogleではコンピュータ用サイトでも検索バーしかありません。ですが、Yahoo!にはそれ以外の様々なリンクが用意されています。

これは、このサイトのトップページにさえアクセスすればいろんなページに移動することができるというユーザーの安心感を表現したものと考えられます。

ですが、スマートフォン版では、ページ最上部のリンク以外の多くは省略されています。

つまり、スマートフォン版とコンピュータ版では、検索バーとメインとなるカテゴリーが共通して残したいもの表現したいもの、とYahoo!側はみなしていることになりそうです。

ここでお話したいのは、様々な機器によって表示できるものは変わりますが、共通して変わらず表示させたいものを検討する必要があるということです。

そして現在ではその最小の単位となるはずのスマートフォン中心に、もしくはこのように共通して伝えたい内容の最も中心になるものから、様々な機器の情報を検討しようという考えが主流になってきています。

前者をモバイルファースト、後者をコンテンツファーストと呼びます。


優先順位による選択

賃貸館のサイトのトップページに来ていただく場合、コンピュータとスマートフォンで全く同じ内容を提供すべきでしょうか。

これについては色んな考えがありますが、たとえば現在コンピュータ版では、各県エリアごとの地図を用意し、そこに各店の場所に店アイコンを配置しています。これを押してもらい、各店ページに移動してもらうことを想定しています。

ですがスマートフォン版では、これは適切に思えません。というのも横拡がりの地図を縦向きがメインなスマートフォンに配置したり、そもそも圧倒的にせまい画面に地図画像を置くのは、無理があると思えます。

ですので、今回スマートフォン用には、エリアごとの店舗リンクが下に伸縮するようなアコーディオン型のメニューを検討しています。

これが正解の方法というのかは正直なところ現時点では分かりません。視覚的にわかりやすい地図上のメニューの方がよいとも思えますが、それを提供するには無理がある環境では、何かを捨てることが必要になり、この案では直感的な分かりやすさを犠牲にしました。

表示順位についてもコンピュータとスマートフォンによって表示する順位を変える、そもそも表示させないという検討が必要になります。

たとえば現在コンピュータサイトでは2列レイアウトにしています。それを今回のスマートフォン版では右側サイドは左側サイドの下に表示させ、そこにある多くのデザインされたバナーリンクをテキストに変更したり、一部は表示させないことを検討しています。

というのも、これらバナーは

・表示ページのメインの内容でない
・すべてを表示させるにはあまりにもスクロール操作が発生する

などの考えからです。



使用方法による選択

たとえば、コンピュータ用サイトに掲載している賃貸物件情報を、スマートフォンではばっさり掲載しないということを選択することもありえます。

これは、賃貸物件情報をスマートフォンで見るユーザーはいないことはないにしても、スーモやホームズといったポータルサイトでさんざん見てきているだろうから、自社サイトでは物件を用意することはあまり意味が無い。それよりも店舗に関する地図や詳細なアクセス情報やネット上でもスタッフを信頼していただくため、人となりについてのページを充実させる、という判断がなされた場合です。

これは

・スマートフォンの機器の特性
・ウェブ上での賃貸サイト全般での自社サイトの立場

を踏まえた判断であるといえます。実際ここまで極端な例は少ないかもしれませんが、それでもスマートフォン用ページを準備することが大変であることなどの効率的な理由でもこうした選択がなされる可能性があります。


機器の特性による選択

以前に述べたように、機器ごとの特性があり、それによってデザインやレイアウトにも影響があります。

たとえば、スマートフォンは

・外で使用されることが多く通信速度や容量の制限がある
・画面サイズがコンピュータに比べ大幅に小さい
・使用目的がはっきりしているため閲覧に効率的なデザインが望まれる
・小さすぎるといいわけでなく指でボタン操作を行える大きさが望まれる

などの特性があります。
このことで、画像による華美で複雑なデザインをしないことが主流になっています。

これまでのコンピュータ用のデザインはほとんどの場所で画像を使用しできるだけインパクトを求めるサイトも多く作られてきましたが、上記のことからシンプルで素早く表示でき操作しやすいデザインが望まれるようになっています。



最初の項目だけで大分長くなってしまいました。
今回はこのくらいで。


[PR]
by chintaikanfc | 2015-10-25 16:56 | システム
概要
今回はスマートフォンとコンピュータの性質の違いについて説明します。画面の大きさ、画面と目の距離、マウスのかわりに指を使う、通信量の制限、使われ方の違い、など色々と違いがあります。

情報システムの及川です。

前回はスマートフォンについて、アプリとウェブサイトの違いについてお話ししました。

さて今回はスマートフォンとコンピュータの違いについてお話したいと思います。

スマートフォンの特徴

スマートフォンの特徴は、

・画面が小さい
・タッチジェスチャー操作
・画面と目の距離の近さ
・回線速度と通信量の制限
・使われ方や場所の違い

などになると言われます。

それぞれについてコンピュータと比較してみたいと思います。


画面が小さい

コンピュータ 23インチ
・約60cm
・デスクトップの現在一般的なサイズのもの
・肩幅よりもまだ広いくらいのサイズ

スマートフォン 5インチ
・約12cm
・手のひらサイズ(縦向きにした場合)

見て分かるように4倍以上の違いがあります。当然ここで一度に表示できる内容も大きな違いがあります。

スクロールで全てを表示することは可能ですが、一度に表示されたもの以外は興味あるものでないとスマートフォンでは見てもらえない可能性が高くなります。

ですのでコンピュータとスマートフォン(タブレットも)では何を優先して表示させるのかの検討がそれぞれ必要になります。


タッチジェスチャー操作

コンピュータでは画面の操作をキーボードとマウスを使って行いました。スマートフォンでもキーボードは使いますが、画面のある部分を選択したりする場合、マウスは使わずそれに該当する操作は指で直接画面を触る(タッチジェスチャー)ことで行います。

・タップ(軽く叩く)
・フリック(払う)
・ロングプレス(長押し)
・スクロール
・ピンチ(2本指でつまむ)

などの操作があります。


画面と目の距離の近さ

画面と目との距離を視聴距離というそうですが、機器ごとにこの距離は違います。

機器の種類ごとの一般的な視聴距離と目安の文字サイズ
・スマートフォン 20cm~25cm 12px~ (12pxはスマートフォンでも少し小さい?
・タブレット(768px~) 25cm~30cm 14px~
・デスクトップ(1024px~) 40cm~50cm 16px~
・テレビ(1920px~46インチ) 170cm 70px~

このようにコンピュータとスマートフォンではほぼ倍の視聴距離があります。

スマートフォン用に作られたサイトはコンピュータより少し小さな文字サイズが適切な大きさになります。視聴距離が半分程度に近いためそれほど大きくなくとも十分だからです。

ところで、現在のスマートフォンのブラウザでスマートフォン用に作られていないサイトは、全体の幅が入るように表示されます。皆さんよくご経験されているのではないでしょうか。そのため非常に小さくなってしまいます。

これも画面のどこかをタップ(軽く叩く操作)することで拡大されるので小さくて見れないことはありません。ただやはりいちいちそうした操作をしなければならないことは、見る側には少しずつストレスになるはずです。このこともあってか、Googleがスマートフォン用サイトを準備していないサイトはスマートフォンでの検索順位を下げると謳っています。弊社も一刻も早く対応が求められるわけです。


回線速度と通信量の制限

スマートフォンで利用している回線には利用通信量の制限があります。
また、自宅で光回線などを利用するコンピュータの回線速度にもかなり近づいてきていますが、実際にはまだ劣っています。

スマートフォンを一般的に使う場合を想定して、スマートフォン用ページのデータサイズはできるだけ軽くしようと言われています。

このことで何が起こるかですが、デザインがシンプルなものになっています。

コンピュータ用サイトの見た目は、もともとDTP(印刷)デザインから大きく影響を受けていることもあり、華美なデザインを実現することが求められてきました。例えばボタンや見出しリストの点、背景画像などにです。そのために画像でそうした素材を用意し、テキストだけのページに組み込むことをしてきたのですが、当然これはページサイズを大きくすることでもありました。

スマートフォンでは、通信量制限と上でお話したようにそもそもそうした華美なデザインを載せる場所自体がそもそも少ないことも手伝い、画像を極力使わずにデザインすることが主流になってきています。


使われ方や場所の違い

身体についていくコンピュータ
以前のブログにも書いたように、コンピュータは机に座り、調べ物をするといった明確な目的を持って利用することが多く求められています。ですがスマートフォンは自分の動く場所に持っていくことができ、万能ではないものの、使い方は以下のようにその場で求められる様々なものに拡大されます。

・GPS機能による現在位置を利用した行為
・写真・動画撮影・テキスト作成とその場からの生々しい情報共有

コンピュータとスマートフォンの連携
また、コンピュータやスマートフォンを別の存在とみなすのでなく、場所や状況でそれぞれを使い分ける方法も出てきています。例えば、地図サイトやアプリとして有名なGoogleマップの場合を考えてみます。

自宅でコンピュータを使うときは、

・旅行先がどこにあるのか
・どのように移動手段があるのか
・どんな景観やランドマークがあるのか

などじっくりした調べ物に使用するでしょう。

調べた内容はマイマップとして保存することもできます。

外出先では、

・最寄駅から目的地までナビ
・保存したマイマップから周辺エリアの散策
・周辺にグルメな店がないか検索

その場での必要な情報をGoogle マップだけでもかなりの使い道があります。もちろんそれだけでなく他のアプリと連携させることで多様な使い道ができます。

このことで、コンピュータ用サイトのデザインだけでなく内容そのものも、全く同じにする必要がない、あるいは同じにすると不便になるという状況が出てきており、それぞれ別の内容をきちんと把握した上で、提供する必要がでてきています。

長くなりましたが、今回はスマートフォンとコンピュータの違いについて説明してみました。

来週はどうなることやら。

それではこのくらいで。

[PR]
by chintaikanfc | 2015-10-11 18:40 | システム