ReactでWebアプリを作る 2
ReactでWebアプリを作る、２回目の記事です。
Vueの時に比べて進捗状況が失速しております。
副業などを始めたのと、下の子の後追いが最高潮でなかなか時間が取れなくなってきました。
まぁ、いずで副業は終わりを迎え、子供の後追いも治っていく事でしょうからまたゆっくり個人開発できる日がくるかと思います。
前置きが長くなってしまったのですが、Reactでアプリを作る、続きをやっていこうと思います。
Apiはこれを使います
ホットペッパー。
飲食店の情報を取得して、ランチに使えるお店をピックアップできるWebアプリケーションを作成しようと思います。
なにせ子供ができてから夜ゆっくり飲みにいく事もなくなり、友人と会う時はもっぱらランチ。
休日にゆっくりランチをしながらつもる話がしたい。
しかし、店を探すのは面倒臭い。
「ランチ 場所 長居できる」
などと検索してみるのですが、まぁよくわからないブログが沢山ひっかかって、結局どこがいいのかわからない。
本当にここ、ランチ営業してるの？みたいなお店が引っかかってきたりするわけで、いちいちお店のHPとか開いて確認するのは面倒ですよね。
そういうのを解消できるランチ営業してる飲食店だけをピックアップできるようなWebアプリを作ってみようと思います。
デザイン
エンジニアのつくるアプリのデザインは最悪だ。
なんてよく言われますが、その通りだと思います。
エンジニアもエンジニアでデザイナーさんの作ってくれたデザインを見ながら、なんて面倒なんだ、もっと統一してくれよー。
とか思ったりするかと思うのですが、実際のところデザイナーさんの作成したデザインのアプリはよく使われます。
アプリは見た目が８割と投稿されたツイッターのつぶやきを見かけた事がありますが、本当その通りだなと思います。
今回はなんかかっこいいからという理由でニューモフィズムでやってみようかと思います。
ランチ営業してる飲食店探すアプリでニューモフィズムはアンマッチ感ありますが、やってみたいと思った時が吉日なのでやっていこうと思います。
これが作りかけのアプリの画面です。
ボタンの感じ、背景色の感じをニューモフィズムっぽくしてみました。
実際に作るに当たってニューモフィズムで作成されたアプリなんかの情報を探してみたのですが、正直数が少ないです。
参考にできるものが少ないのでデザイナーではない私にはちょっと無理があったかもしれません。
まぁ、でもせっかくなのでそれっぽく作っていこうかと思います。
あと、tailwindいれたのですがボタンのcssなんかはニューモフィズムジェネレーターというのを使いましでのでtailwind cssとcss直書きの合わせ技になってしまいました。
この設計がいいのか悪いのか。
どっちかに統一したほうが良さそうなきがしていますが、サイズ指定やマージン、パディングなんかはtailwind cssが便利なので両方使っていこうかと思います。
仕事でやったらしばかれそうですが、個人開発だからいいよね。
そんな感じで今回はポエム調になってしまいましたが、ここまでで。
次回はもうちょっと画面ができあがっているといいな。
ここまで読んでくださってありがとうございました。
この記事が気に入ったらサポートをしてみませんか？