週刊Webテク通信

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

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

ネットで見かけた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ページにユーザーが質問などを投稿できるエリアを作れるサービス

今週の気になるWebネタ

オーディオブック「Audible」,価格据え置きで聴き放題に--村上春樹作品も配信へ - CNET Japanhttps://japan.cnet.com/article/35182653/

AmazonのAudibleの会員プランが,これまでと同じ月額1500円で定額聴き放題となりました。聴き放題対象のオーディオブック作品は12万以上とのこと。もちろん対象外の有料作品もあるのはKindle Unlimitedと同様です。

オーディオブック聴き放題は日本ではオトバンクのaudiobook.jpが先行していて,値段も月額880円(1年分前払いだと月当たり625円)とお安いです。無料お試しはAudibleの30日間(1ヶ月)に対し14日間(2週間)と短いですね。

Appleもオーディオブックの聴き放題サービスを準備しているらしく,この分野も競争が激しくなりそうです。Audible,audiobook.jpともポッドキャストも聴けるので,オーディオブックリスナーが増えることでポッドキャスト人気も上がることを個人的には期待しています。

著者プロフィール

アシカガコウジ

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

http://bit.ly/ashikaganote