AIと一緒に画面を作ると、マウスで触って動けば完成と考えがちです。けれど、マウスを使わない人や、使えない場面は意外に多くあります。ここでは、キーボードだけで一通り操作できるかを手元で確かめ、結果を記録に残す方法を書きます。特別な道具は要らず、ブラウザとメモがあれば始められます。
準備するもの
確かめたい画面を一つ選び、マウスから手を離します。記録用に、日付、画面名、操作の目的、結果を書けるメモを用意してください。表計算でもテキストファイルでも構いません。マウスは机の端に寄せておくと、つい触ってしまう癖を防げます。
Tabキーで順に進む
ページを開いたら、Tabキーだけで先頭から順に進みます。移動する順番が画面上の見た目の並びと合っているか、リンクやボタンを飛ばしていないかを見ます。逆向きに戻るときはShiftを押しながらTabを使います。順番が不自然な箇所は、どの部品の次にどこへ移ったかをそのまま書き留めます。
今どこにいるかが見えるか
Tabで進むとき、いま選ばれている部品に枠や色の変化が出ているかを確認します。見えなくなる箇所があると、操作している本人も現在地を見失います。見えにくかった部品の名前と、背景が何色だったかを一緒に記録しておくと、あとで直すときの手がかりになります。
決定する操作と閉じる操作
ボタンがEnterやスペースで押せるか、フォームに入力して送信まで進めるか、ダイアログやメニューがEscで閉じられるかを順に試します。開いたまま抜け出せなくなる場合は、その状態を再現できる手順ごと書いておきます。再現できない不具合は、AIにも伝わりにくいからです。
観察メモの書き方
結果は良し悪しの判断より先に、起きたことをそのまま書きます。たとえば「検索欄の次にロゴへ戻った」「送信ボタンでEnterが効かない」といった具合です。推測や原因の仮説は別の欄に分けると、事実と混ざらず、あとで読み返したときに迷いません。
AIへの相談と再確認
メモができたら、画面のコードと一緒にAIへ見せ、観察した事実と期待する動きを分けて伝えます。返ってきた修正は、そのまま取り込む前に何を変えたのかを読み、同じ手順でもう一度キーボードだけで確かめます。直った点と残った点を、前回のメモの下に書き足してください。
続けるために
一度にすべての画面を確かめる必要はありません。画面を作るか直すたびに、同じ短い手順を繰り返すだけで続けられます。記録が溜まると、自分がどの種類の部品でつまずきやすいかが見えてきて、AIへの頼み方も具体的になります。学習の進め方を整理したいときは、AI Craft Campusも覗いてみてください。