友田 陽大
← 実績一覧に戻る

外国人旅行客向け飲食店マッチングサイト

Tinder風UI | 多言語対応 | チーム開発 | クリーンアーキテクチャ

🏢

クライアント

観光業界(東京の観光地のホテル・旅行客向けサービス) | 開発体制: チーム開発(GitHub使用) | サービス展開: 東京

👤

私の役割

フロントエンド・バックエンド・インフラ開発担当(チーム開発におけるフルスタック開発者)

💭課題(Situation & Task)

外国人旅行客が言語の壁により最適な飲食店を見つけられない。既存のグルメサイトは日本語中心で使いづらく、ホテルスタッフも多忙で全ての旅行客に丁寧なレコメンドを提供することが困難でした。

詳細:

東京の観光地では、外国人旅行客が急増しているものの、言語の壁により「自分の好みに合った飲食店」を見つけることが困難でした。既存のグルメサイトは日本語中心で、外国人にとって使いづらい状況。また、旅行客が飲食店を予約する際の連絡手段(電話やメール)も言語の壁により困難。「どの飲食店が自分に合うか分からない」「メニューが読めない」「予約方法が分からない」という3つの課題が重なっていました。

🔧技術選定の理由(Rationale)

  • Tinder風スワイプUI: 言語を問わない直感的な操作で、「好き」「嫌い」を視覚的に選択。言語の壁を最小化

  • 多言語対応(マニュアル実装): i18nライブラリを使わず、全ての言語をマニュアルで入力。日本語、英語、中国語、韓国語の4カ国語に対応

  • 画像中心のUI: テキストを最小限に抑え、料理の写真で直感的に選択可能。言語に依存しないUX

  • Golang + google/wire (DI): クリーンアーキテクチャを実現するため、DIライブラリ google/wire を導入。テスタブルで保守性の高い設計

  • Next.js + Vercel: 高速なレンダリングとグローバルCDN配信

実施したこと(Action)

  • Tinder風UIの実装: React + Framer Motionでスワイプアニメーションを実装。直感的な操作で飲食店を選択

  • 多言語対応(マニュアル実装): i18nライブラリを使用せず、サービス全体の翻訳を手動で入力。日本語、英語、中国語、韓国語の4カ国語に対応

  • クリーンアーキテクチャの実装: Golangバックエンドで google/wire (DI) を活用し、依存性逆転の原則に基づいた設計。レイヤー分離(Controller/UseCase/Repository)を徹底

  • テストコードによる品質向上: ユニットテスト・統合テストを実装し、品質保証を徹底。テストカバレッジを重視

  • GitHub によるチーム開発: Pull Request、Code Review、CI/CD パイプラインを活用し、チームでの効率的な開発体制を構築

  • CI/CD パイプラインの構築: GitHub Actions で自動テスト(Go test/Jest)・リンター(golangci-lint/ESLint/Prettier)・脆弱性診断(npm audit)を実行。Pull Request ごとに自動検証し、コード品質とセキュリティを担保

詳細:

Tinder風のスワイプUIを採用し、React + Framer Motionで滑らかなスワイプアニメーションを実装。多言語対応では、next-i18nextなどのライブラリを使用せず、サービス全体の文言を日本語、英語、中国語、韓国語で手動入力しました。バックエンドでは、Golangで google/wire (DIライブラリ) を導入し、クリーンアーキテクチャを実現。依存性逆転の原則に基づき、Controller/UseCase/Repository層を明確に分離し、テスタブルで保守性の高いコードベースを構築しました。また、ユニットテスト・統合テストを実装し、品質向上に努めました。GitHubを使用したチーム開発では、Pull Request、Code Reviewを徹底し、CI/CDパイプラインで自動テスト・デプロイを実現しました。

🔧技術選定の理由

  • Tinder風UI: 言語を問わない直感的なスワイプ操作で、UXを最大化

  • 多言語対応(マニュアル実装): i18nライブラリを使わず、全文言を手動で4カ国語に対応

  • Golang + google/wire: クリーンアーキテクチャを実現するDIライブラリ

  • TypeScript + zod: フロント・バック双方での厳格な型安全性とバリデーション

  • Next.js + Vercel: 高速なレンダリングとグローバルCDN配信

担当領域

  • フロントエンド開発(Next.js/React)
  • バックエンド開発(Golang/Echo + google/wire)
  • インフラ構築(AWS/GCP/Terraform)
  • 多言語対応の実装(マニュアル実装)
  • UX設計(スワイプUI)
  • テストコード作成(ユニットテスト・統合テスト)

使用技術

Golang
Echo
google/wire
Next.js
React
TypeScript
zod
Vercel
AWS
GCP
Terraform
PostgreSQL
Docker
Framer Motion
GitHub
GitHub Actions
Go test
Jest
golangci-lint
ESLint
Prettier
npm audit

🎯成果

  • 🎯言語を問わない直感的UIを実現(東京でサービス展開)
  • 🎯4カ国語対応(日本語、英語、中国語、韓国語)をマニュアル実装
  • 🎯クリーンアーキテクチャ(google/wire)により、保守性の高いコードベースを構築
  • 🎯テストコードによる品質向上を実現(ユニットテスト・統合テスト)
  • 🎯GitHub を活用したチーム開発体制(Pull Request、Code Review、CI/CD)
  • 🎯CI/CD による品質保証とセキュリティ診断の自動化:GitHub Actions で自動テスト・リンター・脆弱性診断を実行し、Pull Request ごとにコード品質を検証
  • 🎯QRコードアクセスで、ホテルフロントでの導線を最適化

同様の課題はありませんか?

あなたのビジネス課題も、最新の技術で解決できるかもしれません。
まずは30分、無料技術相談で状況をお聞かせください。

無料技術相談を予約する

※ プロジェクト単位(請負)・技術顧問、どちらも対応可能です