ほぼデイリーWebテク Vol.037 2022/08/24

CSSグリッドとClip-pathとマスクのテクニックを使ったレイアウト／Figmaで使えるデザイン素材集／サインアップ時のメール承認での離脱を減らす方法

CSS Grid and Custom Shapes, Part 2 | CSS-Tricks - CSS-Tricks

https://css-tricks.com/css-grid-and-custom-shapes-part-2/

CSSグリッドとClip-pathとマスクのテクニックを使った、ちょっと変わったレイアウトの例をいくつか紹介しています。後半で紹介している横並びのレイアウトは使いどころがありそうです。ロールオーバー時にその画像だけ横幅が大きくなります。

Design system for Figma - Module. UI Kit

https://modulesystem.design/

Figmaで使えるデザイン素材集です。サイトのプロトタイプが簡単に作れるようにタイポグラフィ、色、コンポーネントが用意されていて、カスタマイズすることでデザインシステムとして利用できるようになっています。有料ですがお試し用のコンポーネント集もあります。

How to increase signup confirmation rates with Sniper Links

https://growth.design/case-studies/sniper-link

サインアップ時のメール承認での離脱を減らす方法をスライドで解説しています。

ユーザー登録でメール承認での離脱を防ぐためにGmailへのリンクを入れるのですが、そのリンクには、「from:(@ドメイン名)」を入れて送信したメールで絞り込むようにして、「in:anywhere」で迷惑メールに入ったものも検索するようにします。この発想は素晴らしいですね。