Gyazo動画撮影のUIデザイン
概要
スクリーンショット撮影アプリGyazoの動画撮影機能のUIデザイン。（WindowsおよびMac)
Gyazo GIF （動画撮影）およびGyazo Replay（リプレイ動画撮影）の2機能の部分。
ユーザーフローに関しては既にテストを重ね、ある程度定義できている。ここでは主にグラフィック面での作業となる。
準備
考慮すべきことを整理
異なる2つの機能間での文脈の統一。
乱雑なデクストップ環境での視認性。
録画前、録画中、アップロード中などん状態表示の明確化。
Windows、Macの各プラットフォームのガイドラインを考慮したスタイリング。
プラットフォームのガイドラインを確認
公式のデザインリソースの取得
展開
スケッチ上で様々な内容を比較
サイズ、カラーに視認性と理解度
アイコンの種類や表示タイミング
etc...
↓ Windows
↓ Mac
ホットモック
操作時の各状態表示が自然に行われるか、ホットモックを作って検証。
Windowアプリの開発スキルは持ち合わせていないので、簡単なHTMLとJSで作成し、firebase上にホスティングしてメンバーに共有。フィードバックをもらって議論する。
（実際に使ったホットモック → https://mock-d3a01.web.app/ )
↓ 最終
追記
リリース後に行ったユーザーテストで問題点を発見