週刊Webテク通信

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

ネットで見かけた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 音声ファイルを元に動画を作れるサービス

おすすめ記事

記事・ニュース一覧