シニア向けアプリ開発の心得まとめ

#**シニア向けアプリ開発の心得まとめ**
※デザイン面を中心に解説します
※Webの視点とスマートフォンアプリの視点が混在しています

##■**まずはじめに**
###**◇シニア層の特徴**
- 視力・記憶力・巧緻性（体を思い通り動かす能力）が低下している
- １つ１つのアクションに慎重になる
- 英語・カタカナに抵抗感がある
- 騙されることを警戒する
- 高齢者向け過ぎるデザインは嫌がる

##■**デザイン・設計**
###**◇ファーストビュー**
**トップページで気をつけるべきこと**

- **企業ロゴやサービスロゴは目立つところに配置**
    - 目的の場所に来た安心感や信頼感を得る
<br/>
<br/>
- **実店舗がある場合は、連絡先を目立つところに配置**
    - 実店舗の連絡先が知りたいだけという場合がある
<br/>
<br/>
- **大きな画像を中心にし、周辺に優先度の高いコンテンツから配置する**
    - 一番大きな画像に視点が固定されがち（特に人の顔）

###**◇ページデザイン**
**とにかくシンプルなレイアウトにする**

- **新規ウインドウはなるべく開かない**
<br/>
<br/>
- **ページ内リンクは要注意**
    - どこを見ていたか見失う可能性が高い
    - 縦に長いページの構成自体を見直すべき
<br/>
<br/>
- **いつでもブラウザの戻るボタンを使えるようにする**
    - 何か困ると**とりあえず戻る**傾向が高い
    - 戻れなくなるパターン
        1. 別ウインドウ
        2. 入力フォームなどでページの有効期限切れになる
        3. Flashコンテンツ
        4. リダイレクトでの遷移
<br/>
<br/>
- **トップ画面への導線をわかりやすくする**
<br/>
<br/>
- **１つの画面に機能を詰め込みすぎない**
<br/>
<br/>
- **アコーディオンメニューやプルダウンメニューなど隠れたメニューはなるべく使わない**
<br/>
<br/>
- **サイドメニューなど複数使わない**
<br/>
<br/>
- **パンくずリストは避ける**
 - 意味を分かってもらえない
 - そもそも階層の概念が必要な構成にしない（見せるなら**進捗**）
<br/>
<br/>
- **色の種類を少なくし、同一の色調で統一する**
    - カラフルさは、「うるさい」として即離脱につながってしまう
    - W3Cが勧告する目安を意識する

        |項目|値|
        |:-----------------:|:------------------:|
        |明度差|125以上|
        |色差|500以上|
        |コントラスト差(見出し)|3:1|
        |コントラスト差(本文)|4.5:1|

###**◇テキスト**
**ガイドラインを参考にして余裕を持たせる**

- **英語のメニューは使わない**
<br/>
<br/>
- **横文字（カタカナ）ではなく漢字を使う**
 - 当然コンピューター用語は分からない
 - どうしてもという場合は広く**市民権を得た言葉**で表現

        |NG|OK|その他|
        |:-----------------:|:------------------:|:-:|
        |ショップ|店舗||
        |アカウント|会員||
        |ウィッシュリスト|ほしいもの||
        |レビュー|購入者の声||
        |アクセス|交通案内||
        |ブラウザ|インターネット||
        |サインイン・サインアウト|ログイン・ログアウト|「会員の方はこちら」|
<br/>
- **テキストは大きくし、行間を十分に取る**
 - 12pt以下は論外
 - JISのガイドライン「JIS X8341-3(高齢者・障害者等配慮設計指針)」を目安にする

        |項目|値|
        |:-----------------:|:------------------:|
        |フォントサイズ|ブラウザデフォルトの80%以下にはしない|
        |行間|テキストの150%以上とする|

###**◇UIパーツ**
**見やすい・分かりやすい・触れやすいパーツを使う**

- **ボタンなど操作領域を広くする**
    - 縦方向の短辺を最低でも**24px以上**にする
    - 周囲に十分な**余白**を用意する
<br/>
<br/>
- **フラットデザインではなくメタファ・マテリアルを意識**
    - フラットデザインのボタンでは押せるかどうかが分からない
    - とはいえ直感的な見た目なら何でも良い訳ではない
        - ドラッグ＆ドロップ、スワイプやピンチイン・ピンチアウトは分からないと思った方が良い     
        - 直感的と思えるリッチなダイアログやドラムロール(ピッカー)などは実は分かりづらい
<br/>
<br/>
- **アイコンだけではなくテキストを添える**
 - 例えば、項目を追加するボタンが「＋」だけでは意味を分かってもらえない
<br/>
<br/>
- **「矢印」や「次へ」「進む」だけでは不親切**
    - 次の目的をきちんと教えてあげる 
<br/>
<br/>
- **アニメーションは最低限にする**
<br/>
<br/>
- **ページ内スクロールは避ける**
    - どのバーがどのコンテンツか分かりづらく操作に戸惑う
<br/>
<br/>
- **サムネイル画像には拡大用のリンクをつける**
    - 拡大して細部を確認したい思いから、かなりの確率でクリックされる
    - マウスオーバーによる拡大はビックリされるため避ける

##■**機能実装**
###**◇実装上の注意点**
**優しい心で配慮を忘れない**

- **検索結果の絞込みなどにおいて何の順番かを明示する**
    - 「昇順/降順」や「▲/▼」で済まさない
<br/>
<br/>
- **入力フォームの入力ミスを防ぐ**
    - 必須項目箇所すべてに赤字などで「必須」と明記する
    - 全角・半角の区別は難易度が高いため、**システムでカバー**できるのがベター
    - 電話番号やメールアドレス、郵便番号などは、一括入力可能にする
        - 何かを見ながらの入力が想定されるため、分割入力だと修正が必要になってしまう
<br/>
<br/> 
- **エラー表示でユーザーを突き放さない**
    - 検索結果がない場合など、結果だけでなく**次のアクション**を教えてあげる
    - 例)「結果はありませんでした」→「結果はありませんでした。他の言葉で再度お試しください」
    - 例)「入力内容を確認ください」→「ご氏名のフリガナは全角カタカナで入力してください」
<br/>
<br/>
- **音声・動画コンテンツには特に配慮を**
    - 再生、停止、ボリュームを分かりやすく表示し、容易にコントロール可能にする
    - 再生開始時はなるべく**低い音量**からフェードイン
<br/>
<br/> 
- **表示速度への配慮をする**
    - 古いパソコンや古いネットワーク環境を使い続けている人も多い
    - すべての表示に要する時間の目安は**２秒以内**
<br/> 

***

##■**参考**
**色差や明度差をチェックするツールはいくつか出ています**
例)カラー・コントラスト・アナライザー
https://www.paciellogroup.com/resources/contrastanalyser/

##■**おわりに**
###**◇つまり**
- **あたりまえに使っている機能をあたりまえと思ってはいけない**
- **これでもかと思うくらい機能を限定する**
- **相手の立場に立って優しすぎるほど優しく**

###**◇そして**
- **気に入ってもらえればリピート率は高い**

まだまだありそうですが、とりあえずこんなところで・・・

https://tech.naturalmindo.com/notwork_senior/