人気ブログランキング | 話題のタグを見る

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


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

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

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

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


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

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

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

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



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

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

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

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

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

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

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

となります。

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


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

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

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

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

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

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

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

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

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


優先順位による選択

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

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

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

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

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

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

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

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

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

などの考えからです。



使用方法による選択

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

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

これは

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

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


機器の特性による選択

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

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

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

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

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



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


# 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 マップだけでもかなりの使い道があります。もちろんそれだけでなく他のアプリと連携させることで多様な使い道ができます。

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

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

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

それではこのくらいで。

# by chintaikanfc | 2015-10-11 18:40 | システム
概要
現在賃貸館サイトのスマートフォン版を準備中です。これから何回かにわけてスマートフォンサイトを作ることについて書きたいと思いますが、今回はアプリとサイトの違いについて説明しています。本格的でアクセスしやすいアプリと、手軽に利用できるサイトと思ってもらっていいと思います。

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



賃貸館サイトのスマートフォン版を準備中です

現在、賃貸館サイトのスマートフォン版を絶賛準備中です。

スマートフォンのことについてこれまでも結構書いてきました。
ですが、これまではあくまでもスマートフォンがどのように生活に浸透しているかについての影響のようなものでした。

さて今回からは、スマートフォンサイトを作ることと、その大変さについて書いてみたいと思います。

最初は簡単な説明から。



「アプリ」と「サイト」の違い

そもそも、「スマートフォン」というと、みなさん「アプリ」を思い出すのではないでしょうか。

「スマートフォン・アプリ」と「スマートフォン・サイト」の違いについてはご存知でしょうか。

実は、内容としてはあまり変わりません。
たとえば、GoogleマップやTwitterを利用するにも、専用のアプリとサイトの両方が用意されています。



簡単な違いの説明

その中での違いをまずは簡単に説明すると、

スマートフォン・アプリ
アプリストアからアプリをダウンロード、インストールして使う専用のプログラム(道具)

スマートフォン・ サイト
インターネットサイトを閲覧するブラウザ(iPhoneの場合は、Safari、Chromeなど)でサイトに移動しそこで利用するプログラム(道具)



アプリとサイトのメリット、デメリット

どちらも一長一短があります。
ただ、ユーザーからすればアプリのほうが便利でしょう。

スマートフォン・アプリ
メリット
・さっとアクセスできる
・更新通知が届く
・速度が早い
・開く時、悩まずに済む

デメリット
・作って更新し続けるのが大変
・わざわざ入れないといけない


スマートフォン・サイト
メリット
・一々アプリを入れる、更新する必要が無い
・気軽に試すことができる
・作る側にとって敷居が低い

デメリット
・今のところ速度がアプリに比べ遅い
・アクセスにアクションが2段階必要
・サイトによっては機能の制限がある
・更新通知が届かない



最後に
冒頭で、現在私はスマートフォン・サイトの準備にかかっていると書きました。

スマートフォンアプリを賃貸館で用意することを今回は選択しなかったことを意味します。これについては色々な事情があるのですが、簡単には現状作るのは問題がいくつかあるとだけお伝えしておきたいと思います。


さて、今回はこのくらいで。
冒頭に書きましたが、この話続きます。

次回以降はスマートフォン・サイトと現状のコンピュータ用のサイトとの違いについて書いてみたいと思います。




# by chintaikanfc | 2015-09-27 19:02 | システム
概要
ブログを期限に間に合わせるため、最近ではすぐ次の準備を始める、複数の話題を並行して書く、前倒しするなどの工夫を行うようになりました。

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

会社のブログを始めてみて大変だと思ったことがあります。そう締め切りです。

期限は特に決まってはいないのですが、今のところ大体2週間に1度と自分の中では考えています。

締切日当日に数時間かけて一気に書くということをしたり、その締め切りに間に合わずずいぶん遅れて公開したりしていました。

やっとのことで書き終えても、少しゆっくりしていると次の締め切りが目前に迫っていることに気づき、ああ面倒だなと感じたり、一気に数時間かけて書かないといけないことにかなりの負担を感じていました。

これは登校拒否をしたくなるときの心理状態とほぼ同じなのではないかと思います。

私の場合は題材探しで困ることはあまりないのですが、その代わりにどう書くかでいつも悩んでいるように思えます。

・話が膨らみすぎた
・話が複雑になりすぎた
・当初のアイデアから悩みすぎ解決できなくなった

など原因がありそうです。

これらの問題に関しては今のところよい解決策が見つかってはいないのですが、最近は気が楽になり比較的締め切りを守れるようになってきました。

何が原因かというと、

・書き終えてすぐ次のブログを考え始める
・一つに絞らず複数の話題を同時に進めていく
・前倒しで進めていく
・分量が多くなりそうなら分割する(やたら連載ものが多くなっているのはお気づきかと)
・気軽な内容も気にせず投稿する(今回などまさにそうです)

などを行うようになったということがあるかもしれません。
世の中のブロガーといわれる人達の中には一回のブログを30分以上かけないという方もいるようです。その人達と比べると明らかに私はまだまだ書くことに慣れていません。

つまり私はこれまで背伸びをしていたというか、ようやく慣れてきたというか、ブログを書くペースを少しだけ考えることができ始めたのかもしれません。

今回も箸休め的な内容で申し訳ないのですが、このくらいで。

# by chintaikanfc | 2015-09-13 16:06 | 社内
要約
麻のハンカチを以前紹介しましたが、はまってしまい数が増えています。触り心地のよさが大きな決め手です。

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

麻のハンカチにハマってしまいました_b0108953_17554997.jpg

お盆を過ぎて明らかに夏のピークが過ぎたのを感じ寝苦しくなることもなくなりました。

少し時期を外している話題なのですが、まだまだ終わらない夏、息抜きのつもりで書きたいと思います。


以前に麻のハンカチの話(「伝統をどのように売っていくか 」)を書いたことがありますが、その後結構はまってしまいハンカチを購入しようとすると麻のものばかり選んでしまっています。

どこがいいのか?については

・「シャリ感」のある触り心地がよい

が唯一にして最大の魅力です。

たったそれだけ?といわれそうですが、毎朝どれを持って行こうか?と考える際、どうしても麻を選ぼうとしています。

自分の中の流行りだから今だけ頻度が高くなってるともいえますが。

ほっておくとまだまだ増えてしまいそうです。

ただ今年の夏のように暑すぎてかく汗の量が尋常でない場合は、麻だろうと綿だろうとあまり変わりないのですが…。



それではこのくらいで。







# by chintaikanfc | 2015-08-28 08:40 | プライベート