Gyazo動画撮影のUIデザイン

概要

スクリーンショット撮影アプリGyazoの動画撮影機能のUIデザイン。（WindowsおよびMac)

Gyazo GIF （動画撮影）およびGyazo Replay（リプレイ動画撮影）の2機能の部分。

ユーザーフローに関しては既にテストを重ね、ある程度定義できている。ここでは主にグラフィック面での作業となる。

準備

考慮すべきことを整理

異なる2つの機能間での文脈の統一。

乱雑なデクストップ環境での視認性。

録画前、録画中、アップロード中などん状態表示の明確化。

Windows、Macの各プラットフォームのガイドラインを考慮したスタイリング。

プラットフォームのガイドラインを確認

公式のデザインリソースの取得

展開

スケッチ上で様々な内容を比較

サイズ、カラーに視認性と理解度

アイコンの種類や表示タイミング

etc...

↓ Windows

https://i.gyazo.com/cf979b3380370b104b48f8e5db2fcd05.png

↓ Mac

https://i.gyazo.com/1c42d288761d85f5bdf5dfd03253ecc3.png

ホットモック

操作時の各状態表示が自然に行われるか、ホットモックを作って検証。

Windowアプリの開発スキルは持ち合わせていないので、簡単なHTMLとJSで作成し、firebase上にホスティングしてメンバーに共有。フィードバックをもらって議論する。

https://gyazo.com/28d1c40005a6fb5334316010627b8064

↓ 最終

https://i.gyazo.com/5c4474eab72c5c3607c29ec43cf934ce.png

https://i.gyazo.com/ec4a5d85c89c30ed240b9478e9c9af6c.png

追記

リリース後に行ったユーザーテストで問題点を発見