Skip to content

Vol.241

Kota Furusawa

Want to Improve UI Performance? Start by Understanding Your User by Darren Hebner Jump to heading

ユーザーへの理解を深め、UIパフォーマンスを向上させる Jump to heading

Shopifyにおける、マーケティング部門のパフォーマンス改善について詳しく掘り下げる。UIの改善については、ユーザーがページにアクセスしたときに何を達成しようとしているのかを明確にし、それをブロックすような要素を排除するという考え方が大事であるという。また、実際に行っている改善方法について紹介する。

  • 実際に利用が想定されるデバイス、環境でテストを行う
  • 優先度の低い、コンポーネントのやコードの実行を後回しにする
  • スケルトン表示を行い、ロード時間の体験を改善する

Performance metrics for blazingly fast web apps by Conrad Irwin Jump to heading

高速なWebアプリのためのパフォーマンスメトリクス Jump to heading

高速なWebアプリを構築するためのパフォーマンスメトリクスを定義する方法について紹介をする

  1. 正確な計測を行う
  2. マシンがフォアグラウンドであることを確かにする
  3. 最適なイベントの開始時間を見つける
  4. requestAnimationFrame() で終える
  5. レイアウト、ペイントタイムを無視する
  6. 目標を下回っているイベントの割合を計測する
  7. 複数のしきい値を用いる

Designing accessible color systems by Daryl Koopersmith and Wilson Miner Jump to heading

アクセシブルなカラーシステムを設計する Jump to heading

色のコントラストはアクセシビリティの重要な側面であり、良いコントラストで表示することで、視覚障害のある人がプロダクトを利用しやすくなる。この記事では、アクセシビリティを考慮しつつも鮮やかなカラーシステムを作成するまでの過程を紹介する

Can we please style the <select> control?! by Greg Whitworth Jump to heading

ある調査において、select 及び option 要素ののスタイリングは非常に面倒であると回答する人が非常に多いことが分かった。この問題について検証したところ、彼らが作成しようとしているselectのUIは、完全にゼロからスタイリングする必要があり、非テキストのコンテンツを挿入するものや、サブパーツとのインタラクションが求められるものであった。この現状について、セマンティクスさやアクセシビリティの観点からどういった問題があるかについて考察していく。

Design Systems for Developers by Dominic Nguyen and Tom Coleman Jump to heading

コンポーネントライブラリをデザインシステムに変換する方法と、フロントエンドチームの生産インフラをセットアップする方法について紹介する。具体的には、Storybookを用いて、コアサービス、ライブラリ、およびワークフローのセットアップの順に進め、ゼロから大規模なデザインシステムを設計する方法を解説していく。

In Brief Jump to heading