はじめに — 「便利にする」と「使えるようにする」は違う
自治会の業務をデジタル化したい。回覧板をスマホで確認できるようにして、ゴミ出し情報を一目で分かるようにして、不審者情報をすぐ共有できるようにしたい。
こういったアイデアは一見シンプルに思えるかもしれません。しかし、メインユーザーが60代〜80代のシニア層となると、「機能を作る」こと以上に「使えるようにする」ことが圧倒的に難しいのです。
この記事では、元同僚のベテランSEとの共同開発で進めている自治会DXプロジェクトで、PMとしてどんなUI設計判断に悩み、何を学んだかを開発日記をもとに振り返ります。
技術スタックの選定 — 「最新」と「安定」のバランス
2026年1月26日、プロジェクトの立ち上げから始まりました。
Next.js 16 + TypeScript + Tailwind CSS 4 でプロジェクトを初期化。shadcn/ui を採用（Chakra UI よりカスタマイズ性が高い）
技術スタックの選定では、Next.js 16 を選びました。App Router と React Server Components が安定しており、SSG による静的生成でシニア向けに重要な「ページ表示の速さ」を担保できるからです。
UIコンポーネントライブラリは shadcn/ui にしました。Chakra UI も候補に上がりましたが、shadcn/ui はコンポーネントのソースコードを直接プロジェクトにコピーする方式のため、シニア向けにフォントサイズやタップ領域を細かくカスタマイズしやすいと判断しました。
もう一つ、地味だけど重要な判断がありました。
絵文字アイコンをLucide React SVGアイコンに全面置換。絵文字はOS・デバイスで見た目が異なり、シニア層が使う古い端末では表示が崩れるリスクがある
絵文字は手軽ですが、環境によって見た目がまったく異なります。シニア層は古いスマートフォンを使っていることが多く、絵文字が表示されないリスクがあるため、SVGアイコンに統一しました。
スワイプUIを避けた判断 — シニアにとっての「直感的」は違う
2026年1月27日は、MVPの主要機能をClaude Codeで一気に実装した日です。ここで最初の大きな設計判断がありました。
タブUIを選んだ理由
当初、掲示板のカテゴリ切り替えにスワイプUIを検討していました。若年層向けアプリでは直感的とされるスワイプですが、PMとして検討した結果、タブUIを採用しました。
スワイプナビゲーションは候補に上がったが、シニアにはタブUIの方が「見て分かる」。横スワイプは誤操作が多く、特に片手操作時のスクロールと混同しやすい
スワイプは「知っていれば便利」ですが、「知らないと使えない」UIです。タブなら文字ラベルが見えているので、何ができるかが一目で分かります。シニア向けUIでは「発見可能性」が最優先です。
PM-AI 対話: タップ領域のサイズ設計
シニア向けのタップ領域をどう設計するか、Claude Code に相談しながら決めました。
ZeronovaZeronovaZeronovaこの基本ルールが、以降のすべてのUI設計の土台になりました。
AI要約機能 — 長い回覧板を3行で伝える
シニアにとって、自治会の長文お知らせを最後まで読むのは負担です。そこでGoogle Gemini APIを使ったAI要約機能をClaude Codeで実装しました。
Vercel AI SDK + Google Gemini 2.5 Flash でお知らせのAI要約を実装。長文の回覧板を3行程度に要約してカード表示
Gemini 2.5 Flash を選んだのは、APIコストが低く、日本語の要約品質が高かったからです。無料枠はデータが学習に使われるリスクがあるため、有料プランを使用しています。回覧板の内容を3行に要約してカードに表示することで、「開かなくても概要が分かる」体験を実現しました。
通報フォームの設計 — キーボード入力を排除する
不審者情報の通報フォームも、シニア向けに大きくUIを変えました。
不審者通報フォーム: テキスト入力ではなく選択式UIを採用。場所・時間帯・特徴をプリセットから選択する方式
自由記述のテキスト入力はシニアにとってハードルが高い操作です。スマートフォンのソフトウェアキーボードは文字が小さく、入力ミスも起きやすい。そこで「場所」「時間帯」「人物の特徴」をあらかじめ用意した選択肢から選ぶ方式にしました。入力の手間が大幅に減り、集まるデータの粒度も統一できるというメリットもあります。
通報ボタンの配置 — 4回の試行錯誤
開発を進める中で、最も悩んだのが「不審者通報ボタン」の配置でした。4日間で4回変更しています。
試行1: ホーム画面の赤い大きなカード（1月27日）
最初はホーム画面のトップに大きな赤いカードとして配置しました。目立つし、すぐアクセスできる。でも問題がありました。
試行2: ヘッダーのアウトラインボタン（1月30日）
通報ボタン: 赤い大きなカード→コンパクトなアウトラインボタンに変更。毎日使う機能ではないのに画面の最も目立つ位置にあるのは、ホーム画面の情報密度を下げていた
通報は「毎日使う機能」ではありません。それなのにホーム画面で最も目立つ位置を占有しているのは、日常使いのユーザー体験を損ねていると気づきました。
試行3: ボトムナビゲーションへの移動（1月31日）
ボトムナビに通報ボタンを移動。どのページからでも1タップでアクセス可能にした。ナビ項目数は4つに維持（増やすとシニアが混乱する）
最終的に、ボトムナビゲーションに配置しました。理由は明確です。
- どのページからでもアクセス可能: 緊急時にホームに戻る必要がない
- 常に表示されるが邪魔にならない: アイコンサイズなのでホーム画面を圧迫しない
- ナビ項目数を4つに維持: 5つ以上になるとシニアが選択に迷う
オレンジ色の選択
通報アイコンの色にもこだわりました。
通報アイコンをオレンジで強調。赤はエラー/削除の印象が強く、シニアに「押してはいけないボタン」と誤解されかねない。オレンジは注意を引きつつ圧迫感が少なく、色覚特性がある方にも識別しやすい
赤色は警告やエラーの印象が強すぎて、シニアが「押してはいけないもの」と認識する恐れがありました。オレンジなら注意を引きながらもネガティブな印象を与えにくい。さらに、赤緑色覚特性を持つ方にもオレンジは識別しやすいという利点があります。
「見せすぎない」UI設計 — 情報の集約と整理
ゴミ出し情報の統合
ゴミ出し情報は当初「今日」と「明日」を2つのカードで表示していました。しかしPMとして見直した結果、1行に集約しました。
ゴミ出し情報: 「今日/明日」の2カード → 「次のゴミ出し」1行に集約。朝8時以降は自動的に翌日の情報に切り替わる時間ベースロジックを実装
2つのカードが画面を占有していたため、天気予報と合わせて「TodayInfo」という1行コンポーネントにまとめました。朝8時（一般的なゴミ出し時刻）を過ぎると自動的に翌日の情報に切り替わるロジックもClaude Codeで実装しています。
画像ビューアのシニア対応
回覧板のスキャン画像を表示する画像ビューアも、シニア向けに工夫しました。
画像ビューア: スワイプ + 大きな「前へ/次へ」ボタンの両方を提供。ピンチズームは避け、ダブルタップで2倍固定ズーム + ドラッグでパンニング
ピンチズーム（2本指で拡大縮小）は若い世代には自然な操作ですが、シニアには難しい。ダブルタップで2倍に固定拡大する方がシンプルで、「拡大」ボタンも明示的に配置しています。
PM-AI 対話: ナビゲーション項目の絞り込み
ボトムナビの項目数について、Claude Code と議論しました。
ZeronovaZeronovaこの判断により、ナビゲーションがシンプルになり、すべてのアイコンとラベルを大きく表示できるようになりました。
共同開発で気づいたこと
このプロジェクトは、元同僚のベテランSEとの共同開発です。個人開発が中心だったZERONOVA LABにとって、初めての複数人体制でした。
個人開発では「自分がPMで自分が実装者」なので、頭の中で判断が完結しがちです。しかし共同開発では、設計意図を言語化して共有する必要があります。「なぜスワイプではなくタブなのか」「なぜ通報ボタンをオレンジにしたのか」、こうした判断理由を開発日記に残すことが、チーム内の認識合わせとして機能していました。
まとめ — シニア向けUI設計の5つの原則
自治会DXの開発を通じて、シニア向けWebアプリのUI設計原則が見えてきました。
- 発見可能性を最優先にする: スワイプのような「知らないと使えない」操作を避け、ラベル付きのタブやボタンで「見れば分かる」UIにする
- タップ領域は48px以上: WAI-ARIAの44pxは最低ライン。シニア向けでは余裕を持たせる
- キーボード入力を最小化する: 自由記述の代わりに選択式UIを使い、入力ハードルを下げる
- 色の選択は慎重に: 赤は「危険・エラー」の印象が強く、オレンジの方がアクションを促しやすい。色覚特性への配慮も忘れない
- 見せすぎない: 毎日使わない機能はホーム画面から外し、常にアクセスできる場所（ボトムナビ等）に配置する
シニア向けのUI設計は、一般的なWeb開発の「ベストプラクティス」とは異なる判断が求められます。「若い世代にとって直感的なもの」と「シニアにとって使えるもの」は別物であるという認識が、この開発の最大の学びでした。
関連記事:
- シニア向け UI で避けるべきパターン — UIアンチパターンを深掘りした技術記事
- Vercel AI SDK + Google Gemini で日本語要約 API を作る — AI要約機能の実装詳細
- 1日でMVPを作る — Supabase フル活用の高速開発術 — 高速開発のアプローチ
Zeronova（ゼロノバ）
Product Manager / AI-Native Builder
Web/IT業界19年以上・20以上のWebサービスを担当したPdM。東証プライム上場企業の子会社代表として事業経営を経験。現在はAIを駆使して企画から実装まで完結させる個人開発を実践中。