【UIトレース日記 #1】「stand.fm」のトップ画面_ファーストビュー編
こんにちは、おゆうです。
「毎日UIトレースやるぞー！」と思い立ったものの、一つ目は思いの外時間がかかってしまい早速毎日更新ならず…（#負けるなおゆう）
あくまでUIトレースの目的は
・ツールの使い方に慣れる
・基本的なUIの構造を知る
なので、あまり時間はかけずに慣れてきたらどんどん新しいアウトプットを出していきたいところ、、、
ということで、最初のトレースはここ最近一番使っている音声配信プラットフォーム「stand.fm」。最初はメジャーアプリ（Twitter,インスタ,食べログとか）からかな〜とも思いつつ、シンプルで分かりやすいかつ思い入れのあるものから始めた方がノリノリで出来そうだ！と考えチョイス。
今回はアプリを開いた全ユーザーが必ず通る顔の部分、トップ画面のファーストビューをトレースしました。
【使用ツール】
・Figma
・MocUPhone（iPhoneの画像埋め込み用）
【作成したもの】
左がオリジナルページのスクショ、右側が作成物でございます。
アイコンは同じものが探せなかったので、iOSのコンポーネントから類似のものを拝借。自分で作ってみようかとも思ったんですが、こだわりすぎていつまでも終わらなそうなので今回はこちらで手打ち。笑
ちなみに画像はすべて自分のチャンネルに差し替えているので気になった方は是非stand.fmの方もチェックを！（＃しっかり宣伝もしていく）
【ポイント】
📍良かった点
✔︎ 定規ツールを使ってオブジェクトの高さやバランスを調整できた
✔︎ マスクやオートレイアウト等学んだ機能を活かして作成できた
📍イマイチな点
✔︎ 影のかかり方が再現できていない
✔︎ 「すべて見る」の隣のアイコンの色が違う
✔︎ デザインの難易度にしては時間がかかりすぎた
✔︎ フォント/アイコンが違うため若干印象が違う
【デザインの考察】
📍カラー
シンプルな色合いをベースにしており、全体的に優しい雰囲気を大事にしている印象。stand.fmというサービス自体が「優しいインターネット」を大きなコンセプトにしており、人と人の濃い繋がりを生み出すために不必要な情報をできるだけ排除しているのではないかと思う。唯一の強調色のピンクレッド（＃こんな色の名前はあるのか）は昔ながらのRECボタンを想起させる意図がありそう。
📍配置
特徴的なのは画面上半分に大きく設置された画像付きのカード。右側に少しはみ出しを設けることで「右がめくれそう！何かあるぞ！」という直感的な操作を促している。まだ始まって日が浅いサービスということもあり、「standfmとは」「機能紹介」等、始めたてのユーザーへの道標としての役割を担っている。
ファーストビューの下半分には他の音声配信アプリにありそうでない、standfmの特徴とも言える「ライブ放送」のラインナップが並ぶ仕様に。ライブ配信メインで利用しているユーザーや聴き専ユーザーも増え、コンテンツの入れ替えが頻繁に行われるためファーストビューに置いておくことでアプリでの滞在率がかなり上がっているのではないかと思う。自分も作成中についついライブ巡りをしてしまって作業が進まないということも。。笑
また、上半分が機能紹介カードで埋まっており、ライブ配信部分も少しフッターの裏側にはみ出しているため直感的にスクロールができることを表現している。
【おゆうの課題】
✔︎ フォントへの理解が乏しい。一見似たようなフォントは見分けがつかない
👉フォントの入門的な本を読んでベースの考え方を身につける
✔︎ UIに対する「自分ならこうする」案がまだ出てこない
👉毎日Webページやサービスへの感想/改善点をTwitterで発信
【総評的なやつ】
ということで、まずはstand.fmのトップ画面ファーストビューを作成してみました！まだまだデザインを観る目が足りてなく、その分このnoteをまとめるのにも時間がかかってしまいました、、ツールの使い方自体には慣れてきたので作成スピードは上げつつ、観る→考える→アウトプットに時間を使えるようにします！
是非バリバリ現場でデザインをされている方や今まさに勉強されている方がご覧頂いていたら、トレースする時のコツや意識するポイント、デザインの見方のあたりに関してばしばしアドバイス頂きたいです！
次回はトップ画面_コンテンツページ編！