週刊Webテク通信

2022年2月第1週号1位は、UI/UXデザインのトレンドを16個紹介、気になるネタは、オーディオブック「Audible」、価格据え置きで聴き放題に--村上春樹作品も配信へ

ネットで見かけたWebテク(Webテクニック・Webテクノロジー)記事から、Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は、2022年1月24日~30日の間に見つけた記事のベスト5です。

1. 16 Leading UI/UX Design Trends to Dominate in 2022 | Codicahttps://www.codica.com/blog/latest-ui-ux-design-trends/

UI/UXデザインのトレンドをまとめています。

UIトレンド
  1. ヴィンテージ、90年代
  2. 2D、3Dアニメーション
  3. 芸術的なイラスト
  4. ブルータリズム
  5. 非対称性
  6. 実際の写真
  7. スクローリーテリング(スクロールによるストーリーテリング)
  8. ミニマリズム
UXトレンド
  1. 包括性(多様性を考慮)
  2. VR、AR
  3. スーパーアプリ(多くのサービスが組み合わされたアプリケーション)
  4. 音声のみのアプリ
  5. デザインシステムとライブラリ
  6. ユーザーによるカスタマイズ
  7. ページの読み込み速度を優先する
  8. モバイルファースト
図1 UI/UXデザインのトレンドを16個紹介
図1 UI/UXデザインのトレンドを16個紹介

2. The breakpoints we tested in 2021, and the ones to test in 2022 | Polypane, The browser for ambitious developershttps://polypane.app/blog/the-breakpoints-we-tested-in-2021-and-the-ones-to-test-in-2022/

レスポンシブデザインでブレークポイントをどのサイズに設定するかを考えるためのアプローチをまとめた記事です。

サイズを考えるヒントとして以下の項目に分けて解説しています。

  • デバイスのサイズ
  • 人気のCSSフレームワーク(Tailwind CSS)でのサイズ
  • Google Analyticsで解析したサイト訪問者のウィンドウサイズ
  • WebAlmanacという調査機関(?)のレポートによるよく使われるサイズ
  • レスポンシブでの画面確認ツールPolypaneでよく使われたサイズ
図2 ブレークポイントをどのサイズに設定するかのヒント
図2 ブレークポイントをどのサイズに設定するかのヒント

3. Spatial Web Browsinghttps://maggieappleton.com/spatial-web

Webを閲覧する新しい方法を提供するアプリケーション、ツールを紹介しています。大きなキャンバスの中に複数のWebページを配置するもので、メモなどを追加できるものもあります。

複数人で同時に使えるコラボレーションツールもあり、Miroと競合しそうです。オンラインホワイトボードのMiroにも、URLを入力してWebページのイメージを配置する機能があるので、ここで紹介されているツールの仲間とも言えそうです。

図3 Webを閲覧する新しい方法を提供するツールいろいろ
図3 Webを閲覧する新しい方法を提供するツールいろいろ

4. 20 Best New Websites, January 2022 | Webdesigner Depot Webdesigner Depot » Blog Archivehttps://www.webdesignerdepot.com/2022/01/20-best-new-websites-january-2022/

2022年1月の新しいWebサイトを20個まとめています。Webサイト制作のインスピレーションになるようなサイトが揃っています。

Accounting Boxはデスクトップサイズでは横分割なのがスマホサイズで縦に並ぶのが印象的ですが、スマホサイズのときにハンバーガーメニューが右下に配置されるのが新鮮でした。

図4 2022年1月の新しいWebサイト20選
図4 2022年1月の新しいWebサイト20選

5. Shapefest™ - A massive library of free 3D shapeshttps://www.shapefest.com/

3Dで作られた文字や図形を透過PNG形式の画像で配布しています。商用利用も可能です。期間限定なのかもしれませんが、今のところダウンロードは無料です。

無料で購入するという形式になっていて、Sellfyというクリエイター向けのECサービスを利用していました。

図5 3Dで作られた文字や図形の素材集
図5 3Dで作られた文字や図形の素材集

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

先週の気になるツール/サービス

hagrid - no-code user-generated FAQ, on any webpagehttps://hagrid.io/

hagridはWebページにユーザーが質問などを投稿できるエリアを作れるサービスです。FAQとして使うことを想定し、ノーコードでウィジェットを生成できます。

質問やコメントを投稿する人はユーザー登録が必要で、スパム対策の意味もあるようです。返事が投稿されたときに通知が行くことで、サイトへ再度訪れてもらうきっかけになる点も重要ですね。

JavaScriptのコードで簡単に埋め込めますし、WordPressやWixなどにも順次対応していく予定です。昔の個人ホームページ時代に流行ったBBS、掲示板のようでもありますが、今の技術でアップデートされていて興味深いです。

図6 Webページにユーザーが質問などを投稿できるエリアを作れるサービス
図6 Webページにユーザーが質問などを投稿できるエリアを作れるサービス

おすすめ記事

記事・ニュース一覧