「練習日記」をやめて動画ストレージにするので、デザインもそっちに寄せてきます。
タイムラインのデザインと、投稿詳細のUIを変えました。

タイムラインの投稿のフォーマットを画一化

いままで、投稿の大きさは動画サイズ(サムネイルのサイズ)によって変わっていました。

1. サムネのサイズを小さく
動画ストレージなので、網羅的にたくさんの動画がスクリーンに映ってた方がいいなとサムネを小さくしました。
というかただのサムネなのになんであんなに大きくしていたんだろう。
動画の様子さえわかればいいのに。

2. サムネを正方形にトリム
画一感を出すために正方形に(参考にした他サービスも正方形だった)。
練習日記はどちらかというとSNSなので、投稿ごとに大きさに差が出てもいいかなと思っていましたが、ストレージではそこに差があるのは不自然かなと思ったので。
おかげでストレージ感が少し出た気がします。
実装はobject-fit:cover。

3. サムネがなくてもサムネの分スペースを空ける
動画以外もサイズ画一化。
正方形のサイズ指定したクラスを空のdivにあてればOK。
line-heightは0にする必要あり。

あと右下の投稿マークが大きすぎたので、小さくしました。

こんな感じで、コンセプトにデザインも寄せていってます。
正直タイムラインのこと変更はすぐできたのですが、投稿詳細のボタン変更は、内部のロジックと関わるところだったので少し面倒でした。
そちらの話はまた今度！

本日もお読みいただきありがとうございます！
事業/アプリ開発日記、またお読みになってください！