シニア向け UI で避けるべきパターン

はじめに

「この UI、シニア層には使いにくいのでは？」

自治会DX の開発中、ふとそう思いました。

私が「直感的」だと思っている UI が、60代〜70代のユーザーには直感的ではないかもしれない。スワイプ操作は馴染みがないかもしれない。ボタンが小さすぎるかもしれない。文字が読みにくいかもしれない。

そう考えて、高齢者向け UI のベストプラクティスを調べ、Claude Code と相談しながら設計に反映しました。この記事では、その設計判断を共有します。

同じような課題を抱えている人の参考になれば幸いです。

自治会DX とは

まず背景を説明させてください。

自治会DX は、自治会の回覧板をデジタル化するプロジェクトです。紙の回覧板は配布に時間がかかりますし、既読管理もできません。

「デジタル化すれば便利になる」というのは、私たち開発者の視点です。

でも、ユーザーの多くは IT に不慣れな高齢者。スマートフォンは持っているけど、アプリのインストールや複雑な操作は難しい。

普通の Web アプリとして開発すると、「使いにくい」と感じられる可能性が高い。

そう考えて、開発初期から高齢者向け UI について真剣に検討しました。

設計の基本方針

2026年1月27日の開発日記に、基本方針を記録しました：

シニア向けUI設計:

• タップターゲット最小48px（WAI推奨44px以上）
• フォントサイズ本文18px以上
• 高コントラスト配色

WCAG（Web Content Accessibility Guidelines）に準拠した基準です。

でも、これは「最低限」の基準。実際には、もっと多くの配慮が必要でした。

パターン1：スワイプ操作を避ける

最初に悩んだのは、コンテンツの切り替え方法でした。

回覧板には「お知らせ」「回覧板」「安全情報」という3つのカテゴリがあります。これらをどうやって切り替えるか。

最初に考えたのは、スワイプ UI でした。左右にスワイプすると、カテゴリが切り替わる。Instagram や TikTok でおなじみのインターフェースです。

でも、開発日記の「悩んだこと」にこう書きました：

スワイプUIの採用可否:

• 当初、掲示板をスワイプで切り替えるUIを検討
• シニア層にはスワイプ操作が難しい可能性があると判断
• タブUIに変更（見えるボタンをタップする方が直感的）

スワイプには3つの問題があります。

問題1：操作が見えない

スワイプ可能なことが、視覚的にわからない。

「左にスワイプしてください」と説明しても、「スワイプって何？」という反応が返ってきます。

若い世代は、画面の端に少しだけ次のコンテンツが見えていたら「あ、スワイプできるんだな」と気づきます。でも、それは学習によって身についた知識です。

スマートフォンに慣れていない人には、そういった視覚的なヒントが通じません。

問題2：誤操作しやすい

縦スクロールしようとして、横スワイプになる。

高齢者の指は、私たちが思っている以上に「まっすぐ動かす」のが難しいことがあります。縦に動かそうとして、少し横にずれる。

すると、画面が突然切り替わって混乱する。「あれ、さっきの画面はどこ？」となる。

問題3：そもそも馴染みがない

スマートフォンをあまり使わない人には、スワイプジェスチャー自体が馴染みがありません。

「画面をなぞって動かす」という概念が、直感的ではない。フリックやピンチも同様です。

解決策：タブ UI

「見えるボタン」をタップする形式に変更しました。

画面上部に「お知らせ」「回覧板」「安全情報」というタブボタンを常に表示する。ユーザーは見えているものをタップするだけ。

隠れたジェスチャーを覚える必要がありません。

見た目は古臭いかもしれません。でも、「使える」ことが最優先です。

パターン2：キーボード入力を最小化する

不審者通報フォームの設計でも悩みました。

「何が起きましたか？」という質問に対して、ユーザーに自由記述してもらう形式を考えていました。でも、開発日記から：

選択式通報フォーム: シニアがキーボード入力なしで通報できるよう、タップで選択する形式

スマートフォンのソフトキーボードは、高齢者には使いにくいです。

• キーが小さい
• 予測変換の操作が難しい
• 入力に時間がかかる

特に、予測変換が曲者です。「不審」と入力しようとしたら、予測変換が「付信」になる。直そうとしたら、さらにおかしな変換になる...という無限ループ。

解決策：選択式フォーム

「何がありましたか？」という質問に対して、あらかじめ選択肢を用意しました。

• 見知らぬ人が家の周りをうろうろしていた
• 不審な車が止まっていた
• 不審な電話があった
• 訪問販売が来た
• その他

ユーザーはタップで選ぶだけ。「その他」を選んだ場合のみ、テキスト入力欄を表示します。

大多数のケースは、キーボード入力なしで通報できる。入力の負荷を大幅に減らせました。

これは「よくあるパターンを事前に洗い出す」という作業が必要です。でも、一度洗い出してしまえば、ユーザーの負担は激減します。

パターン3：長文を AI で要約する

自治会の回覧板は、お役所文書のような長文が多いです。

「○○市では、令和○年度における○○事業の実施に関し、下記のとおり...」

こういう文章が延々と続く。正直、私でも読む気が失せます。

そのまま表示すると、ほとんどのユーザーは読まないでしょう。

開発日記から：

AI要約: 長文の回覧板をシニアが読みやすいように3行以内で要約

Google Gemini API を使って、Claude Code で要約機能を実装しました。

開発日記の技術選定理由：

Google Gemini vs OpenAI:

• Gemini 2.0 Flash を採用
• 理由: 無料枠が大きい、日本語性能が良い、レスポンスが速い

ポイントは「重要な日付と場所を必ず含める」という指示をプロンプトに入れたことです。

「2月15日に公民館で防災訓練があります」という情報が、要約から抜けてしまったら意味がない。何より、日時と場所を知りたいから回覧板を見るわけで。

要約は便利ですが、重要な情報を落とさないよう注意が必要です。

パターン4：タップターゲットを大きく

WAI（Web Accessibility Initiative）は、タップターゲットを44px以上にすることを推奨しています。

でも、シニア向けには48px以上にしました。4pxの差ですが、この「余裕」が大事です。

ボタンだけでなくリンクも

リンクテキストの周りにも、十分なパディングを取ります。

「詳細はこちら」というリンクがあったとして、テキストの部分だけがタップ可能だと、かなり小さい。周囲に余白を持たせて、タップ可能領域を広げます。

行間も広く

リンクが縦に並んでいる場合、行間が狭いと「意図しないリンクをタップ」してしまいます。

Aのリンクをタップしようとしたのに、Bのリンクが開いた。「あれ？」と思って戻ろうとしたら、また間違えた...

こういうフラストレーションを避けるために、行間は通常より広めに取ります。

パターン5：コントラストを高く

視力の低下を考慮し、コントラスト比を十分に確保します。

WCAG AA 基準は 4.5:1 ですが、AAA 基準の 7:1 を目指しました。

薄いグレーを避ける

デザイン的には、薄いグレーのテキストがおしゃれに見えることがあります。でも、高齢者には見えにくい。

「そこに文字があることに気づかない」という事態も起こりえます。

しっかりした黒（#333 や #222）を使います。

背景色との組み合わせ

テキストの色だけでなく、背景色との組み合わせも重要です。

白背景に黒テキスト、または黒背景に白テキスト。これが最もコントラストが高い。

中間色を使うと、どうしてもコントラストが下がります。「おしゃれ」より「見やすさ」を優先しました。

設計の転換点：モダンより実用性

最初は Tailwind CSS のデフォルトスタイルをベースに、モダンなデザインを目指していました。角丸のカード、薄いシャドウ、アイコンを多用した UI。

私から見ると「きれい」でした。でも、シニア層が使うことを考えると：

• どこを押せばいいかわかりにくいのでは？
• 文字が小さすぎるのでは？
• 色が薄くて見えにくいのでは？

という懸念が出てきました。

「モダン」と「使いやすい」は、必ずしも一致しない。特に、ターゲットユーザーが高齢者の場合。そう考えて、デザインの方向性を変更しました。

学んだこと

開発日記の「学んだこと」には技術的な内容が多いですが、UI 設計の学びも大きかったです。

1. 見えないジェスチャーを避ける

スワイプ、長押し、ピンチ。これらは「見えない」操作です。

画面に「ここをスワイプしてください」とは書いてありません。ユーザーが「スワイプできる」と知っている前提のデザインです。

高齢者向けには、「見えるものをタップする」だけで操作できる UI が望ましい。

2. 入力を減らす

キーボード入力は、できるだけ避ける。

選択式フォーム、デフォルト値の設定、AI による補完。これらを活用して、ユーザーの入力負荷を減らします。

3. 視認性を上げる

大きな文字、高コントラスト、十分な余白。

「見やすさ」は、すべてに優先します。おしゃれさは二の次。

4. 「自分が使いやすい」≠「ユーザーが使いやすい」

これが最も重要な学びかもしれません。

30代の開発者が「直感的」と感じる UI が、70代のユーザーには「直感的」ではない可能性がある。

ターゲットユーザーの視点で考える必要があります。可能であれば、実際に使ってもらってフィードバックを得たい。今後、実際のユーザーテストを通じて検証していく予定です。

自分の「当たり前」を疑うことが大切です。

まとめ

高齢化社会において、シニア向け UI の知識は今後ますます重要になります。

「自分が使いやすい」ではなく「ユーザーが使いやすい」を意識した設計。それが、本当の意味でのユーザーファーストだと考えています。

この記事は設計段階での検討内容をまとめたものです。今後、実際のユーザーテストを通じて効果を検証し、さらに改善していく予定です。

同じような課題に取り組む人の参考になれば幸いです。