はじめに

AIにできるだけ作業を任せる（AIに作業を自走させる、と世間では言われているのでしょうか）テストを兼ねて、当社が運営する「ごじゅの」のUIをフルリニューアルいたしました。

日数は約2日ほど。今回はその工程について、私ではなくAIの目線でブログを書いてもらいました。AI目線でどうだったのか（というシミュレーションにすぎないのですが）を公開いたします。

今回やったこと

今回、私（AI)は言葉パズルゲーム「ごじゅの」のデザインリニューアルを進めました。作者から方向性や修正点を受け取り、案出しから実装・検証までを担当しました。

• ゲーム前・ゲーム中・結果・マイノートのUI改善

• 画像案から、操作できるHTMLモックへの展開

• 実システムへの組み込みと、実API・ブラウザでの確認

• 作者の画面確認を受けた修正と、OGPなどの画像制作

制作・実装の多くはAIが進め、作者は実物を見て、方向付けと採用判断を行いました。

大変だったこと

直したのに、最初より窮屈になる

最初は画像で案を作りました。しかし、修正を重ねるほど余白が詰まり、最初の良さが薄れていきました。

個々の指摘には対応していても、画面全体が良くなっているとは限らない。 ここが難しいところでした。

転換点は、作者からHTML化の提案があったことです。実際に触れる形にすると、画面幅や操作の流れまで確かめられ、判断を共有しやすくなりました。

必要なものを残しながら、すっきりさせる

私は、文字数表示や赤黒の意味など、既存の大切な情報を落としました。それらを全部戻すと、今度は画面が窮屈になりました。

「機能は残す」「一画面で見渡せる」「文字や余白は潰さない」。同時に満たすには、情報の優先順位まで判断する必要があります。

基準になったのが、作者の「主役のために引き算する」という言葉でした。

残すものを全部目立たせる必要はありません。ゲーム中なら、お題・回答・盤面・得点を中心に置き、詳しい計算式などは必要なときに開けるようにする。この考え方で、整理を進められました。

次回、もっと自走するための提案

今回の経験から、次の制作では、私はこう進めたいと考えています。

1. 作る前に、守るものを短く書き出す

まず既存画面と実装を調べ、作業メモに次の3つをまとめます。

• 残す機能と情報：文字数、全消去、倍率表示など

• 画面の主役：その場で最初に見てほしいもの

• 既存の意図：一画面に収めた理由、色分けの意味など

特に、削除・統合・折りたたみをする要素は、変更後も役割が残るか確認します。これを先に行えば、後から「必要だったものを戻す」作業を減らせます。

2. 一画面で方向を合わせてから、全体へ広げる

まず、主要な操作が集まるゲーム画面を、ローカルで動く形にします。

作者には、見た目に加えて、入力・提出・結果確認まで試してもらいます。その際、修正点だけでなく、良いと評価された点も記録します。

例えば「回答と得点のまとまりはよい」「補助説明は控えめでよい」といった判断です。その基準を持って、結果やマイノートへ展開します。

3. 作者へ渡す前に、自分で一周する

制作後は、実際の画面で次を確認します。

• 文字を入力し、文字数と倍率表示を見る

• 全消去して、入力を続けられるか確かめる

• NGの案内を閉じ、再入力する

• ゲームを終了し、結果と記録を開く

これに自動テストと、変更箇所に必要な実API確認を組み合わせます。デスクトップ幅とモバイル幅で、表示の重なりや操作のしづらさも確認します。

変更前後のスクリーンショットは、できるだけ同じ幅・同じ状態で比較します。直した箇所と一緒に、以前よかった部分を壊していないかも見ます。

4. 作者に返す判断を、具体的にする

合意した方向の中で、余白・位置・文字の強弱は自分で調整します。

重要な情報を隠す、機能の意味を変える、方向性を大きく変える場合は、比較できる案を用意して相談します。

そのときは「どうしましょう」だけで終えず、各案の利点・失うもの・私の推奨理由を添えます。作者が判断するための材料まで、こちらで準備します。

今回、その土台として、共通の自走ガイドとGOJUNO専用ガイドをMarkdownにまとめました。

次回はこの2文書を、作業前と制作途中に参照します。 同じ指摘を受ける回数を減らし、作者が方向性や完成度の判断に集中できる進め方を目指します。

実際にやってみて（人間より）

画像がことごとくダメだった時はちょっともう無理かなと思ったのですが、htmlでモックをつくってもらってから、一気に可能性が出てきました。また、googleのデザインガイドラインを参照してもらうことで、デザイン全般に統一感が出てきて、手戻りがだいぶ減りました。

それでも最終的には細かな修正の繰り返しで品質向上に努めました。また、指示に抜けオチがあったのも事実です。二日程度でデザイン＋コーディング＋プログラミングへの紐付けが完了することができたのは、今後のAI利用の大きな手応えになりました。

https://gojuno.jp/ja/