グッドビーのフロントエンドクリエーション部が、社内のフロントエンドに対する取り組みをシリーズでお届けしています。第7弾となる今回のテーマは、「技術者が考える使いやすさ」です。
前回はデザインシステムとコンポーネント指向開発についてお伝えしました。使いやすさはデザインだけの話ではなく、実装の段階でも意識し続ける必要があります。本記事では、フロントエンドエンジニアの視点から、Webアクセシビリティとユーザー体験（UI/UX）にどう向き合っているかをご紹介します。

使いやすさは、デザインと実装のあいだにある

グッドビーが目指す使いやすさの最終目標は、「操作マニュアルのいらないシステムデザイン」です。【業務系システムだからこそストレスフリーなUI・UXを考え抜く】でもお伝えしたとおり、業務フローのヒアリングから画面設計を始め、頻繁に使う機能は目立たせ、滅多に触らない機能は意図的に控えめにする。こうしたUI/UXの設計は、デザイナーが担う領域です。
一方、エンジニアにとっての使いやすさとは、その設計意図をコードで正しく届けることでもあります。見た目どおりに表示するだけでなく、操作や情報の伝達が意図どおり機能するかまで含めて、品質を担保します。とくに Webアクセシビリティ は、実装の品質と切り離せない領域です。

Webアクセシビリティとは

Webアクセシビリティとは、個人差や利用環境の違いにかかわらず、誰もが情報にアクセスし操作できることを目指す考え方です。障害のある方だけのための対応ではなく、キーボード操作やスマートフォン利用、画面の明るさなど、多様なユーザーへの配慮を含みます。
UI/UXが「使いやすい・分かりやすいか」を問うのに対し、アクセシビリティは「使えない人を残さないか」を問います。コントラストやエラーの伝え方は両方に関わりますが、キーボード操作やスクリーンリーダー向けの情報構造などは、デザイン段階で検討されることもあれば、実装時に対応することもあります。

デザイナーが検討する「見え方」と「操作感」

グッドビーのデザイン部では、コントラストや文字サイズ、タップ領域の大きさといった視認性・操作性をデザインカンプの段階で検討しています。たとえば、テキストと背景の色の組み合わせが十分なコントラストを持っているか、エラー状態が色だけに頼らず文言でも伝わるか、といった点も確認します。これらはユーザー体験の向上と同時に、アクセシビリティの基盤にもなります。
操作端末に応じたレイアウトの切り替えも重要です。【業務系システムだからこそストレスフリーなUI・UXを考え抜く】で紹介した商品一覧のように、PCでは多くの情報を一度に見せ、スマートフォンでは指先で操作しやすい配置にするなど、ターゲットとなる利用シーンを明確にしたうえで、どこまで最適化するかをデザインと開発ですり合わせています。

既存のUIコンポーネントが担保する品質

デザインシステムに沿った既存のUIコンポーネントを使うことで、アクセシビリティの下限を担保できる場面があります。ボタン、入力フィールド、モーダルといった部品には、フォーカスリングの表示、無効状態の挙動、適切なHTML要素の選択といった実装が組み込まれており、画面ごとにゼロから対応する必要が減り、品質のばらつきも抑えられます。前回ご紹介したStorybookでのデザイン部レビューと合わせ、部品単位で品質を確認してから画面に組み込んでいます。

ターゲットを明確にし、「どこまでやるか」を提案する

アクセシビリティやUI/UXの改善には、理想と現実のバランスがあります。グッドビーでは、「誰が、どの環境で、どの頻度で使うのか」というターゲットを明確にし、優先度の高い改善から提案しています。社内の業務システムと公開サイトでは求められる水準が異なるため、お客様の事業フェーズや予算、運用体制に合わせて、現実的な落としどころを一緒に考えます。ターゲットと優先度が定まれば、限られた工数のなかで最も効果の大きい改善に集中できます。

おわりに

使いやすさは、デザイナーが描くUI/UXの意図と、エンジニアが届けるアクセシビリティを含む実装品質の両方で成り立ちます。デザイン段階での検討、既存コンポーネントによる品質の担保、ターゲットに応じた提案—この三つの姿勢で、グッドビーはお客様の事業成長に寄り添いながら、ユーザーに届く体験の質を高め続けていきます。