Vol.260

The ultimate guide to proper use of animation in UX Jump to heading #

適切なアニメーションを使用するために Jump to heading #

この記事では、実用的なアニメーションについてのルールを明確に紹介していく。非常にボリュームはあるが、すべての主要な原則とルールを1か所に集まっており、インターフェースのアニメーションに関しては非常に広い範囲でカバーされているので必見。

• durationとspeed
• Easing
• アニメーションの制御

Drag–and–Drop: How to Design for Ease of Use Jump to heading #

ドラッグ・アンド・ドロップのUIデザイン Jump to heading #

ドラッグ・アンド・ドロップのUIはGUIでよく使われるUIであり、オブジェクトの並び替えや移動、サイズ変更などをする際に役に立つ。しかしながら、長距離での使用は効率が悪く、間違った操作を引き起こしてしまう可能性がある。この記事では、そういったドラッグ・アンド・ドロップの特徴をまとめながら、使いやすいUIを作るために必要な要素を紹介する。

• 適切なマイクロインタラクション
• 適切な記号表示
• 適切なフィードバック

Why the GOV.UK Design System team changed the input type for numbers - Technology in government Jump to heading #

なぜGOV.UKのデザインシステムチームはinputのtype="number"を使用しないのか Jump to heading #

GOV.UKのデザインシステムチームは簡単でアクセシブルなUIコンポーネントやパターンを公開している。この記事ではその中でもinputのtype="number"が数値入力フォームで使われていないことに着目し、それがなぜそうなっているのか、アクセシビリティやユーザビリティの観点などを考慮しながら考察を行う

CSS Tutorial: Create Diagonal Layouts Like It’s 2020 Jump to heading #

斜めセクションのデザインがどのようにCSSで実現されているか、その実装方法をゼロから丁寧に解説する

Inconsistent user-experiences with native lazy-loading images | Ctrl blog Jump to heading #

画像の遅延読み込み機能がブラウザネイティブでサポートされる件について、その機能の解説と、現状の各ブラウザのごとの挙動に違いがある点について指摘する

In Brief Jump to heading #

• Responsive Modular Typography Scales in CSS: レスポンシブなタイポグラフィを実現するためのアイディアを紹介

• The JavaScript Set Object | TypeOfNaN: Setオブジェクトについて、その特徴と使い方を紹介し、配列との違いについてなどを解説する

• Fixing memory leaks in web applications | Read the Tea Leaves: 貧弱なコードで書かれたSPAは容易にデバイスのメモリとバッテリを消費させることについて取り上げ、メモリリークを防ぐための観点・手法などを紹介する

• Stop Using ‘Drop-down’ | Adrian Roselli: "ドロップダウン"という言葉はUIの種類を表すのによく使われる言葉ではあるものの、表現があいまいであることを指摘し、ドロップダウンという名前によく含まれるUIとそれぞれの適切な名前、特徴をまとめる

• How To Use The HTML Drag-And-Drop API In React — Smashing Magazine: Reactでドラッグ・アンド・ドロップのファイルアップロードのUIを構築しながら、hooksでstateを管理する方法を学ぶ