2ecb98e28919b2c1

フォトカレンダー機能

OVERVIEW

家族と写真を共有できるアプリ上でユーザーがフォトカレンダーを注文し、離れて暮らす家族に送れる機能を作るプロジェクト。 アプリUIの他、紙のカレンダー(プロダクト)、プロモーション用のwebページやバナーなど多岐に渡るクリエイティブが必要でした。

YEAR 2018

#情報設計 #UI #web #ディレクション #iOS #Android #プロダクト


担当工程

  • 仕様/要件定義
  • 情報設計
  • ワイヤーフレーム作成
  • UIデザイン(iOS/Android)
  • インタラクションデザイン
  • webデザイン
  • webコーディング
  • アイコン作成
  • 実装確認・調整

役割

UIデザイナー、webデザイナー

期間

仕様検討~リリースまで6か月程度

詳細

アプリUI

サービスのコンセプトを固めるところから仕様検討、デザイン作成、実装調整のやり取りまで一通り担当。

【仕様検討】

ワイヤーフレームを作り、prottで遷移を確認しながら機能や画面の仕様をPOおよびエンジニアと検討していきました。

最初はわかりやすさを重視し1タスク1画面のフローとしていましたが、その検討の中で「離脱を少なくしたい」という要件が固まってきたため、なるべくステップの少ないフローに決定。

▲遷移図

デザインを整えながらエンジニアの実装で出てきたイシューに対し、細かい仕様を決めていきました。


通常、UIデザイン指示はzeplinのみで行うことが多いのですが、今回は細かい指定もあったのでesaにまとめアップデートなどで必要になった時にメンバー誰でもすぐ見返せるようにしました。

▲仕様まとめ


プロダクト

フォトカレンダー自体のデザインは業務委託のデザイナーに、イラスト部分は外部のイラストレーターに担当してもらったので、そのディレクションを主に担当しました。

祖父祖母世代も手に取るものなので、カレンダーの読みやすさなどにも気を配った他、月ごとに色が変わるので色校正を何度も行い、魅力的なプロダクトとなるように注力しました。

▲プロダクト用データ


プロモーション

機能説明のためのwebページを作成した他、アプリ内のプロモーションバナー、 SNS広告で使用するバナーの制作も行いました。

機能説明ページの制作においては、画面構成やライティングからデザインとコーティングまで工程のほぼ全てを担当しています。

▲機能説明ページのワイヤフレームとデザイン

▲LPとLine広告用バナー