【UI、web、Art direction】フォトカレンダー機能構築
家族と写真を共有できるアプリ上でユーザーがフォトカレンダーを注文し、離れて暮らす家族に送れる機能を作るプロジェクト。 アプリUIの他、紙のカレンダー（プロダクト）、プロモーション用のwebページやバナーなど多岐に渡るクリエイティブが必要でした。
#情報設計 #UI #web #ディレクション #iOS #Android #プロダクト
担当工程
- 仕様／要件定義
- 情報設計
- ワイヤーフレーム作成
- UIデザイン（iOS／Android）
- インタラクションデザイン
- webデザイン
- webコーディング
- アイコン作成
- 実装確認・調整
役割
UIデザイナー、webデザイナー
期間
仕様検討～リリースまで6か月程度
詳細
アプリUI - デザイン
サービスのコンセプトを固めるところから仕様検討、デザイン作成、実装調整のやり取りまで一通り担当。
ワイヤーフレームを作り、prottで遷移を確認しながら機能や画面の仕様をPOおよびエンジニアと検討していきました。
最初はわかりやすさを重視し1タスク1画面のフローとしていましたが、その検討の中で「離脱を少なくしたい」という要件が固まってきたため、なるべくステップの少ないフローに決定。
▲遷移図
デザインを整えながらエンジニアの実装で出てきたイシューに対し、細かい仕様を決めていきました。
通常、UIデザイン指示はzeplinのみで行うことが多いのですが、今回は細かい指定もあったのでesaにまとめアップデートなどで必要になった時にメンバー誰でもすぐ見返せるようにしました。
▲仕様まとめ
プロダクト - ディレクション
フォトカレンダー自体のデザインは業務委託のデザイナーに、イラスト部分は外部のイラストレーターに担当してもらったので、そのディレクションを主に担当しました。
祖父祖母世代も手に取るものなので、カレンダーの読みやすさなどにも気を配った他、月ごとに色が変わるので色校正を何度も行い、魅力的なプロダクトとなるように注力しました。
▲プロダクト用データ
プロモーション - デザイン
機能説明のためのwebページを作成した他、アプリ内のプロモーションバナー、 SNS広告で使用するバナーの制作も行いました。
機能説明ページの制作においては、画面構成やライティングからデザインとコーティングまで工程のほぼ全てを担当しています。
▲機能説明ページのワイヤフレームとデザイン
▲LPとLine広告用バナー