はじめに

初めまして。
未経験からエンジニアを目指しプログラミングスクールRUNTEQでプログラミング学習中のフネと申します。この度、卒業制作として「アニめぐる」というアプリを本リリースしました！

今回は、「アニめぐる」についてお話しします。
よろしくお願いいたします！

サービス

GitHubリポジトリ

サービス概要

アニめぐるは「あなたの足で紡ぐ、作品と現実の交差点。」をテーマに、聖地に関する様々な情報を一元管理できる聖地メモを投稿して、聖地巡礼の思い出をファン同士やコミュニティ内で共有したり好きな作品の聖地巡礼に役立てたり、まだ見ぬ作品を知るきっかけを与えてくれる聖地巡礼情報共有プラットフォームです。

このサービスへの思い・開発背景

聖地巡礼の計画時に聖地や作品に関する情報が点在していたこと

自身が聖地巡礼の旅行を計画している際に訪問予定の聖地のアクセス方法や聖地が作中に登場したシーンの画像、作品の公式イベントの情報など、聖地や作品に関する情報が点在しており、巡礼に必要な情報を調べるために複数のサイトやアプリを行き来しなければならず効率が悪く、準備に多くの手間がかかっていたためそういった情報を一元管理できる方法が欲しかったという思いがアプリを開発するきっかけとなりました。

既存サービスだけでは不足してしまう要素

XやインスタなどのSNSでは聖地巡礼に関する投稿などが多く散見されますが、その投稿を見た際に「この場所ってどこにあるの？」や「実際に行ってみたいけど、どうやって行くの？」、「そもそもこの聖地って、どのアニメに登場したの？」と気になってGoogleマップや作品の公式サイトなどを調べたときに、「詳しい情報があらかじめ紐づいていれば、もっと便利になのに！」と感じたり、聖地巡礼に関するサービスを使用していた際に「この風景を見るなら、何時ごろ・どんな天気のときがベストか？」といった聖地巡礼のような特定の作品や趣味に特化した情報や機能が提供されていないという課題を発見して、これらの課題を解決するプラットフォームを作成しようという考えに至りました。

聖地巡礼の楽しさや魅力をもっとみんなに知ってほしい

聖地巡礼とは、いわゆる“推し活”の一つとして、好きなアニメ・ドラマ・映画、あるいはアイドルなどの著名人に関連する実在の場所を訪れることを指します。

ファンが聖地巡礼を行う主な理由は、お気に入りの作品や人物とのつながりをより身近に感じたり、共通の趣味を持つ人々と出会って交流したりできることにあります。

たとえば――

作品の中で描かれた世界観を実際に体験することができたり、
推しがゆかりを持つ地に行くことで、その存在をよりリアルに感じられたり、
巡礼中に撮影した写真や映像をSNSで共有し、同じファンたちとつながるきっかけになったり、
同じ場所を訪れている仲間と直接会話や交流ができる機会があったり――

そんな風に、作品やキャラクターへの理解が深まり、愛情がいっそう高まることが聖地巡礼の魅力なのです。

そんな魅力いっぱいの聖地巡礼に興味がある方や初めてやってみようと考えている方に向けて、「どこに行けばいいの？」「何を準備したらいいの？」という疑問を解消しながら、安心して一歩を踏み出せるような情報や体験のきっかけを届けたいという目的もあります。

使い方イメージ

聖地メモ検索	聖地メモ作成

みんなの作成・投稿した聖地巡礼の記録である聖地メモをキーワード検索（聖地名・作品タイトル）、エリア検索（都道府県）、作品ジャンル検索、並び替えすることができます。	ログイン後、①巡礼記録②作品の基本情報③聖地の基本情報でそれぞれ情報を追加して最後に④確認画面で投稿内容に誤りがないかを確認して聖地メモを作成、投稿できます。

聖地メモ詳細	Xシェア

聖地メモをXでシェア、投稿の編集・削除、いいね、ブックマーク、コメント、ここへ行く（Googleマップのページへ遷移）ができます。	聖地メモの投稿をXでシェアすることができます。

ここへ行く	聖地巡礼コラム

詳細画面の「ここへ行く」ボタンをクリックすると、聖地メモに登録した聖地のGoogleマップページへ移動できます。	聖地巡礼の楽しみ方や下準備、必要なモノなど聖地巡礼に関する様々なコラムを閲覧することができます。

マップ検索	作品の公式サイト

現在地近くの聖地メモの投稿がわかります。地名などから周辺の聖地を検索することもできます。	聖地メモ詳細画面の「公式サイト」から聖地に関連する作品の公式サイトへ移動できます。

技術スタック

カテゴリ	技術
フロントエンド	Rails 7.2.2.1 / TailwindCSS / daisyUI / Hotwire
バックエンド	Rails 7.2.2.1 (Ruby 3.3.6)
データベース	PostgreSQL
開発環境	Docker
インフラ	Render / AmazonS3
認証	Devise / Google認証
API	Annict API / Google Places API / Google Maps JavaScript API / Google Geocoding API
VCS	GitHub
CI/CD	GitHub Actions

ロジック面で工夫したこと

①Formオブジェクトの活用

聖地メモの投稿は上記のER図のように①巡礼記録などの情報（seichi_memosテーブル）②聖地の情報（placesテーブル）③アニメ作品の情報（animesテーブルという3つのテーブルから構成されています。
そのため、1つのフォームからこれら3つのテーブルにまたがる情報を同時に扱うには、通常のモデルでは対応しきれない部分が出てきます。
ここで活躍するのがFormオブジェクトです。

Formオブジェクトを導入することで、ユーザーが入力した「作品名」「聖地名」「メモ内容」などを一括で受け取り、各テーブルにレコードを作成・関連付けすることが可能になります。
また、バリデーションもFormオブジェクト側にまとめることで、より読みやすく、責務の分離されたコード設計が実現できます。

②画像選択時に即座に画像キャッシュ処理を行う

聖地メモの作成フォームでは、ステップフォーム式（ウィザード形式）を採用しています。
しかし、各ステップで画像をアップロードした後、次のステップへ遷移する際に画像キャッシュ処理に時間がかかり、操作が重く感じられるという問題がありました。

そこで、Stimulusを用いて画像がアップロードされた瞬間に即座に画像のキャッシュ処理を開始するよう改善を行いました。
これにより、ユーザーが次のステップへ遷移する頃にはキャッシュ処理が完了しており、キャッシュ名がセッションに保存された状態となります。

その結果、ステップ遷移時の待ち時間が解消され、スムーズでストレスのない操作体験を実現できるようになりました。

③Sidekiqを用いた画像保存処理のバッググラウンド処理

聖地メモの投稿では、確認画面で内容を確認後、投稿ボタンを押すと
①聖地の写真
②聖地が登場したシーン画像
③作品イメージ画像

といった複数の画像保存処理が一括で実行される仕組みになっており、特に画像ファイルが大きい場合は投稿完了までに時間がかかるという問題がありました。

そこで、この課題を解決するために、ActiveJobとSidekiq、Redisを組み合わせた非同期処理を導入。
CarrierWaveのアップローダーによる .store! 処理をバックグラウンドジョブとして切り出すことで、ユーザーの投稿処理を高速化しました。

これにより、投稿ボタンを押した直後のレスポンスは非常に軽くなり、画面上は比較的すぐに投稿完了として処理されるため、ユーザーにとっては待ち時間を感じさせない滑らかな体験を提供できるようになっています。

さらに、保存された画像はSidekiqのジョブによって裏で順次アップロードされるため、アプリケーションの負荷も分散され、システム全体のパフォーマンス向上にもつながっています。

ユーザビリティ面で工夫したこと

①聖地メモ詳細画面のレイアウト

聖地メモの詳細画面では各画像のレイアウトを工夫しており、聖地の写真と聖地が登場したシーン画像が、PCでは横に、スマートフォンでは縦に並ぶようなレスポンシブデザインを採用しています。

このようにレイアウトを切り替えることで、画面のサイズに応じて二つの画像が視覚的に自然なバランスで表示されるようになっており、ユーザーはそれぞれの画像を比較しながら楽しむことができるようになっています。

さらに、実際の風景とアニメのシーンを並べて眺めることで、「自分も作品の中に入り込んだような没入感」や「推しキャラがその場にいた感覚を味わうことができ、聖地巡礼ならではの特別な体験へとつながる工夫となっています。

②ステップフォーム式の作成フォーム

聖地メモの投稿フォームでは、情報入力の煩雑さを軽減するためにステップフォーム式（ウィザード形式を採用しています。
①巡礼記録
②作品の基本情報
③聖地の基本情報
④確認画面
という入力項目を4ステップごとに分けて表示することで、ユーザーが一度に大量の情報を求められることなく、段階的に入力を進められる設計になっています。

この構成によって、フォームの離脱率を抑えられるだけでなく、各ステップに応じたバリデーションやキャッシュ処理を細かく制御することが可能となり、柔軟かつ堅牢な投稿体験を実現しています。

また、画面上部にステップインジケーターを表示することで、自分がどの段階にいるのかを直感的に把握でき、操作の見通しの良さと安心感も確保しています。

③AnnictAPIを用いた作品情報の自動取得

アニメ作品情報の入力をより簡単に、そして正確に行えるようにするため、AnnictAPIを利用して作品情報を自動取得する機能を実装しています。

ユーザーが作成フォーム上で作品タイトルを入力すると、リアルタイムでAnnictAPIにクエリを投げ、該当するアニメ作品の候補が自動的にサジェスト表示されます。
これにより、正確な作品タイトルの入力補助だけでなく、作品に紐づいた公式サイトURLをAPI経由で取得し、データの整合性と入力の効率化を実現しています。

また、手動入力による表記揺れや誤字による検索精度の低下を防ぐことで、ユーザーがスムーズに正しい作品情報を登録できる体験につながっています。

④Google Places API用いた聖地情報の自動取得

ユーザーが聖地の基本情報をより正確かつ簡単に入力できるように、Google Places APIを活用したオートコンプリート機能を実装しています。

聖地名を入力する際に、Google Places APIを通じて地名や施設名の候補をリアルタイムで取得し、入力補助として表示することで、正確な地名の入力と検索性の向上を両立しています。

さらに、選択された候補に紐づいた住所情報や郵便番号を自動で取得・保存されるため、ユーザーが手動で調べる手間を省きつつ、聖地の詳細情報をデータベースに正確に記録することができます。

今後の展望

投稿処理フォームの仕組みには多くのStimulusを導入していることやFormオブジェクトとコントローラー間のロジックが複雑なため今後はファットコントローラーの解消に努めていきたいです。
またさらにUIの改善やユーザーからのフィードバックをもとに本当に必要とされる機能を実装していきたいと考えておりますのでぜひ実際に使ってみて、フィードバックをいただけたら嬉しいです。

おわりに

最後までご覧いただき、ありがとうございました。
「アニめぐる」の開発を通して自分の理想を形にするために、妥協せずに向き合う姿勢の重要性を実感しました。
聖地巡礼という体験に一歩踏み出すきっかけとして、このアプリが役立てば幸いです。

もし興味を持っていただけたら、X（Twitter）でフォローしていただけると嬉しいです！