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

1. User Experience: Insights Into Consistency in Designhttps://blog.tubikstudio.com/design-consistency/

デザインの一貫性についてまとめた記事です。なぜ重要なのか，どのような一貫性の種類があるのか，具体的にどう実現するのかを解説しています。

デザインの一貫性が重要な理由

• 新しいユーザーにとってユーザーインターフェイスを学習しやすい
• ユーザーの混乱を減らすのでエラーが少なくなる
• ユーザーの認知的な負荷を減らし時間と労力を節約する
• 一貫性はWebサイトやアプリケーションのブランドイメージを強力にする

2. The UI & UX Tips Collection: Volume One. | Marc Andrewhttps://marcandrew.me/ui-ux-tips-collection-vol-one/

UI＆UXのヒントをまとめた記事です。

第1弾として34個紹介していましたが，ここでは最初の10個を紹介します。

1. わずかな境界線で要素をより明確にする
2. 見出しの文字間隔を詰めて見た目のバランスを良くする
3. 一貫性を保つために同じスタイルのアイコンを使う
4. 1種類のタイプフェイスを使うだけで十分
5. ホワイトスペースはUIデザインの友達。たっぷり使う。うまく使う
6. 長いコンテンツのときは文字サイズ20ptを試してみる
7. タイプスケールを使って調和の取れたフォントサイズを定義する
8. 均一感を持たせるため，ベースカラーを元に色を決める
9. ユーザーが初めて使うときのガイドで経験を向上させる
10. 影がひとつの光源から来ているようにする

3. UI Interactions & Animations Roundup #12 | Codropshttps://tympanus.net/codrops/2020/11/17/ui-interactions-animations-roundup-12/

UIインタラクションとアニメーションの面白い例を，dribbbleからまとめています。

アイコンアニメーション，テキストワープ，3D回転の効果がトレンドとのことでした。

4. Behind the feature: the making of the new Auto Layouthttps://www.figma.com/blog/behind-the-feature-the-making-of-the-new-auto-layout/

グラフィックツールのFigmaのオートレイアウトが新しくなりました。

この公式の記事は，オートレイアウトのコンセプトや歴史を説明して，どういう経緯で機能強化していったかのメイキングです。

5. Tailwind CSS v2.0 – Tailwind CSShttps://blog.tailwindcss.com/tailwindcss-v2

ユーティリティファーストのCSSフレームワークTailwind CSSが2.0になりました。この公式の記事では，バージョン2.0での新機能を紹介しています。

Bootstrap 5もそうですが，Tailwind CSS v2.0もIE11をサポートしていません。いよいよIE対応を切り捨てる時代が来たことを実感しますね。

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

• Zoom，荒らしなどで会議を妨害されるリスクを通知する新機能 - CNET Japan
  SNSなどにZoom会議へのリンクが書き込まれてないかをチェックするそうです
• Apple，App Storeの手数料率を15％に 年間収益100万ドル以内の事業者が対象 - ITmedia Mobile
  年間収益が100万ドル（約1億400万円）以内の「小規模事業者」対象とのこと
• BASE，クラウドファンディング運営のCAMPFIREと資本業務提携 サービスの相互利用促進 | マイナビニュース
  香取慎吾がCMしてるBASEと草なぎ剛がCMしてるCAMPFIREが資本提携です

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

Bubbles: Video and Screenshot Collaborationhttps://www.usebubbles.com/

BubblesはWebページのスクリーンショットかスクリーンキャストを撮って，コメントを付けて共有できるサービスです。Webサイトの校正などに使うためのもので，Chromeの拡張機能として提供されています。

スクリーンショットの特定の箇所にコメントを付けられるサービスはたくさんありますが，画面操作の動画を撮ってコメントできるのは珍しいと思います。しかもユーザー登録不要で手軽に使えて完全無料というありがたいサービスです。

動画の撮影時には音声も収録できるので，Webページをスクロールしたり操作しながら喋りで説明を入れられます。ページ遷移も1つの動画にまとめられるので便利だと思いました。