はじめに

　Webアプリケーション開発の画面設計で私が行ったことについてまとめます。

完成したアプリケーション

完成したアプリは以下のgithubにて公開してます。

画面設計の流れ

　以下の流れで設計しました。

頭の中のイメージを書き出す
figmaを用いてWebアプリケーションのプロトタイプを作成する

画面設計で実施したこと

1.頭の中のイメージを書き出す

　まずは紙に簡単にイメージを書きました。
　自分が作りたいWebアプリと似ている既存のWebアプリを参考に、画面遷移などのWebアプリケーションの動作も考えました。
　(例えばSNSアプリを作成するのであれば、Twitter、Instgram、Facebookなどを参考にする。)
　既存のアプリを参考にすることで、画面遷移や実装すべき機能などが明確になると思います。

2.figmaを用いてWebアプリケーションのプロトタイプを作成する

　figmaを用いて画面遷移を含めたWebアプリケーションのプロトタイプを作成しました。プロトタイプは試作品という意味です。
　
　figmaはWebデザインツールです。ユーザーから見える画面をデザインすることができます。画面遷移などの動作を付けて、アプリケーションの動作をシミュレーションすることができます。
　使い始めは機能が多く難しく感じるかもしれませんが、使い慣れればとても早く簡単に完成度が高いイメージを作成することが出来るのでお勧めのツールです。
　参考記事の「Figma 入門」、「Figmaで基本の定番UIアニメーション7つをデザインしよう」はとても参考になりました。

参考記事
・Figma 入門
・Figmaで基本の定番UIアニメーション7つをデザインしよう無料サンプルデモ有