週刊Webテク通信

2021年11月第1週号1位は、ユーザー体験のダークパターンについて知っておくべきこと、気になるネタは、Facebookの新社名は「Meta」 メタバースに注力

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

1. Dark Patterns in UX: What you Should Knowhttps://adamfard.com/blog/dark-patterns-ux

ユーザー体験のダークパターンについて知っておくべきことを説明しています。ダークパターンはユーザーをだまして購入させたり登録させたりするように仕向けたユーザーインターフェイスのことです。

作り手側としては自ら使わないようにするのはもちろん、クライアントが使わないように説得する必要もあるかもしれません。

ダークパターンの古くから知られる種類として以下のものを紹介していました。

  • 偽装広告
  • ごきぶりホイホイ型(抜け出すのが困難な状態にする)
  • 強制的に継続させる(無料トライアルのときにクレジットカード番号を入れさせて試用期間が終了すると課金するなど)
  • 恥ずかしいことのように思わせる確認の文言
  • トリックのある質問
  • おとり商法
  • 隠れたコスト(送料などのオプション費用を最終画面まで隠すなど)
  • 友達スパム
  • Privacy Zuckering(利用者が意図する以上に個人情報を公開・共有させること/Zuckeringはマーク・ザッカーバーグから)
  • ミスディレクション(注意を意図していない別の所に向かせるテクニック)
図1 ユーザー体験のダークパターンについて知っておくべきこと
図1 ユーザー体験のダークパターンについて知っておくべきこと

2. 3 Essential Design Trends, November 2021 | Webdesigner Depot Webdesigner Depot » Blog Archivehttps://www.webdesignerdepot.com/2021/11/3-essential-design-trends-november-2021/

Webデザインのトレンドを3つ紹介しています。

  1. アニメーションで見えたり隠れたりする
  2. 垂直バー
  3. 不要な装飾のないブロック
図2 Webデザインのトレンド3つ
図2 Webデザインのトレンド3つ

3. Icon Trends in 2021 | Everything You Need To Know - Iconscout Blogshttps://iconscout.com/blog/icon-trends-in-2021

アイコンのトレンドを紹介した記事です。

人気のあるアイコンについてまとめています。

  • ミニマルなアイコン
  • パステルカラーのアイコン
  • グリフアイコン
  • ホバーエフェクトアイコン
  • 線によるアイコン
  • 円形のアイコン
  • 手描き風アイコン
  • 絵文字アイコン
  • アイソメトリックアイコン
図3 アイコンのトレンド
図3 アイコンのトレンド

4. The Button Cheat Sheethttps://www.buttoncheatsheet.com/

ボタンのマークアップ方法についてまとめた記事です。いろいろなマークアップ方法とその評価を紹介しています。

キーボード操作でフォーカスされるか、カーソルを合わせたときの挙動はどうかなど、正しくボタンとして動作するためのマークアップ方法の参考になります。

図4 ボタンのマークアップ方法のまとめ
図4 ボタンのマークアップ方法のまとめ

5. 8 CSS & JavaScript Snippets for Creating Incredible Lighting & Shading Effectshttps://speckyboy.com/css-javascript-snippets-lighting-shading-effects/

CSSとJavaScriptによる照明とシェーディング効果の例をCodePenから紹介しています。

Beat Burgerというハンバーガーモチーフのバーチャルドラムが、キーボードでドラム演奏ができて面白いです。照明効果もステキです。

図5 CSSとJavaScriptによる照明とシェーディング効果の例
図5 CSSとJavaScriptによる照明とシェーディング効果の例

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

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

Lorem.space - placeholder image generatorhttps://lorem.space/

Lorem.spaceは、様々な種類のダミー画像を生成するサービスです。人の顔、靴、時計などの写真をランダムに表示させるリンクを作れます。

ECサイトのプロトタイプでダミーの画像を表示させるときに便利そうです。映画のポスター、ゲームのパッケージ、CDジャケット、本の表紙など豊富な種類を用意しています。

もちろん画像のサイズは設定可能で、画像生成後にキャッシュされて読み込みが速くなるとのことです。オープンソースでWindows、macOS、Linuxアプリとしてダウンロードもできます。

図6 様々な種類のダミー画像を生成するサービス
図6 様々な種類のダミー画像を生成するサービス

おすすめ記事

記事・ニュース一覧