Daily UI #054（Confirmation）
Daily UI 54日目のお題は「Confirmation（確認）」。
イラストジェネレーターアプリを制作します。
制作過程
今回は4時間弱でした。
制作の流れ
リサーチ：1時間18分
要件定義：7分
必要な項目を考える：30分
ラフ：2分
ワイヤーフレーム・ビジュアル：1時間48分
-----------------------------
計 3時間45分
リサーチ
PinterestやDribbbleの他、既存サービスやiPhoneのdialog等を参考にしました。
主に参考にした既存サービス
顔アイコンジェネレーターZ, Emoji Kitchen, MagicPattern
要件定義
ChatGPTに要件を詰めてもらいました。
サービス名：DrawMe
サービスカラー：パステルブルー (#7EC8E3)、ライトグレー (#F0F0F0)、パステルピンク (#F7A1A1)
アプリの機能：カスタムテンプレート選択、色のカスタマイズ、パーツの変更、背景設定、サイズ調整機能、ファイル形式の選択、ダウンロード機能、シェア機能、プリセット保存、ヒント・チュートリアル、利用履歴機能
ペルソナ：
・名前：松本 優香
・年齢：24歳
・職業：デザイン学科の大学院生
・居住地：東京都渋谷区
・趣味：イラスト、SNS、ファッション、DIYクラフト
・特徴：デザインやイラストに興味があり、スキルアップを目指すが、プロ仕様のツールを使いこなすのはまだ難しい。自分の作品を簡単にSNSにシェアしたい。忙しい生活の中で、効率よく自分の作品を作れるツールを求めている。
合わせて必要な項目も考えます。
項目
・ヘッダー
・サービスロゴ
・メニュー
・保存
・作成履歴
・SNSでシェアする
・プレビュー
・制作中のイラスト
・戻る、進むボタン
・ランダム
・カスタマイズ
・顔
・左手
・右手
・髪（前）
・髪（後ろ）
・服（上）
・服（下）
・アクセサリー
・編集
・カラー
・テイスト
・ダウンロード
・PNG
・SVG
・JPEG
ラフ
ここは割愛。
ワイヤーフレーム・ビジュアル
制作したワイヤーフレームがこちら ↓
画面上半分に作成中のイラストを表示、下半分に選択肢を表示しています。
完成
制作したデザインがこちら ↓
左の画面で保存ボタンを押し、拡張子を選択（PNG,SVG,JPEG等）すると右のModalが表示される想定です。「SNSでシェアしませんか？」の部分が今回のお題のConfirmation（確認）に沿った部分、のつもりです。
ダミー画像として入れているイラストはこちらを使用させてもらいました ↓
イラストモジュール「omiso」です。
https://www.figma.com/community/file/1233018502662114764/illustration-moduleomiso
制作者の方 ↓
デザインのポイント
SNSシェア表示のタイミング
はじめはメニュー（≡）の中に格納しようかと思っていたんですが、保存のタイミングなら、イラストが完成していてユーザーが前向き？な気持ちなのでシェアしてもらいやすいんじゃないかと思い、ここに配置しました。シェアしない選択肢も「キャンセル」のような無機質な言い方ではなく、「やめておく」にして、柔らかいイラストの雰囲気に合わせました。
制作してみて
お題がConfirmation（確認）でかなりふんわりしていたので、何を作るか決めるのがなかなか難しかったです。
それとリサーチ途中で良い感じのジェネレーターを発見したのでここに貼っておきます。
MagicPatternというサイトです。「参考にしたサービス」でも挙げたものです。いろんなパターンがあり、色やパターンの間隔・サイズ等を自由に変えられます。
ヘッダー中央の青紫のボタンの中にいろいろツールが入っていて、
・CSS Background Patterns（↑のリンク先）
・Polka Dot Patterns（ドット柄）
・Grid Patterns（格子柄）
辺りが特に汎用性高そうです。一部課金制ですが、上の2つは無料のようです（他にもあります）。こういうシンプルなパターンのフリー素材ってなかなかないので、かなり重宝しそうな予感…👍