AIと一緒にUI/UXをデザイン！高校1年生「スマホアプリ開発」実習

情報Ⅰの授業において、生成AIを活用したスマホアプリ開発の実習を2時間完結（クラスによっては1時間に短縮）で行いました。今回の授業では、HTML,CSS,JavaScriptで作成した「勉強タイマー」を題材に、生成AI（Gemini）を活用しながらUI/UXの改善に取り組んでいきます。

本授業のテーマは「UI／UXの改善」です。

• UI（ユーザーインターフェース）：見た目や操作のしやすさ
• UX（ユーザーエクスペリエンス）：使ったときにどのような体験になるか

単に「動くプログラム」を作るだけではなく、「使う人（今回は、まず自分）にとって分かりやすいか」「継続して使いたくなるか」といった視点でアプリを見直すことを目的としました。

生徒はまず、用意されたシンプルなHTMLファイルをGoogleドライブ上で編集し、学内に用意したWebサーバにアップロードします。その後、自分のスマートフォンからアクセスし、自分で作ったアプリが実際に手元で動くことを確認します。「コードを書いて終わり」ではなく、スマホで触って初めて気付く不便さや操作の違和感を出発点に、改善点を考えていきました。

今回の授業では、Geminiに以下のような役割を与えています。

• 生徒の代わりに完成形を提示する存在ではない
• 生徒が「こう変えたい」と言語化した内容だけを反映する

そのため、プロンプトには「挨拶や丁寧すぎる解説は不要」「生徒の要望に基づく修正のみ行う」といったルールを明示しています（プロンプトは後述）。

工夫を凝らした「アプリ」が次々と出来上がっていきます。コンピュータ上では使いやすく思えた「アプリ」も、スマホでは操作感がまた違います。

作成の中で、同じ「勉強タイマー」という題材でも、何を大切にするかによってアプリの姿が大きく変わることを、生徒自身が実感していました。

ある程度完成した後に、隣同士でアプリを使い合い、「ここが分かりにくい」「この表示は便利だ」といった意見を交換しました。他者に使ってもらうことで、自分では気付かなかった改善点が見えてくる場面も多く見られました。
その場で再度コードを修正し、より良い形へと仕上げていきます。

最終的には開発報告の形でスライドにまとめました。

授業後の振り返りでは、多くの生徒が、生成AIを使ったアプリ開発に新鮮な驚きを感じていました。
「思っていたより何倍も簡単にアプリ開発ができて驚いた」「自分に最適化されたアプリを作れたので、これからは自分のものを使いたい」といった声からは、アプリを“選ぶもの”から“作るもの”として捉え始めている様子がうかがえます。また、「他の人の発表を聞いて、自分にはなかった考えばかりで面白かった」「同じタイマーでも全く違うものができていて驚いた」など、他者の作品に触れることによる学びの深まりに関する声も多くありました。

なかには、「欲しい機能がなかったら自分で作ればいい、という発想がなかった」「これからは自分が使いたいものをAIに作らせて使う時代になるのだと感じた」と書いた生徒もいました。これは、今回の授業で目指した『探す』から『作る』への意識の転換そのものと言えます。

担当者としても数年前までは「自分に適したアプリ・コンテンツ」を次々探していくことが「試行錯誤」でしたが、生成AIの登場で「自分に適したアプリ」を「試行錯誤しながら作る」時代に入ったことを明確に感じました。

今後も、情報科の授業においては生成AIを単に「答えを出す道具」ではなく、自分で考え、試行錯誤する学びを支えるパートナーとして位置付けた授業を展開していきたいと思います。