テクノロジー

お気に入りの飲食店を記録するアプリについて

ひなの🦢UGOK's icon'
  • ひなの🦢UGOK
  • 2021/02/16 07:19
Content image

 

こんにちは。今回は現在私が.bubbleで制作中の、お気に入りの飲食店を記録できるアプリを紹介させていただきます。

アプリの概要

私が今回制作しているアプリは、ランチ・カフェ・ディナーの3つの項目別に自分のお気に入りの飲食店を記録できるアプリです。

見た目は画像のようになっています。

Content image
アプリの見た目

 

飲食店の記録の方法はInstagramの投稿を少し参考にし、定休日やアクセスなどの飲食店の詳細な情報よりも、味や空間などその人にとっての思い出の記録ができる見た目を意識し作成しました。

Content image
Cafeの項目に記録された飲食店の情報

操作方法は、画面中部にあるLunch、Cafe、Dinnerのタブをクリックすることで項目が切り替わり、+ボタン(テキスト「思い出を記録しよう」の左側)をタップすることにより、飲食店の情報を記入するポップアップが表示され、追加ボタンをタップすると飲食店の情報がそれぞれのタブ内に記録されるようになっています。

Content image
Lunch、Cafe、Dinnerタブと+ボタン
Content image
Lunchタブの飲食店の記録が表示される

例として、Cafeタブ内の+ボタンをクリックするとポップアップが表示され、画像のようにポップアップのフォームを入力し追加ボタンを押すと、

Content image
飲食店の情報を記入するポップアップ

下記の画像のように「喫茶マヅラ」の情報が記録されます。

Content image

そして、右上にある×アイコンをクリックすると記録が削除できるようになっています。

 

制作するきっかけ

今回制作しようと思ったきっかけとしては、インスタグラムを利用している20代の多くがインスタグラムで飲食店を探し、訪れ、写真を多く撮影しているように感じます。私や友人も同じようにインスタグラムで飲食店を探して訪れ、沢山の写真を撮影するのですが、おしゃれに撮れた写真でも自分のインスタグラムの系統に合わない場合にはお蔵入りすることも多く、もったいないなと感じていました。そこから、人と共有するのではなく、自分が楽しく見返すことのできるアプリがあればいいなと感じ、制作することにしました。

アプリ制作の手順

まず初めに自分の制作するアプリを最終的にどのようにしたいのかを理解するために、アプリの概要やターゲットなどを大まかにメモしました。

Content image

 

次にAdobe XDでどのようなデザインや機能にするかを決めましたが、実際に.bubbleで制作している際に機能を実現できなかった、またより見やすいデザインを思いついた、などの理由によりXDで行ったデザインから変更した点も多かったため、次回デザインする際には.bubbleの機能や実際利用する際の見やすさをより理解したうえでデザインするべきだと感じました。

Content image
XDでのデザイン
Content image
実際のデザイン

実際に制作してみて、余白を大きくとったほうが情報が伝わりやすいということと、写真を使用する際の背景は写真の色味を左右しない白色が良いということが分かりました。

私はアプリやウェブサイトのデザインの作成に関して深く勉強できていないので、今回は未熟な部分が多かったなと感じています。

現在の問題点

indexページからログインしていないユーザーを締め出すことは可能だったのですが、ログインした人のみに表示することが現在実現できていません。ログインした人全員にそれぞれのユーザーの記録が見えてしまうと、私が考えていた「自分用の記録」とならないため困っています。

また、記録した飲食店の情報の編集、×アイコンをタップした際に「本当に削除しますか?」と確認のポップアップを表示してから削除を実行したいと考えているのですが、うまく実現できていません。

実現は難しく感じますが、諦めずに解決策を探していこうと思います。

 

最後に

最後までご覧いただきありがとうございました。次回は飲食店の記録する機能をどのように.bubbleで作成したのかをアウトプットとして書いていこうかなと思っています。

 

 

 

Supporter profile iconSupporter profile iconSupporter profile icon
Article tip 3人がサポートしています
獲得ALIS: Article like 91.24 ALIS Article tip 7.27 ALIS
ひなの🦢UGOK's icon'
  • ひなの🦢UGOK
  • @usagi315
HTML、CSS、.bubbleを勉強しています。

投稿者の人気記事
コメントする
コメントする
こちらもおすすめ!
Eye catch
クリプト

スーパーコンピュータ「京」でマイニングしたら

Like token Tip token
1.06k ALIS
Eye catch
他カテゴリ

機械学習を体験してみよう!(難易度低)

Like token Tip token
69.82 ALIS
Eye catch
クリプト

ブロックチェーンの51%攻撃ってなに

Like token Tip token
0.00 ALIS
Eye catch
クリプト

Uniswap v3を完全に理解した

Like token Tip token
18.92 ALIS
Eye catch
テクノロジー

オープンソースプロジェクトに参加して自己肯定感を高める

Like token Tip token
85.05 ALIS
Eye catch
ゲーム

ドラクエで学ぶオーバフロー

Like token Tip token
30.10 ALIS
Eye catch
クリプト

17万円のPCでTwitterやってるのはもったいないのでETHマイニングを始めた話

Like token Tip token
46.60 ALIS
Eye catch
クリプト

Bitcoinの価値の源泉は、PoWによる電気代ではなくて"競争原理"だった。

Like token Tip token
159.32 ALIS
Eye catch
クリプト

約2年間ブロックチェ-ンゲームをして

Like token Tip token
61.20 ALIS
Eye catch
クリプト

ジョークコインとして出発したDogecoin(ドージコイン)の誕生から現在まで。注目される非証券性🐶

Like token Tip token
38.31 ALIS
Eye catch
テクノロジー

なぜ、素人エンジニアの私が60日間でブロックチェーンゲームを制作できたのか、について語ってみた

Like token Tip token
270.93 ALIS
Eye catch
テクノロジー

彼女でも分かるように解説:ディープフェイク

Like token Tip token
32.10 ALIS