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

1. State of CSS 2022https://web.dev/state-of-css-2022/

2022年にブラウザに実装される予定の新しいCSS機能についてまとめています。開発者会議Google I/O 2022で行われた講演を記事にしたものです。

カスケードレイヤー，サブグリッド，コンテナクエリ，アクセントカラーなど，最近話題になることも多いCSSの新技術をまとめてチェックできます。

2. Design Trend: Animated Hero Elements | Design Shackhttps://designshack.net/articles/trends/animated-hero-elements/

アニメーションするヒーロー要素（メインの要素）のデザインの傾向と実例，うまく機能させる方法を解説しています。

成功させるためのヒントがまとめてありました。

• ユーザーを驚かせたり喜ばせる，ちょっとしたアニメーションを作る
• 見逃されないようにアニメーションを直接的で大胆なものにする
• ユーザーの期待を実現するためにアニメーションを使用する。ユーザーに喜ばれる，予想外のアニメーションをデザインする
• Webサイトの全ての部分にアニメーションの要素が含まれるようにデザインする
• デザインまたはストーリーテリングの一部分に明確な注意を引くために，1つの明確なアニメーション要素をデザインする

3. 3 Essential Design Trends, May 2022 | Webdesigner Depot Webdesigner Depot » Blog Archivehttps://www.webdesignerdepot.com/2022/05/3-essential-design-trends-may-2022/

2022年5月のデザイントレンドを3つ紹介した記事です。

1. 軽くて気まぐれなデザイン
2. アニメーション付きの長いスクロール
3. ピンク

ピンクは女性らしさを連想させることが多く，甘さ，健康，ロマンチシズム，無垢を意味するとありました。色の意味は国によって違うと言いますが，日本とさほど変わらないイメージですね。

4. 4 Cool Hover Effects That Use CSS Text Shadow | CSS-Tricks - CSS-Trickshttps://css-tricks.com/cool-hover-effects-that-use-css-text-shadow/

CSSのtext-shadowプロパティを使ったホバーエフェクトの作り方です。違う色のテキストがスライドして上にかぶさってくるなどの効果を実装する方法を解説しています。

2つのテキストが表示されますが，擬似要素は使わずtext-shadowによってもう一つのテキストを生成しています。

5. Drop-in Minimal CSShttps://dohliam.github.io/dropin-minimal-css/

ドロップダウンからCSSフレームワークを切り替えて，見出しやリスト，フォーム要素などがどう表示されるかを確認できるページです。シンプルで最低限のスタイリングをするためのCSSフレームワークを多数用意しています。

また，ブックマークレットを使うことで，ほかのサイトでもこのCSS切り替え機能を利用できるのも便利です。

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

• Google，「⁠Pixel 7」「⁠Pixel Tablet」「⁠ARメガネ」を予告 - ITmedia Mobile
  開発者会議Google I/Oでオリジナルタブレット復活などいろんな発表がありました
• Zoom，無料アカウントのミーティング上限を40分に--5月2日から変更 - CNET Japan
  1対1のミーティングにも40分制限が適用されるようになりました
• Cloudflare，サーバーレスプラットフォーム向けの統合データベース発表 | TECH+
  Cloudflareがサーバーレスデータベースを発表しました

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

Remove unwanted objects or people from photos automaticallyhttps://www.photoroom.com/tools/remove-object-from-photo/
Clipdrop - background removalhttps://clipdrop.co/remove-background

今回は，写真の中の余計な物や人を消すPhotoRoomと，物や人物だけ残して背景を消すRemove Background by Clipdropの2つのサービスを紹介します。

この手の処理ができるスマホアプリも最近充実してきていますが，ブラウザだけでお手軽にできる単機能のサービスも知っておくと役立つときが来ると思います。どちらも無料で使え，シンプルで処理も早いです。

PhotoRoomは要素を消すときのブラシサイズを変更できて，処理前と後を切り替えて比較できます。Remove Backgroundはカスタマイズ性は全くありませんでした。PhotoRoomはスマホアプリがありプロ版は有料です。Remove Backgroundは開発元がClipdropという有料のサービスを提供しています。