週刊Webテク通信

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

Webテク, Webデザイン, Web広告, UI, Tailwind CSS, メールデザイン, Figma, コード, SNS, スマートフォン, バルミューダ

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

ネットで見かけた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　ウィンドウにコードが入った見栄えの良い画像を作るサービス

今週の気になるWebネタ

バルミューダ，開発中の5Gスマホの外観をチラ見せ 11月16日に発表へ - ITmedia NEWShttps://www.itmedia.co.jp/news/articles/2111/08/news099.html

バルミューダの作るスマートフォンの発表日がいよいよ迫っています。以前公開された背面画像に続きディスプレイ側の画像も登場しました。

日本メーカーのスマートフォンで話題になるものは最近あまりないので，バルミューダの参入で活性化するといいですね。Androidスマホである以上，端末メーカーができることは限られてくると思いますが，どういう特色を出してくるんでしょう。

扇風機，トースターと生活家電でヒットを連発しているバルミューダの，ハイテク製品に特化した新ブランド「BALMUDA Technologies」の第1弾製品でもあるこのスマートフォン。第2弾，3弾につながるヒットになるのか注目しています。

Webテク, Webデザイン, Web広告, UI, Tailwind CSS, メールデザイン, Figma, コード, SNS, スマートフォン, バルミューダ

著者プロフィール

アシカガコウジ

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

http://bit.ly/ashikaganote