息子の高校のリサーチにまたSpreadsheetを作るのが面倒だったのでウェブアプリを作った

何を作ったか

サンフランシスコ市内の高校をリサーチするための保護者用のツール

なぜ作ったか

うちには来年高校に進学する息子がいます。過去2回、小学校、中学校と学校が変わる度に学校リサーチのための情報（学校の基本情報、テストスコア、家からの距離、運転に要する時間、学校見学日、申し込み締め切り日、メモ等）をspreadsheetにいちいち細かく入力していました。しかし３回目ともなるといい加減この動作が面倒になってきたので、今回はvibe codingを試してみることにしました。Gemini Antigravityを使い、制作にかかった期間は2日程度でした。

このウェブアプリでできること

• SF市内の全ての高校の情報がみれる
• 学校のタイプ（public, private, charter, religious）や家からの距離でフィルタできる
• 授業料、生徒数、SATスコア等でソートできる
• 地図上で学校の位置が確認できる
• 自分の「My List」が作れる
• 学校をside by sideで比較できる

作ったことで得られたインサイトなど

本職はプロダクトデザイナーなので私の意見はデザイナーよりの意見になります。

とりあえず早い

アイコンを右に5ピクセル動かすためだけにいちいちプロンプ​​トを入力するのは少々面倒に感じましたが、AIを使うことで得られるメリットはそんな面倒さをはるかに上回るものでした。まるでどんなに面倒臭い要求にも文句を言わず根気強くかつ意欲的に応えてくれるデベロッパーと一緒に仕事をしているような感覚でした。そして仕事が無茶苦茶早い。知り合いのデベロッパーの方が「一度AIを使って仕事したらもう前みたいにコード書くのには戻れない」と言ってたのを、一瞬で理解しました。

生成されたデフォルトのUIはイマイチ

Geminiが最初に生成したページは、そのままでも使えないことはないけどなんか使いづらい、というよく見る「AIが生成しました」という製品そのものでした。なので、「これをいかに使いやすいものにするか」というゴールに作業のほとんどの時間を費やしました。ユーザは自分なのでこの作業はとても楽しかったです。

デザイナーの役目

今後AIを使って構築された製品がどんどん増えていった場合、他のAI製品との差別化が重要な課題になってくると思います。同じ目的のための製品が２つあるとして、もし機能や値段等のもろもろの条件が同じだったらどちらの製品を選びますか？恐らく「使い勝手」がかなり重要なんじゃないでしょうか？使い勝手が悪い製品は、ストレスに感じるだけでなく、余計な時間を費やしてしまい、生産性にも影響します。でもチーム内にデザイナーが一人でもいれば、その製品が「いかにもAIで生成しました」とみえてしまうのを防ぐだけでなく、実際に製品を使うユーザの視点に立ち、使い勝手の良い、直感的な製品をつくるヘルプになります。

以下がUX改良後のページです。

デザイナーも開発チームの一員

今までの「デザイナーはUXチーム、デベロッパーは開発チームに属す」というチーム構成でなく、デザイナーもデベロッパーと同様に同じチームでAIで製品を構築するようになるかもしれません。

【従来】デザイナーがmockupをFigmaで作成　→　デベロッパーがFigmaのDev modeをもとにコードを書く

【今後】デベロッパーがAIで製品を構築　→　デザイナーがUI/UXをAIに改善させる

そして、コードレビューと同じような、UI/UXやアクセスビリティからの観点を重視したデザインレビューはどのプロジェクトにも必須になるかもしれません。

最後に

デザインと開発の境界がこれまで以上に近づいている中で、製品が本当にユーザーにとって使いやすいものになっているかを判断するには、デザイナーの視点が欠かせないことを改めて実感しました。