週刊Webテク通信

2021年9月第2週号 1位は,なぜユーザーはデザインリニューアルを嫌うのか,気になるネタは,デジタル庁発足 公式サイトにITエンジニアから反応続々「シンプル」「重い」「ロゴが丁寧」「苦労が見える」

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

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

1. Why do people hate redesigns?. Recently, Twitter unveiled a new design… | by Maria Panagiotidi | Aug, 2021 | UX Collectivehttps://uxdesign.cc/why-do-people-hate-redesigns-64c2b009cc32

なぜユーザーはデザインリニューアルを嫌うのかを,Twitterの新デザインへの反応を例に解説していました。やはり,デザインを変更すると反発の声が多いのは万国共通のようです。

長い間使い慣れているインターフェイスデザインが変更された場合,認知的負荷が増えてユーザーの満足度が低下するそうです。習慣を変えるのは難しく,変えるためには意識して操作する努力が必要で,それが苦痛を引き起こす可能性があるとのことでした。

ユーザーは物事を成し遂げたいだけでデザインを気にしないというのも,頭に入れておくべき点だと思いました。ほとんどの人はデザイナーほどデザインを分析したり評価したりしないので,必要なものをすぐ見つけられれば満足だということです。

デザインリニューアルする際に,ユーザーの反発を抑えるヒントもありました。

  • 設定で以前のバージョンも使えるようにする
  • より多くのユーザー調査を実施する
  • 少しずつ変更を加える

図1 なぜユーザーはデザインリニューアルを嫌うのか

図1 なぜユーザーはデザインリニューアルを嫌うのか

2. 3 Essential Design Trends, September 2021 | Webdesigner Depot Webdesigner Depot » Blog Archivehttps://www.webdesignerdepot.com/2021/08/3-essential-design-trends-september-2021/

Webデザインの重要なトレンドを事例とともに3つ紹介しています。

  1. 注意を惹くための角度
  2. 意外性のあるイラスト
  3. 3D要素による奥行き

1では日本のBakeのサイトが取り上げられていました。

図2 Webデザインの重要なトレンド3つ

図2 Webデザインの重要なトレンド3つ

3. Design Trend: Frosted Glass Effect in Web Design | Design Shackhttps://designshack.net/articles/trends/frosted-glass-effect-web-design/

Webデザインで,すりガラス効果が使われるケースを挙げています。

  • レイヤー分けされたデザイン要素
  • アイコンデザイン
  • カラフルな背景
  • カードスタイルのブロック
  • 主要なアート要素
  • フォームとボタンのアクセント
  • ソフトな背景レイヤー

図3 Webデザインでのすりガラス効果

図3 Webデザインでのすりガラス効果

4. 4 signs your product is not as accessible as you think | Dribbble Design Bloghttps://dribbble.com/stories/2021/08/30/signs-your-product-is-not-accessible

アクセシビリティについて考えられていない4つの兆候をまとめた記事です。

  1. アクセシビリティの原則を最初に定義していない
  2. アクセシビリティを1度設定すれば忘れていいものとして扱ってる
  3. アクセシビリティツールを試していない
  4. ユーザーと会話していない

この記事でアクセシビリティについてa11yと表記しているのですが,Accessibilityがaとyの間に11文字あるからだそうです。

図4 アクセシビリティについて考えられていない4つの兆候

図4 アクセシビリティについて考えられていない4つの兆候

5. Interactive Learning Tools For Front-End Developers — Smashing Magazinehttps://www.smashingmagazine.com/2021/09/interactive-learning-tools-front-end-developers/

フロントエンドに関する技術を学ぶための,インタラクティブな学習ツールをまとめた記事です。

ゲーム感覚で,CSS FlexboxやCSSグリッド,CSSアニメーションなどを学べます。ほかにもJavaScriptやSQL,正規表現などを学ぶツールもありました。

図5 フロントエンドを学ぶインタラクティブな学習ツールいろいろ

図5 フロントエンドを学ぶインタラクティブな学習ツールいろいろ

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

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

couleur.io → Harmonizing Color Palettes for Your Web Projectshttps://couleur.io

couleur.ioはカラーパレットを作るサービスです。ベースとなる色を選ぶと,調和の取れた配色を自動で生成します。

その生成したパレットを使ったWebデザインのサンプル表示を見て判断できるので便利です。サンプル表示は通常モードとダークモードの2種類表示されます。ベース色の明るさ/暗さを変えた10色のパレットが作られ,アクセントカラーは7色の候補から選択できます。

作ったパレットはCSS変数を使ったコードとして入手できます。シンプルでサンプル表示もわかりやすいので,初心者の学習や色選びについてレクチャーするときなどにも便利だと思いました。

図6 調和の取れた配色を自動で作れるサービス

図6 調和の取れた配色を自動で作れるサービス

今週の気になるWebネタ

デジタル庁発足 公式サイトにITエンジニアから反応続々「シンプル」「重い」「ロゴが丁寧」「苦労が見える」(1/2ページ) - ITmedia NEWShttps://www.itmedia.co.jp/news/articles/2109/01/news174.html

デジタル庁が発足し,良い意味でも悪い意味でもいろいろと話題になっています。公式サイトはノーコードWebサイト作成ツールのSTUDIOで作られていますが,日本のサービスだからという理由もあるのでしょう。

サイト公開後のTwitterでのいろいろな指摘に対して,即修正したのは好感度アップに繋がったんじゃないでしょうか。改修状況は公式のnoteで発表したのとこと。やはり日本のサービスを使っていますね。

なお,別の記事によると,今はSTUDIOを使っているけどCMSでの構築も進めており,いずれ移行する予定だそうです。まずは立ち上げることを優先し,そのあとより良いツールに乗り換えていくという姿勢が,デジタルのことをわかってる感があって良いなと思いました。

著者プロフィール

アシカガコウジ

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

http://bit.ly/ashikaganote