週刊Webテク通信

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

ネットで見かけた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に対抗する検索エンジン

おすすめ記事

記事・ニュース一覧