初めて作ったアプリを自分で確認する方法
画面が表示されたら、アプリは完成したように見えます。しかし、実際に操作すると、ボタンが反応しない、入力した内容が消える、小さな画面では文字が読めないといった問題が見つかることがあります。
作ったものを実際に操作し、期待した通りに動くか確かめる作業をテストといいます。専門の担当者や特別な機械がなくても、最初のテストは自分で行えます。
この記事では、読んだ本を記録するアプリを例に、初めての作品で確認する基本項目を説明します。
最初に「できるはずのこと」を書く
テストを始める前に、アプリでできるはずのことを書きます。読書記録アプリの場合は、次のようになります。
画面を開ける
本の題名を入力できる
追加ボタンを押せる
入力した題名が一覧へ表示される
画面を閉じて開き直しても、題名が残っている
この一覧が、確認する順番になります。「なんとなく触ってみる」だけでは、確認した項目と、まだ確認していない項目を区別できません。
結果を記録するため、各項目の横に次のどれかを書きます。
できた：期待した通りに動いた
できなかった：期待と違う結果になった
まだ分からない：確認方法が分からない
「まだ分からない」も大切な記録です。無理に合格にせず、確認方法を調べる作業として残します。
1. いつもの操作を試す
最初に、作ったときに想定していた普通の操作を試します。
読書記録アプリでは、次のように操作します。
題名の入力欄を押す
「銀河鉄道の夜」と入力する
追加ボタンを押す
一覧に「銀河鉄道の夜」と表示されるか確認する
表示された場合は、もう一冊追加します。一件だけでは気づかなかった問題が、二件以上になると見つかることがあります。
確認するのは、文字が表示されたかどうかだけではありません。
入力した順番で並んでいるか
一冊目が消えていないか
同じ題名を入力した場合はどうなるか
長い題名でも、文字が画面からはみ出さないか
同じ題名を登録できることが正しいかどうかは、アプリの決め方によります。重要なのは、実際の結果を見て、その動きでよいか判断することです。
2. 何も入力しないで試す
利用する人は、いつも開発者が予想した順番で操作するとは限りません。入力欄を空のまま、追加ボタンを押す場合もあります。
何も入力せずに追加ボタンを押し、次の点を確認します。
空の行が一覧へ追加されないか
画面が動かなくならないか
何を入力すればよいか分かる説明が表示されるか
入力欄へ戻ってやり直せるか
「題名を入力してください」のように、問題と直し方が分かる文章を表示できれば、利用する人は自分でやり直せます。MDNのフォーム検証に関する資料でも、正しい形式で入力できるよう利用者を助けることが、入力確認の目的として説明されています。
3. 画面を閉じて開き直す
入力した内容がその場で表示されても、画面を閉じると消える場合があります。記録するアプリでは、後日見返せることが必要です。
次の順番で確認します。
本の題名を一冊追加する
ブラウザのタブを閉じる
同じアプリをもう一度開く
先ほど追加した題名が残っているか確認する
消えていた場合は、「保存されていない」という問題が見つかったことになります。まだ直し方が分からなくても、失敗ではありません。次に調べる内容が明確になっています。
AIへ相談するときは、次のように伝えます。
本の題名を追加すると一覧には表示されますが、ブラウザのタブを閉じて開き直すと消えます。閉じても記録を残すには、何を変更すればよいですか。初心者向けに一段階ずつ説明してください。
4. 小さな画面で確認する
パソコンで作った画面でも、スマートフォンから使う場合があります。スマートフォンを持っている場合は、実際の端末で開いて確認します。まだインターネットへ公開しておらず、スマートフォンで開けない場合は、ブラウザの画面幅を狭くして確かめます。
次の点を確認します。
文字が小さすぎないか
画面を横へ動かさなくても内容を読めるか
入力欄が画面からはみ出していないか
追加ボタンを指で押しやすいか
一覧の題名が途中で重なっていないか
押す場所が小さすぎたり、隣のボタンと近すぎたりすると、目的と違う場所を押しやすくなります。WCAG 2.2のターゲットサイズに関する解説では、押せる領域の大きさや間隔について基準が示されています。最初の段階では数値を暗記するより、自分の指で迷わず押せるかを実際に確かめます。
5. マウスを使わずに操作する
パソコンでは、キーボードのTabキーを押すと、入力欄やボタンへ順番に移動できます。現在選ばれている場所は、枠や色の変化で確認できます。
次の操作を試します。
画面を開く
マウスに触れず、Tabキーを押す
題名の入力欄へ移動する
題名を入力する
再びTabキーを押し、追加ボタンへ移動する
Enterキーを押して追加する
選ばれている場所が見えない、追加ボタンへ移動できない、順番が不自然な場合は修正が必要です。WCAG 2.2のフォーカス表示に関する解説では、キーボード操作中の現在位置を見分けられることの重要性が説明されています。
キーボード操作は、一部の人だけの特別な使い方ではありません。マウスが故障した場合や、入力中に手をキーボードから離したくない場合にも役立ちます。
問題を見つけたときの記録方法
問題を見つけたら、すぐに多くの場所を変更せず、起きたことを記録します。
次の五項目を使うと、あとから再現しやすくなります。
確認した日：2026年9月8日
使ったもの：WindowsのEdge、またはAndroidのChromeなど
行った操作：題名を入力し、追加ボタンを押した
期待した結果：一覧に題名が表示される
実際の結果：ボタンを押しても何も変わらない
エラーが表示された場合は、その文章も記録します。可能であれば、問題が起きた画面のスクリーンショットも残します。
AIへ修正を依頼するときも、この記録をそのまま使えます。「壊れています」だけでなく、操作と結果を伝えることで、確認すべき場所を絞りやすくなります。
修正したら同じ操作をもう一度試す
問題を直したあとは、問題が起きたときと同じ操作を繰り返します。別の操作だけを試しても、本当に直ったか判断できません。
たとえば、空の題名が追加される問題を直した場合は、次の両方を確認します。
何も入力しなければ、空の項目が追加されない
正しい題名を入力すれば、これまで通り追加できる
一つ目だけを確認すると、追加ボタンそのものを動かなくして問題を隠している可能性があります。問題の操作と、以前から動いていた普通の操作を両方試します。
最初の完成チェックリスト
初めて作ったアプリでは、次の項目を確認できれば、基本的なテストを一通り行ったと言えます。
普通の入力と操作で目的を達成できる
何も入力しなくても画面が壊れない
二件以上のデータを扱える
長い文字を入力しても読める
画面を閉じて開き直しても必要なデータが残る
小さな画面でも文字を読める
ボタンを指で押しやすい
TabキーとEnterキーでも操作できる
見つけた問題を、同じ手順でもう一度起こせる
修正後に同じ操作を試した
すべてを一度で合格にする必要はありません。できなかった項目は、次に直す作業になります。
テストの目的は、問題がないと証明することではありません。利用する人より先に問題を見つけ、直すための情報を集めることです。自分で一つずつ操作し、結果を記録するだけでも、最初の作品を安心して使える状態へ近づけられます。