みさき
今回はFigmaで分かりやすいデザインモックを作成していくのですね
はい、今回は前回作成したデザインモックにテンプレートからコピペでデザインを修正して、分かりやすいデザインモックを作成していきますね。
花井
引き続きFigmaを使ったデザインモックの作成を行なっていきます。
Figmaのアカウントがない方は作成を願いします。
Figma
アカウント作成後にログインした状態で、進めてください。
デザインテンプレートからコピペで作るメリット
デザインテンプレートからコピペでデザインモックを修正するメリットは何でしょうか？
デザインが分かりやすい
デザインのイメージや画像、ボタン、フォームなどの指示が分かりやすくなるため、デザインの内容が分かりやすくなります。
費用が安くなる
デザインテンプレートは開発工数が少ないデザインをもとに作成しています。
そのため、テンプレートを使用するほど、開発工数が削減できるため、費用が安くなります。
テンプレートを基本として、こだわりのある部分はテンプレートを使わないようにすることで、メリハリを効かせた形で開発を行うことが出来ます。
デザインテンプレートをダウンロードする
下記からFigmaのデザインテンプレートをダウンロードしてください。
https://www.figma.com/community/file/1149620853818828012
デザインテンプレートの素材の利用権利について
上記のデザインテンプレートの利用権限は、個人・商用利用の両方で使用することが可能です。
また、使用後の責任については一切の責任を負いかねます。あらかじめご了承ください。
ダウンロードできるデザインテンプレートの内容
- デスクトップ
- タブレット
- モバイルアプリ
の各デバイスごとのデザインテンプレート
フォームやボタンなどのUIテンプレート(assets)
が利用できるFigmaのデザインテンプレートをダウンロードできます。
ダウンロードしたデザインテンプレートはFigmaで利用可能です。
コピペであなたのプロジェクトに貼り付けて使用してください。
サンプルプロジェクトのデザインへコピペする
前のページで作成したサンプルプロジェクトのデザインモックにデザインテンプレートをコピペしていきます。
クラス一覧ページ
クラス一覧ページはこのような感じでアイコンを置いて選択できる形が良さそうです。
園児一覧ページ
園児一覧ページはこのような感じで人物のアイコンを置いて選択できる形が良さそうですね。
チェックイン確認ページ
最後はチェックイン確認ページですね。
このような大きなボタンを押すデザインにした方が良さそうです。
子供が押したいと予想できるので、ひらがなを使ったデザインにしておく方が良さそうですね。
チェックインまでのデザインまとめ
まとめるとこのような一連の流れになります。
ボタンや画像の指示がわかりやすくなりました。
同じような流れで、他のページも作っていきましょう。
機能要件書類とFigmaの情報を連携する
Figmaのデザインモックは、うまくできましたでしょうか？
最初はうまくいかなくても大丈夫です。
また、開発会社と打ち合わせを行いながら、徐々に改善していきますので、最初から完璧にする必要はありませんから、心配はいりません。
ここまでで、要件機能とデザインモックの土台が出来上がりました。
しかし、今のままでは、どの機能とデザインが紐づいているか分かりにくく、誤解が生じる恐れがあります。
そこで機能要件資料の内容と該当のデザインを紐づける必要があります。
次のページでは、機能要件資料の内容と該当のデザインを紐づける方法について学んでいきましょう。
みさき
初めてでも簡単にできました。
良かったです。次回では機能要件資料の内容と該当のデザインを紐づける方法について学んでいきます。
花井
