週刊Webテク通信

2022年5月第3週号 1位は,2022年に実装されるCSSの新技術いろいろ,気になるネタは,Apple,iPodの歴史に幕 シリーズ最後のモデル「iPod touch(第7世代)」在庫限りで販売終了

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

ネットで見かけた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の新技術をまとめてチェックできます。

図1 2022年に実装されるCSSの新技術いろいろ

図1 2022年に実装されるCSSの新技術いろいろ

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

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

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

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

図2 アニメーションするヒーロー要素を成功させるヒント

図2 アニメーションするヒーロー要素を成功させるヒント

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. ピンク

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

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

図3 2022年5月のデザイントレンド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によってもう一つのテキストを生成しています。

図4 CSS text-shadowを使ったホバーエフェクト

図4 CSS text-shadowを使ったホバーエフェクト

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

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

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

図5 ミニマルなCSSを試せるページ&ブックマークレット

図5 ミニマルなCSSを試せるページ&ブックマークレット

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

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

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という有料のサービスを提供しています。

図6 写真の中の余計な物や人を消すPhotoRoom

図6 写真の中の余計な物や人を消すPhotoRoom

図7 物や人物だけ残して背景を消すRemove Background by Clipdrop

図7 物や人物だけ残して背景を消すRemove Background by Clipdrop

今週の気になるWebネタ

Apple,iPodの歴史に幕 シリーズ最後のモデル「iPod touch(第7世代)」在庫限りで販売終了 - ITmedia NEWShttps://www.itmedia.co.jp/news/articles/2205/11/news063.html

現行のiPod touchを在庫限りで販売終了するとAppleが発表し,iPodシリーズが約20年の歴史を終えることになりました。初代iPodのストレージがHDDというのも時代を感じます。

iPodといえばクイックホイールでの指をクルクル回す操作が革新的でした。たまたま(だとわたしは思う)同じ操作方法を先に発表していた日本の個人発明家が,特許侵害訴訟でアップルから3.3億円を勝ち取ったことも話題になりました。

今でもたまに電車でiPodを使っている人を見かけますが,スマホ&音楽サブスクがこれだけ普及した状況ではニーズがなくなっているのもうなずけます。レコードやカセットテープのように,何年後かにリバイバルブームなんてことはないでしょうね。

著者プロフィール

アシカガコウジ

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

http://bit.ly/ashikaganote