週刊Webテク通信

2021年9月第3週号 1位は，柔軟性のあるコンポーネントを作る方法，気になるネタは，Facebookのスマートグラス「Ray-Ban Stories」発売 299ドルから

Webテク, Webデザイン, Web広告, UI.Chrome拡張機能, フォームサービス, スマートグラス

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

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

1. Developer Decisions For Building Flexible Components — Smashing Magazinehttps://www.smashingmagazine.com/2021/09/developer-decisions-building-flexible-components/

柔軟なコンポーネントを作る方法を説明した記事です。シンプルなデザインとそれをコードにする最適な方法の決定プロセスを解説しています。

レイアウトのアクセシビリティや画像の縦横比，テキストの長さ，見出しの長さ，複数のリンク，ビデオコンテンツのアクセシビリティなど，いろいろなことを考慮してフレキシブルなコンポーネントを考えていくステップが参考になります。

図1　柔軟性のあるコンポーネントを作る方法

図1　柔軟性のあるコンポーネントを作る方法

2. Six web design trends creatives need to prepare for in 2022 | Creative Boomhttps://www.creativeboom.com/features/six-web-design-trends-to-expect-in-2022/

2022年に向けて準備しておく必要がある，Webデザインのトレンドを6つまとめた記事です。

それぞれの項目の例として取り上げているサイトもクオリティの高いものばかりです。

  1. 楽しさと楽観主義
  2. 心のこもったWebデザイン
  3. 落ち着いたアースカラー
  4. 3Dデザインとマルチメディア
  5. スクロールでストーリーを見せる
  6. 限界を超えたインタラクティブデザイン

図2　Webデザインのトレンドを6つ

図2　Webデザインのトレンドを6つ

3. 10 fundamental UI design principles you need to know | Dribbble Design Bloghttps://dribbble.com/stories/2021/09/07/10-fundamental-ui-design-principles-you-need-to-know

知っておきたいUIデザインの基本原則を10個まとめた記事です。

  1. UIデザインをシンプルに保つ
  2. 予測と先取り
  3. ユーザーを運転席に座らせる
  4. 系統的かつ一貫性を保つ
  5. 必要のない複雑さは避ける
  6. 明確な道しるべを提供する
  7. 間違いに寛容であること
  8. 適切なフィードバックを与える
  9. 機能に優先順位をつける
  10. アクセシビリティを考慮したUIの設計

図3　UIデザインの基本原則10選

図3　UIデザインの基本原則10選

4. 15 Great Chrome Extensions for Web Designers and Developershttps://www.awwwards.com/15-great-chrome-extensions-for-web-designers-and-developers.html

Webデザイナー，開発者のためのChrome拡張機能をまとめた記事です。サイトに使われているフォントを調べるもの，ページ内のSVGや画像を一括ダウンロードするものなど15個の拡張機能が掲載されています。

Webページをレイヤー分けされたFigmaデータに変換する拡張機能もありました。

図4　Chrome拡張機能いろいろ

図4　Chrome拡張機能いろいろ

5. Inspirational Websites Roundup #29 | Codropshttps://tympanus.net/codrops/2021/09/07/inspirational-websites-roundup-29/

インスピレーションを得られるWebサイトのコレクションです。実験的なレイアウトと遊び心のあるタイポグラフィを兼ね備えた楽しいサイトが多いようです。

ウクライナの独立30周年を祝うサイトも掲載されていました。かなりポップで幾何学的図形が多用されたサイトでした。

図5　インスピレーションを得られるWebサイトのコレクション

図5　インスピレーションを得られるWebサイトのコレクション

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

Webテク, Webデザイン, Web広告, UI.Chrome拡張機能, フォームサービス, スマートグラス

著者プロフィール

アシカガコウジ

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

http://bit.ly/ashikaganote