2020年7月第5週号 1位は、2020年のUIデザインのトレンド、気になるネタは、テレビ会議でのプレゼン映像をかっこよくする仮想カメラアプリ「mmhmm」登場

ネットで見かけたWebテク（Webテクニック・Webテクノロジー）記事から、Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は、2020年7月20日～7月26日の間に見つけた記事のベスト5です。

2020年のUIデザインのトレンドを8つまとめた記事です。Dribbbleに投稿された豊富な作品例を見ながらビジュアルで理解できます。

UIデザインとUXデザインの重要な違いを4つ紹介しています。

レスポンシブなタイムライン表示のコーディング方法を解説しています。年表などに使われる、縦方向を時系列として、特定の年（年月、年月日）に写真やテキストで出来事などの説明が入るものです。

デスクトップ／タブレット／モバイルの3段階で表示が変わり、大画面では左右に表示されるフキダシが、小さな画面では全て右側に表示されるようになります。写真とフキダシの配置も、モバイルサイズでは横並びではなく縦並びになるなど、凝った作りになっています。

1ピクセルの太さの線で描かれたアイコンセットです。SVGとしてコピーでき、Figma用ファイルも用意しています。

このページ上でサイズの変更が可能で、アウトライン版と塗りつぶし版とを選べるようになっていました。

FlexboxとCSSの「text-overflow: ellipsis」によるテキストの省略を同時に使う場合のテクニックを解説しています。

ファイル名を想定した例で、テキストが横幅いっぱいまで表示されるように省略されるけれど、拡張子はちゃんと表示されるコーディング方法が学べます。

そのほか、最近の記事の中から、気になるニュース記事を紹介します。

先週の気になるWebサービス

「Bar chart race」を作るサービスを紹介します。Bar chart raceとは、棒グラフのレース、つまり棒グラフが時系列で変化していく様子をレースのようにアニメーションで見せることです。

CSVファイルを読み込ませるだけで、簡単にアニメーションを再生させられます。設定できるのは、アニメーションの長さ、棒グラフを表示させる個数、タイトルです。

アニメーションとして保存する機能はありませんが、動画として画面キャプチャーすれば、サイトに貼ったりSNSに投稿したりできるでしょう。この手の動画がTwitterでバズってるのをたまに見かけますので、作る方法のひとつとして覚えておくと役立つときが来るかもしれません。

話題の仮想カメラアプリ「mmhmm」のプライベートベータ版の招待が始まり、試した人がSNSやブログなどでレポートしています。わたしも先日入手して使ってみました。

ざっくり説明するとZoomのバーチャル背景部分に、さらにプレゼン資料などの画像を簡単に切り替えながら表示したり、画面共有を表示したりできるアプリケーションです。mmhmmはほかのアプリからはカメラとして認識されるので、いろいろなビデオ会議アプリで利用できます。

自分の映像のサイズや位置を変えられるのもポイントです。背景切り抜きではなく顔の部分だけ丸くトリミングした表示も選べます。高機能ですが使いやすく、大ヒットの予感がするアプリです。