ネットで見かけたWebテク（Webテクニック・Webテクノロジー）記事から、Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は、2022年5月9日～5月15日の間に見つけた記事のベスト5です。
2022年にブラウザに実装される予定の新しいCSS機能についてまとめています。開発者会議Google I/O 2022で行われた講演を記事にしたものです。
カスケードレイヤー、サブグリッド、コンテナクエリ、アクセントカラーなど、最近話題になることも多いCSSの新技術をまとめてチェックできます。
図1 2022年に実装されるCSSの新技術いろいろ
アニメーションするヒーロー要素（メインの要素）のデザインの傾向と実例、うまく機能させる方法を解説しています。
成功させるためのヒントがまとめてありました。
- ユーザーを驚かせたり喜ばせる、ちょっとしたアニメーションを作る
- 見逃されないようにアニメーションを直接的で大胆なものにする
- ユーザーの期待を実現するためにアニメーションを使用する。ユーザーに喜ばれる、予想外のアニメーションをデザインする
- Webサイトの全ての部分にアニメーションの要素が含まれるようにデザインする
- デザインまたはストーリーテリングの一部分に明確な注意を引くために、1つの明確なアニメーション要素をデザインする
図2 アニメーションするヒーロー要素を成功させるヒント
2022年5月のデザイントレンドを3つ紹介した記事です。
- 軽くて気まぐれなデザイン
- アニメーション付きの長いスクロール
- ピンク
ピンクは女性らしさを連想させることが多く、甘さ、健康、ロマンチシズム、無垢を意味するとありました。色の意味は国によって違うと言いますが、日本とさほど変わらないイメージですね。
図3 2022年5月のデザイントレンド3つ
CSSのtext-shadowプロパティを使ったホバーエフェクトの作り方です。違う色のテキストがスライドして上にかぶさってくるなどの効果を実装する方法を解説しています。
2つのテキストが表示されますが、擬似要素は使わずtext-shadowによってもう一つのテキストを生成しています。
図4 CSS text-shadowを使ったホバーエフェクト
ドロップダウンからCSSフレームワークを切り替えて、見出しやリスト、フォーム要素などがどう表示されるかを確認できるページです。シンプルで最低限のスタイリングをするためのCSSフレームワークを多数用意しています。
また、ブックマークレットを使うことで、ほかのサイトでもこのCSS切り替え機能を利用できるのも便利です。
図5 ミニマルなCSSを試せるページ＆ブックマークレット
そのほか、最近の記事の中から、気になるニュース記事を紹介します。
先週の気になるツール／サービス
今回は、写真の中の余計な物や人を消すPhotoRoomと、物や人物だけ残して背景を消すRemove Background by Clipdropの2つのサービスを紹介します。
この手の処理ができるスマホアプリも最近充実してきていますが、ブラウザだけでお手軽にできる単機能のサービスも知っておくと役立つときが来ると思います。どちらも無料で使え、シンプルで処理も早いです。
PhotoRoomは要素を消すときのブラシサイズを変更できて、処理前と後を切り替えて比較できます。Remove Backgroundはカスタマイズ性は全くありませんでした。PhotoRoomはスマホアプリがありプロ版は有料です。Remove Backgroundは開発元がClipdropという有料のサービスを提供しています。
図6 写真の中の余計な物や人を消すPhotoRoom
図7 物や人物だけ残して背景を消すRemove Background by Clipdrop
