Art Navi開発記録のまとめ【Art Navi開発記録 #14】

Art Navi開発記録を振り返る【Art Navi開発記録 #14】

はじめに

こんにちは。
なかのひとカンパニーの archer です。

美術展検索サービス Art Navi の開発内容を、備忘録も兼ねて記事にしてきました。

• サービスURL: https://art-weekend.jp/

前回は、Google Search Consoleを使って、公開後のインデックス状況や検索パフォーマンスを確認する内容について書きました。

今回は、ここまで公開してきた Art Navi開発記録 を振り返ります。

Art Naviについて

Art Naviは、美術館や展覧会をエリアやジャンルから探せるWebサービスです。

初期対象エリアは、以下の3エリアです。

• 上野
• 六本木
• 銀座

まずはMVPとして、以下のページを作りました。

/
トップページ

/exhibitions
展覧会一覧

/exhibitions/[id]
展覧会詳細

/areas/[slug]
エリアページ

/venues/[id]
施設詳細ページ

/favorites
お気に入りページ

最初から多機能なサービスを目指すのではなく、展覧会を探して、気になったものを保存できる状態を優先しました。

技術構成

Art Naviでは、主に以下の技術を使っています。

Next.js App Router
TypeScript
PostgreSQL
Docker / Docker Compose
Nginx
Cloudflare Tunnel
LocalStorage
Google Search Console

本番環境の構成は、以下のようになっています。

ユーザー
  ↓
Cloudflare
  ↓
Cloudflare Tunnel
  ↓
自宅サーバー
  ↓
Nginx
  ↓
Next.js
  ↓
PostgreSQL

Next.js、PostgreSQL、NginxなどをDocker Composeで管理し、Cloudflare Tunnel経由で公開しています。

公開した記事一覧

ここまで、以下の13記事を公開しました。

1. 0円スタートで美術展検索サービス「Art Navi」を作り始めた話【Art Navi開発記録 #1】
2. Next.js App Routerで展覧会一覧ページを作る【Art Navi開発記録 #2】
3. Next.js + PostgreSQL + Dockerで開発環境を作る【Art Navi開発記録 #3】
4. LocalStorageでお気に入り機能を作る【Art Navi開発記録 #4】
5. Docker ComposeでNext.jsを本番起動する【Art Navi開発記録 #5】
6. NginxでNext.jsにリバースプロキシする【Art Navi開発記録 #6】
7. Cloudflare Tunnelで自宅サーバーを公開する【Art Navi開発記録 #7】
8. sitemap.xmlとrobots.txtを整備する【Art Navi開発記録 #8】
9. Next.jsで構造化データを入れる【Art Navi開発記録 #9】
10. エリアページを作って検索導線を増やす【Art Navi開発記録 #10】
11. 施設詳細ページを作ってSEO導線を増やす【Art Navi開発記録 #11】
12. Next.jsで施設詳細ページを作ってSEO導線を増やす【Art Navi開発記録 #12】
13. Google Search Consoleで公開後の状態を確認する【Art Navi開発記録 #13】

公開順の調整により、#11と#12はどちらも施設詳細ページを扱う記事になりました。

連載全体としては、以下の流れで開発内容を整理しています。

サービスを作り始める
  ↓
Next.jsで画面を作る
  ↓
PostgreSQLとDockerで開発環境を作る
  ↓
Docker Composeで本番起動する
  ↓
NginxとCloudflare Tunnelで公開する
  ↓
SEOと検索導線を整える
  ↓
Search Consoleで公開後の状態を確認する

MVPとして割り切ったこと

Art Naviでは、最初からユーザー認証を実装せず、お気に入り機能をLocalStorageで作りました。

認証を入れると、会員登録、ログイン、パスワード再設定、退会処理など、実装範囲が大きく広がります。

そこで、まずは以下の体験を作ることを優先しました。

展覧会を探す
  ↓
気になった展覧会を保存する
  ↓
お気に入り一覧から確認する

必要になった段階で認証やDB保存を追加する方が、MVPとしては進めやすいと感じました。

インフラ構築で学んだこと

Docker Composeでは、コンテナ同士をサービス名で接続します。

NginxからNext.jsへ接続する場合は、以下のように指定します。

http://nextjs:3000

Cloudflare TunnelからNginxへ接続する場合は、以下です。

http://nginx:80

コンテナ内の localhost は、そのコンテナ自身を指します。

この点は、Docker環境を作るうえで特に詰まりやすかった部分でした。

また、Cloudflare Tunnelを使うことで、ルーターのポートを開放せずに自宅サーバーを公開できました。

低コストで公開できる一方、自宅の電源やネットワーク環境に影響されるため、今後は外部サーバーへの移行も検討しています。

SEO対応で学んだこと

Art Naviでは、MVP段階から以下のSEO対応を進めました。

• ページごとのtitleとdescription
• sitemap.xml
• robots.txt
• パンくず
• JSON-LDによる構造化データ
• エリアページ
• 施設詳細ページ
• 内部リンク
• Google Search Console

SEOは設定しただけですぐに結果が出るものではありません。

ただし、ページを増やす前にサイトマップや内部リンクの土台を作っておくことで、その後の改善を進めやすくなりました。

特に、展覧会詳細ページだけでなく、エリアページと施設詳細ページを用意したことで、以下のような導線を作れました。

エリアページ
  ↓
施設詳細ページ
  ↓
展覧会詳細ページ

単純にページ数を増やすのではなく、ページ同士をつなげることが重要だと感じています。

今後改善したいこと

Art Naviは公開できましたが、まだ改善したい部分が残っています。

今後は、以下を進める予定です。

• 展覧会データの追加と更新
• 展覧会情報の自動取得
• 自動取得した情報の確認フロー
• 施設詳細ページの本文強化
• エリアページの本文強化
• 開催中・開催予定・終了済みの整理
• お気に入り機能のUI改善
• OGP画像の整備
• Search Consoleを使った継続的な改善
• 外部サーバーへの移行検討

特に、展覧会情報を継続的に更新する仕組みは、今後の大きな課題です。

まとめ

Art Navi開発記録では、Webサービスを作り始めてから、本番公開、SEO対応、公開後の確認までを記事にしてきました。

今回の開発を通じて、以下を一通り経験できました。

• Next.js App Routerでのページ実装
• PostgreSQLを使ったデータ管理
• Docker Composeによる環境構築
• Nginxによるリバースプロキシ
• Cloudflare Tunnelによる外部公開
• LocalStorageを使ったMVP実装
• sitemap.xmlや構造化データによるSEO対応
• Google Search Consoleを使った公開後の確認

Art Navi開発記録としては、今回でいったん一区切りにします。

開発自体は今後も続けていくため、新しい機能や運用上の課題が出てきたら、別の記事としてまとめる予定です。