週刊Webテク通信

2021年11月第2週号1位は、認知心理学がユーザーインターフェイス設計に重要な理由、気になるネタは、バルミューダ、開発中の5Gスマホの外観をチラ見せ 11月16日に発表へ

ネットで見かけた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は稼働しているので、安全で親しみやすく使いやすいサイトだと感情的、本能的に思ってもらうことが特に重要ということでした。

図1 認知心理学がユーザーインターフェイス設計に重要な理由
図1 認知心理学がユーザーインターフェイス設計に重要な理由

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

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

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

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

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

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

図3 CSSモジュールをやめてTailwind CSSに移行した体験談
図3 CSSモジュールをやめてTailwind CSSに移行した体験談

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

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

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

図4 2022年のメールデザインのトレンド
図4 2022年のメールデザインのトレンド

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がスタンダードな存在になってきていることを実感します。

図5 Figmaのおすすめプラグインを20個紹介
図5 Figmaのおすすめプラグインを20個紹介

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

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

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

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

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

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

図6 ウィンドウにコードが入った見栄えの良い画像を作るサービス
図6 ウィンドウにコードが入った見栄えの良い画像を作るサービス

おすすめ記事

記事・ニュース一覧