週刊Webテク通信

2021年1月第2週号 1位は，2020年に人気のあったUI／UXデザインのトレンド，気になるネタは，Flashの最後の日、Adobe自身がサポートを停止 | TechCrunch Japan

Webテク, Webデザイン, Web広告, UI, UX, アニメーション, , Flash

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

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

1. Big Review of Major UI Design Trends for Web and Mobile in 2020https://blog.tubikstudio.com/major-ui-design-trends/

WebサイトとモバイルアプリでのUI／UXデザインのトレンドから，2020年に人気のあったものをまとめた記事です。

  • ビデオヒーローセクション
  • 超ミニマリズムのナビゲーション
  • インタラクティブ性
  • 印象的な商品ページ
  • ビジュアルの組み合わせ
  • 創造的なデータの視覚化
  • 製品とプロモーションのデザインの一貫性
  • 洗練されたタイトルのフォント
  • 新たなレベルのアニメーション
  • アイデンティティ要素のアニメーション
  • 幾何学的な形状を創造的に使う
  • 3Dグラフィックス
  • 突出したクリエイティビティのある写真
  • 実験的なグリッド
  • 情報を伝えるイラスト
  • 限定したカラーパレット

図1　2020年に人気のあったUI／UXデザインのトレンド

図1　2020年に人気のあったUI／UXデザインのトレンド

2. Graphic Design Trends 2021 Inspired By What We All Experienced This Year | by Dana Kachan | Dec, 2020 | Muzli - Design Inspirationhttps://medium.muz.li/graphic-design-trends-2021-inspired-by-what-we-all-experienced-this-year-5f2a26efdbad

2021年のグラフィックデザインのトレンドを，多数の事例とともに紹介しています。コロナ禍の影響を受けているものが多いですね。

  • 遊び心のあるカラフルなデザイン
  • 素朴で正直でオープンなシーン
  • 自己認識とポジティブシンキング
  • スチームパンク，バイオパンク，メックビオパンク
  • サイバーパンク

図2　2021年のグラフィックデザインのトレンド

図2　2021年のグラフィックデザインのトレンド

3. The Rules of Margin Collapsehttps://www.joshwcomeau.com/css/rules-of-margin-collapse/

CSSのマージンの相殺について，深く掘り下げて解説した記事です。

図形を立体的にアニメーションさせて，マージンの相殺をうまくビジュアルで説明しているところに感心しました。

図3　CSSのマージンの相殺について細かく解説

図3　CSSのマージンの相殺について細かく解説

4. 7 Takeaways from the 2020 UX Tools Survey | Learn UXDhttps://learnuxd.io/posts/7-takeaways-from-2020-ux-tools-survey

前回も紹介したUxtools.coによる2020年版のデザインツール投票の結果をうけて，ポイントをまとめています。

  1. Miroは大きく成長した
  2. みんなWhimsicalが大好き
  3. Windowsの利用が増えている
  4. Figmaの利用は急増した
  5. ユーザーテストをする人はZoomとMazeが好き
  6. Notionは新進気鋭の好かれているツール
  7. Adobe XDはじわじわと浸透している

図4　2020年版のデザインツール投票結果のポイント

図4　2020年版のデザインツール投票結果のポイント

5. AnimXYZhttps://animxyz.com/

AnimXYZはCSSアニメーションのツールキットです。Vue，React，SCSS，CSS用に構築されています。

CSS変数を使用してアニメーションを調整できます。このページの下の方で，実際にアニメーションをみながらカスタマイズして，コードを取得することも可能です。

図5　CSSアニメーションのツールキットAnimXYZ

図5　CSSアニメーションのツールキットAnimXYZ

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

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

Keevi Screen Recorderhttps://keevi.io/screen-recorder

Screen Recorderは，画面操作の様子を動画で収録できるサービスです。インカメラで自分の顔も同時に収録できます。この分野で有名なLoomと競合するものですね。

ブラウザ上でユーザー登録無しで使うことができて無料です。撮影した動画はWeb上で共有できますし，ダウンロードも可能です。

今後はライブストリーミング機能を追加することを予定しているそうです。Keeviはほかにも動画編集のサービスなどを提供していますが，どれも無料でした。

図6　画面操作の様子を動画で収録できるサービス

図6　画面操作の様子を動画で収録できるサービス

今週の気になるWebネタ

Flashの最後の日，Adobe自身がサポートを停止 | TechCrunch Japanhttps://jp.techcrunch.com/2021/01/01/2020-12-31-goodbye-flash-goodbye-farmville/

Adobeが2020年12月31日にFlashのサポートを終了しました。2021年1月12日以降はFlashコンテンツはローカルでも実行できなくなるそうです。

Flash PlayerのアンインストーラーをAdobeは提供しており，アンインストールすることを強く推奨しています。ちなみにアンインストールした後にウェブページが開き，Acrobat DCの宣伝が表示されました。

新型コロナウィルスの影響でリモート元年となった2020年でしたが，その年の終わりとともに一時代を築いたFlashが終了というのも感慨深いです。なお，リモートワークとともにユーザーを増やしているMiroは，ある意味Flashっぽい部分があると思っています。

Webテク, Webデザイン, Web広告, UI, UX, アニメーション, , Flash

著者プロフィール

芦之由（あしのよし）

Webデザインやサイト制作に役立つブログ記事やニュースをほぼデイリーでお届けするメルマガ「デイリーWebテク」発行人。フリーのWebデザイナー兼イラストレーター＆ライター。シャープMZ-80Bからのパソコンユーザーで，Macintosh IIciからのMacユーザー。嫌いな言葉は「IEで見ると表示が崩れてるよ」。

デイリーWebテクの購読やバックナンバーについては，以下の紹介サイトをご覧ください。

デイリーWebテク - Webテク関連の話題を毎日配信 -
URL：http://www.rgs680.com/dwt/

バックナンバー

週刊Webテク通信

バックナンバー一覧