2020年7月第1週号 1位は、カード型UIをデザインするためのヒント、気になるネタは、モバイル版「Googleフォト」大幅刷新検索しやすく、マップ連携表示が可能に

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

カード型UIコンポーネントをデザインするためのヒントを紹介しています。

スクロール関連のテクノロジーについてまとめた記事です。

以下は、CSSだけで実装できるスクロール効果として掲載されていました。

また、スクロール時のアニメーションを制御するライブラリも紹介しています。ScrollTriggerというライブラリがオススメとのことで、CSSで実行できること全てに加え、さらに多くのことを実現できます。

幾何学的図形とパターンを使ったデザイントレンドをまとめています。

UI／UXデザインのコンポーネントをまとめたギャラリーサイトです。

画像だけで、コードなどは掲載されていません。タグで絞り込んで探すことができます。

SVGシェイプを使って複雑な形状で画像をトリミングする方法を解説した記事です。

全画面の背景ビデオ、カード型コンポーネントの画像部分をSVG図形でトリミングする方法と、画像にオーバーレイとしてSVG図形を重ねる方法を紹介しています。

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

先週の気になるWebサービス

Formbuttonはポップアップするお問い合わせフォームをサイトに追加できるサービスです。フォームの内容をメール送信するFormspreeの類似サービスとなっています。

テキスト、フォント、アイコン、色、送信動作、データ処理、エラー処理など、Formbuttonのほぼすべての要素はカスタマイズできます。独自のCSSファイルも適用可能です。有料プランではGoogleスプレッドシート、Trelloなどと連携可能です。

無料で使えるプランがあるのが嬉しいですね。しかも、送信できるのが月50件、保存期間が30日の制限があるだけで、フォームの数はいくつでも作れます。有料プランも月10ドルからと安く、スパム対策や自動返信など高度な機能も用意されています。

GoogleフォトアプリのAndroid＆iOSアプリが大幅に刷新、アイコンも新しくなりました。Googleフォトはスタートしてから5年とのことです。

写真を探す「検索」タブを中心に、シンプルで見やすくなった感じです。地図上で写真の撮影された場所がヒートマップのように表示され、プレビューもできるマップビューは使いやすそうです。

iPhoneユーザーも使っている人が多いGoogleフォト、iPhone標準の写真アプリと似た感じの見た目になって洗練されたように感じました。ちなみに知らない人もいると思いますが、Googleフォトにアップしていないスマホ端末上の写真も表示できます。