週刊Webテク通信

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

Webテク, Webデザイン, Web広告, カード型UI, CSS, 幾何学的図形, パターン, SVG, Google

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

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

1. Simple Design Tips for Crafting Better UI Cards - UX Planethttps://uxplanet.org/simple-design-tips-for-crafting-better-ui-cards-19c1ac31a44e/

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

  • 内容に関連する画像を使う
  • 大事な文字情報だけに絞る
  • 本文にはシンプルな書体を使う
  • カードとわかるように影をつける
  • カード内のインタラクティブな要素を明確に示す
  • モバイル環境ではカード内でのスクロールを使わない
  • 詳細情報を表示するとき親から子への遷移を使う
  • よく使われているジェスチャー操作に対応する

図1　カード型UIをデザインするためのヒント

図1　カード型UIをデザインするためのヒント

2. An Overview of Scroll Technologies | CSS-Trickshttps://css-tricks.com/an-overview-of-scroll-technologies//

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

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

  • 特定の位置で固定される（position: sticky;）
  • 視差効果
  • 特定の位置にスナップ
  • スムーズスクロール

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

図2　スクロール関連のテクノロジーまとめ

図2　スクロール関連のテクノロジーまとめ

3. Design Trend: Geo Shapes & Patterns (With Animation) | Design Shackhttps://designshack.net/articles/trends/geo-shapes-patterns-animation//

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

  • アニメーションする背景
  • 3Dシェイプとアニメーション
  • 触感のある動き
  • ロゴアニメーションの読み込み
  • 視差スクロールと幾何学的図形
  • 幾何学的なホバーアニメーション
  • デザインテーマとしての幾何学的図形
  • タイムラインアニメーション

図3　幾何学的図形とパターンを使ったデザイントレンド

図3　幾何学的図形とパターンを使ったデザイントレンド

4. The Finest Collection of UI/UX Patterns & Exampleshttps://www.niceverynice.com/components/

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

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

図4　UI／UXデザインのギャラリーサイト

図4　UI／UXデザインのギャラリーサイト

5. How to Enhance Your Website Layouts With SVG Shapeshttps://webdesign.tutsplus.com/tutorials/website-layouts-with-svg-shapes--cms-35259/

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

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

図5　SVGシェイプを使って画像をトリミングする方法

図5　SVGシェイプを使って画像をトリミングする方法

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

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

Formbuttonhttps://formspree.io/formbutton/

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

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

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

図6　ポップアップするお問い合わせフォームをサイトに追加できるサービス

図6　ポップアップするお問い合わせフォームをサイトに追加できるサービス

今週の気になるWebネタ

モバイル版「Googleフォト」大幅刷新 検索しやすく，マップ連携表示が可能に - ITmedia Mobilehttps://www.itmedia.co.jp/mobile/articles/2006/26/news051.html

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

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

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

Webテク, Webデザイン, Web広告, カード型UI, CSS, 幾何学的図形, パターン, SVG, Google

著者プロフィール

アシカガコウジ

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

http://bit.ly/ashikaganote