29
18

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2016-12-22

#シニア向けアプリ開発の心得まとめ
※デザイン面を中心に解説します
※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/

##■おわりに
###◇つまり

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

###◇そして

  • 気に入ってもらえればリピート率は高い

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

29
18
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
29
18

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?