このページの中身
検証と完了
作る前に、終わりの形を書きます。書いていないものは検証できず、出来たものに合わせた条件ができあがります。
図の中身を文字で読む
- 作る前に「終わりの形」を書く。書いていないものは、検証できない。
- 受入条件 作る 機械の検査 画面を実際に見る 完了
- 満たすべき条件を先に 道具に任せてよい部分 リンク・警告・数値・幅 撮って、明暗と幅を確かめる 条件を全て満たす
- ここから先は人が判断する
- 機械が通しても、伝わっているかは別
- 機械で確かめられること
- 内部リンクが切れていない
- ビルドの警告が0件
- コントラスト比が基準値以上
- 375pxで横スクロールが出ない
- 禁止した語が本文に無い
- コンソールにエラーが出ていない
- 人でないと分からないこと
- 読者が期待している態度と合っているか
- 写真の人物や場面が、内容と噛み合っているか
- 文章が固有の事実を語っているか
- 見た目が、どこかで見た画面になっていないか
- 事実として誤っていないか
- 出してよい情報かどうか
- 記録に残すこと
- 何を確かめたか
- どの条件を満たしていないか
- なぜ受け入れたか
- 「たぶん大丈夫」を残さない。
- 確かめていないものは、確かめていないと書く。
ひと目で#
作る前に「終わりの形」を書く。書いていないものは、検証できない。
- 受入条件
- 満たすべき条件。作る前に書く
- 完了の定義
- どこまでやったら終わりか。関係者で共有する
- プリフライトチェック
- 出す前に通す確認の一覧
- スクリーンショット検証
- 実際に描画された画面を見て確かめる
- デザインレビュー / クリティーク
- 判定する場と、意見を出す場
- レッドチームレビュー
- 壊す側から見る
- 人間の介在
- 最後の判断を人が持つこと
どちらの入口から来てもここで終わる#
AIに作らせるで言葉から組んだ場合も、カンプ画像から組むで画像から起こした場合も、終わりの形は同じ受入条件で判定します。 ブリーフの7項目目「完了の判定」を、作る前に書きます。入口が違っても、ここが合流点です。
機械で確かめられること#
| 項目 | 判定 |
|---|---|
| 内部リンク | 切れが0件 |
| ビルド | 警告が0件 |
| コントラスト比 | 本文 4.5:1 以上 |
| 幅375px | 横スクロールが出ない |
| 禁止語 | 本文に含まれない |
| コンソール | エラーが出ていない |
人でないと分からないこと#
図の中身を文字で読む
- 機械の網は、目の大きさが決まっている
- 通ったことは、確かめたことではない
- 機械が止める 網を通る
- 内部リンクの切れ 画像の中の崩れた文字
- 本文が 4.5:1 未満 架空の住所と電話
- 幅 375px の横あふれ 作られたお客様の声
- 禁止語 他社に貼っても成り立つ一文
- 機械の検査（リンク・警告・コントラスト・375px・禁止語）
- ここから下は人が読む
- 画像の中の文字と、補われた値を1件ずつ突き合わせる。
- 読者が期待している態度と合っているか
- 写真の人物や場面が、内容とかみ合っているか
- 文章が固有の事実を語っているか
- どこかで見た画面になっていないか
- 事実として誤っていないか
- 出してよい情報かどうか
生成した画像は拡大して見ます。 看板や貼り紙の文字が崩れていることがあります。文字を画像に含めない組み方はカンプ画像から組むにあります。
間違えやすいところ#
- 作ったあとに条件を決める出来たものに合わせた条件になる
- 自動チェックが通ったら完了とする機械が見るのは一部だけ
- 画面を見ずにコードだけで判断する実際の描画は、書いたとおりにならないことがある
- 明るい表示だけで確かめる暗い表示で読めなくなる配色は多い
- 「たぶん大丈夫」を残す確かめていないものは、確かめていないと書く
- 意見を出す場と判定する場を混ぜる決まらない。クリティークとレビューを分ける
- 直したあとに確かめ直さない直しが別の破綻を生む
デザインレビューとクリティークの違い#
| 目的 | 出すもの | |
|---|---|---|
| クリティーク | 良くするための材料を集める | 観察と疑問。可否は決めない |
| レビュー | 進めてよいかを判定する | 可否と、直すべき点 |
直す例#
架空の案件を1つ例にとります。どこを見て、何をどう直すかを書きます。
架空のパン屋のLPを検収する現場です。ヒーロー画像もAIに作らせました。機械の検査は全部通っています。リンク切れ0、本文4.5:1以上、375pxで横あふれなし。それでも拡大すると、画像の中の看板が日本語に似た読めない字で描かれていました。崩れた文字、実在しない住所、作られたお客様の声は、機械の網を素通りします。種別をLPにした検収チェックで1項目ずつ確かめ、画像は文字なしで作り直させました。看板の文言はHTMLの文字として上に重ねます。この分け方はカンプ画像から組むに書きました。
確認する#
- 受入条件が、作らせる前に書いたものとして残っている
- 通った項目と、まだ見ていない項目が区別できる
- 画像の中の文字まで読んだ。崩れた字と架空の値が残っていない
このページで扱う語#
このページで扱う語を並べる本文では太字3 語
語の名前から引くなら用語索引へ。
- デザインレビュー
- 制作物を第三者が点検し、問題を指摘する工程。
- デザインクリティーク
- 案を持ち寄り、議論を通じて改善の方向を探る場。判定ではなく検討が目的。
- デザインQA
- 実装された結果が設計どおりになっているかを確認する工程。
この話が要る場面#
このページが答えになる、現場の困り事です。困り事の側から探すと、同じ場所に着きます。
機械で判定できるのは一部の基準だけ。キーボードで一周し、読み上げで見出しを拾ってみる。
キーボードでTab一周 + 読み上げで見出しを拾う
意見を出す場と、可否を決める場を分ける。クリティークとレビューは別物。
意見を出す場（クリティーク）と可否を決める場（レビュー）を分ける
作る前に受入条件を書く。作ったあとに決めると、出来たものに合わせた条件になる。
受入条件:
- 375px横スクロール0
- コントラストAA
- リンク切れ0
- 禁止語0この場面のほかの困り事と、そのまま貼れる部品は誰でも使えるようにする、AIに作らせるにまとめてある。逆引きには全188件。
検収する#
AIが作った成果物の検収に使います。ページの種別を選ぶと、関係する項目だけに絞られます。全体の公開前チェックは別の一覧にあるので、ここでは生成物に特有の確認だけを並べています。
チェックはこの端末に残ります。種別を切り替えても記録は消えません。
この道具は JavaScript で動きます。無効の場合は種別で絞られず、全項目が並びます。印刷して紙でも使えます。