Daily UI #010 「Social Share」
Daily UI 10回目のお題は、「Social Share」ということで前回Daily UI #009で作った音楽アプリのシェア画面のUIデザインを作成しました。
今回の制作時間は4時間でした！
１、リサーチ
前回のこの５つの音楽アプリとiPhoneのシェア画面やSNSのシェア画面だったりをいろんなジャンルのシェア画面UIをリサーチしていきました！
・Apple music
・ Spotify
・ Youtube music
・ Line music
・ amazon music
・iPhone（シェア画面）
・X
２、簡単なペルソナ設定
ペルソナは前回のをそのまま使用します！
ペルソナ
ペルソナがシェア画面に求めるもの
②シンプルで直感的な操作性
視覚的に分かりやすいアイコンやボタン配置や「シェアする」ボタンが画面の目立つ位置にある。
②複数のシェア先オプション
主にSNSやメッセージアプリなどへの共有先があると便利
③リンク共有
楽曲のURLを簡単にコピーして共有できる機能
④プレビュー表示
シェアする時に楽曲のタイトル、アーティスト名、アルバムアートが確認できるのもいい。
３、ビジュアル
リサーチやペルソナをもとに、デザインを作成していきます！
完成作品
作品特徴
１、複数のシェア先
よくシェアされるSNSやメッセージアプリへの複数の共有先があることで簡単に各アプリへの共有を可能にしました。
リンクをコピーのボタンでURLを簡単にコピーし共有できるようにしました。
２、シンプルでコンパクトなシェア画面
共有先をアイコン、アプリ名で表示することで視覚的、直感的に認識しやすくなり、主にアイコン表示になるのでコンパクトな画面設計が可能になり、片手でどのシェア先ボタンも押せるようになりユーザビリティの向上にも繋がったのではないかなと思っています。
３、プレビュー表示
プレビューを表示することで、視覚的に自分がどの音楽を共有したいのかがわかり、共有したい音楽の間違えなどを、無くせると思いました。
音楽再生画面から共有画面へのプロトタイプも作成したのでご覧ください！
Daily UI 010 「Social Share」プロトタイプこちら↓
４、まとめ
学んだこと
・親指ゾーンマップ（片手でタップできる領域）という概念の存在
課題
・ユーザーのやりたいことをが視覚的、直感的に行えるUIを作る意識を常にもって制作する。
今回学んだ「親指ゾーンマップ」という概念は、片手でのスマホの使用を考えたときに親指がスクリーンのどのポジションを、どのようにタッチするかを理解するのに役立つことらしい！
確かに自分も片手でスマホの操作をする事のほうが多いし、親指でタップできる範囲にコンテンツやボタンがあるのってすごく押しやすいだろうしこういう考え方もあったのかとすごく勉強になったな( ´∀｀)と思いました！
最後までご覧いただきありがとうございました！