WebアプリケーションのUI構築で気を付けてるポイント

WebアプリケーションのUI構築で気を付けてるポイント
.NETラボ 勉強会 2025年9月
https://dotnetlab.connpass.com/event/364907/

Transcript

1. Webアプリケーションの UI構築で気を付けてるポイント FutureOne株式会社 草場 友光 .NETラボ勉強会2025年09月
2. 自己紹介 • コミュニティ活動を通じて知識を アップデートしています。 • 2022/08-2026 Microsoft MVP (Developer Technologies) • tomo_kusaba • ドラクエ大好き ドラクエ10のプレイ時間→ 1キャラ目：2642時間 2キャラ目：914時間 3キャラ目：789時間 4キャラ目：190時間(配信用)
3. 注意 • 個人の見解・解釈が多分に入っています。 • 見解の相違・事実誤認などありましたらご指摘ください。 • #dotnetlabでtweetすると左側に表示されます
4. 今日の目的 • WebアプリケーションのUIデザインについて専門のデザイナーが 協力してデザインする場合はよいのですが、必ずしもUIデザイン の専門ではないWebエンジニアがUIデザインまですることがあり ます。 • このような場合でもある程度のUIにするためのポイントについて お話したいと思います。
5. 全体のレイアウトを考えよう • 2ペインあるいは3ペイン構成が基本 • デスクトップを基本にして考えるのか？モバイルを基本にして考 えるのか？ • レスポンシブレイアウトとアダプティブレイアウト
6. メインコンテンツ • メインコンテンツは必ず全体を何らかのレイアウトコンテナーでま とめる • コンテンツの余白の調整などレイアウトコンテナーにまとめておかないと 後での調整がむずかしい。 • CSSクラスをそれ用に作っておけば後で一括で調整も可能 • 基本、グリッドとスタックを組み合わせたオブジェクト配置によっ て調整
7. コンテンツの配置 • コンテンツの配置は左から右、上から下になるように配置 • 画面の解像度によりレスポンシブレイアウトに対応するようにする • ページ要素の位置を変更する • サイズと余白を調整する • 画面の解像度のよりアダプティブレイアウトに対応するようにする • コンテンツの表示・非表示を制御する
8. コンテンツのレイアウト • 関連する要素は近接して表示させる • 論理的な区切りは間に空きスペースを作り関連が薄いことを認識 させる • 区切り線を引いて論理的区切りを示すことは結果として情報密度を高め ることとなり認知負荷を高めることになります
9. スペースについて 種類 説明 コンポーネント間隔 コンポーネント間では要素間の強固なつながりを示すとともにそれぞれの要素の視認性 を確保するために小さなスペーサーが使用されます。 パターン間隔 同じような要素が連続して出現するパターンの要素で間隔を一定にすることは視覚的リ ズムと操作性を確保するために重要です。 レイアウト間隔 レイアウト単位にスペースを入れて論理的な区切りを示します。 レスポンシブ間隔 様々なデバイスのスケールに合わせてコンポーネント、パターン、レイアウト内の間隔を変 更することを検討します。 それぞれ、一貫性を生み出すためのツールとしてスペースを活用することが重要です。
10. 情報を詰め込みすぎない • そのコンテンツを理解できていないのであれもこれもと追加する 必要がある • 何が重要でそれが何によって決定されるのか？ • 可能な限り簡素化することで複雑なタスクを容易にすることがで きます
11. 色 • セマンティックカラー • 赤は危険、黄色は注意など現実世界の関連に基づいて一目でわかる情報 を伝えます。 • アイコンなどのコンテキストを組み合わせることで認知負荷を軽減します • 装飾に使用してはいけません。 • ブランドカラー • その製品を表すキーとなる専用の色です。 • 製品につき1色を選定します。 • 階層を表す色 • 段階的なグレーを使用してインターフェイスに階層感を与えます。
12. 色に関しての注意事項 • 多くの色を使いすぎない • 意外とWebサイトで使われている色は少ない（広告などは除く） • 多くのサイトで使われている色の数は1色から2色（無色系アイコ ンなど除く） • あっても、同系色で階層的な表現で使われていることが多い
13. 例）Azure Portal 黒 青
14. 例）YAHOO JAPAN！ 薄青 青
15. ダークモードへの配慮 • 目の疲れ目の刺激に配慮してダークモードを実装することが望ま しい • ダークモードにした時でもWCAG AAで規定されている4.5:1の コントラスト比を維持する必要あり • このためにライトモードを基準として決定された色はダークモードにおい てコントラスト比を維持するために変化する必要性あり
16. WCAGについて意識しよう • WCAGとは？ WCAG（Web Content Accessibility Guidelines）は、障 害の有無にかかわらず誰もがウェブコンテンツへアクセスし、知覚 し、操作し、理解できるようにするための国際的ガイドラインです。 W3CのWAI（Web Accessibility Initiative）が策定し、各国 の法令（例：EUアクセシビリティ指令、米国Section 508、日本 JIS X 8341-3など）とも整合する基盤として利用されています。
17. WCAG 2.x の基本構造 • WCAG 2.x（2.0 / 2.1 / 2.2）は以下の 3 層構造を持っていま す。 1. 原則 (Principles) 2. ガイドライン (Guidelines) 3. 達成基準 (Success Criteria)
18. 4つの原則 (POUR) 原則 概要 知覚可能 ユーザーが内容を感知できる（テキストの代替・テキストのコントラスト） 操作可能 キーボード操作可能、十分な操作時間、けいれん誘発防止など 理解可能 予測可能な挙動、明確な入力支援、わかりやすい言葉 堅牢 支援技術と互換性を保つマークアップと仕様準拠
19. バージョン変遷 バージョン 公開年 主な追加領域 2.0 2008 基本的なコアセット 2.1 2018 モバイル・低視力・認知支援が拡充 2.2 2023 認知・操作容易性
20. よくある対応課題 課題 典型的な症状 改善 代替テキスト 装飾画像に冗長な説明 役割に応じてnull altを適用 フォーカス可視性 キーボード操作で フォーカスを見失う css : focus-visibleで十分なコントラスト輪郭 色依存 色だけで状態を表示 アイコンやテキストで同時に情報を伝える 動的更新 スクリーンリーダーが 更新されたことを検出 できない aria-live / polite / assertiveの適切設計 フォームエラー 入力エラー箇所が特定 困難 aria-describedby + 適切なフィードバック文章 認知負荷 長文や複雑なフロー チャンク化、段階表示、Plain Language
21. アコーディオン • 関連情報を折りたたみで整理し、情報密度と理解容易性を両立さ せる。 • 重要情報は初期状態で展開可 • 無意味にすべて閉じた状態は避ける • キーボードによる操作を可能とする • セクションが多くなりすぎる場合は再検討
22. アコーディオン実装時の代表的な誤り 誤り 問題点 改善策 クリックのみでの操作 が可能 キーボード操作が不可であるところ キーボード操作を可能にする 開閉の状態をCSSのみ で表現 支援技術へ伝達困難 Area-expandedを追加 見出しがない 文書構造が欠落 見出しを付ける 色だけで区別 色覚多様性に対応不十分 アイコン・テキストを併用する 細切れ 認知負荷増大 意味合い単位で再統合
23. ダイアログ • 主な使用法 • 強制的な意思決定・確認 • 破壊的な操作の確認（ファイル削除など） • 集中的な情報入力 • 短いフォームや１つのタスクに集中させたい場合 • コンテンツ補助 • 画像拡大や詳細を説明したい場合 • 不要なモーダル多用は認知負荷増大とワークフロー断絶を引き起 こすので注意が必要
24. ダイアログの種類 種類 特徴 アクセシビリティ上の注意 モーダル 背景操作を完全にブロック 背景スクロールを抑止 非モーダル 背景操作可能 背景要素とのフォーカス順序の一 貫性
25. ボタン • 単一のアクションを即時トリガーする操作要素 • 成功・失敗・実行中などの状態をユーザーにフィードバックする責 務を持つ • ページ遷移が目的の場合はリンクを用いる
26. ボタンの配置 • 原則：重要度が高いボタンから左→右 • 破壊的操作：可能であればSecondary位置 • ウィザード：左→戻る 右→進む • ボタンのレイアウト 右下に配置
27. チェックボックスとスイッチ 観点 チェックボックス スイッチ 目的 フォーム送信時に評価される離散 的な選択肢 即時にアプリ・システム状態を切り替え インタラクション 送信まで結果が確定・反映されない ことがある 切り替え直後に状態が反映される 複数同時 複数可 独立単体 状態保持 未適用の場合あり 即時適用 再試行 送信取り消しで戻せる 即時影響 適切なユース ケース 利用規約同意 メール配信オプション 通知ON・OFF ダークモード切替 サウンド有効化
28. テキストボックス • 単一行および、複数行およびそれに派生する入力ボックスに関し ての注意点について扱う 要素 推奨 説明 ラベル 必須 プレースホルダーのみは不可 （低コントラスト・自動補完上書きで消失） 追加説明 aria- describedby 文字数制限・書式・利用目的など 必須表示 視覚とアナウン ス アスタリスク＋legend注記で意味説明 オプション表示 明示 任意項目が多い場合は任意明記でフォーム 離脱抑制
29. おしまい おしまい