タグ別アーカイブ: スマホ

Webサイトのユーザビリティについて、もっと真剣に考えてみよう

Webサイトのユーザビリティについて、もっと真剣に考えてみよう

ユーザービリティという言葉を辞書でひくと、使いやすい、有用であることと出てくる。
Webサイトという言葉とセットもののにように出てくるキーワードだが、毎日さまざまなサイトを見ていて「これは見やすいなー。すごいなー」と思えるサイトに出会うことはそれほど多くない。
自分たちへの反省もこめて、Webサイトのユーザービリティを追求するためにはどう考えるべきかについて、真剣に考えてみようと思う。

ユーザビリティの高いWebサイト。それはサービスの行き届いたレストランのようなもの

ユーザビリティの高いWebサイト。それはサービスの行き届いたレストランのようなもの

まずは、あなたが今までに行ったレストランのなかで、一番思い出に残っているお店を思い出してほしい。一流ホテルのフレンチレストランか、もしくは小さくても満足度の高いお店もある。

たいていの場合、思い出に残るレストランというのは、料理の味はもちろん、サービスにおいてもすぐれている。たとえば、テーブルについてメニューが運ばれてくるタイミング。その際のスタッフの会話力。水をついでくれたグラスの口あたりの良さ。料理が運ばれてくるタイミング・・・。
お客である私たちは、年齢や社会的地位などに関係なく、紳士淑女のように扱われることでとても心地よい時間を過ごしたはずである。

Webサイトのユーザービリティも、同じようなホスピタリティが必要なのだと思う。ご存知のとおり、Webサイトは仕組みから考えれば、自動販売機のようなもの。セルフサービスで好きなように見てくださいというスタンスではあるが、そこに心配りや人の存在感を添えることはいくらでもできるはずだ。
訪問者が、自分は大切に扱われた、このサイトを見て助かったと思うことができれば、それがまさにユーザビリティではないだろうか。

スマホ所有率79.4%※のいま、ユーザビリティはWebサイトの力強い武器である

スマホ所有率79.4%※のいま、ユーザビリティはWebサイトの力強い武器である

そして、最近のスマホ普及率はすごい。そのためスマホやタブレットで見ても、そのサイズに合わせて表示されるレスポンシブデザインが主流になってきたが、スマホでのページ閲覧率はパソコンよりもかなり低くい。一人あたり平均約3ページビューと言われている。

ということは、最初に開いたページを省くと、2クリックする間に欲しい情報が見つからなければアウト。
ユーザビリティの悪いサイト、自分にとってメリットがなさそうなサイトは、さっさとサヨナラされてしまうのだ。制作している側としては悲しいけれど、現実は現実。そのなかで、どれだけ見てもらえるか、お客さまの要望に応えられるかが勝負である。
※メディア環境研究所による「メディア定点調査2018」より
※ページビュー数とは、Webサイト内でページが開かれた回数

Webサイトのユーザビリティを上げるために、忘れてはいけないこと

それでは、どのようにユーザビリティを高めていけばよいのか。必要な視点をご紹介しよう。

サイトのメインターゲットになりきる

もしかしたら、一番むずかしいポイントかもしれないが、絶対必要な視点である。
今作ろうとしているコンテンツを一番見に来てほしい人は、どんな人なのか。何のために、どんなシチュエーションで、どのようにWebサイトを訪問しているのか?徹底的にその人の気持ちになってみることが必要だ。筆者もつねに悶々としているのだが、ここの詰めが甘いと失敗する可能性が高い。

ペルソナ(メインターゲットの詳細なプロフィール)を設定する方法は一般的になってきたが、たいていの場合は中途半端に終わっている気がする。企画段階ではペルソナを入念に考えていても、制作段階において、その人たちがこのページを見たときにどんな気持ちになるか、何を見せてほしいのか、までは詰め切れていないことが多い。

だから、徹底的に「その人」になり切ってみる。ターゲットを決めたら、それ以外の人のことは一旦無視しよう。「もしかしたら、こんな人も見にくるかもしれない・・・」と真剣に考え出すと、コンテンツの内容や並べ方、ボタンの文言などにもどんどん迷いが生じてしまうからだ。

ストーリーは流れているか?

ストーリーは流れているか?

メインターゲットの気持ちになれたら、次はその人がサイト内をどのように動くか、何を見たいかというストーリーを作る。
たとえば、コーヒーカップのオンラインショップであれば、どんなふうに商品を紹介してあげれば読みやすいか。多分、商品の写真を最初に見たいだろうが、それはどのくらいの大きさが一番よいのか。スマホ画面いっぱい?その半分くらい?商品の名前はどの位置にどのくらいの大きさがよいか。カートボタンは、どこにあれば押しやすいのか・・・。

考えることはたくさんあって、だんだん分からなくなる。そんなときは、街にあるコーヒーカップ屋さんのおばちゃんとお客さんを演じてみることをお勧めする。
お客「すいません、コーヒーカップを探しているんですが」
おばちゃん「はいはい、お家で使わはるの?」(大阪のおばちゃんなので関西弁)
お客「いえ、会社で」
おばちゃん「会社用やね。たっぷり入ったほうがいいんかな?」
お客「そうですね。あと、できるだけ冷めにくいほうがいいな。」
おばちゃん「これなんかオススメやけど、お客さんは手が大きいから持ち手もいい感じかも。結構人気なのよ。この間もね・・・」

こんなに会話が弾むかどうかは別として、お客さんがまず知りたいこと、どんな疑問が頭のなかにわいてくるのかをストーリーで考えてみると、必要な要素と不要なもの。その見せ方の順番、優先順位がはっきりしてくる。

不要なものは省く。Webサイトにも断捨離が必要

不要なものは省く。Webサイトにも断捨離が必要

そうやって考えていくうちに、情報はだんだん整理されてくるはずだ。さっきの会話もお客さんにとっては、できるだけシンプルなほうがありがたいはず。多少のお喋りは楽しいものの、コーヒーカップ一つ買うだけで10分も店のおばちゃんと話したい人は稀だろう。
ましてや、買うつもりもないカレー皿やワイングラスのことまで宣伝されたら、すぐにお店を出たくなるかもしれない。

写真、コピー、リンクボタンなどさまざまな情報は、必要なときに必要な場所にあれば、その価値は非常に高くなり感動さえ与えられるが、不要なときには単に邪魔なだけとなってしまう。そこには、文字の書体や大きさ、色使いなども含まれる。
Webサイト訪問者が必要とする情報を、必要なタイミングで提供すること。そのためには、まず不要なものから省いていくのも一つの方法だろう。

訪問者に、一呼吸つかせてあげよう

最後に、もうひとつ。余白があたえる意味の大きさも大切にしたい。
フランス料理のフルコース途中で出てくるシャーベットは、メインとなるメニューの間に、口のなかをさっぱりさせて次の料理を楽しんでもらうためにある。Webサイトでも、そんな一呼吸つける空白を置くことで、ちょっと落ち着いて考えられるようになる。

よく考えて作られているWebサイトを見てみると、この余白の使い方がとても上手である。情報をたっぷりと詰め込むのではなく、ちょっとしたスペースを設けることで訪問者は頭の整理がしやすくなる。デザイン的にも、余白があることでメリハリがつき、目立たせたい情報がぐっと際立ってくるものだ。

ユーザビリティの高いWebサイトは、必ずリピーターを生む

ユーザビリティの高いWebサイトは、必ずリピーターを生む

私たちが居心地のよいレストランについ足を運んでしまうように、Webサイトも同様のことが言える。とくにオンラインショップはその傾向が強い。それほど値段が変わらないなら、自分の買い慣れたサイトで買っておこうと考える人は多いのではないだろうか。ユーザビリティは、オンラインショップの売り上げやサイトのアクセス数に大きく影響するのだ。

それならば、私たちはもっともっと真剣にWebサイトのユーザビリティについて考えるべきだろう。新しいページをどんどん作って訪問者を飽きさせないことも大切だが、その前にいったん足を止めて、このサイトは本当にユーザーが使いやすいか見やすいかを見返してみよう。

長く愛されているレストランに共通しているのは、お客さまをうんと喜ばせたいというホスピタリティが原動力になっていること。Webサイトを制作する私たちも、そんな謙虚な姿勢でもう一度考え直してみる必要がありそうだ。

レスポンシブWEBデザインが、担当者の心をとらえる理由

レスポンシブWEBデザインが、担当者の心をとらえる理由

スマホの普及率があっという間に高くなり、今や高齢者さえiPhoneを使いこなしているほどになっている。

新しいデバイスの普及率の高さは、新デバイスへの対応が企業担当者の悩みになることも意味する。
つまり、コンシューマーがターゲットの担当者ばかりでなく、B2B企業にとってもWEBサイトのスマホ率の上昇をアナリティクスで目にするたびに、「スマホ化」の4文字が頭をよぎるようになってきたということだ。

今回の記事では、今話題のレスポンシブWEBデザイン(「レスポンシブル」と言う人が時々いるが、「ル」は要らない。「レスポンシブ(responsive)」は反応が良いという意味)について、初級者を対象に「なぜレスポンシブWEBデザインが、多くの企業担当者の心をとらえるのか」を、実際に自社サイトのレスポンシブWEBデザイン化に踏み切った担当者の声をまじえて解き明かしていきたい。

あなたがもし、スマホ対応に迫られている、もしくは検討中なら、きっと何らかの答えが見つかるはずだ。

レスポンシブWEBデザイン、スマホ専用デザインとは?

レスポンシブWEBデザイン、スマホ専用デザインとは?

レスポンシブWEBデザイン
ひとつのソース(HTMLファイル)で、ユーザーがWEBサイトを閲覧する端末(PC、タブレット、スマホ)に合わせて、デザインを最適化させるフォーマットのこと。
 
たとえば、PCで閲覧する場合は1,000pxなどの幅広画面に対応したデザイン。スマホなら640pxの幅が狭いデザインというように、自動的にデザインが切り替わる。
 
スマホ専用デザイン
あらかじめPC用とスマホ用、それぞれにデザインした2つのHTMLファイルを用意しておき、WEBサーバーが閲覧者の環境を判断し、PCでのアクセスならPC用のHTMLファイル、スマホでのアクセスならスマホ用のHTMLファイルを表示させる。
 

レスポンシブWEBデザインは、パソコン上でブラウザの表示幅を狭くしていくと分かる。ブラウザをある幅まで縮めると、自動的にデザインが切り替わるのが、レスポンシブWEBデザイン。ブラウザの幅を縮めるとスクロールバーが表示されれば、レスポンシブWEBデザインではない。スマホ専用サイトを持っているかどうかは、イミューレーターでアクセスするか、スマホでアクセスして判断するしかない。

レスポンシブWEBデザインのメリット・デメリット

レスポンシブWEBデザインのメリット

メリット

開発費用が抑えられる

WEBサイトを完全にスマホ対応するということは、

(1)WEBサイトの全体構成
(2)各ページの構成
(3)デザイン
(4)HTMLコーディング
(5)システム

を2種類つくることになる。開発コストが2倍になるわけだ。

これに対し、レスポンシブWEBデザインを選択すれば、(1)WEBサイトの全体構成、(2)各ページの構成のコストを抑えることができる。

運用コストがかからない

レスポンシブWEBデザインは、ひとつのソース(HTMLファイル)で管理しているので、更新・修正は1ファイルに手を加えるだけで済む。修正箇所が少ないということは、片方だけ修正し忘れるといった間違い(=情報の不統一)も圧倒的に少なくなる。

SEO的に恩恵が大きい

Googleは、「コピーコンテンツ」を極端に嫌う。

「製品A」のPC用ページとスマホ用ページの内容がほぼ同じであれば、コピーコンテンツと捉えられ、どちらか一方のページをオリジナルと判断、オリジナルしかインデックスしない可能性があるのだ。

ワンソース(ひとつのHTMLファイル)で管理されていれば、PC用かスマホ用、どちらか一方がネット上から理不尽に葬られることもなくなるので、SEO的にも恩恵があることを意味する。

http://googleWEBmastercentral-ja.blogspot.jp/2012/06/google.html

デメリット

レスポンシブWEBデザインのデメリット

画像の使い方に工夫が必要

同じソースであるということは、画像化した文字や写真を共有するのが基本だ。

ただ、まったく画面サイズの異なるPCとスマホでは、画像の拡大縮小には限度がある。たとえばPC画面では十分に読み取れる画像文字をスマホ用に縮小すると、視認できないほど小さくなってしまうことがあるからだ。

これを回避するには、PC用の画像とスマホ用の画像2つを用意することになるのだが、多用しすぎると、HTMLの構造が複雑になったり、ファイルの読み込み速度が遅くなったりしてしまう。

こういった理由から、文字はできるだけテキストにした、シンプルなデザインにという傾向になる。

PC・スマホのどちらにも完璧なデザインにはならない

レスポンシブWEBデザインは、アクセスの主流となっている端末に基準をおいて、情報要素を配置したり、デザインを行うことがほとんどだ。ただどちらかに軸足を置くと、他方の情報やデザインに物足りなさを感じることになってしまうことがある。

上記のメリット、デメリットを踏まえて、レスポンシブ、スマホ専用デザインに向いているWEBサイトを挙げてみよう。

レスポンシブWEBデザインに向いているサイトとは?

レスポンシブWEBデザインに向いているサイトとは?

更新頻度の高いWEBサイト

運用コストのことを考えれば、迷う余地はない。
頻繁にニュースを発信したり、商品情報の修正追加や、コンテンツマーケティングに力を入れていこうとするなら、レスポンシブにしておく方がパフォーマンスは圧倒的に高い。

広く一般に情報を提供する使命をもつサイト

自治体など公的な使命をもつWEBサイト、企業であっても広くユーザーにお知らせすべき情報が多く掲示されているWEBサイトはこれにあたる。IR情報や商品の使用方法、施工マニュアル、業界シェアが高く啓蒙的な内容を掲示しているWEBサイトなど。

スマホ専用サイトを別で運営していると、コストの問題などから「今回の追加はPCサイトだけでいいか」という発想になりがちだ。
将来的な運用面も考えて判断すべきだろう。

客先で営業ツールとして活用されるWEBサイト

WEBサイトも、営業スタッフが訪問先で販促資料として活用される場面が増えてきた。そういった際にも、正確な情報提供がなされていること、商品詳細ページは「PCサイトにリンク」ではなく、タブレットやスマホでも見やすいことが強力な営業ツールとなり、営業スタッフをサポートする。

スマホ専用デザインに向いているWEBサイトとは?

スマホ専用デザインに向いているWEBサイトとは?

スマホ閲覧率が圧倒的に高いサイト

極端にスマホからの閲覧が多いなら、スマホのサイズに最適な文字量やボタンのデザインを選択するのも良い選択といえる。レスポンシブWEBデザインの場合は、ワンソースなのでどうしても要素が多くなってしまう。ターゲットユーザーの閲覧状況をチェックしながら判断しよう。

オンラインショップなど、使いやすさが優先されるサイト

商品購入に誘導するなど明確なゴールが決まっている場合、「WEBサイトの使いやすさ」の優先順位はさらに高くなる。特にオンラインショップの場合は、商品検索の結果画面や、カートの使い勝手が購入率にそのまま影響するため配慮が必要だ。

運用コストをカバーできるだけの利益を上げられるサイト

最も大切な判断基準は、それだけの運用コストがかけられるWEBサイトであること。PCサイトとスマホサイトの両方をしっかりとメンテナンスするだけの利益が上げられるか、人手をかけられるかが最終的な判断基準となる。

レスポンシブWEBデザインを採用した企業の声

レスポンシブWEBデザインを採用した企業の声

実際に企業のご担当者はどのように決断したのか?
レスポンシブWEBデザインまたは、スマホ専用サイトを運営される企業の広報ご担当者に話を伺った。

<製薬メーカー様>

レスポンシブWEBデザイン化しているサイト

コーポレイトサイト、商品サイト

実施時期

2014年

動機は?

商品サイトのスマホユーザーが50%を超えたため、リニューアルと同時に対応。コーポレイトサイトについてはどうしても、という理由はなかったが商品サイトとクオリティを揃えておきたかったため実施。

スマホ専用デザインという選択肢はなかった?

開発コスト、運用コストがほぼ倍になることと、SEO的にもデメリットが多いため、レスポンシブWEBデザインを選択した。
それぞれにメリット・デメリットはあるが、どこかで妥協しなければならない。当社は、レスポンシブWEBデザインのメリットを選択した。

評価・効果は?

当初、コーポレイトサイトの必要性はあるだろうかとも感じていたが、今ではスマホからのアクセスも50%程度に増えた。先行して取り組んだことになり、結果的には良かったと思っている。

<機械製造メーカー様>

レスポンシブWEBデザイン化しているサイト

コーポレイトサイト

実施時期

2015年

動機は?

WEBサイトのリニューアルをきっかけに。B2Bがメインの業界であるためスマホ閲覧率はそれほど高くはないが、リニューアル後しばらく手を加える予算が取れないため、一気に実施することにした。

スマホ専用デザインという選択肢はなかった?

全くなかった。ダイレクトに売り上げに結びつくことのないコーポレートサイトなので、更新の手間が倍になることは考えられないし、スマホ用に別サイトを作るメリットを思いつかなかった。

評価・効果は?

スマホにも対応しているということで、社内外の評価は高まっている。現場でもタブレットやスマホでのアクセスが増えると思われるし、浸透すれば携帯端末からのアクセスも増えるのではないかと考えている。

総合的に考えると、ほとんどの一般企業はレスポンシブWEBデザインを選択すべき

総合的に判断すれば、ほとんどの一般企業はレスポンシブWEBデザインを選択すべき

自社サイトへのスマホからのアクセスがどの程度なのかは、Google アナリティクスで簡単に調べることができる。日本のスマホ普及率(2015年3月時点で約60.6%)と比較してみると、一定の判断材料になるだろう。

ただ、現状自社サイトのスマホアクセス率が低かったとしても、今後スマホでのアクセスが増えていくことは間違いない。現行サイトがスマホ対応でないから閲覧されていないという可能性もあるし、上記の製薬メーカーのように、レスポンシブWEBデザイン化に踏み切ったことでスマホからのアクセスが増えたという例もあるのだ。

打ち合わせや外出時にもスマホは手放せない存在。「あのサイトなら、スマホでも見やすい」ということがターゲットに浸透すれば、競合サイトより一歩先を行くことにもつながる。

要は、ターゲットユーザーが必要とする情報すべてに関して、気軽に便利に使いたいデバイスで閲覧できるように配慮することが大切なのだ。