簡易仕様書

アプリ名

「スマート・グルメ・サーチ - 付近の飲食店を検索」

ホスティングURL

https://gourmet-search-app.netlify.app

リポジトリURL

https://github.com/mako4kamiya/gourmet-search-app

コンセプト

「新しい」・「スマート」・「シンプル」

こだわったポイント

ユーザー調査に基づいた設計

　開発を始めるにあたり、自分なりに市場調査とユーザー調査を行った。 　ユーザー調査の結果、飲食店を検索する際に「食べログ・ぐるなび・ホットペッパーなどのグルメサイト」よりも、「Googleマップなどの地図サービス」が多く使われていることから、マップ表示をベースに検索できるように設計した。さらに、「直接店舗のホームページを見る」という意見や近年のSNS普及の背景から、ユーザーは、詳細情報を店舗のオウンメディアで取得するだろうと想定し、シンプルでかつ必要な情報が得られることを念頭に設計を行った。 さらに、「コロナ禍に伴う飲食店の営業時間の変更等の情報」や「決済方法」、「駐車場」や「子ども連れ」に関する情報等の需要が高い項目の表示は見やすく表示できるよう設計した。

技術面

　「スマート」・「シンプル」を実現するために、仮想DOMや状態管理得意とするReactを採用してSPA開発を行なった。現在地取得と店舗情報取得のAPI実装では、非同期通信を行い、必要以上にリクエストを行わないように工夫した。また、ユーザー調査の際に「お気に入り登録」や「来店履歴の記録」等の機能の要望もあったが、「シンプル」を優先しあえて設計に入れなかった。ブラウザのストレージやCDNを活用してクライアントサイドで実装できるか今後の検討事項とする。

デザイン面

「新しい・スマート・シンプル」をコンセプトに、ピンタレストでインスピレーションを得て画面設計を行なった。開発期間が短かったことから、簡単にレスポンシブ対応できかつおしゃれなデザインが作れる、UIコンポーネントとして「MATERIAL-UI」を採用した。地図サービスは、開発者が自由にレイアウトを作成できることから、「Mapbox GL JS」を採用した。

設計

「miro」で設計を行った。リンク先

機能一覧（クリックで展開）

（※「未」と記載のあるものは未実装だが今後実装予定のもの）

検索条件入力画面

・GeolocationAPIを使って現在地を取得 ・現在地からの検索範囲を指定 ・検索オプションを指定 ・選択中の項目を表示して見やすく（未）

検索結果画面

・検索結果画面（マップ画面、一覧画面） ・結果一覧に表示する内容をユーザーが選択できる（未） ・クリックで店舗サイトへ遷移（未）

店舗詳細画面（未）

・店舗名称 ・住所 ・営業時間 ・画像 ・店舗のURLやSNS情報、SNS埋め込み等のオウンメディア情報

マップ表示

・現在地と検索ヒットした店舗のピン（未） ・ユーザーがマップを移動させることにより再検索（未）

その他、実装予定機能やバグについてはこちら

対象OS・ブラウザ

MacOS

• Chrome

Windows 10 Pro

• Chrome v90.0.4430.93

iOS v14.4.2

• Chrome v90.0.4430.78
• Safari
• Sleipnir Mobile v4.6.10

開発言語・フレームワーク

• JavaScript
• React.js v17.0.2
• Create React App
• NPM v6.14.12
• MATERIAL-UI v4.11.1

外部API

• Mapbox GL JS v2.0.1
• Geolocation API

開発期間

約2週間

自己評価

　アプリを開発するにあたってまずユーザー調査を始めたことから、アプリのコンセプトや開発の目的が定まり効率よく設計・開発ができた。 　コンポーネントやファイル構造等の設計経験があまりなく、設計はしたものの、実際に作って行くにつれて変更が生じた箇所が何度もあった。現場での設計の仕方や工数の立て方をもっと学んでいきたいと思う。 　技術面では、やはりJavaScriptやアルゴリズムの理解が浅いことで開発スピードが遅かったように感じる。開発スピードや技術が身に付けば、プロダクトの品質の向上とユーザーの満足に繋がると思うので、これからも基礎と新しい技術の学習をを続けていきたいと思う。 新たに学べたこととして、ReactHookと非同期通信の、挙動・書き方についてある程度理解した上で実装ができたためとても達成感があった。