背景
PokeAPIを使ってみた一心から始まり、ポケモンをランダムに6匹表示するサイトを考え始めた。
作成中にランダムでポケモンを表示していると、あまりにもドオーが可愛すぎたので一定の確率でドオーしか表示されないポケモン生成サイトにすることにした。
可愛くないですか？？？
目的
- PokeAPIを使ってみる
- Next.jsの勉強を軽くしたので、AppRouterを使用してAPIを叩く
- なんちゃってレスポンシブデザインを実現する
できたもの
poketter(https://poketter.vercel.app/)
感想と考慮したところ
ポケモンSVで内定しているポケモンに絞った
なにかのバグでランダムでポケモン育成してみようぜ!!!みたいなことが起きたとき、内定しているポケモンだと決めるのが楽かなと思った。
最新のDLC(12月配信)には対応できていませんが、一個前のDLCには対応できています。
10%でドオーは光る
10%引いたあと更に10%引くと嬉しくなりますね！！！！
画面デザインとレスポンシブデザイン
画面の色やUIについては事前にFigmaで設計をしました。
検討当初のボタンがそのまま入っていたりしますが...
ボタンの色や背景色、カラーコードなどはピカチュウ大先生を連想しながらcoolorsで見つけて実装しました。
最後に
本当はドオーしか出なかったときにアニメーションをつけようと思ったけど、画面負荷が高くなるとのいい感じのアニメーションが思いつかなかったのでボツになりました。
またなにか思いついたら作ります。
おわり。