Skip to content

Vol.282

Kota Furusawa

Building greater accessibility into Facebook.com - Facebook Engineering Jump to heading

Facebook のアクセシビリティを改善した方法 Jump to heading

facebook.com がどのように Web サイトのアクセシビリティを改善したかを紹介する。Facebook2004 年に公開されて以降様々な実装を重ねてきたため、大規模で複雑なサイトになっており、リグレッション無しで広範囲の修正を施すことが難しくなってしまっていたが、React を利用してアクセシビリティの改善や新しいツールの導入ができるようになっていったという。

  • Linting と Flow
  • 拡大可能なフォントサイズ
  • コンテキストに応じた見出し
  • コンテキストに応じたキーボード操作
  • ランタイム分析
  • アクセシブルコンポーネント
  • フォーカスマネジメント
  • スクリーンリーダー通知

The Guide to Design Jump to heading

プロダクトデザインビギナーズガイド Jump to heading

UX Collective では、デジタルプロダクトデザインへの最初の一歩を支援する無料のクラスを公開している。いわゆる「5 つの簡単なステップでペルソナを作成する方法」のようなチュートリアルではなく、デザイナーとして役立つメソッドを紹介し、それらをいつどのように効果的に使用するかを解説する。

  1. なぜいまデザインを学ぶのか
  2. 業界について
  3. デザインとは
  4. 目的とコミュニティ
  5. 情報の設計
  6. ユーザーとの対話
  7. 形と機能のバランス
  8. デザイナーの仕事
  9. 先に進むために

Design Principles to Support Better Decision Making Jump to heading

意思決定をサポートするためのデザイン原則 Jump to heading

プロダクトを設計する際に、ミニマルなデザインにするか、それとも使いやすいデザインにするかなど、トレードオフを伴う意思決定をする場面が多く存在する。こういった意思決定をサポートするための方法として、デザイン原則を設けておくという方法がある。デザイン原則は、ユーザーに提供する必要がある最も重要な目標をまとめたものであり、チームの意思決定の一貫性をサポートする。このデザイン原則を作るためには以下のステップを踏む:

  1. コアバリューを明確にする
  2. コアバリューがユーザーにどのようにインパクトを与えるかを考える
  3. トレードオフを明確にする
  4. 書き出し、他の人が書いたデザイン原則と比較をする

content-visibility: the new CSS property that boosts your rendering performance Jump to heading

Chromium 85 でリリースされる content-visibility プロパティについて。content-visibility を使用することで、必要になるまで、要素のレンダリング作業（レイアウトやペイントなど）をスキップすることができ、パフォーマンスを向上させることができる。

Designing Adaptive Components, Beyond Responsive Breakpoints by Stéphanie Walter - UX designer & Mobile Expert. Jump to heading

レスポンシブデザインでは、画面幅に応じて状態を変化させるが、Adaptive コンポーネントの考え方では、さまざまなレイアウトやコンテナに適応できる再利用可能なコンポーネントを設計することを考える。この記事では、Adaptive Component と呼ばれる、コンポーネントの設計手法について解説を行う。Adaptive コンポーネントを設計においては、コンテンツモデルの用意、バリエーションの確認、再利用される場所の検討、それをドキュメント化すること、などが重要な要素として挙げられる。また、実装時には理想的なコンテンツを使ってテストを行いがちだが、非常に長いテキスト、データが欠落している場合などの、完全ではない状態も含めて実装することが重要である。

In Brief Jump to heading