【概要】 架空の動画アプリのUIデザインをしました。 要件定義や、ワイヤーフレームなども下記のFigma fileに掲載しておりますので、見ていただけますと幸いです。 【担当範囲】 要件定義、ワイヤーフレーム作成、デザイン、プロトタイプの作成 【 使用ツール】 Figma、Photoshop、Canva 【Figma file】 https://www.figma.com/file/x95YyKGO271zc12LqHr2qD/TOKYO-MOVIE_app?type=design&node-id=0%3A1&mode=design&t=cDwPvQT3T3zgUlUX-1 【Figma preview】 https://www.figma.com/proto/x95YyKGO271zc12LqHr2qD/TOKYO-MOVIE_app?page-id=0%3A1&type=design&node-id=338-3127&viewport=74%2C72%2C0.06&scaling=min-zoom&starting-point-node-id=338%3A3127 【目的】 アプリで動画を観てほしい。 ＃ターゲット 【ペルソナ】 ・26代、男性、会社員。 ・自分の趣味・好みに合った映画に出会い、鑑賞したい。 ・コロナで外出することが少なくなったため、土日に映画を見るようになった。今まで映画を観ることがなかったため、自分に合う作品がわからない。 【5W1H】 What：アプリで動画を観てほしい。 Who：26歳、男性。これから色んなジャンルの映画を観たいと思っている人。 Why：映画鑑賞を趣味にしたいが、自分がどんな映画を観たいのかがわからないため。 When：映画を観たいと思った時。 Where：自宅、通勤中の電車の中、寝る前など。 How：Google検索、SNSなど。 イメージ 男性向け、シンプル。 ＃制作ポイント 【配色】 黒、白、赤で統一。男性向けをイメージ。 【デザインの意図】 “余暇を楽しむ”　という目的があるため、映画を観るのは、家で暇な時や寝る前などのリラックスした時間 → 部屋を暗くしていたり、長時間アプリを使用することが予想される → 目の疲れを軽減させて、快適にアプリを使用してもらいたい　という考えに至り、ダークモードで、使用色は最低限にするようにデザインをしました。 【ホーム】 ・メインビジュアルに今話題の作品を3つ、スライダーで表示。 ・上部に人気作品と特集を表示することで、映画に詳しくない人にも今話題の作品を知ってもらう。 【映画一覧】 ・ユーザーにとって知りたい情報が一目でわかるように、カテゴリや上映時間などをタグで表示。 ・少しでも気になる作品があれば、すぐにマイリストに登録できるようにアイコンを設置。 【映画詳細】 ・類似作品を掲載し、他の作品にも興味を持ってもらう。 【マイリスト、ダウンロード】 ・年代、作品名のみ表示して情報を少なめに。 【キーワード検索（デフォルト）】 ・サーチバーの下部にカテゴリ一覧やおすすめを表示して、作品を見つけやすくする。 【キーワード検索（未入力）】 ・過去に検索したキーワードは履歴として表示し、ユーザーの手間を省く。 【キーワード検索（入力中）】 ・単語を入力すると、予測変換で作品名が表示される。 【絞り込み検索（デフォルト）】 ・絞り込む条件を少なくし、なるべくシンプルに検索できるように。 【検索結果】 ・ユーザーにとって知りたい情報が一目でわかるように、カテゴリや上映時間などをタグで表示。 ・少しでも気になる作品があれば、すぐにマイリストに登録できるようにアイコンを設置。