週刊Webテク通信

2022年2月第2週号 1位は,インクルーシブデザインについて,気になるネタは,Google,Chromeブラウザのロゴを8年ぶりに変更

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

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

1. Inclusive Designhttps://www.nngroup.com/articles/inclusive-design/

最近目にすることの増えた,インクルーシブデザインについて解説した記事です。インクルーシブデザインは,あらゆるバックグラウンド・能力の人々が理解して使える製品を作るための方法論です。アクセシビリティ,年齢,文化,経済状況,教育,性別,地理的位置,言語,人種などに配慮します。

インクルーシブデザインの例として,以下の項目で解説していました。

  • 年配ユーザーのための文字の視認性とダークモード
  • グローバールなユーザーのための名字の入力
  • さまざまな人口統計学的識別子(人種,性別,性的指向など)
  • 包括的ファセット(Facet/****一面,側面)
  • 多様なイラスト

図1 インクルーシブデザインについて

図1 インクルーシブデザインについて

2. How to help bridge the gap between UX design and code | by Karine Sabatier | Feb, 2022 | UX Collectivehttps://uxdesign.cc/how-to-help-bridge-the-gap-between-ux-design-and-code-1b4442604bd9

UXデザインとコードの間のギャップを埋める方法を紹介しています。デザイナーとコーダーの橋渡しをFigmaを使ってうまく行うためのヒントです。

  • 全てに名前を付ける。早く名前を付けて頻繁に変更する
  • ページにも名前を付ける
  • コンポーネントに名前を付ける
  • バージョン管理を使う
  • ライブラリを使う(Figmaのチームプランで)
  • クリーンな状態を保つ
  • コードからのリバースデザイン
  • 毎週のUXミーティングを計画する

図2 UXデザインとコードの間のギャップを埋める方法

図2 UXデザインとコードの間のギャップを埋める方法

3. 10 Design Trends to Watch Out for in 2022https://qodeinteractive.com/magazine/design-trends-to-watch-out-for/

2022年に注目すべきデザイントレンドを10個まとめています。

  • セリフディスプレイフォント
  • クロムとリキッドメタル
  • プラスチック,流体,成形品
  • ヒーロー動画
  • 3Dグラフィックス
  • 大胆な色と組合せ
  • ボーダーとグリッド
  • 動的タイポグラフィ
  • 独創的なポインター
  • スクロール効果

図3 2022年に注目すべき10のデザイントレンド

図3 2022年に注目すべき10のデザイントレンド

4. How to Use Hand-Drawn Elements in Web Design | Webdesigner Depot Webdesigner Depot » Blog Archivehttps://www.webdesignerdepot.com/2022/02/how-to-use-hand-drawn-elements-in-web-design/

手書きの要素をWebデザインで使用する利点とヒントを紹介しています。

利点としては以下の3つが挙げられていました。

  • 記憶に残りやすい
  • ブランドの個性を表せる
  • 差別化できる

図4 手書きの要素をWebデザインで利用する利点とヒント

図4 手書きの要素をWebデザインで利用する利点とヒント

5. 12 Incredible YouTube Channels That Improve Your Design Skillshttps://vector.cx/12-incredible-youtube-channels-that-improve-your-design/

デザインスキルの向上に役立つ12のYouTubeチャンネルをまとめた記事です。

PhotoshopやAdobe XD,Figmaなどのグラフィックツールのテクニックや,モーショングラフィックス,3Dグラフィックス,iPadでのイラスト作成を学べる動画など盛りだくさんです。

図5 デザインスキル向上に役立つ12のYouTubeチャンネル

図5 デザインスキル向上に役立つ12のYouTubeチャンネル

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

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

Reaktr | Generate audio-reactive video on browser.https://reaktr.vercel.app/

Reaktrは音声ファイルを元に動画を作るサービスです。オリジナルの楽曲やポッドキャストをYouTubeにアップするための動画作りに役立ちそうです。

音声ファイルと背景用の画像か動画をアップロードします。音声の波形に合わせて変化するグラフィックは2種類から選べ,色をカスタマイズできます。タイトルと作者をテキストで入れられて,フォントやサイズを調整可能です。

背景用に画像や動画を無料で入手できる素材サイトPixabayへのリンクもあって親切です。全て英語ですが,日本人が個人で開発しているようです。

図6 音声ファイルを元に動画を作れるサービス

図6 音声ファイルを元に動画を作れるサービス

今週の気になるWebネタ

Google,Chromeブラウザのロゴを8年ぶりに変更 - ITmedia NEWShttps://www.itmedia.co.jp/news/articles/2202/05/news046.html

Chromeのロゴ/アイコンが実に8年ぶりに変更されます。真ん中の青い丸が大きくなっており,微妙に入っていたシャドウがなくなっています。

赤と緑が隣接したときのなじみをよくするためにグラデーションを使うなど,細かい工夫をしているとのことです。また,OSに合わせてアイコンの微調整もしています。

2011年に立体的なロゴからフラットなものに変わったときにも,このコーナーでネタにしていました。もう初代の2008年版ロゴを知らない世代も多いでしょうが,一周回って初代ロゴも新鮮で良いようにも感じますね。

著者プロフィール

アシカガコウジ

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

http://bit.ly/ashikaganote