UIトレースアウトプット

OVERVIEW

UIデザインの学習としてUIトレースを行ったアウトプットです。

YEAR 2020

【Twitter】

気づき・考察

Twitterのメインカラーと文章中のリンクカラーが、同じ水色に見えて文章のほうが濃い色になっていました。

これは濃い色にすることでコントラストを維持し可読性を高めるためだと考えます。

サイズや余白について特筆する点は見つけられませんでした。



感想

初めてのUIトレースに取り組みました。アイコンのトレースはしておりません。

andriodのシステムフォントから調べたりと基礎の部分から学ぶとてもいい経験になりました。

いずれios版もトレースしてフォントや余白の違いなど比較したいです。



【Tik Tok】

私なりの仮説で考察してみました。

①コンセプト

・ユーザー・・・10代〜20代前半女性

・欲求・・・動画を投稿してユーザーと交流したい、承認欲求を満たしたい

・課題・・・YouTubeや他の動画アプリは投稿するまで手間がかかる

・ベネフィット・・・数十秒の短い動画から気軽に投稿でき、若者向けに動画や個人をアピールし、交流できる。


②UIデザイン

●ビジュアルデザイン

・いいねボタンのアニメーションが可愛い。

・再生画面のステータスバーを透過させ、動画の表示範囲を確保している。

・プロフィール画面は中央寄せでシンプルなイメージ。


●機能デザイン

・スワイプで表示される動画を簡単に変更でき、気になる動画を探しやすい。

・再生画面上に、コメントやいいねボタンを表示させていて、気軽に押しやすい配置。

コメントに対するいいねの数がYouTubeよりもはるかに多い。ユーザー同士が交流しやすいデザインになっている。

・プロフィール画面の動画一覧でサムネイルがわずかにアニメーションしていて、押したくなる。

・フォローボタンの横に他SNSアカウントへのリンクボタンがあり、積極的に誘導している。インスタやYouTubeなどのフォロワーを獲得したい新規ユーザー層がTikTokに参入しやすい機能である。

・プロフィールのユーザーIDをタッチすると自動でコピペされる。これも他SNSと共有しやすくし、参入を促進させている。


③UXデザイン

●特徴

短い動画でも気軽に投稿でき、ユーザー同士も交流しやすいデザインになっている。


■動画編集のハードルを下げる工夫

アプリ経由で撮影することで、様々な独自のエフェクトを利用でき、簡単に可愛い動画が撮影できる。動画編集というハードルを下げ、投稿しやすさを実現。

■短い動画という差別化

YouTubeは数分以上の動画がメインであるが、短い動画ならではの投稿内容が楽しめる。芸能人やインフルエンサーのちょっとした一面などが投稿され、より身近に感じることができる。片付けなどのノウハウ系も短い動画と相性がよい。


感想

前回のTwitterトレースよりも深堀りして考察してみました。

表層のトレースのみでなく、戦略や根拠に基づいたデザインを考察することで見えてくる

ものがあると感じました。