若者向けではなく、主に50代以降をターゲットにしたサイト（スマートフォン向けサイト）のUIの好事例ついてまとめてみました。
・５０代後半の女性
・スマホは持っているけど通話、家族とのメールやLINE利用がメイン
・インターネット通販では商品を購入したことがない。
・お気に入り登録しているサイト以外はあまり見ない
・小さい文字は読みづらい、老眼。
事例１：フォントサイズは大きめ・テキストリンクには下線を
フォントサイズは通常よりも大きめにしておくと老眼の方に読みやすくなります。サイトによっては、テキストのサイズを「大・中・小」で切り替える機能がある場合もありますが、そもそもこの切り替えボタンに気づいてもらえない可能性もあるので、サイトのターゲットが50代以降と決まっているのであれば切り替えボタンを付けるのではなく大きめのフォントサイズをデフォルトとして全体のページを設計・デザインする方が良いかと思います。
テキストリンクに下線があると、リンクであることをより明確に示せるためタップしてもらいやすくなると考えられます。（特に昔のWebサイトに慣れている人は、青色＋下線 = リンク！と捉えている方が多いと思います。）
また、リンク領域の余白を通常よりも大きく取ったほうがタップの時の誤動作（=誤遷移）が減るので、なるべくボタンとボタンの間はゆとりをもたせてデザインにするべきです。
事例２：ボタンは大きめに・立体感を出す
フラットデザインが流行していますが、フラットデザインでデザインされたボタンは、ボタンなのかそれとも単純に背景が塗りつぶされたテキストエリアなのかが分かり辛いです。
若者であれば、フラットなデザインのボタンに慣れているのでとりあえずタップしてみようと行動してみますが、慣れていない人はタップするという発想すら生まれないのではないでしょうか。
事例３：アイコンだけではなくテキストを併用する
スマーフォン向けサイトの場合、画面領域が狭いのでテキストメニューよりアイコンが使われる場合が多いですが、アプリに慣れ親しんでいない人からしたら下記のようなメニューアイコンが何を意味しているのかがわからない場合があるかもしれません。
なので、アイコンだけを表示するのではなく、そのアイコンが何を意味するのかをテキストでも説明する必要があります。
事例４：隠されたメニューにはヒントを
アコーディオンメニューや、フリックバナーなどはサイトにアクセスしたタイミングでは画面に表示されません。そのためサイトやアプリに慣れていない訪問者の場合、そのコンテンツに気づいてもらえない可能性があります。
これを回避するためには、たとえばアコーディオンメニューであれば具体的に「開く>」という名前でボタンを設置したり、フリックバナーであれば現在メインで表示されているバナー以外にも他のバナーが後ろに控えていることを明確に示したほうがわかり易いです。
事例５：１つの画面に機能を詰め込みすぎない
特にトップページにはサイト全体のリンクを設置したくなりがちですが、メニューがたくさんありすぎると返って、目的のコンテンツにたどり着きにくくなります。
少し昔に流行したUIですが、このアメリカンホーム保険のサイトのようにスプリングボード式のUIであれば選択できるメニューが１画面内に収まっており、探している情報のカテゴリーを見つけやすいです。
※一つの画面の機能が少ないということは、サイト全体の遷移数(ページ数)が増えてしまうことになりますが、Webに慣れていない人は遷移数が多い方が使いやすいという場合もあります。
1つの画面に多数の機能を並べてはいけない
なるたけ1画面に沢山の機能を配し、画面遷移することなく多種多様な操作ができることを好むが、シニアユーザは混乱する。また、多様な機能を配置する際、省スペース化のためにアイコンやプルダウンリストが多様されることも、わかりにくさを助長している。1画面でできることを限定し、画面遷移数は増えても長い説明文を併用したボタン名とするが吉。ちなみに家電のUI設計はわりとこの考え方を取り入れている。
引用：http://d.hatena.ne.jp/wa-ren/20061117/p1
まとめ：50代以降をターゲットにしたWebサイトのUIで気をつけること
- １）テキストはフォントサイズを大きく、テキストリンクには下線を
- ２）フラットデザインは避ける
- ３）アイコンだけではなくテキストでもメニューを表示する（アイコンだけでは意味が理解できない）
- ４）ボタンとボタンの間には十分な間隔を取り、誤動作（誤遷移）が発生するのを極力避けるようにする。
- ５）フリックバナーやアコーディオンメニューなど、初期状態でメニューが隠れてしまうUIは多用しない。利用する場合は、操作方法を促せるようなデザインにしたりテキストを添える。
- ６）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/)