週刊Webテク通信

2020年2月第1週号 1位は，2020年のUIトレンドまとめ，気になるネタは，友達から資金募れるアプリ「polca」，10月1日に終了 「収益性などを検討した結果」

Webテク, Webデザイン, Web広告, UI, CSS, フレンドファンディング

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

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

1. UI Trends 2020: What's in Store? | Toptalhttps://www.toptal.com/designers/ui/ui-trends-2020

2020年のUIのトレンドについてまとめています。

  1. ストーリーテリング
  2. 3Dグラフィックス＆アニメーション
  3. ユニークなマイクロインタラクション
  4. ダークテーマ
  5. シンプル
  6. 声によるインタラクション
  7. タイポグラフィを使ったUIデザインの流行

図1　2020年のUIトレンドまとめ

図1　2020年のUIトレンドまとめ

2. What Is Modern Web Design in 2020? 20 Stunning Examples | Design Shackhttps://designshack.net/articles/inspiration/modern-website-design/

2020年のモダンなWebデザインとは何かを，実例とともにまとめた記事です。

  • ミニマリズム
  • 大胆な色使い，タイポグラフィ
  • 細部まで考え抜かれた画像
  • 縦長動画
  • 音を使ったユーザー体験

などの特徴を持つサイトが，解説とともに20個紹介されています。

図2　2020年のモダンなWebデザイン

図2　2020年のモダンなWebデザイン

3. The CSS Cascadehttps://wattenberger.com/blog/css-cascade

CSSのカスケードについて初歩的なことをまとめた記事です。優先順位と継承についてわかりやすくまとめています。

カスケーディングの「階段状の滝のような」をイラストを使って表現していたり，クイズ形式で答えはクリックすると表示されるなど，見せ方が凝っていてクオリティが高いです。

図3　CSSのカスケードについて凝った見せ方で解説

図3　CSSのカスケードについて凝った見せ方で解説

4. 7 Principles of Icon Design - Helena Zhang - Mediumhttps://medium.com/@minoraxis/7-principles-of-icon-design-e7187539e4a2

アイコンデザインの7つのルールを紹介しています。

  1. 明瞭さ
  2. 読みやすさ
  3. 揃え
  4. 簡潔
  5. 一貫性
  6. 個性
  7. 使いやすさ

図4　アイコンデザインの7つのルール

図4　アイコンデザインの7つのルール

5. UI Interactions & Animations Roundup #2 | Codropshttps://tympanus.net/codrops/2020/01/25/ui-interactions-animations-roundup-2/

参考になるUIインタラクションとアニメーションをまとめた記事です。実際のサイトに使われているものではなく，Dribbbleに掲載された作品でした。

アニメーションGIFの埋め込みに使っているGfycatというサービスも知らなかったので参考になりました。

図5　UIインタラクションとアニメーションいろいろ

図5　UIインタラクションとアニメーションいろいろ

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

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

brumm.afhttps://brumm.af/shadows

brumm.afは滑らかな影のCSSを生成するサービスです。複数のbox-shadowを適用することで滑らかで自然な影を作るテクニックを使っています。

影は1～10個まで設定できます。最終的な透明度，最終的な距離，最終的なぼかしの強さを設定すると，複数の影がまとめて設定されます。曲線をコントロールすることで微調整もできます。

複数のbox-shadowを重ねがけする手法はたまに使いますが，もともとどこかでもらってきたコードをベースに調整しながら使っていました。このサービスを使えば，簡単に設定できてとても便利だと思います。

図6　滑らかな影のCSSを生成するサービス

図6　滑らかな影のCSSを生成するサービス

今週の気になるWebネタ

友達から資金募れるアプリ「polca」，10月1日に終了 「収益性などを検討した結果」 - ITmedia NEWShttps://www.itmedia.co.jp/news/articles/2001/27/news101.html

友人・知人などから資金を募る「フレンドファンディング」サービスの「polca」がサービス終了を発表しました。以前利用したことがあるサービスなので，終わってしまうのは残念です。

友人・知人に限定して募集を行うのが特徴ですが，URLがわかれば誰でも支援できます。以前は違ったと思うのですが，今は支援を募集している企画がトップページにたくさん表示されているので，通常のクラウドファンディングと差はないように感じました。

中学生がこずかい稼ぎの場として使っているなど，問題点を指摘している人もたくさんいて，そのことも終了の原因かもしれません。「⁠ポルカおじさん」と呼ばれる，面識のない子供たちに支援するのが楽しいという人たちにも，残念なサービス終了なのでしょう。

Webテク, Webデザイン, Web広告, UI, CSS, フレンドファンディング

著者プロフィール

アシカガコウジ

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

http://bit.ly/ashikaganote