週刊Webテク通信

2022年1月第1週号1位は、ソーシャルプルーフ(社会的証明)Webサイトにどうデザインするか、気になるネタは、Web3企業のURL末尾でみかける「.xyz」とは

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

1. How to Design Social Proof (Without Social Media) | Design Shackhttps://designshack.net/articles/business-articles/how-to-design-social-proof/

商品やサービスの良さを証明するための、お客様の声やレビュー、メディアからの評価などのソーシャルプルーフ(社会的証明)をWebサイトにどう入れていくかを解説した記事です。

以下の項目に分けて、ソーシャルプルーフをデザインする方法を解説しています。

  • レビュー
  • お客様の声
  • ほかの購入者の情報やリアルタイムの統計
  • 導入事例
  • 受賞歴、評価とその証拠
  • ユーザーの作ったコンテンツ
  • バッジとアイコン
  • メディア掲載情報
  • そして、ソーシャルメディア

ソーシャルメディアに関しては、ソーシャルプルーフを作成する優れた方法だけど、唯一の方法ではないので全ての力を注ぐべきじゃないと説明していました。

図1 ソーシャルプルーフ(社会的証明)をWebサイトにどうデザインするか
図1 ソーシャルプルーフ(社会的証明)をWebサイトにどうデザインするか

2. 10 Graphic Design Trends for 2022https://justcreative.com/graphic-design-trends-2022/

2022年によく見かけることが予想されるグラフィックデザインのトレンドと、それらが人気の理由を紹介しています。

タイトルには10とありますが、あとで追加したのか合計12項目ありました。

  1. 多様性に配慮したデザインが重要になる
  2. セリフフォントの人気が戻ってくる
  3. 専用に作られたブランドのビジュアル
  4. 幾何学的形状を使ったデザイン
  5. 本格的な手書きのイラスト
  6. 植物、花、風景など自然の画像
  7. データのビジュアル化を面白く
  8. 鮮やかなネオンの背景
  9. カラフルなアイコンやイラスト
  10. 大きなタイポグラフィ
  11. ミクストメディアデザイン(いろいろな素材をコラージュしたデザインなど)
  12. ブランドミーム
図2 2022年のグラフィックデザインのトレンド
図2 2022年のグラフィックデザインのトレンド

3. CSS in 2022 – Bram.ushttps://www.bram.us/2021/12/27/css-in-2022/

2022年にブラウザにサポートされるのが予想されるCSSをまとめた記事です。

以下の3つに分けて紹介しています。

  • 2022年中にすべてのブラウザでサポートされると確信している機能
  • まだ実験的でいくつかのブラウザでサポートされると思われる機能
  • 現状維持で大きく変化はなさそうな機能
図3 2022年にブラウザサポートが予想されるCSS
図3 2022年にブラウザサポートが予想されるCSS

4. 41 Free Generator Tools For Web Designhttps://us.niemvuilaptrinh.com/article/41-free-generator-tools-for-web-design

Webデザインに役立ついろいろなジェネレーターを大量に紹介しています。

グラデーションやカラー、SVG図形、ボーダー、背景パターンなど見た目のデザインに関するものが多いです。

図4 Webデザインに役立つジェネレーターいろいろ
図4 Webデザインに役立つジェネレーターいろいろ

5. 10 Captivating Examples of the Liquid Metal Effect in Web Design - Qode Interactivehttps://qodeinteractive.com/magazine/captivating-examples-of-liquid-metal-effect-in-web-design/

液状の金属のような効果を使ったWebデザインの事例をまとめています。

アニメーションしているものが多いので、スクリーンショット画像だけでなく実際のサイトを見ることをお勧めします。

図5 液状の金属のような効果を使ったWebデザインいろいろ
図5 液状の金属のような効果を使ったWebデザインいろいろ

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

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

Try What's Goodhttps://trywhatsgood.com/

Try What's Goodはレビューのないレビューサイトです。コーヒー、椅子、机、キーボード、モニターなど項目を選ぶと、おすすめ製品のページに移動します。

おすすめの製品はいくつも登録されていて、ランダムにリンクされるだけのようです。多くの人はオンラインの製品レビューを実際には読んでないし、最も優れた製品である必要はないという前提で作られたサービスだからということですね。

その発想や項目を選ぶユーザーインターフェイスが、シンプルだけどひとひねりあって興味深いサービスに仕上がっていると思いました。⁠a good ○○」「○○」のところを切り替えるUIなのですが、⁠○○」が複数形のときは「good ○○s」「a」が消えるところもよくできています。

図6 レビューのないレビューサイト
図6 レビューのないレビューサイト

おすすめ記事

記事・ニュース一覧