こんにちは！KEPPLE CREATORS LAB エンジニアの吉田です。
私たちは、月に１度フロントエンドに関連する勉強会をゆるく開催しています。
JavaScript Tech Talk は、2023年12月から実施していましたが、せっかくなのでブログ化して共有しよう！ということから今回の記事がスタートしました。
今後は月に1度投稿する予定です！
今回の内容
Figma Code Connect
デザインとコードの整合性をリアルタイムで保つためのベータ版機能です。
これにより、Figma上のコンポーネントと実際のコードの差異を検出し、修正が可能になります。
これは、多くの方々が待ち望んでいた機能な気がしますね！
多くの人は、以下のような経験があるのではないでしょうか。
Figma Code Connectは、このような課題を解決し、以下のメリットを提供します。
- コードの修正がFigmaに自動反映されるため、相違点を早期に発見でき、デザインと実装の一致が保たれます。
- デザイナーとエンジニアの間でデザインの誤差が減り、スムーズなコミュニケーションが可能になります。
まとめ
Figma Code Connectはまだベータ版であり、デザインと実際のブラウザ表示にズレが生じる可能性があるため、実用化までは様子を見ようと考えています。
しかし、コードとデザインの同期やデザインシステムの分析、更新承認フローの改善などの機能拡張に注力しており、チーム全体でデザインシステムの適切なレビューと調整が可能になる日が楽しみです。
HTML/CSSを使ったユーザビリティとアクセシビリティの向上
前々回のJavaScript Tech TalkでもCSSの進化が話題になりましたが、2024年6月4日からのウェブアクセシビリティ義務化により、さらに注目が集まっているようです。
今回は以下の記事を参考に、ウェブアクセシビリティについて議論しました。
少しの記述でユーザビリティやアクセシビリティを向上させるHTML/CSSテクニック集
モバイルデバイスでの誤操作防止
1. touch-action:manipulation を指定する
iOSでbutton要素をダブルタップすると画面が拡大表示される問題がありますが、その現象を回避するためにtouch-action: manipulation を指定すると、標準外の追加ジェスチャーを無効にし、アクセシビリティを向上させることができます。
ちなみに、弊社のPjMは一度もこの問題を経験したことがないと豪語していました（笑）
See the Pen touch-action: manipulation; by Ryotaro Yoshida (@Ryotaro-Yoshida) on CodePen.
2. overflow:auto を指定している要素には overscroll-behavior:contain も指定する
弊社では、モバイルデバイスでの誤操作防止のため、以下のCSSプロパティ設定を必須としています。
overflow: auto ：内容がボックスを超えた場合にスクロールバーを表示する。
overscroll-behavior: contain：スクロールが親要素やビュー全体に波及しないように制御する。
これにより、タップ操作時のオーバーフロー管理とスクロール効果の調整を行い、ユーザビリティを向上させます。
See the Pen overscroll-behavior: contain; by Ryotaro Yoshida (@Ryotaro-Yoshida) on CodePen.
3. ホバー時のスタイルは any-hover メディア特性内に指定する
タップ操作とポインター操作を区別し、any-hoverでタップデバイスのホバーアクションを無効にできます。弊社のメディア（KEPPLE）でもこのプロパティの導入を検討中です！
現在、以下のGIFのようにタップ操作でホバーが表示され、ユーザーが誤解する可能性があるため、改善が必要です。
フォーカスインジケーターは :focus:not(:focus-visible) を指定する。
:focus-visibleは、要素にフォーカスが必要な場合に適用される擬似クラスです。
デザインの一部ではないため、変更する必要はないという意見や、デザインに考慮していないから削除したくなるという意見があったりと社内でも様々な意見がありました。
デザインの一部と見なすかどうかで、意見が分かれましたが、今回の JavaScript Tech Talk では結論には至りませんでしたので、継続的に話していきたいです。
// 参考例
button {
padding: 10px 20px; font-size: 16px;
}
button:focus-visible {
outline: 2px solid blue; background-color: lightblue;
}まとめ
HTMLとCSSを使ったユーザビリティとアクセシビリティ向上の具体的なテクニックについて議論しました。
ケップルのエンジニアが様々な局面でウェブアクセシビリティを考慮している様子が垣間見え、印象深かったです！
これらのテクニックを活用することで高品質なユーザー体験を提供できるため、JavaScript Tech Talkの意義を感じました。
最後までご覧いただきありがとうございました！少しでも皆さんのプラスになれば幸いです！
