週刊Webテク通信

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

Webテク, Webデザイン, Web広告, ダークパターン, アイコン, 照明, シェーディング効果, Facebook, ダミー画像

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

ネットで見かけた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　様々な種類のダミー画像を生成するサービス

今週の気になるWebネタ

Facebookの新社名は「Meta」に メタバースに注力 - ITmedia NEWShttps://www.itmedia.co.jp/news/articles/2110/29/news076.html

Facebookが社名を「Meta」に変更すると発表しました。SNSのFacebook，Instagramの名称はもちろんそのままですが，OculusブランドはMetaブランドに移行するそうです。

オンラインカンファレンス「Connect 2021」で社名変更の発表があるかもと事前に言われてましたが，メタバースに注力することから「メタ」というそのまんまの名前になるとは思ってませんでした。

GAFAという呼び方はどうなるのかがネットでは話題になっていましたが，そもそもGoogleも親会社はAlphabetだからMAAAという意見には納得いきます。日本ではAlphabetの認知度は低いと思いますが，Instagramの親会社はMetaだとインスタ女子に認知されるときは来るんでしょうか？

Webテク, Webデザイン, Web広告, ダークパターン, アイコン, 照明, シェーディング効果, Facebook, ダミー画像

著者プロフィール

アシカガコウジ

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

http://bit.ly/ashikaganote