週刊Webテク通信

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

ネットで見かけた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 画面操作の様子を動画で収録できるサービス

おすすめ記事

記事・ニュース一覧