はじめに
Webアプリケーション開発の画面設計で私が行ったことについてまとめます。
完成したアプリケーション
完成したアプリは以下のgithubにて公開してます。
画面設計の流れ
以下の流れで設計しました。
- 頭の中のイメージを書き出す
- figmaを用いてWebアプリケーションのプロトタイプを作成する
画面設計で実施したこと
1.頭の中のイメージを書き出す
まずは紙に簡単にイメージを書きました。
自分が作りたいWebアプリと似ている既存のWebアプリを参考に、画面遷移などのWebアプリケーションの動作も考えました。
(例えばSNSアプリを作成するのであれば、Twitter、Instgram、Facebookなどを参考にする。)
既存のアプリを参考にすることで、画面遷移や実装すべき機能などが明確になると思います。
2.figmaを用いてWebアプリケーションのプロトタイプを作成する
figmaを用いて画面遷移を含めたWebアプリケーションのプロトタイプを作成しました。プロトタイプは試作品という意味です。
figmaはWebデザインツールです。ユーザーから見える画面をデザインすることができます。画面遷移などの動作を付けて、アプリケーションの動作をシミュレーションすることができます。
使い始めは機能が多く難しく感じるかもしれませんが、使い慣れればとても早く簡単に完成度が高いイメージを作成することが出来るのでお勧めのツールです。
参考記事の「Figma 入門」、「Figmaで基本の定番UIアニメーション7つをデザインしよう」はとても参考になりました。