アクセシビリティ監査ツール「DevAlly」の30秒紹介動画
製品チーム向けにアクセシビリティの準拠を自動で監査する「DevAlly」の30秒の紹介動画です。git pushの端末に出る赤い4行の問題が、Scan・Identify・Remediate・Proveの手順で片付くまでを追っています。
依頼を受けて制作したものではありません。FablessBridgeが公開情報をもとに自主制作した紹介動画です。製品名・画面・ロゴは各社のものです。
DevAllyとこの紹介動画
DevAllyは、製品チームのためにアクセシビリティの準拠を自動で監査するツールです。Scan・Identify・Remediate・Prove・Scaleの流れで、問題を深刻度の順に並べ、コードでの直し方をGitHubやCI/CDの中で示します。エディタからはMCPでも使えます。
- 製品
- DevAlly（アクセシビリティ監査ツール）
- 動画
- 30秒・横16:9・画面の文字は英語・ナレーションなし
動画で見せたこと
- 後回しになりがちなアクセシビリティの問題を、git pushの端末に赤い✗の4行として出しました。
- どこが悪いのかを、監査画面のViolationsのカードと、tabindexの問題とHighの表示を囲んで示しました。
- 直し方と直した証拠として、Fix my codeのボタンと、Resolved casesの画面を順に見せました。
30秒の流れ
0〜3秒 公式のロゴとサイトの見出しが出ます。
3〜8秒 git pushの端末に、ボタン名・コントラスト・ラベル・tabindexの赤い✗が4行並びます。
8〜12秒 Scanとして公式の監査画面に寄り、Violationsのカードを囲みます。
12〜16秒 Identifyとして、端末の4行目と同じ部品のtabindexの問題とHighを囲みます。
16〜20秒 Remediateとして、Fix my codeを囲みます。
20〜23秒 ブロック文字の網点が中心からほどけ、公式ロゴが出ます。
23〜26秒 Proveとして、Resolved casesを囲みます。
26〜30秒 ロゴと「$ open https://devally.com」で締めます。
表現で工夫したこと
サイトの生成りと黒に、サイトのドットの段々の縁を░▒▓█のブロック文字の帯で置き換えて上下に揺らしました。窓の台紙はサイトの手順の色に合わせてScanは黄、Identifyは桃、Remediateは薄緑、Proveは灰とし、見出しはサイトと同じJoanにしています。見本の人名が写る画像は使わず、トップの画像はアバターと人名の入る上端を切って寄りました。
製品サイトで公開されている情報だけをもとに、製品の見た目に合わせて制作しています。ナレーションは入れず、画面の動きと音楽で伝える構成です。
自社の製品の紹介動画を相談する
企画が固まっていない段階からご相談いただけます。
紹介動画を相談する料金と制作の流れを見る顧客案件と自社サンプルを見る