Gesdro! 12月5日開発日記 | ennui-lab

問題1：テンプレートパックが突然表示されなくなった

新しいテンプレートパックを追加した直後、テンプレートストア画面が完全に真っ白になり、 UI が一切表示されない重大な問題が発生しました。

ユーザー操作以前の段階で画面が崩壊していたため、最初は描画ロジックやデータ取得処理を疑いました。しかしブラウザのコンソールおよびサーバーログを詳細に確認したところ、設定ファイルとして使用している JSON に構文エラーが含まれていることが判明しました。

テンプレートパックの定義はすべて JSON によって管理されており、 1 箇所の記述ミスでも全体の読み込みが失敗する構造になっていました。今回はカンマの抜けという非常に小さなミスでしたが、エラー時のフォールバック処理が存在しなかったため、結果として画面全体が表示されなくなる状態に陥っていました。

解決策：該当する JSON ファイルを精査し、不足していたカンマを修正しました。その後、テンプレートストア画面が正常に表示されることを確認しました。あわせて、今後同様の問題を早期に発見できるよう、 JSON 構文チェックを意識した運用フローの必要性も再認識しました。

問題2：テンプレートパック作成の手間が多すぎる

テンプレートパックを作成する際、プレビュー用の画像を 9 枚 ZIP 形式でダウンロードする仕様になっていました。しかし、実際にストアへ登録するためには、それとは別にサムネイル画像を個別にコピーし、管理画面へ手動で貼り付ける必要がありました。

このため、「ZIP をダウンロードする作業」と「サムネイル画像を探してコピーする作業」という 2 ステップの作業が必須になっていました。テンプレートパックを複数作成する場合、この手作業が積み重なり、作業時間と精神的な負担が無視できない状態になっていました。

解決策： ZIP に含める生成物の仕様を見直し、サムネイル画像も自動的に ZIP 内へ同梱するように改善しました。これにより、プレビュー画像 9 枚＋サムネイル画像 1 枚、合計 10 枚の画像を 1 回のダウンロードで取得できるようになりました。

結果として、テンプレートパック作成に必要な作業工程が 1 ステップに集約され、作業時間は実質的に半分程度まで短縮されました。作業の単純化により、ミスの発生率が下がった点も大きな改善ポイントです。

問題3：「写真パックを見る」ボタンが目立たない

テンプレートストアへ遷移するための「写真パックを見る」ボタンが、画面内で独立した位置に配置されていました。そのため、ユーザーの視線導線から外れやすく、存在に気づかれにくい状態になっていました。

機能としては重要な導線であるにもかかわらず、視認性が低いため、テンプレートストア自体の利用率低下につながるリスクがありました。

解決策：ボタンの配置を見直し、ユーザーが必ず目にするヒント表示エリア内に統合しました。これにより、操作の流れの中で自然にボタンが目に入るようになりました。

さらに、開始ボタンと同じ波紋アニメーションを追加することで、クリック可能であることが直感的に伝わるよう改善しました。ボタンサイズも最大 320px に制限し、横に広がりすぎない適切な幅に調整しました。配置は中央寄せとし、視覚的にも安定感のあるデザインになっています。

問題4：ナビゲーションの動線がスムーズでない

テンプレートストア画面から戻る際、戻るボタンを押すとトップページへ遷移する仕様になっていました。しかしユーザーの多くは、トップページではなくメイン画面へ戻りたいケースがほとんどでした。

その結果、トップページに戻ったあと、再度メイン画面へ移動する必要があり、無駄なクリックと認知的な負荷が発生していました。

解決策：戻るボタンの遷移先を見直し、トップページではなく、直接メイン画面（/gesdro）へ戻るように変更しました。これにより、ユーザーの意図に沿った自然な画面遷移が実現できました。操作回数も削減され、全体的な体験がスムーズになっています。

成果

これら一連の改善により、テンプレートパックの作成時間は大幅に短縮され、体感としても半分程度まで削減されました。

また、テンプレートストアへの導線が明確になったことで、ユーザーが機能の存在に気づきやすくなりました。ナビゲーションの改善とあわせて、全体的な操作性と満足度が向上しています。

開発者体験とユーザー体験の両面において、無駄を減らし、使いやすさを高める成果を得ることができました。