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

※デザイン面を中心に解説します
※Webの視点とスマートフォンアプリの視点が混在しています

■まずはじめに

トップページで気をつけるべきこと

とにかくシンプルなレイアウトにする

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

ガイドラインを参考にして余裕を持たせる

横文字（カタカナ）ではなく漢字を使う

どうしてもという場合は広く市民権を得た言葉で表現

テキストは大きくし、行間を十分に取る
- 12pt以下は論外
- JISのガイドライン「JIS X8341-3(高齢者・障害者等配慮設計指針)」を目安にする
  
  項目値
  
  フォントサイズブラウザデフォルトの80%以下にはしない
  
  行間テキストの150%以上とする

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

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

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

優しい心で配慮を忘れない

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

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

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