週刊Webテク通信

2022年3月第5週号 1位は,2022年のWebデザインのトレンドを7つ,気になるネタは,Zoomの新3Dアバター機能で,ちょっと不気味な動物としてミーティングに参加できるように

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

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

1. 7 Web Design Trends for 2022 - The Media Temple Bloghttps://mediatemple.net/blog/design-creative/7-web-design-trends-2022/

2022年のWebデザインのトレンドを7つ紹介しています。

  1. Very Peri(Pantoneが選ぶ今年の色)のカラースキーム
  2. 感情を組み込む
  3. サイトに音を
  4. 写真ギャラリーの壁
  5. グラスモーフィズム
  6. モノクロ
  7. 体験型のサイト

図1 Webデザインのトレンドを7つ

図1 Webデザインのトレンドを7つ

2. Good Design Is All About Good Timing — Smashing Magazinehttps://www.smashingmagazine.com/2022/03/design-is-all-about-good-timing/

「良いデザインは良いタイミングが全て」というタイトルで,ユーザー体験における正しいタイミングについて解説しています。

  • 統合されたメッセージ
  • 成功したとき
  • 非モーダルダイアログ
  • 確認ページ
  • 確認メールのリンク
  • 値段のあと

図2 ユーザー体験における正しいタイミング

図2 ユーザー体験における正しいタイミング

3. 3 Essential Design Trends, March 2022 | Webdesigner Depot Webdesigner Depot » Blog Archivehttps://www.webdesignerdepot.com/2022/03/3-essential-design-trends-march-2022/

2022年3月のWebデザインのトレンドです。

  1. 複数の小さな画像
  2. 細部まで見られる大きな画像
  3. 大きな顔が帰ってきた

図3 2022年3月のWebデザインのトレンド

図3 2022年3月のWebデザインのトレンド

4. How to Use CSS Math Functions - Stack Diaryhttps://stackdiary.com/css-math-functions/

CSSの数字関数をレスポンシブデザインに活用する方法を解説しています。calc(),clamp(),min() ,max()を使ったテクニックのサンプルコードが参考になります。

図4 CSSの数字関数をレスポンシブデザインに活用する方法

図4 CSSの数字関数をレスポンシブデザインに活用する方法

5. Master Styles - A Virtual CSS language with enhanced syntaxhttps://styles.master.co/

Master StylesというバーチャルCSS言語というコンセプトのものが登場していました。CSSは実行時にオンデマンドで生成されるらしいです。

Tailwind CSSのようにHTML上にclassでCSSを書いていきます。CSSの構文そのままでも短縮形でも記述できて,Tailwind CSSより柔軟に指定できるようで,もちろんレスポンシブや擬似クラスなどにも対応しています。

図5 バーチャルCSS言語Master Styles

図5 バーチャルCSS言語Master Styles

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

先週の気になるツール/サービス

Tweetlet - Create appealing images in a snaphttps://tweetlet.net/

Twitterのツイートから背景付きの画像を作るサービスです。シンプルで操作性も良く,カスタマイズ性も丁度いい感じだと思いました。

ツイートのリンクを入れると画像が生成され,画像サイズは自由に変更可能です。文字のサイズは2段階から切り替えられ,ダークテーマも選べます。作った画像はクリップボードにコピーするかPNGファイルでダウンロードできます。

ツイート以外にもアップロードした画像や入力したテキストに背景をつけることもできます。テキストはHTMLタグが一部反映されました。

図6 Twitterのツイートから背景付きの画像を作るサービス

図6 Twitterのツイートから背景付きの画像を作るサービス

今週の気になるWebネタ

Zoomの新3Dアバター機能で,ちょっと不気味な動物としてミーティングに参加できるように | TechCrunch Japanhttps://jp.techcrunch.com/2022/03/23/2022-03-22-zoom-animal-avatars/

Zoomにアバター機能が搭載されました。ウサギ,犬,キツネ,パンダ,馬などから選んで,3Dの動物アバターでビデオ会議に参加できます。

実際の映像の顔の部分が置き換わるフィルター機能ではなく,3Dで描かれたアバターだけが表示されるVTuber的な機能となっています。背景はバーチャル背景機能で変更できます。

Zoomにビデオフィルター機能があって,メガネや帽子などを自分の顔に合成できることも意外と知られていないかもしれません。このフィルター機能で顔の部分に任意の画像を設定できるといいなと思っていたのですが,アバター機能にもニーズはありそうです。

著者プロフィール

アシカガコウジ

フリーのWebデザイナー&ライター。ポッドキャスト「アシカガCAST」でデジタル活用のヒントを発信中。シャープMZ-80Bからのパソコンユーザーで,Macintosh IIciからのMacユーザーでApple好き。Webテク情報やツール(ソフトウェア)の案内,デジタル活用情報をまとめた「アシカガノオト」をNotionで公開しています。

http://bit.ly/ashikaganote