#001: Sign Up
旅行アプリのサインアップ
- 想定ユーザーは20-30代男女、休みの日には旅行に行く、海外が好き
- サインアップを煩わしく感じさせないよう、初回の入力項目は最小限に
- 空を連想させるような色づかい
- 雲を思わせる有機的な形とイラストを入れることで親しみやすさと軽やかさを表現
- 使用ツール：XD
- 制作時間：3h
#002: Credit Card Checkout
映画館チケットのチェックアウト
- 30-50代がプライマリーターゲットのシックでラグジュアリーな映画館を想定
- 映画館の雰囲気をそのままに表現するためダークモード
- カメラを使用してカード情報の入力をショートカットできることを想定し、カードナンバー部分にカメラアイコンを設置
- 使用ツール：XD
- 制作時間：2h
#003: Landing Page
転職エージェントのランディングページ
- 20-30代をターゲットにした転職エージェントのランディングページ
- キーワード：前向き、爽やか、信頼感
- 爽やかさと信頼感を与えるため白とグリーンの組み合わせ
- グリーンの対象色であるオレンジをポイント使いすることで活発な印象をプラス
- メインビジュアルを大きく使えるように左にメニューを設置、据え置き想定
- メニューに『転職支援サービス申し込み』ボタンと『初めてのご利用はこちら』ボタンを設置し、ページのどこからでも選択可能に
- メインビジュアル下部に矢印とグリーンの円を配置することでスクロールを促す
- 使用ツール：XD
- 制作時間：2.5h
#004: Calculator
計算機（ダークモード／ライトモード）
- iPhoneの純正アプリを参考に作成
- とにかく数字や記号が見やすいことを意識
- 純正アプリでは入力した数式の参照／修正ができず不便に感じていたため、それらを可能にする想定で作成
- 数字や記号がくっきりと見えながらもコントラストが強すぎない色づかい
- 使用ツール：XD
- 制作時間：1.5h
#005: App icon
- #004: Calculatorで作成した計算機のアイコンとして作成
- 記号を利用し『計算』を想起させるように
- 色は計算画面と揃えて一貫性を持たせ、アイコンをタップ後の画面イメージを暗示
- 使用ツール：Photoshop
- 制作時間：1h
#006: User Profile
- 30代までの男女をコアターゲットとする食のSNSを想定
- ポジティブな印象を与えつつすっきりさをキープするため、キーカラーをオレンジとし、白やグレーをベーシックカラーとして使用
- メニューは画面最下部に配置し、選びやすく
- プロフィールのファーストビューではユーザー任意のアイコンとカバー写真が表示され、ユーザーが個人を表現できる
- プロフィールによく行くエリアを表示し、フォローのヒントに
- 『行ったお店』、『口コミ』、『気になる』が見れるため、色々な角度からユーザーの投稿を見れる
- 使用ツール：XD
- 制作時間：4h
#007: Settings
- #006: User Profileのセッティング画面として作成
- アイコン、カバー写真、名前、自己紹介の順番で表示し、実際の表示順と合わせる
- 罫線で区切りつつも、邪魔にならない程度とする
- メニューはこの画面では不要なため表示しない
- 使用ツール：XD
- 制作時間：2h
#008: 404 page
- PC表示
- 宇宙に関連するサービスを提供する会社のウェブサイトを想定
- メッセージだけでなくビジュアルも表示
- メッセージ下にボタンを配置し、トップ画面への導線を設ける
- また、グローバルメニューも表示することで他画面への遷移も可能とする
- 使用ツール：Photoshop
- 制作時間：2h
#009: Music Player
- シンプルなミュージックプレイヤー
- 今までに作成したのことのない、シリコンのような質感の画面デザインに挑戦
- アーティストのジャケットが目立つように要素は極力少なく
- 再生、最初へ、最後へ、進捗バーなど、操作頻度が高い要素などにキーカラーを使用
- 使用ツール：Photoshop
- 制作時間：3.5h
#010: Social Share
- 画面左下の要素
- 普段自分が使用しているTokyo Art Beatの画面に表示する想定で作成
- 展示記事のどこからでもSNSへシェアできるようフローティングで表示
- 常時SNSアイコンを表示は逆に煩わしいため、必要な時にタップして開閉する
- 使用ツール：XD
- 制作時間：1.5h