週刊Webテク通信

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

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

ネットで見かけた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 レビューのないレビューサイト

今週の気になるWebネタ

Web3企業のURL末尾でみかける「.xyz」とは? | TechCrunch Japanhttps://jp.techcrunch.com/2021/12/29/2021-12-28-wtf-is-xyz/

いつの間にか浸透していたWeb3という言葉ですが,Web3企業では「xyz」ドメインが人気とのこと。.xyzは「固有の意味を持たない,真に汎用的な初めてのドメイン拡張子」なのだそうです。

最近Mirrorの存在を知ったのですが,Mirrorのドメインが.xyzなことはすぐに覚えました。まだあまり目にしないドメインなので印象に残りやすいメリットもあると思います。

ちなみにMirrorは仮想通貨に対応したブログシステムです。記事をNFT化して収益を得ることもできたり,クラウドファンディングの機能もあるそうで興味深いです。

著者プロフィール

アシカガコウジ

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

http://bit.ly/ashikaganote