使いやすい空き家探しサイトがなかったのでAIでマシなのが作れるか試してみた

何を作ったか

日本語で空き家情報を一括で検索できるWebアプリ（関西エリアのみ）

なぜ作ったか

人口減少や高齢化の問題によって、日本には約900万戸もの空き家があると言われています。相続したもののすでに別の場所で暮らしていてその家に住む予定がなかったり、長年手付かずのままで老朽化した家は修復に多額の費用がかかることもあり、税金を払い続けるよりも手放したほうが経済的、というのが大きな理由です。そういった背景があり、無料または非常に安い価格で売り出されている空き家が日本各地で増えています。

ここ数年日本への移住に興味を持つ外国人の間でも空き家が注目されるようになっており、私の相棒もその一人です。現在、空き家の情報は2つの不動産サイト、各自治体のサイト、そして紙媒体などに分散しており、物件を探すのは意外と面倒です。外国人向けにAkiyaMartのような英語で情報を提供しているサイトもありますが、「下水」のような重要な情報が省略されていて、結局リンク先の元の掲載サイトで確認しなければならないことも多々あります。

プロジェクトのゴール

今回もGemini Antigravityを使って作ってみました。MVPは関西の4県のみ。大きな目的は２つ。

• 物件情報はあちこちに分散されているので表示内容やラベル名がバラバラ。これを統一して表示することができるか
• 町名の情報と物件の写真をGoolge Mapsのストリートビューの画像と照合して物件の住所を特定できるか

問題点と、その回避方法など

スクショからすぐにピンとくるかもしれないですが、レイアウト等のデザインは某民泊プラットフォームのパクリ、ロゴは某アニメのタイトルデザインのパクリです。「具体的な例を出した時にAIはどれくらい忠実に真似できるか」というのを試してみました。結論から言うと、「かなり細かいところまで真似できる」です。

サイトのLook and Feel / Visual Design

まず最初のプロンプトで、サイトの意図と見た目の詳細な指示（「AirBnBのホームページみたいな感じで」）というのを出したらかなり想像に近いものが出来てきました。こういう感じにしたい、という具体的なイメージがもしすでにあるのであれば、スクショを貼るのはすごく効果的だと思います。以下がAIが最初に生成したページです：

想像に近かったとはいえ、修正依頼はいくつか出しました。AIで生成されるデザインにはいくつか特徴があり、この「AIのクセ」のようなものを理解したうえで、デフォルトのUIでOKか修正させるかを判断するのをおすすめします。

• とりあえずアイコン好き。隙あればあちこちに入れてくる。
• とりあえず#タグも好き。本当に必要かどうかは構築者が判断しましょう。
• Dividerも好き。必要以上にDividerを入れると画面がごちゃごちゃします。
• 情報をContainer/Boxに入れて整理しようとする。これも逆に情報の関連性がわかりづらくなることがあります。
• サイトタイトルの前にアイコン、下にタグラインを入れる。タイトル名はたまに重複して表示。必要に応じて修正しましょう。

以下が修正後のホームページです：

サイトのロゴ

サイト名がまだ決まってなかったので、AntigravityとChatGPT両方でいくつかのアイデアを試しました。最終的には「空き家さがそ！」に決まりましたが、ChatGPTの方が若干元ネタのロゴに忠実なように感じました。ただ、AntigravityでもChatGPTでも、細かい修正依頼、例えば「花と葉っぱのイラストだけとって」とかは苦手で、依頼を無視して全く別のバージョンを作ってきます。結局は以下のような作業法が一番効率が良かったです。

1. 「これのココとココを修正すれば使える」という段階までたどり着いたら画像をダウンロード
2. そのファイルをイラレで開く
3. 画像をトレースしてVectorに変換
4. 手動で細かい修正をいれる

現在プロダクトデザインの現場はFigmaのいわゆる無双状態ですが、今後AIでのデザインがさらに普及すれば、もしかしたらまたアドビの時代が来るかもしれないですね。

プロジェクトのゴールの結果

プロジェクト開始前のゴールだった、「#1 物件情報を統一して表示することができるか」と「#2 物件の住所を特定できるか」について、結論は以下になりました：

• #1 はできるけどかなり手動の作業が必要になるんで面倒
• #2 はAIでも無理

物件情報を統一して表示することができるか

たとえば指示が、

「建物面積」と「建物構造」の情報をソースサイトからもってきてうちのサイトに表示

であれば、「建物面積」の情報はもってこれるのに、なぜか「建物構造」はうちのサイトでは「記載なし」になっている場合が多い。元サイトには両方のラベル（まんま同じ）があるのでもってこれないはずはないのに？？ちなみに物件の画像でも同じ問題がありました。スポットチェックでこういう問題を見つけたら指摘し、修正する、の繰り返しにかなりの時間を費やしました。でも400件以上の物件のチェックをいちいちできないので、結果的には「情報は間違っている可能性がある」というあまり理想的ではない結論に至りました。

物件の住所を特定できるか

結論からいうと、AIが自信満々だった割には「できなかった」。リンクされたGoogleマップに一応位置情報ピンが立っているが、その町／村の真ん中あたりに適当にピンを立てただけだと思われる。もう少し調査する必要あり。

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

サイトが不安定

前回の高校のリサーチサイトと違って、今回は400件以上のデータを扱うためかエラーが多く、１つのエラーを修正させたら他の無関係な５つの箇所が壊れる、という状況に数回陥りQAにかなりの時間を要してしまった。

データの信憑性

なぜAkiyaMartのような英語サイトが、元サイトに掲載されている物件についての全ての情報を表示できないのか理解しました。不可能に近いからです。全く同じラベル名でも探知できず見過ごすのに、ラベルが少しでも違えば（例：築年数 vs 建築時期）うちのサイトでは「記載なし」になります。ならばユーザには元サイトへ行ってもらって確認してもらうのが一番安全です。

データ構築、管理

前回作った高校リサーチのサイトでも同じことを思いましたが、プロのエンジニアのヘルプなしでは複雑なサイトを安定して稼働させるのは難しいです。デザイナーの私には裏でどうやって情報が構築、処理されているかがわからないので、エラーになった場合の根本の原因がわからずAIにどう修復すべきかの指示がだせないため、エラー修復にかなりの時間（token）を費やしました。例えばデプロイした後、ページが空白だということが何回かあったので、相棒（エンジニア）に原因を調べてもらったら、「Local DB File」「画像がキャッシュされてない」などいくつか指摘されました。

最後に感想

デザイナーがAIを駆使して、見た目がよく使いやすいプロダクトを構築することは可能です。ただ、安定性やパフォーマンスにも配慮しながらプロダクトを運営していくには、やはりエンジニアの力が不可欠です。AIの導入によって開発・プロダクトチームの作業効率が格段に上がったとはいえ、デザイナーとエンジニアが一緒にプロダクトを作っていくスタイルは、まだまだこれからも健在のようです。