Skip to content

Vol.260

The ultimate guide to proper use of animation in UX permalink

適切なアニメーションを使用するために permalink

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

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

Drag–and–Drop: How to Design for Ease of Use permalink

ドラッグ・アンド・ドロップのUIデザイン permalink

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

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

Why the GOV.UK Design System team changed the input type for numbers - Technology in government permalink

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

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

CSS Tutorial: Create Diagonal Layouts Like It's 2020 permalink

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

Inconsistent user-experiences with native lazy-loading images | Ctrl blog permalink

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

In Brief