2020年3月第1週号 1位は、悪意に満ちたダークUXパターン10個、気になるネタは、Apple Japan、「アニメに登場するMac」集めたCM公開教育向けキャンペーンで

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

悪意に満ちたダークUXパターンを10個紹介しています。

各項目の説明は簡潔で、「⁠とても人気があるなら、どうして毎日インスタグラム広告を見せてくるの？」といった補足のひとこともいい感じです。

すべてのデザイナーが見るべき良いUXデザインの例をまとめた記事です。

オンボーディングについては前回も紹介しましたが、ここではアプリやサービスを使いはじめた人への手引きのことです。

オンボーディングのための製品ツアー、アプリ内メッセージなどを提供するUserGuidingがこの記事を書いています。

ユーザー体験を向上させるためにウェブサイトにアニメーションを使う理由や制作のヒントを紹介しています。

アニメーションを使う理由としては、以下の項目に分けて解説していました。

CSSでレイアウトしたカラーパレットを20種類まとめています。

カラーパレットそのものを探す用途ではなく、ウェブページ上でカラーパレットをどうデザインするかの参考にするためのものです。

Adobe XDでスクリーンリーダー向けにデザインする方法を解説した記事です。Adobe XDのデザインハンドオフと音声プロトタイピング機能を活用することで、スクリーンリーダー向けデザインを考えることができます。

また、Adobe XDはmacOS Catalinaの音声コントロールのサポートを開始したので、アプリケーションを音声で制御できるようになったことにも触れていました。

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

先週の気になるWebサービス

Faux Code Generatorは、フェイクのコードが表示された画像を作るサービスです。テキストではなくダミーの四角形でコードが表現されます。

GithubのGistのURLをもとにフェイクのコード画像を自動で生成します。URL入力欄の右端のアイコンからランダムで選ぶことも可能です。Github上と同様に色分けされています。

画像はSVGでダウンロードできます。カスタマイズできる要素は、背景が白か黒かと、角を丸くするかしないかだけです。「⁠ { x = ( 」のように細かくスペースで区切られたコードを角丸画像にすると、丸が並んだ面白い画像になります。

アニメにMac（っぽいパソコン）が登場したシーンを集めたAppleのCMが話題です。公開されすぐにTwitterのトレンド入りしていました。

「君の名は。」のようにAppleロゴをそのまま使った作品もありますが、多くはロゴをちょっと変えた許可を取ってないと思われる作品です。このCMで使われたことでAppleのお墨付きになりましたね。

教育向けキャンペーン「キャンパスライフに最強のコンビ Mac + iPhone」のCMなんだそうです。キャンペーンページのビジュアルもアニメになっていました。