2022年2月第4週号 1位は、フォームの種類8つとそれをデザインするためのヒント、気になるネタは、ソニー、穴のあいた完全ワイヤレスイヤホン「LinkBuds」--聴きながら聞こえる体験へ

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

フォームの種類8つとそれをデザインするためのヒントを紹介しています。

CSSグリッドでレスポンシブなタイルレイアウトを作るテクニックを紹介しています。最大のカラム数と最小のサイズを指定することで、領域の幅に合わせて自動でレイアウトされます。

横に並ぶセルの最大数と、セルの幅がどこまで狭くなるかの最小値、そして隙間の大きさを指定するだけなので、いろいろ応用できて便利だと思います。

いろいろなパターンのページのHTML＆CSSでのコーディング例をまとめた記事です。

以下の項目に分けてCodePenで共有されているコードを紹介しています。

UIデザインのいくつかの例と、それらが優れている理由を解説した記事です。優れたユーザー体験を作るためのUIデザインの原則をまとめたチェックリストも掲載しています。

4つ目に紹介されているBennet Teaのページが印象に残りました。スクロールとともに商品が切り替わり、茶葉がアニメーションして表示されるのはインパクトがあります。スクロールして商品が変わると、値段とURLの末尾が変わるところもよくできています。

デザイン素材やツールをカテゴリ別にまとめたサイトです。イラスト素材、写真素材、アイコンなどの素材や、デザインツール、UXツール、参考になるブログやギャラリーサイトなどのカテゴリーがあります。

週に1回5つの新しいデザインリソースを紹介するニュースレターも発行しています。

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

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

カラーファミリーを作るサービスです。Tailwind CSSカラーシェードジェネレーターという名前ですがTailwind CSSを使っていない場合にも役立つはずです。

キーとなる色を選ぶと、10段階の色が生成されます。色相、彩度、明度を細かくコントロールすることも可能です。複数のカラーファミリーを並べて比較しながら作れるようになっています。

完成したカラーファミリーは、Tailwind CSS用のコードを生成して新しいカラーとして追加できます。また、SCSS、CSS、SVGとして書き出すことも可能です。

ソニーから穴の開いた完全ワイヤレスイヤホンLinkBudsが発表されました。「⁠穴のあいた」イヤホンという言葉だけではイメージできなかったのですが、耳を塞がず外の音が聞こえるように穴が空いていました。

AirPods Proは外部音取り込みモードで外の音を聞けるようになっていますが、まさか耳の穴を塞がないというアプローチとは驚きました。カナル型は圧迫感があって嫌だという人にも良さそうです。

音漏れがどの程度なのか気になるところですが、それなりに外部音がある環境で使うことが前提なので、そこまで気にならないのかもしれません。ノイズキャンセルはないので、騒がしい場所でポッドキャストを聞くのには向かないのかなと思いました。