ねっとぱんだ-プログラミング勉強ブログ-

Webデザイン、プログラミングの勉強ブログ。

【webデザイン】シニア向けサイト製作時の注意


いくつかのサイトを個人用に要約しました。

50以降向けサイト

引用:http://hi-posi.co.jp/tech/?p=330

  • 大きめのフォント
  • わかりやすいテキストリンク
  • リンク領域の分かれ目は分かりやすく。
  • ボタンは大きく立体感を出す。フラットデザインのボタンは分かりにくい。
  • アイコンだけでなくテキストも併用
    アプリに慣れ親しんでない場合アイコンの意味が分からない場合がある。
  • アコーディオンメニューにもわかりやすく文字で解説を
  • 一つの画面に機能を入れすぎない。シンプルに使いやすく。

シニア向けサイト構築

引用サイト
http://www.bebit.co.jp/info/column/column016.html
http://www.bebit.co.jp/info/column/column017.html

  • シニアユーザーは急増している。

身体能力の低下

視力の低下
長時間ウェブサイトを閲覧することは難しい
記憶力の低下
ウェブサイト上で現在位置を見失う可能性が高い
巧緻性(こうちせい:思い通りに体を動かせること)の低下
素早い行動は難しくなる
誤クリック、動作ミスの誘発。

どう配慮していくか

視力の低下
初期設定の文字サイズは大きめに
文字サイズは固定しない(?)
文字サイズを調節するような機能
記憶力の低下
なじみのある言葉を使う
英語の使用は避ける。
比較の必要な情報は同じ画面内に。
ポップアップウィンドウ使わない
戻るボタンが効かず、現在位置の把握が困難に。
巧緻性への配慮
動くメニューは避ける。プルダウンなど
リンクの周辺もリンクの一部に
リンクの感覚は余裕をもって空ける。

シニア層の為のユーザビリティ

引用:http://www.webcreatorbox.com/tech/usability-for-senior/

「知っていて当たり前」は通用しない
手間をかけてでも親切に、わかりやすい設計。
新規ウィンドウを避ける
どうやって前のページに戻るかが分からなくなる。
スクロールが苦手
CTAボタンを付ける場合はページの最後ではなく途中にもつける。
CTAボタン Call to Action button
ユーザーのクリックを促進し、アクションを完遂(CV=コンバージョン)させるためのボタン
引用:https://www.s-bokan.com/blog/conversion-optimization/cta-button-optimization.html
英語は避ける
英語よりも日本語で書かれた方が圧倒的に理解しやすい
横文字を避ける
「難しい・聞いたこともない単語」を避ける。
文字サイズ
16px位だとストレスなく読める(らしい)
説明をわかりやすく
文字の説明だけではわからない。
画像や動画での説明が可能な部分には極力対応していく。
選択ボタン
一つだけしか選択できない場合は「一つだけ選択してください」という一文をいれる
文字をおしてもチェックできるようする。
文字入力
半角英数字の場合は「半角英数字で入力してください」と書くなど、何を間違えたかなどをわかりやすく。
パンくずリストを全ページに
ユーザーが今どの位置のページにいるのかわかりやすく。

団塊シニア層向けのweb設計

引用:http://d.hatena.ne.jp/wa-ren/20061117/p1#20061117f1

フォント
ブラウザ設定で可変できるように。16ptあると読みづらい人が減る(らしい)
アイコンは理解されない
文字の説明を添える。
一つの画面に多数の機能を並べない
一般PCユーザはなるたけ1画面に沢山の機能を配し、画面遷移することなく多種多様な操作ができることを好むが、シニアユーザは混乱する。
1画面でできることを限定し、画面遷移数は増えても長い説明文を併用したボタン名とする。

高齢者のためのユーザビリティ

引用:https://u-site.jp/alertbox/20020428

高齢者のユーザビリティが低いわけ
ウェブサイトは、若いデザイナーが制作する場合が多い。
可読性とクリックの容易さ
動的インターフェイス要素は問題の元になる。
高齢者のマウスの動きは不安定なので。
協力的で寛容なデザイン
訪問済みリンクと未訪問リンクの見分けがつかない色使い → 訪問履歴を見失ってしまう。
  • 高齢者は、自分たちにとってもっとも使いやすいウェブサイトを好む傾向が強い。(らしい)

このサイトはwebを見ずらい人の為のUIについてすごい詳しい

https://u-site.jp/alertbox/20020428

Webサイトのシニア向けアクセシビリティランキング(2013年)

引用:http://www.tribeck.jp/newsrelease/20130326.html

このランキングで問われているもの。

トップページにおける初動喚起力
「目的とする情報への入り口が分かりやすいか」、「このサイトがどんな情報を扱っているか分かりやすいか」
メニューページにおける情報探索性
「商品やサービスを選択できるだけの情報が提供されているか」、「商品を探すために様々な切り口や手段を用意しているか」
商品ページにおける情報伝達力
「商品説明が端的で分かりやすいか」、「商品比較がしやすいか」
フォーム入力における負担軽減
文字入力や確認作業による負担を抑える配慮
情報理解・可読性の確保
「テキストや画像の文字は読みやすいか」、「色や形に頼った表現をしていないか」
シンプルな操作
「ナビゲーションが分かりづらくないか」、「リッチコンテンツの操作が複雑になっていないか」

個人的な感想

  • 高齢者がメインターゲットの業種や、ターゲット層がひろい業種が多い印象です。
  • ランキングが下がるにつれてデザイン性が上がっていっている気がします。

「説明を省略しない」 シニア向けのサイト制作のユーザービリティで気をつけたい7つのポイント

引用:http://www.selva-i.co.jp/blog/archives/1997

サイトマップのフッター配置
サイトマップ」は、ヘッダーにリンクを配置するよりも、フッターでサイトのコンテンツがすべて表示されるように設計した方が、効果的である

まとめ
http://web-tan.forum.impressrd.jp/u/2012/03/07/12315

中高年シニア向けSNS
https://matome.naver.jp/odai/2130693383241497701