wheatandcatの開発ブログ

React Nativeで開発しているペペロミア & memoirの技術系記事を投稿してます

アプリのデザインをリニューアルしてリリースしました

前々からやっていたアプリデザインリニューアルですが、 やっとリリースできました。

アプリに合わせてWebサイトもリニューアルしました。

peperomia.app

作成的にはfigmaでデザインを作って

f:id:wheatandcat:20190727232443p:plain

それをReactのコードに対応させていった感じ。 最近はfigmaの扱いも、かなり慣れてきてサクッと作れた

以前、アプリのスクリーンショットをAppLaunchpadで作成した記事を書きましたが、

wheatandcat.hatenablog.com

今回はスクリーンショットfigmaで作成しました。

figmaスクリーンショットを作成する

まずは使用するアプリのスクリーンショットを撮りMockUPhoneというサイトからスマホ画像を作成する

mockuphone.com

ここだとiPhoneXの画像も無料で作れるので便利

f:id:wheatandcat:20190727233651p:plain:w300

あとは必要なスクリーンショットのサイズを調べて、各サイズのFrameをfigmaで作成

https://help.apple.com/app-store-connect/#/devd274dd925

それで作成して、こんな感じ f:id:wheatandcat:20190727234146p:plain

前は時間が無くてAppLaunchpadを使ったけど、時間があればfigmaの方がクオリティ高いやつが作れるなと思った