週刊Webテク通信

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

この記事を読むのに必要な時間:およそ 2 分

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

1. 8 Popular Trends in UI Design on Dribbble in 2020 - Icons8 Bloghttps://icons8.com/articles/dribbble-ui-design-trends/

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

  1. ニューモーフィズム
  2. 3Dのヒーローイラスト
  3. モノクロのカラーパレット
  4. タイポグラフィの多様性
  5. スクロールアニメーションを使った重なりの効果
  6. モバイル向けUIイラスト
  7. 双方向性のあるページ
  8. 不規則なグリッド

図1 2020年のUIデザインのトレンド

図1 2020年のUIデザインのトレンド

2, UI vs UX Design: 4 Key Differenceshttps://designwoop.com/ui-vs-ux-design-4-key-differences

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

  1. UIはデザインに関するもので,UXは問題解決に関するもの
  2. UIデザイナーは見た目に取り組み,UXデザイナーはユーザーフローに取り組む
  3. UIは製品を顧客に提供し,UXは顧客に製品を提供する
  4. UIは見栄えを良くし,UXは機能するようにする

図2 UIデザインとUXデザインの重要な違い

図2 UIデザインとUXデザインの重要な違い

3. How To Create a Responsive Timeline with Image Thumbnails - 1WDhttps://1stwebdesigner.com/how-to-create-a-responsive-timeline-with-image-thumbnails/

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

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

図3 レスポンシブなタイムライン表示のコーディング方法

図3 レスポンシブなタイムライン表示のコーディング方法

4. Teenyicons — Tiny minimal 1px iconshttps://teenyicons.com/

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

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

図4 1ピクセルの太さの線で描かれたアイコンセット

図4 1ピクセルの太さの線で描かれたアイコンセット

5. Using Flexbox and text ellipsis together · Leonardo Farihttps://leonardofaria.net/2020/07/18/using-flexbox-and-text-ellipsis-together/

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

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

図5 Flexboxとテキストの省略の併用方法

図5 Flexboxとテキストの省略の併用方法

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

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

FabDev | Bar chart race generatorhttps://fabdevgit.github.io/barchartrace/

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

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

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

図6 棒グラフがレースするアニメーションを作るサービス

図6 棒グラフがレースするアニメーションを作るサービス

今週の気になるWebネタ

テレビ会議でのプレゼン映像をかっこよくする仮想カメラアプリ「mmhmm」登場 - INTERNET Watchhttps://internet.watch.impress.co.jp/docs/news/1265131.html

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

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

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

著者プロフィール

芦之由(あしのよし)

Webデザインやサイト制作に役立つブログ記事やニュースをほぼデイリーでお届けするメルマガ「デイリーWebテク」発行人。フリーのWebデザイナー兼イラストレーター&ライター。シャープMZ-80Bからのパソコンユーザーで,Macintosh IIciからのMacユーザー。嫌いな言葉は「IEで見ると表示が崩れてるよ」。

デイリーWebテクの購読やバックナンバーについては,以下の紹介サイトをご覧ください。

デイリーWebテク - Webテク関連の話題を毎日配信 -
URLhttp://www.rgs680.com/dwt/