ui50o

50代以降をターゲットにしたWebサイトのUI事例


若者向けではなく、主に50代以降をターゲットにしたサイト(スマートフォン向けサイト)のUIの好事例ついてまとめてみました。

ひとくくりに「50代」といってもスマホを使いこないしている方も多いと思うので、以下のような人物像で考えました。
・50代後半の女性
・スマホは持っているけど通話、家族とのメールやLINE利用がメイン
・インターネット通販では商品を購入したことがない。
・お気に入り登録しているサイト以外はあまり見ない
・小さい文字は読みづらい、老眼。

事例1:フォントサイズは大きめ・テキストリンクには下線を

シニア向けUI事例_50_3
フォントサイズは通常よりも大きめにしておくと老眼の方に読みやすくなります。サイトによっては、テキストのサイズを「大・中・小」で切り替える機能がある場合もありますが、そもそもこの切り替えボタンに気づいてもらえない可能性もあるので、サイトのターゲットが50代以降と決まっているのであれば切り替えボタンを付けるのではなく大きめのフォントサイズをデフォルトとして全体のページを設計・デザインする方が良いかと思います。

具体的には、どれくらいフォントサイズにすればよいかですが、弊社内ではコンテンツエリアの本文のフォントサイズを16px以上にしています。※若者がターゲットのサイトであれば、12px または 14pxでデザインすることが多いです。

テキストリンクに下線があると、リンクであることをより明確に示せるためタップしてもらいやすくなると考えられます。(特に昔のWebサイトに慣れている人は、青色+下線 = リンク!と捉えている方が多いと思います。)
また、リンク領域の余白を通常よりも大きく取ったほうがタップの時の誤動作(=誤遷移)が減るので、なるべくボタンとボタンの間はゆとりをもたせてデザインにするべきです。

デザイナーさんから「ここはデザイン的に下線がない方が良いんだよなぁ。。。」なんて言われてしまうこともあるかと思いますが、そこはユーザービリティ重視で行きましょう!と、説得してくださいな。

事例2:ボタンは大きめに・立体感を出す

シニア向けUI事例_50_1
フラットデザインが流行していますが、フラットデザインでデザインされたボタンは、ボタンなのかそれとも単純に背景が塗りつぶされたテキストエリアなのかが分かり辛いです。
若者であれば、フラットなデザインのボタンに慣れているのでとりあえずタップしてみようと行動してみますが、慣れていない人はタップするという発想すら生まれないのではないでしょうか。

私の義母(60代)の場合、タップ自体に不安感があるようでなるべく画面上をタップしたがりません。理由を聞くと「変なところ押して変な画面になったら元に戻れなくなるから!」だそう。

事例3:アイコンだけではなくテキストを併用する

シニア向けUI事例_50_2
スマーフォン向けサイトの場合、画面領域が狭いのでテキストメニューよりアイコンが使われる場合が多いですが、アプリに慣れ親しんでいない人からしたら下記のようなメニューアイコンが何を意味しているのかがわからない場合があるかもしれません。
なので、アイコンだけを表示するのではなく、そのアイコンが何を意味するのかをテキストでも説明する必要があります。

シニア向けUI事例_menu

さらにアイコンに添えるテキストは「設定する」「検索する」「設定を変更する」といったような動詞の形にしたほうがより分かりやすくなると思います

事例4:隠されたメニューにはヒントを

シニア向けUI事例_50_4
アコーディオンメニューや、フリックバナーなどはサイトにアクセスしたタイミングでは画面に表示されません。そのためサイトやアプリに慣れていない訪問者の場合、そのコンテンツに気づいてもらえない可能性があります。
これを回避するためには、たとえばアコーディオンメニューであれば具体的に「開く>」という名前でボタンを設置したり、フリックバナーであれば現在メインで表示されているバナー以外にも他のバナーが後ろに控えていることを明確に示したほうがわかり易いです。

事例5:1つの画面に機能を詰め込みすぎない

シニア向けUI事例_50_5
特にトップページにはサイト全体のリンクを設置したくなりがちですが、メニューがたくさんありすぎると返って、目的のコンテンツにたどり着きにくくなります。

少し昔に流行したUIですが、このアメリカンホーム保険のサイトのようにスプリングボード式のUIであれば選択できるメニューが1画面内に収まっており、探している情報のカテゴリーを見つけやすいです。
※一つの画面の機能が少ないということは、サイト全体の遷移数(ページ数)が増えてしまうことになりますが、Webに慣れていない人は遷移数が多い方が使いやすいという場合もあります。

1つの画面に多数の機能を並べてはいけない
なるたけ1画面に沢山の機能を配し、画面遷移することなく多種多様な操作ができることを好むが、シニアユーザは混乱する。また、多様な機能を配置する際、省スペース化のためにアイコンやプルダウンリストが多様されることも、わかりにくさを助長している。1画面でできることを限定し、画面遷移数は増えても長い説明文を併用したボタン名とするが吉。ちなみに家電のUI設計はわりとこの考え方を取り入れている。
引用:http://d.hatena.ne.jp/wa-ren/20061117/p1

まとめ:50代以降をターゲットにしたWebサイトのUIで気をつけること

  • 1)テキストはフォントサイズを大きく、テキストリンクには下線を
  • 2)フラットデザインは避ける
  • 3)アイコンだけではなくテキストでもメニューを表示する(アイコンだけでは意味が理解できない)
  • 4)ボタンとボタンの間には十分な間隔を取り、誤動作(誤遷移)が発生するのを極力避けるようにする。
  • 5)フリックバナーやアコーディオンメニューなど、初期状態でメニューが隠れてしまうUIは多用しない。利用する場合は、操作方法を促せるようなデザインにしたりテキストを添える。
  • 6)1つの画面に機能を詰め込みすぎない、単純・シンプルに

事例として挙げさせて頂いたサイト

  • 資生堂 PRIOR (https://www.shiseido.co.jp/pr/)
  • JR東日本 大人の休日倶楽部 (http://www.jreast.co.jp/otona/)
  • おとなの自動車保険 (http://www.ins-saison.co.jp/otona/)
  • 京セラ シニア向けスマートフォンBASIO (http://www.kyocera.co.jp/prdct/telecom/consumer/kyv32/)
  • アメリカンホーム保険 (http://www.americanhome.co.jp/)
  • 50代・60代の暮らしを豊かにするwebマガジン ライブリー (http://lvly.jp/)

参考文献

About Blog

スマホサイト制作のフロントエンド・UIについてのノウハウをご紹介しています。

mobile-design Pinterest

スマートフォンサイトのデザインまとめPinterest。株式会社hi-posiのスタッフが日々更新中。