便利屋 Cat’s Paw(職業訓練校：制作課題)ウェブアクセシビリティ対応

01.サイト概要

このサイトは、職業訓練校での制作課題として「誰かを喜ばせるサイト」というテーマで制作しました。

私が便利屋サービスを題材に選んだ理由は、日常の “困った” を解決することで、「人の暮らしを支えられる点＝喜び」と感じたためです。
多様なユーザーが安心して利用できるよう、配色・フォント・UI などにアクセシビリティの視点を強く取り入れた構成 を意識しています。

02.デザインコンセプト（世界観）

• 親しみやすさ、やさしい印象
• シンプルで見やすいレイアウト
• 直感的に操作できる UI
• 誰でも迷わず目的ページにたどり着ける導線設計

とくに利用者層を限定せず、高齢者・色弱ユーザー・ITに不慣れなユーザーでも読みやすい配慮を中心にデザインしました。

03.制作の狙い（設計思想）

3-1.視認性を重視した配色設計

ブルーを基調にしつつ、コントラスト比に配慮した明度設定を採用。
背景と文字色の差を十分にとることで、どのデバイスでも読みやすい画面を目指しました。

3-2.情報を整理したレイアウト

サービス一覧、料金表、FAQ など必要情報が多いため、カテゴリーごとに情報を分割し、1画面で理解しやすいブロック構造 を採用。
閲覧目的の異なるユーザーでも迷わず必要な情報にアクセスできます。

3-3.HTML の意味論・アクセシブル構造

HTML5 のセマンティックタグを適切に使い、スクリーンリーダー利用者にも理解しやすい文書構造を意識しています。
また、リンクの役割やボタンの操作性など、操作しやすい UI に注力しました。

3-4.PowerPoint による提案資料作成

クラス内での最終プレゼンに向けてサイト説明・ターゲット設定・アクセシビリティ配慮をまとめた PowerPoint 資料も制作しました。
（クライアントワークを想定した練習として実施）

presentation1_cropped

04.注力したポイント

このサイト制作では、アクセシビリティ（WCAG 2.2 / JIS X 8341-3:2016） に重点を置き、誰でも見やすく使いやすい UI を目指しました。主に取り組んだポイントは以下です。

■ 色弱対応のカラー設計（コントラスト比の確保）
色覚多様性を考慮し、

• コントラスト比 4.5:1 以上を維持
• 文字と背景色の組み合わせを複数パターン検証
• 強調色は赤系ではなく誰でも認識しやすい色を採用

アクセシビリティ基準に準拠した配色設計にすることで、読みやすさと視認性を高めました。

■ UD（ユニバーサルデザイン）フォントの採用

本文は読みやすさ優先の UDフォントを採用。
高齢者や視力の弱い人でも負担なく読めるよう、

• 字形の認識しやすさ
• 行間と字間のバランス
• スマホ表示時の可読性
  に特に配慮しました。

■ HTML 構造と WAI-ARIA による意味づけ

HTML5 のセマンティック要素（header / main / nav / section / footer）を正しく使い、スクリーンリーダーでも読みやすい構造にしました。

また、必要な箇所には WAI-ARIA を補助的に追加し、誰でも情報にアクセスしやすいサイトを構築しています。

■ キーボード操作で全てのリンクにアクセス可能
Tab キーでのフォーカス遷移をチェックし、

• リンク
• ボタン
• メニュー
• 問い合わせ導線
  がすべてキーボードだけで操作できるように調整しました。

■ UI / ナビゲーションの分かりやすさ
ユーザーが迷わないよう、

• 大きく分かりやすいナビゲーション
• クリック領域を広く確保
• スマホでのタップミスを防ぐボタン配置
• 余白を活かした情報整理
  など、ストレスなく利用できる UI に仕上げています。

■ ★ miChecker によるアクセシビリティ検証（高スコア達成）
総務省提供の miChecker（アクセシビリティ評価ツール） で検証した結果、このサイトは総合的に 高評価スコア を獲得しました。

この結果は、

• コントラスト比の確保
• 見やすい余白設計
• 意味論に沿った HTML
• UI の分かりやすさ
• 読みやすいフォント設計
  など、制作時にこだわった取り組みが成果として表れたものです。

4-1. ページ構成の設計

• TOP
• 作業内容・料金
• お客様の声
• よくある質問
• お問い合わせフォーム（外部連携）
• 会社概要
• プライバシーポリシー
• サイトマップ
• ブログ（外部連携）

一般的なコーポレートサイトに必要と思われるページを全て作成しファビコンも設定しました。
また、情報量を整理し初めて使う人でも「次にどこへ進めば良いか」迷わない構成に。

4-2. 素材写真の統一

• 配色フィルター調整
• 明るさ・コントラスト統一
• イラストと写真の混在を避け、世界観の統一を担保
• アイキャッチ・料金表などの必要パーツを独自作成

4-3. UI / UX の工夫

• 1カラム構成で情報の流れが追いやすい
• セクションごとに背景色を変えて可読性UP
• ボタンのクリック領域を広めに設定
• FAQをアコーディオン式で整理し、モバイル閲覧に最適化

05.成果

• 総務省提供のアクセシビリティ評価ツール「miChecker」で高スコア
  → 視認性・操作性・理解しやすさ・堅牢性の4項目が高評価
• 色弱・高齢者にも優しいUI設計
• コントラスト比、フォント、情報構造が適切と評価
• プレゼン資料としても分かりやすい設計で、訓練校内でも高評価

06.使用ツール

• HTML / CSS（手書きコーディング）
• Sublime Text（コードエディター）
• Figma（ワイヤーフレーム・簡易デザインカンプ）
• Chrome DevTools（レスポンシブ調整・デバッグ）
• Excel（ターゲット設定シート / カスタマージャーニーマップ）
• Photoshop /Illustrator（写真トーン補正・画像作成など）
• Adobe Color｜コントラストチェッカー・アクセシビリティツール
• W3C Validator（マークアップチェック）
• miChecker（アクセシビリティ検証）
• PowerPoint（プレゼン資料）