Figmaを使ったデザインモックの作成を行なっていきます。

Figmaのアカウントがない方は作成を願いします。

Figma

https://www.figma.com/ja/

また基本的な使い方の直感的にわかる部分については省略していきます。

まずはFigmaを触ってみてください。

Figmaでデザインモックを作成するポイントについて説明します。

機能要件概要に作成したページや内容に沿って作成していきましょう。

要件概要資料作成の時のサンプルプロジェクトを使用して説明していきます。

タブレットアプリで登園した園児はチェックインの動作ができますね。

チェックインには

• クラス一覧ページ
• 園児の一覧ページ
• チェックイン確認ページ

が必要です。

このページをFigmaで作成していきます。

クラス一覧ページはこのような感じでアイコンを置いて選択できる形が良さそうです。

園児一覧ページはこのような感じで人物のアイコンを置いて選択できる形が良さそうですね。

最後はチェックイン確認ページですね。

このような大きなボタンを押すデザインにした方が良さそうです。

子供が押したいと予想できるので、ひらがなを使ったデザインにしておく方が良さそうですね。

まとめるとこのような一連の流れになります。

同じような流れで、他のページも作っていけそうですね。

でも今のままのデザインでは、ボタンやフォームなどが分かりにくいです。

次回では、もう手間がかからない、伝わりやすいデザインモックの作成方法について学んでいきます。