週刊Webテク通信

2021年12月第3週号 1位は，ダークUIをデザインするためのベストプラクティス，気になるネタは，「Microsoft Edge」で「Google Chrome」を検索・ダウンロードしようとすると広告がうざいと話題に

Webテク, Webデザイン, Web広告, ダークUI, CSS, UX, HTML, CSS, JavaScript, フローチャート, Webブラウザ

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

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

1. Dark UI design best practices. Designing a dark theme UI comes with… | by Miklos Philips | Dec, 2021 | UX Collectivehttps://uxdesign.cc/dark-ui-design-principles-and-best-practices-9b9061b86e1

ダークUIをデザインするためのベストプラクティスを解説した記事です。あくまでも白い背景に黒いテキストの方が読みやすいのを前提として，それでもダークUIを使えるケースでは選択肢にできるといったニュアンスでした。

ダークUIを使用しても問題がない場合
  • 印象的なビジュアルのために力強くドラマチックな外観を実現するため
  • ブランディングのための配色として必要な場合
  • 感情を刺激するため（謎めいた感じなど）
  • 高級感と威信を演出したい場合
  • 気を散らす要素を減らし，ユーザーの注意を集中させるため
  • 夜間の娯楽など，状況や用途に適している場合
  • 夜間のエンターテインメントアプリなど，特定の状況をサポートするため
ダークUIを避けた方がよい場合
  • 文字数が多い場合（暗い背景では読みづらい）
  • ブランドに合わないとき
  • 様々な種類のコンテンツが混在する場合
  • 多くのフォーム，コンポーネント，ウィジェットがあるB2Bアプリケーションの場合
  • 幅広い色を必要とするデザインの場合

図1　ダークUIをデザインするためのベストプラクティス

図1　ダークUIをデザインするためのベストプラクティス

2. Top 5 Web Design Trends That Will Stick in 2022 | Web Resources | WebAppershttps://www.webappers.com/2021/12/09/top-5-web-design-trends-for-2022/

2022年に定着する5つのWebデザインのトレンドを紹介しています。

  1. 没入感のあるイメージデザインがより多くの行動を促す
  2. タイポグラフィを変えることでコンテンツに焦点を当てる
  3. 線画の背景が便利なガイドとして機能する
  4. インタラクティブなグラフィックスがより多くのコンテキストを与える
  5. ポジティブなカラーパレットを使用して適切な雰囲気を伝える

図2　2022年に定着する5つのWebデザインのトレンド

図2　2022年に定着する5つのWebデザインのトレンド

3. Defensive CSS - Ahmad Shadeedhttps://ishadeed.com/article/defensive-css/

問題が発生するのを未然に防ぐためのCSSの記述例を多数紹介した記事です。

横並びのアイテムの数が増えたときや，見出しの文字数多くなった場合などに，レイアウトが崩れないようにする工夫を解説しています。特にFlexboxとCSS Gridでのテクニックは参考になると思います。

図3　問題が発生するのを未然に防ぐためのCSSテクニック

図3　問題が発生するのを未然に防ぐためのCSSテクニック

4. UX Trends in 2021 - DEV Communityhttps://dev.to/ruppysuppy/ux-trends-in-2021-19pj

2021年のUXデザインのトレンドをまとめた記事です。

  • ダークモード
  • 3D Webサイト
  • ミニマルなUI
  • マイクロインタラクション
  • いろいろな「モーフィズム」（⁠グラスモーフィズム，ネオモーフィズムなど）

図4　2021年のUXデザインのトレンド

図4　2021年のUXデザインのトレンド

5. 34 HTML Tabs Example For Web Developmenthttps://us.niemvuilaptrinh.com/article/34-html-tabs-example-for-web-development

タブのHTML＆CSS＆JavaScriptのコードを多数紹介しています。JavaScriptは使っていないものもありました。

切り替わりのアニメーションに工夫のあるものなどが参考になりそうです。

図5　タブのHTML＆CSS＆JSのコードを多数紹介

図5　タブのHTML＆CSS＆JSのコードを多数紹介

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

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

The Simplest Free Flowchart Maker | Zen Flowchart - Online Creatorhttps://www.zenflowchart.com/flowchart-jp

Zen Flowchartはフローチャートを簡単に作れるサービスです。フローチャートだけに機能を絞ったMiroやWhimsicalのようなイメージです。

作ったフローチャートをリンクで共有したり，同時に複数人で編集できるなど，今どきのツールとしてのポイントは押さえています。シンプルで操作もわかりやすく，誰が使ってもキレイなフローチャートが作れそうです。

無料プランではドキュメントを3つまで作れます。書き出しはJPEGかPNGだけで，これは今のところプロプランでも同じようです。同時に複数人で編集できる機能は，月6.5ドルのプロプランでしか使えません。

図6　フローチャートを簡単に作れるサービス

図6　フローチャートを簡単に作れるサービス

今週の気になるWebネタ

「Microsoft Edge」で「Google Chrome」を検索・ダウンロードしようとすると広告がうざいと話題に - やじうまの杜 - 窓の杜https://forest.watch.impress.co.jp/docs/serial/yajiuma/1372603.html

Microsoft Edgeで「Google Chrome」を検索すると「新しいWebブラウザーをダウンロードする必要はありません」とメッセージが現れることが話題になっていました。Bing検索のときに表示されるプロモーション（広告）だそうです。

Windows 11ではファイルの種類およびプロトコル単位でアプリごとに既定値を設定する必要があり，デフォルトのブラウザをEdgeからほかのブラウザに変えるのも面倒になっているようです。EdgeとBingの利用率を上げようというMicrosoftの思惑が感じ取れます。

Macユーザーだとあまり馴染みのないBingですが，そういった理由で利用者が増えているかもしれないことを頭に入れておいた方が良さそうです。試しに久しぶりにBingで検索してみたところ，ブラウザをマイクロソフト製に切り替えることを促すポップアップが出てきました（Mac版のEdgeもあります⁠）⁠。

Webテク, Webデザイン, Web広告, ダークUI, CSS, UX, HTML, CSS, JavaScript, フローチャート, Webブラウザ

著者プロフィール

アシカガコウジ

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

http://bit.ly/ashikaganote