週刊Webテク通信

2021年11月第3週号 1位は,2022年のWebデザインのトレンド22項目,YouTubeがすべての動画の「低く評価」数を非公開に

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

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

1. 22 inspiring web design trends for 2022 | Webflow Bloghttps://webflow.com/blog/web-design-trends-2022

2022年のWebデザインのトレンドをまとめた記事です。22項目に分けて紹介しています。

  1. 楽しいミニサイト
  2. Web上での宝探し
  3. アプリのような体験
  4. 1ページ完結のサイト
  5. 場所を感じさせるサイト
  6. アールデコをモチーフにしたもの
  7. ヒーローエリアに画像が少ない
  8. 特大のタイポグラフィ
  9. インタラクティブなフォント
  10. 配慮されたモーションデザイン
  11. コラージュイラスト
  12. 抽象的なイラスト
  13. ざらざらしたグラデーション
  14. 線画
  15. 分割スクリーンのサイト
  16. もっとグラスモーフィズム
  17. 減少傾向のニューモーフィズム
  18. あらゆる人々に向けた文面
  19. 性別を意識させない中立的なデザイン
  20. ページの読み込み速度を重視する
  21. 動的コンテンツを使ったサイト構築
  22. より多くのチームで使われるノーコード

図1 2022年のWebデザインのトレンド22項目

図1 2022年のWebデザインのトレンド22項目

2. Jimmy Lollipop - 8 UI/UX tips about password designhttps://jimmylollipop.com/8-ui-ux-tips-about-password-design/

パスワードのUI/UXに関する8つのヒントを紹介しています。

  1. パスワードを確認するためのボタンを追加する
  2. CapsLockキーがオンになっているかどうかを表示する
  3. NumLockキーがオンになっているかどうかを表示する
  4. パスワードの条件を制限してそれを表示する
  5. パスワードを作成するときに必要な条件を表示する
  6. パスワード確認用の入力フィールドはいらない
  7. パスワード忘れのページのメールアドレス入力フィールドに自動でメールアドレスを入れておく
  8. 自動生成したパスワードを使わせるのではなく,パスワードを作成させる

図2 パスワードのUI/UXデザインに関する8つのヒント

図2 パスワードのUI/UXデザインに関する8つのヒント

3. 100% Free Forms Library - Copy & Paste Code Examples | HeroTofuhttps://herotofu.com/solutions/forms-library

HTML&CSSコードを取得できるフォームのライブラリです。Tailwind CSS,Bootstrap,Bulma,Foundation,Materialize用のコードが用意されています。ダークモード用のコードに切り替えられます。

なお,Tailwind CSSで使う場合は,Tailwind Labsにあるフォーム用プラグインが必要とのことでした。

図3 いろいろなフレームワークに対応したフォームのライブラリ

図3 いろいろなフレームワークに対応したフォームのライブラリ

4. CSS loaders and Spinnershttps://cssloaders.github.io/

ローディングアニメーションを大量に用意しています。かなり複雑なグラフィックもありますが,全てCSSだけで実現しています。

前半シンプルなものが多いのですが,スクロールしていくと文字を使ったものやイラストを使ったものなども出てきます。

図4 ローディングアニメーションいろいろ

図4 ローディングアニメーションいろいろ

5. Top 20 Free Design Resources Website For Graphic Designers In 2021https://graphicdesign.cx/top-20-free-design-resources-website-for-graphic-designers-in-2021/

グラフィックデザイナーのための無料のデザイン素材を入手できるサイトをまとめた記事です。

画像/モックアップ&UIデザイン/タイポグラフィを入手できるサイトや,デザインインスピレーションを得られるギャラリーサイトなどを紹介しています。

図5 グラフィックデザイナーのためのデザイン素材いろいろ

図5 グラフィックデザイナーのためのデザイン素材いろいろ

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

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

You.comhttps://you.com/

You.comはGoogleに真っ向から対抗する検索エンジンです。ターゲット広告を表示しないなどプライバシー重視の姿勢を売りにしているようですが,機能的にも面白いです。

ウェブサイトだけでなく,画像,動画,YouTube,Twitterなどでの検索結果をまとめて見られるのが特徴です。縦スクロールで情報ソース別の検索結果が見られて,横スクロールでそれぞれの情報ソースの検索結果を検索順位が下位のものまで見ていくことができます。

このインターフェイスはスマホで見た場合も同じで,横スワイプでバーッと検索結果を見ていく操作感はスマホ向きだと思いました。You.comは元Salesforceのサイエンティストたちが立ち上げて,SalesforceのCEOから総額2000万ドル(約23億円)の資金を調達しているそうです。

図6 Googleに対抗する検索エンジン

図6 Googleに対抗する検索エンジン

今週の気になるWebネタ

YouTubeがすべての動画の「低く評価」数を非公開に | TechCrunch Japanhttps://jp.techcrunch.com/2021/11/11/2021-11-10-youtube-is-removing-the-dislike-count-on-all-videos-across-its-platform/

YouTubeは動画の「低く評価/Dislike」ボタンの押された数を非表示にすることを発表しました。現在全ての動画にロールアウト中とのことです。

低く評価ボタンは残り続けて動画の評価にも影響を与えるし,チャンネルの持ち主は数を確認できるそうです。それでも表向き表示されなくなれば動画を投稿するクリエイターは気にすることが減るでしょう。

いやがらせ的に低評価を付ける行為を減らすのが目的のひとつのようで,たしかにアンチのモチベーションを下げることに繋がるはずです。問題のある動画は低評価の数字は見えなくてもコメント欄が荒れていることで気付くと思うので,普通のユーザーにとってデメリットはないのかもしれません。

著者プロフィール

アシカガコウジ

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

http://bit.ly/ashikaganote