アプリ名　

ぐるっと

公開先ページ：https://grutto.udonrm.com
エックスサーバーを使用してデプロイしました。

動作イメージ

2023-05-01.105631.mp4

対象 OS およびブラウザ

macOS13.3.1、Google Chrome での動作確認済み

開発環境/言語

MAMP/PHP,JavaScript

開発期間

5 日間

機能概要

• 飲食店検索：ホットペッパーグルメサーチ API を使用して、現在地周辺の飲食店を検索する。
• Google マップの表示：GoogleMapsAPI を使用して飲食店の位置を地図上で表示させる。

フレームワーク

Laravel 9.52.5 jQuery 3.6.0 Tailwindcss v3.3.2 Font Awesome v5.15.4

設計ドキュメント

コンセプト

飲食店の情報をシンプルにすばやく取得できることがコンセプトです。

こだわったポイント

+1 の機能として Google Maps API を使用して目的地へのアクセスがわかりやすくなるようにした。
ページ間の移動後に scrollTo メソッドを使って自動で一覧の先頭にスクロールするように設定した。
検索ボタンを押した後にローディングアニメーションを追加した。

デザイン面でこだわったポイント

Tailwindcss を導入してシンプルな設計を心がけた。
一覧画面では背景色と文字色を薄いグレーに設定して落ち着いた雰囲気を心がけた。
ヘッダーのアイコンには Font Awesome を導入し、キャッチーな印象を与えられるようにした。
ボタンは明るい色で強調してページネーションの大きさもちょうど良くなるように調整した。
詳細画面はユーザーの導線が自然になるように各項目を配置した。

アドバイスして欲しいポイント

デザインに関して改善できそうな箇所
機能に関して改良もしくは新しく追加できるもの
設計ドキュメントの作り方

自己評価

API を利用するのが今回初めてだったので、その実装に苦労しました。
ただ、Laravel での開発は 2 回目だったので、前回の経験を活かしながら進められたと思います。全体的にシンプルな機能と設計を心がけましたが、裏を返せば検索機能が寂しいという評価にもつながると思うのでそこのバランスが難しかったです。既存の飲食店検索アプリと差別化ができるような機能を追加できれば良かったのですが、実装には至りませんでした。