#シニア向けアプリ開発の心得まとめ
※デザイン面を中心に解説します
※Webの視点とスマートフォンアプリの視点が混在しています
##■まずはじめに
###◇シニア層の特徴
- 視力・記憶力・巧緻性(体を思い通り動かす能力)が低下している
- 1つ1つのアクションに慎重になる
- 英語・カタカナに抵抗感がある
- 騙されることを警戒する
- 高齢者向け過ぎるデザインは嫌がる
##■デザイン・設計
###◇ファーストビュー
トップページで気をつけるべきこと
-
企業ロゴやサービスロゴは目立つところに配置
- 目的の場所に来た安心感や信頼感を得る
- **実店舗がある場合は、連絡先を目立つところに配置** - 実店舗の連絡先が知りたいだけという場合がある
- **大きな画像を中心にし、周辺に優先度の高いコンテンツから配置する** - 一番大きな画像に視点が固定されがち(特に人の顔)
###◇ページデザイン
とにかくシンプルなレイアウトにする
- 新規ウインドウはなるべく開かない
- **ページ内リンクは要注意** - どこを見ていたか見失う可能性が高い - 縦に長いページの構成自体を見直すべき
- **いつでもブラウザの戻るボタンを使えるようにする** - 何か困ると**とりあえず戻る**傾向が高い - 戻れなくなるパターン 1. 別ウインドウ 2. 入力フォームなどでページの有効期限切れになる 3. Flashコンテンツ 4. リダイレクトでの遷移
- **トップ画面への導線をわかりやすくする**
- **1つの画面に機能を詰め込みすぎない**
- **アコーディオンメニューやプルダウンメニューなど隠れたメニューはなるべく使わない**
- **サイドメニューなど複数使わない**
- **パンくずリストは避ける** - 意味を分かってもらえない - そもそも階層の概念が必要な構成にしない(見せるなら**進捗**)
- **色の種類を少なくし、同一の色調で統一する** - カラフルさは、「うるさい」として即離脱につながってしまう - W3Cが勧告する目安を意識する
|項目|値|
|:-----------------:|:------------------:|
|明度差|125以上|
|色差|500以上|
|コントラスト差(見出し)|3:1|
|コントラスト差(本文)|4.5:1|
###◇テキスト
ガイドラインを参考にして余裕を持たせる
- 英語のメニューは使わない
- **横文字(カタカナ)ではなく漢字を使う** - 当然コンピューター用語は分からない - どうしてもという場合は広く**市民権を得た言葉**で表現
|NG|OK|その他|
|:-----------------:|:------------------:|:-:|
|ショップ|店舗||
|アカウント|会員||
|ウィッシュリスト|ほしいもの||
|レビュー|購入者の声||
|アクセス|交通案内||
|ブラウザ|インターネット||
|サインイン・サインアウト|ログイン・ログアウト|「会員の方はこちら」|
- **テキストは大きくし、行間を十分に取る** - 12pt以下は論外 - JISのガイドライン「JIS X8341-3(高齢者・障害者等配慮設計指針)」を目安にする
|項目|値|
|:-----------------:|:------------------:|
|フォントサイズ|ブラウザデフォルトの80%以下にはしない|
|行間|テキストの150%以上とする|
###◇UIパーツ
見やすい・分かりやすい・触れやすいパーツを使う
-
ボタンなど操作領域を広くする
- 縦方向の短辺を最低でも24px以上にする
- 周囲に十分な余白を用意する
- **フラットデザインではなくメタファ・マテリアルを意識** - フラットデザインのボタンでは押せるかどうかが分からない - とはいえ直感的な見た目なら何でも良い訳ではない - ドラッグ&ドロップ、スワイプやピンチイン・ピンチアウトは分からないと思った方が良い - 直感的と思えるリッチなダイアログやドラムロール(ピッカー)などは実は分かりづらい
- **アイコンだけではなくテキストを添える** - 例えば、項目を追加するボタンが「+」だけでは意味を分かってもらえない
- **「矢印」や「次へ」「進む」だけでは不親切** - 次の目的をきちんと教えてあげる
- **アニメーションは最低限にする**
- **ページ内スクロールは避ける** - どのバーがどのコンテンツか分かりづらく操作に戸惑う
- **サムネイル画像には拡大用のリンクをつける** - 拡大して細部を確認したい思いから、かなりの確率でクリックされる - マウスオーバーによる拡大はビックリされるため避ける
##■機能実装
###◇実装上の注意点
優しい心で配慮を忘れない
-
検索結果の絞込みなどにおいて何の順番かを明示する
- 「昇順/降順」や「▲/▼」で済まさない
- **入力フォームの入力ミスを防ぐ** - 必須項目箇所すべてに赤字などで「必須」と明記する - 全角・半角の区別は難易度が高いため、**システムでカバー**できるのがベター - 電話番号やメールアドレス、郵便番号などは、一括入力可能にする - 何かを見ながらの入力が想定されるため、分割入力だと修正が必要になってしまう
- **エラー表示でユーザーを突き放さない** - 検索結果がない場合など、結果だけでなく**次のアクション**を教えてあげる - 例)「結果はありませんでした」→「結果はありませんでした。他の言葉で再度お試しください」 - 例)「入力内容を確認ください」→「ご氏名のフリガナは全角カタカナで入力してください」
- **音声・動画コンテンツには特に配慮を** - 再生、停止、ボリュームを分かりやすく表示し、容易にコントロール可能にする - 再生開始時はなるべく**低い音量**からフェードイン
- **表示速度への配慮をする** - 古いパソコンや古いネットワーク環境を使い続けている人も多い - すべての表示に要する時間の目安は**2秒以内**
##■参考
色差や明度差をチェックするツールはいくつか出ています
例)カラー・コントラスト・アナライザー
https://www.paciellogroup.com/resources/contrastanalyser/
##■おわりに
###◇つまり
- あたりまえに使っている機能をあたりまえと思ってはいけない
- これでもかと思うくらい機能を限定する
- 相手の立場に立って優しすぎるほど優しく
###◇そして
- 気に入ってもらえればリピート率は高い
まだまだありそうですが、とりあえずこんなところで・・・