電力管理ダッシュボード：運用画面・CSV更新フロー設計
電力オペレーター向けの業務ダッシュボードで、CSV更新を含む複雑な運用フローを、安全に扱える画面仕様へ整理した実務案件。確認・アップロード/ダウンロード・削除・バリデーション・エラー表示まで、実装を見据えて設計した。
UI/UXレビュー社内ツール
詳細を見るこの実装支援で行うこと
アクセシビリティ実装支援では、レビュー結果、監査レポート、課題リスト、自動チェック結果などをもとに、合意した対象範囲についてフロントエンド上の修正を行います。何を直すかがまだ曖昧な状態からではなく、対象課題・対象ページ・対象フロー・対象コンポーネントを確認したうえで、実装可能な範囲を見積もります。
見えている課題を、実装で扱える単位にする
監査レポートや自動チェック結果に書かれた指摘をそのまま作業項目にするのではなく、対象画面、対象コンポーネント、再現条件、修正方針を確認し、実装で扱える単位に整理します。
対象範囲に沿ってフロントエンド修正を行う
フォーム、エラー表示、キーボード操作、フォーカス表示、HTML構造、ARIA、UIコンポーネントの挙動など、合意した対象範囲の中でフロントエンド上の改善を行います。
変更内容・確認内容・残課題を共有する
修正後は、何を変更したか、どの条件で確認したか、何が対象外又は残課題として残るかを整理し、次の確認・追加対応・継続改善を判断しやすい形にします。
こんな状況、ありませんか
- アクセシビリティ改善レビューや監査レポートはあるが、実際にどう直せばよいかで止まっている
- axe、Lighthouse、WAVEなどの指摘を見ても、どの修正が本当に必要か判断しづらい
- 主要ページ、フォーム、申込・購入・問い合わせフローなど、重要な範囲から改善したい
- フォーム、エラー表示、フォーカス表示、キーボード操作など、実装上の細かい課題を直したい
- React / Next.js / TypeScript のコードベース上で、アクセシビリティ改善を進めたい
- 社内エンジニアや制作会社だけでは判断が難しい課題を、外部の実装支援として依頼したい
- 全面改修ではなく、対象ページ・対象フロー・対象コンポーネントを区切って改善したい
- 修正した内容、確認した内容、残る課題を整理しておきたい
レビュー結果や既存課題を、実際の画面・コード上の改善へつなげます。
アクセシビリティ対応では、課題を見つけることと、実際に直すことの間に大きなギャップがあります。
たとえば、フォームラベルやエラー表示、フォーカス順序、キーボード操作、モーダルやドロップダウンの挙動、HTML構造やARIAの扱いは、単にツールの指摘を消すだけでは済まないことがあります。
このサービスでは、アクセシビリティ改善レビューまたは十分に具体的な既存課題をもとに、IAAP CPACCを保有する担当者が、対象範囲を確認したうえでフロントエンド実装修正を行います。
修正後は、変更内容、確認した範囲、残課題、追加確認が必要な論点を整理し、次の対応を判断しやすい状態にします。
ウェブアクセシビリティ対応が求められる背景
ウェブサイトやフォーム、申込・購入・予約などのオンラインフローは、利用者が情報にたどり着き、操作を完了するための重要な入口です。アクセシビリティ上の問題があると、一部の利用者が内容を理解できない、操作を進められない、途中で離脱してしまうことがあります。
オンライン上のフローが、事業の入口になっている
問い合わせフォーム、申込画面、購入フロー、予約ページ、管理画面などは、利用者がサービスに触れるための実務上の接点です。そこに操作しづらさや情報の伝わりにくさがあると、機会損失や問い合わせ対応の増加につながることがあります。
ウェブ上の利用しやすさが、企業の確認テーマになっている
日本では、障害者差別解消法の改正により、民間事業者にも合理的配慮の提供が義務化されています。これは、すべてのウェブサイトに一律の適合証明が求められるという意味ではありませんが、ウェブ上の情報提供やオンライン手続きの利用しやすさを確認する背景のひとつになっています。
主要ページ・フォーム・フローから、段階的に整えていく
ウェブアクセシビリティ対応は、現状把握、課題整理、改善、再確認を積み重ねていくものです。まず主要ページ、フォーム、申込フロー、購入フロー、問い合わせフローなど、事業上重要な範囲から確認することで、改善の優先順位や次に扱うべき論点を把握しやすくなります。
実装支援に入る前に、対象課題と範囲を確認します
アクセシビリティ実装支援は、何を直すかがまだ曖昧な状態から、いきなり実装に入るサービスではありません。まず対象課題・対象範囲・確認方法を整理し、実装で扱える状態かを確認します。
原則として、アクセシビリティ改善レビューの結果、他社の監査レポート、社内で整理した課題リスト、自動ツールの結果、または既に把握している具体的な課題をもとに、実装対象を整理してから進めます。
対象課題、対象ページ、対象フロー、対象コンポーネント、確認方法、コードベース、ステージング環境、レビュー・コードレビュー・マージ・デプロイの担当範囲などを確認したうえで、見積もりとスコープを判断します。
コードベース、ステージング環境、非公開画面、内部資料などを確認する場合は、必要に応じてNDA締結後に進めます。
実装支援に進む前に、主に以下を確認します。
- 実装対象となる課題
- 課題リスト・監査レポート・自動ツールの結果などの有無
- 対象ページ / 対象フロー / 対象コンポーネント
- 再現条件または確認方法
- 優先度または今回扱う範囲
- コードベース / リポジトリ / ステージング環境へのアクセス可否
- 技術スタック
- ブランチ / プルリクエスト / コードレビュー / マージ の進め方
- クライアント側の確認者・判断者
- クライアント側でのデプロイ・本番反映の進め方
既存の監査レポートや課題リストがある場合でも、詳細な読み込み、実装可否判断、見積もり前提整理が必要な場合は、見積もり対象又は別スコープとして扱います。
実装支援で扱う主な領域
実際に扱う内容は、事前に確認した対象課題・対象範囲・コードベースの状態によって個別に定めます。WCAG 2.2 A/AAを主な参照軸として、たとえば以下のような領域を扱います。
フォーム・入力項目
ラベル、説明文、必須項目、入力補助、エラー表示、確認フローなど、フォーム利用時に支障が出やすい箇所を改善します。
エラー表示・状態表示
エラー、成功、選択中、無効状態、未入力状態などが、見た目だけでなく構造上も伝わるように調整します。
キーボード操作
Tab移動、操作可能性、フォーカス順序、主要フローの完了可能性など、キーボード利用時の問題を対象範囲内で改善します。
フォーカス表示・フォーカス管理
フォーカスが見えるか、操作後の移動が自然か、モーダルやドロップダウンでフォーカスが迷子にならないかを確認し、必要な範囲で調整します。
HTML構造・ARIA
セマンティックHTML、ARIA属性、見出し構造、ランドマーク、リンク・ボタンの役割などを、実装文脈に合わせて整理します。
UIコンポーネント
モーダル、ドロップダウン、チェックボックス、ラジオボタン、ナビゲーションなど、UIコンポーネントの実際の使われ方に合わせて改善します。
コントラスト・状態表示
対象課題の解消に必要な範囲で、コントラスト、ホバー、フォーカス、アクティブ、無効状態などの状態表示を調整します。
モーション軽減対応
動きのあるUIについて、必要に応じて prefers-reduced-motion を考慮した実装調整を行います。
実装後に共有するもの
事前に確認した対象範囲について、実装修正した内容や確認できた内容を共有します。共有形式はクライアントの開発フローに合わせて個別に対応します。
GitHubプルリクエスト、ブランチ、パッチ、変更メモ、Google Docs、Google Sheetsなど、案件内容・開発フローに応じて共有形式を定めます。最終説明会（60分1回）にて、変更内容や残課題を説明します。
- 事前に確認した対象課題に対するコード変更
- GitHubプルリクエスト / ブランチ / パッチ などの共有形式
- 変更内容メモ
- 修正前の課題と対応内容の対応表
- 実装後の確認メモ
- 事前に確認した確認条件での確認結果
- 残課題
- 対象外課題
- 追加確認事項
- 必要に応じた簡易引き継ぎメモ
- 最終説明会（60分1回）
- 共有形式は、クライアント側の開発フロー、リポジトリ運用、レビュー / マージ 方法に合わせて事前に確認します。
対象課題・コードベース・確認範囲をもとに個別に見積もります
アクセシビリティ実装支援は、対象課題の数だけで料金が決まるサービスではありません。
同じ「フォームのエラー表示を直す」という課題でも、既存の実装構造、UIコンポーネント、状態管理、バリデーション方式、デザイン側の判断、確認環境によって、必要な作業量は大きく変わります。
そのため、料金は、対象課題・対象ページ・対象フロー・対象コンポーネント・コードベース・確認方法・共有形式を確認したうえで、個別にお見積もりします。
見積もりでは、主に以下を確認します。
- 対象課題の数と複雑さ
- 対象ページ・対象フロー・対象コンポーネントの範囲
- すでに整理されている課題が、実装に進められる状態か
- React / Next.js / TypeScript などの技術スタック
- 既存コードベースの構造
- フォーム、状態管理、UIコンポーネントの実装状況
- リポジトリ / ブランチ / プルリクエスト / パッチ などの共有方法
- ステージング環境・確認環境の有無
- クライアント側でのレビュー / マージ / デプロイの進め方
- 実装前にデザイン・文言・仕様判断が必要かどうか
- 修正後の確認メモ・引き継ぎメモの必要量
- 希望時期・優先度・緊急度
Starting from
個別見積もり
Timeline
期間は対象範囲により個別確認
正式な料金と期間は、対象課題、コードベース、実装難度、確認環境、共有形式、クライアント側のレビュー / マージ / デプロイ体制を確認したうえでご提示します。
このサービスが向いているケース／向いていないケース
向いているケース
- アクセシビリティ改善レビュー結果をもとに実装修正へ進みたい
- 他社監査レポートや社内の課題リストがあり、実装対応を相談したい
- 主要ページ、フォーム、申込フロー、購入フロー、問い合わせフローなどを改善したい
- フォーム、エラー表示、キーボード操作、フォーカス表示など具体的な課題を直したい
- 対象ページ・対象フロー・対象コンポーネントを区切って改善したい
- 修正内容、確認内容、残課題を整理して残したい
- 今後の追加対応や継続改善につなげるため、まず対象範囲の修正から始めたい
向いていないケース
- 何が問題かまだ整理されていない状態で、いきなり実装だけ依頼したい
- サイト全体の完全なWCAG AA適合を求めている
- 法的適合保証や公式な適合判定を求めている
- 全ページ・全機能・全状態の包括修正を求めている
- ネイティブアプリ、PDF、文書ファイルのアクセシビリティ修正を依頼したい
- バックエンド、インフラ、認証、決済、CMS設計などを主対象にしたい
- 長期保守・継続監視・本番運用後の包括サポートを同一スコープに含めたい
このサービスでできること／この範囲に含まれないこと
できること
- 対象課題に対するフロントエンド修正
- フォーム、ラベル、説明、エラー表示の改善
- キーボード操作・フォーカス表示・フォーカス順序の改善
- モーダル、ドロップダウン、チェックボックス、ラジオボタン等のUI挙動改善
- セマンティックHTML / ARIA の整理
- 見出し構造、ランドマーク、リンク / ボタンの役割整理
- 対象課題に関連するコントラスト・状態表示の調整
- モーション軽減対応
- 修正後の確認
- 変更内容・残課題・追加確認事項の整理
この範囲に含まれないこと
- 新規アクセシビリティ改善レビュー又は網羅的監査
- 法的適合保証・公式な適合判定
- WCAG AA適合証明
- サイト全体・プロダクト全体の包括修正
- 全支援技術・全ブラウザ・全環境での包括検証
- NVDAなどWindows環境を前提とするスクリーンリーダー確認
- 障害のある利用者によるユーザーテスト
- ネイティブアプリのアクセシビリティ修正
- PDF・文書ファイルのアクセシビリティ確認・修正
- バックエンド・インフラ・認証・権限・決済・CMS等の主たる再設計
- デザインシステム全体の大規模な再設計・再構築
- 長期保守・継続監視
対象範囲外の課題が見つかった場合は、追加見積もり、別スコープ、又は継続支援として相談できます。
修正後の確認について
実装後は、事前に確認した対象課題・対象ページ・対象フロー・対象コンポーネントについて、事前に確認した確認条件の範囲で確認を行います。
確認は、独立した適合監査や全面QAではなく、実装支援の作業結果確認として行います。
対象課題について対応を行い、事前に確認した確認条件の範囲で同一の問題が確認されない場合、その課題を「対応実施済み」又は「確認済み」と扱うことがあります。
確認方法には、対象課題に応じて以下を組み合わせます。
- 修正前に再現した課題の再確認
- axe / Lighthouse / WAVE 等で再チェック可能なものの確認
- キーボード操作確認
- フォーカス表示・フォーカス順序確認
- フォーム・エラー状態の確認
- DevTools / accessibility tree 確認
- VoiceOver等、現在の作業環境で対応可能な範囲のスポット確認
- ビフォー・アフターメモの整理
これは、ウェブサイト全体、プロダクト全体、すべての支援技術、すべてのブラウザ、すべての利用環境において問題がないことを意味するものではありません。
Sola Studioの特徴
必要な範囲から、実装修正を始められる
全サイト・全機能を一度に修正するのではなく、主要ページ、フォーム、申込フロー、特定フローなど、事業上重要な範囲から実装支援を進められます。対象範囲を絞る場合でも、修正内容・確認条件・残課題を曖昧にせず、次の判断につながる形で整理します。
レビュー結果を、実装で扱える単位へつなげる
アクセシビリティ課題は、指摘されたあとに実装で止まりやすい領域です。Sola Studioでは、レビュー結果や既存課題を、対象範囲・実装方針・確認条件に分けて、実際の修正に進める形へつなげます。
CPACC保有者が、フロントエンド実装まで担当する
IAAP CPACCを保有する担当者が、React / Next.js / TypeScript / Radix UI / フォームフローなどの実装文脈を踏まえ、フォーム、UIコンポーネント、状態表示、DOM構造、ARIAなどをコード上で扱います。
ツールのエラー消しだけにしない
アクセシビリティ改善は、ツールのエラーを消すことだけではありません。キーボードで操作できるか、エラーが伝わるか、フォーカスが見えるか、状態が分かるかなど、実際の画面とフローの中で確認します。
修正内容と残課題を整理して残す
何を変更したか、どの条件で確認したか、何が残っているかを共有することで、社内確認、追加対応、別スコープ、継続改善の判断に使いやすくします。
関連実績
Sola Studioがこれまでに携わったプロジェクトの一部をご紹介します。
多言語サイト：情報設計・調査設計・UX改善提案
最大約5言語規模の多言語サイトに対して、情報設計・ユーザビリティ調査設計・改善提案を行った案件。予約導線や購入判断情報の不足を整理し、サイトマップ・ワイヤー・調査票・改善提案資料へ落とし込んだ。
UI/UXレビュー複数市場対応詳細を見る
Promotee — アクセシビリティ配慮の面接フラッシュカードアプリ
非ネイティブ話者の面接練習を支える、キーボード完結のフラッシュカードアプリ。スクリーンリーダー対応、モーション制御、セマンティックなマークアップなど、アクセシビリティを前提に設計・実装した。
アクセシビリティインクルーシブUX詳細を見る
ご相談からサービス提供開始まで
- 1
ご相談フォーム送信
ご相談の背景・対象サービス・現状の概要をお知らせください。
- 2
内容確認・次ステップのご案内
内容を確認し、次のステップをご案内します（最短当日〜5営業日程度）。
- 3
日程調整
初回確認ミーティングの日程を調整します。
- 4
初回確認ミーティング
ご相談内容、対象範囲、サービスの進め方を確認します。秘密保持契約（NDA）締結前は、非機密情報の範囲で確認します。
- 5
概算見積もりのご提示（必要に応じて）
初回確認の内容を踏まえて、必要に応じて概算見積もりをご提示します。内容をご確認いただいた上で、詳細確認へ進む場合があります。
- 6
秘密保持契約（NDA）締結
スコープ型サービスでは、詳細確認・正式見積もりの前に秘密保持契約（NDA）締結をお願いしています。秘密保持契約（NDA）締結前は、非機密情報の範囲での確認にとどめます。
- 7
正式見積もりに必要な詳細情報の確認
秘密保持契約（NDA）締結後、正式見積もりに必要な詳細情報を共有いただきます。内容を確認した上で、スコープと条件を整理します。
- 8
正式見積もりのご提示
確認した内容をもとに、スコープ・条件・料金を整理した正式見積もりをご提示します。
- 9
契約内容の確認・契約成立
正式見積もりの内容を確認し、契約条件について双方で合意したうえで、契約書その他必要な手続により契約を成立させます。
契約書雛形・秘密保持契約（NDA）雛形はSola Studioで用意しています。貴社雛形を使用する場合は、内容を確認したうえで調整可否を判断します。
- 10
請求書発行・お支払い
原則全額前払い・銀行振込です。50万円以上の案件では、案件内容・期間に応じて、着手時60% ／ 最終共有会前40% の分割払いをご案内する場合があります。
- 11
入金確認・サービス提供開始
契約成立と入金確認が揃った後、合意したスコープと条件に基づきサービス提供を開始します。
課題整理がまだの場合は、まずレビューから
何を直すべきか、どの課題を優先すべきか、実装対象をどう切るべきかがまだ曖昧な場合は、先にアクセシビリティ改善レビューで課題リスト・優先順位・実装支援候補を整理することをおすすめします。
アクセシビリティ改善レビューを見る追加対応・継続改善にも接続できます
実装支援の完了後、追加課題、追加ページ、追加フロー、追加コンポーネントへの対応が必要な場合は、追加実装支援、追加レビュー、又は継続支援として相談できます。
よくある質問
アクセシビリティ改善レビューなしで依頼できますか？
既に十分に具体的な監査レポート、課題リスト、自動チェック結果などがある場合は、レビューなしで実装支援の事前確認へ進める場合があります。ただし、課題内容、対象範囲、再現条件、コードベース、確認環境が不十分な場合は、先にアクセシビリティ改善レビュー又は追加スコープ確認が必要になることがあります。
どのような課題を直せますか？
フォーム、エラー表示、キーボード操作、フォーカス表示、フォーカス順序、モーダル、ドロップダウン、チェックボックス、ラジオボタン、セマンティックHTML、ARIA、見出し構造、リンク・ボタンの役割、コントラスト、モーション軽減対応など、フロントエンド上で扱える課題が主な対象です。
修正後に「対応済み」と言えますか？
対象課題について対応を行い、事前に確認した確認条件の範囲で同一の問題が確認されない場合、その課題を「対応実施済み」又は「確認済み」と扱うことがあります。ただし、サイト全体・すべての環境・すべての支援技術で問題がないことを意味するものではありません。
プルリクエスト作成やGitHub上での共有はできますか？
案件の開発フローに応じて、GitHubプルリクエスト、ブランチ、パッチ、変更メモなどで共有できます。実際の共有形式、コードレビュー / マージ方法、デプロイ担当範囲は事前に確認します。
本番反映やデプロイも含まれますか？
本番反映、デプロイ、最終QA、受入判定は、別途明示的に合意しない限り、クライアント側の担当範囲です。Sola Studioは、事前に確認した対象範囲に沿って実装修正と確認メモの共有を行います。
NVDAでの確認は含まれますか？
現時点では、NVDA など Windows 環境を前提とするスクリーンリーダー確認は標準対応範囲に含めていません。必要な場合は、対象外または別途確認事項として扱います。
アクセシビリティ対応が完了したことの証明になりますか？
いいえ。本サービスは、事前に合意した対象課題・対象範囲についてフロントエンド上の実装修正を行うサービスです。法的適合、公式な適合判定、WCAG AA 適合証明、EAA 適合保証を行うものではありません。
代替テキストや文言の作成も含まれますか？
alt属性の実装や、対象課題に直接関係する軽微な調整は扱える場合があります。ただし、代替テキストの内容作成、本文リライト、デザイン全体の見直しは、標準範囲には含まれません。必要な場合は別スコープとして確認します。
必要な範囲から、アクセシビリティ改善を実装する。
レビュー結果や課題リストはある。 でも、どこまでを今回直すべきか、どの範囲で見積もれるか、実装後に何を確認すべきかを整理したい。 アクセシビリティ実装支援では、対象課題に対するフロントエンド修正と、変更・確認内容、残課題の整理を行います。
ご確認ください
- 本サービスは、合意した対象課題・対象ページ・対象フロー・対象コンポーネントについて、フロントエンド上のアクセシビリティ実装修正を行うスコープ型サービスです。ウェブサイト全体、プロダクト全体、全ページ、全機能、全状態の包括修正を行うものではありません。
- 本サービスは、WCAG 2.2 A/AAを主な参照軸として対象課題に関連する改善を行うものであり、法的適合保証、公式な適合判定、WCAG適合証明、JIS X 8341-3に基づく正式な試験、対応度表記、準拠判定、適合証明、第三者監査を行うものではありません。
- 実装後の確認は、合意した対象課題・対象範囲・確認条件に基づく作業結果確認です。すべての支援技術、すべてのブラウザ、すべての利用環境で問題がないことを保証するものではありません。
- NVDAなどWindows環境を前提とするスクリーンリーダー確認、障害のある利用者によるユーザーテスト、ネイティブアプリのアクセシビリティ修正、PDF・文書ファイルのアクセシビリティ確認・修正は標準対応範囲に含まれません。
- 本番反映、マージ、デプロイ、リリース、最終QA、受入判定、本番公開後の継続監視又は長期保守は、別途明示的に合意しない限りクライアント側の責任範囲です。
- 既存のレビュー結果、診断結果、監査結果、課題一覧、自動チェック結果がある場合でも、仕様変更、画面変更、コード変更、運用変更、時間経過その他の事情により、実装前に追加確認又は再レビューが必要になる場合があります。
- 秘密保持契約（NDA）締結前は、非機密情報の範囲でご相談ください。コードベース、非公開画面、ステージング環境、内部資料、顧客データ、未公開仕様などは、必要に応じてNDA締結後に確認します。