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

1. Psychology is your superpower to design user-centred interfaces | by Jerome Kalumbu | Nov, 2021 | UX Collectivehttps://uxdesign.cc/psychology-is-your-superpower-to-design-user-centred-interfaces-5568096dc064

認知心理学がユーザー中心のインターフェイス設計に重要な理由を解説した記事です。

人は情報を処理するのにシステム1（潜在意識）とシステム2（意識）の2つの考え方を使っていて，システム1は高速・感情的・衝動的・自動的，システム2はゆっくり・意図的・分析的です。

サイトを訪れた人にはまずシステム1が発動し，システム1では損失を恐れる傾向にあるとのことです。サイトを読み進んでいき，製品を比較検討する場合などにはシステム2で処理されます。

システム2のときにもシステム1は稼働しているので，安全で親しみやすく使いやすいサイトだと感情的，本能的に思ってもらうことが特に重要ということでした。

2. Designing Excellent Website Navigation (5 Ideas) - Hongkiathttps://www.hongkiat.com/blog/designing-excellent-web-nagivation/

Webサイトのナビゲーションをデザインするヒントを5つ紹介しています。

1. ロゴを目立たせる
2. 固定したヘッダを使う
3. アクセスしているページをハイライトする
4. 意味を認識できるアイコンだけを使う
5. メガメニューは読みやすく使いやすいように整理する

3. Goodbye CSS Modules, Hello TailwindCSShttps://www.polytomic.com/blog-posts/goodbye-css-modules-hello-tailwindcss

CSSモジュールを使うのをやめて，Tailwind CSSに移行して成功だった体験談です。

Bootstrapをベースにそのコンポーネントをカスタマイズして再定義していくより，ユーティリティベースのTailwind CSSを利用する方が良いというのは頷けます。

4. Email Design Trends for 2022 - Designmodohttps://designmodo.com/email-design-trends-2022/

メールデザインのトレンドを豊富な実例とともに解説しています。

ミレニアル世代の64％，Z世代の60％が，メールをブランドとのコミュニケーションに最適な手段だと考えているそうです。

5. 20 Awesome Figma Plugins to improve your Workflowhttps://www.marcandrew.me/20-awesome-figma-plugins-to-improve-your-workflow/

Figmaのおすすめプラグインを20個紹介しています。独立したサービスとしても利用できるものを，Figma上から簡単に使えるためのプラグインが多い印象です。

いろいろなサービスがFigmaから利用してもらうためにプラグインを用意していることからも，Figmaがスタンダードな存在になってきていることを実感します。

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

• Twitter，アカウントがなくてもダイレクトリンクで「スペース」が聴けるように | TechCrunch Japan
  Twitterはスペース関連の機能強化に力を入れていますね
• 「LINEタイムライン」は「LINE VOOM」に 動画プラットフォームとして刷新 2021年冬より - ITmedia NEWS
  LINEのタイムラインがTikTokやInstagramのリールのようになるようです
• マイクロソフト，「⁠Mesh for Teams」で企業向けメタバースを推進へ - CNET Japan
  TeamsでもFacebookのHorizon WorkroomsのようなVR会議ができるようになるのでしょう

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

Beautiful code screenshots - Showcodehttps://showcode.app/

ShowcodeはコードをSNSで共有するなどのために，ウィンドウにコードが入った見栄えの良い画像を作るサービスです。この手のツールはたくさんありますが，カスタマイズ性が高く機能が豊富です。

特定の行だけが目立つようにほかの行をぼかす機能は，ほかでは見たことがありません。余白や角丸も細かく調整できますし，タイトルや行番号を入れることもできます。

書き出すときにPNG，JPEGだけでなくSVGが選べるのも特徴です。SVGファイルにしてWebページに配置すれば，テキスト部分は選択してコピー可能になります。