メインコンテンツへスキップ
見出し画像

Jicooをより使いやすく - デザイナーが重視するアクセシビリティ

    今期でJicooに参画してから3Qが過ぎましたが、多岐にわたる機能を持つJicooにおいて、全てのユーザーがストレスなく利用できるUIを実現するためには、アクセシビリティへの深い配慮が不可欠だと気づきました。

    機能が豊富であるほど、UIは複雑になりがちであり、アクセシビリティが考慮されていない場合、ユーザーにとって利用が困難になる可能性があります。

    アクセシブルな製品開発を実現するためには、UIデザイナーとエンジニアの緊密な連携が不可欠です。デザイナーが意図したアクセシビリティ要件をエンジニアが正確に理解し、技術的な実現可能性を考慮しながら開発を進めることで、初めてアクセシブルな製品が完成します。

    この記事では、アクセシビリティの観点でJicooの機能についての紹介と、UIデザイナーとして普段意識していることに加え、これからの開発に向けてエンジニアとの連携で意識したい点についてご紹介します。


    アクセシビリティ勉強会からの学び:JicooのUIデザインへの応用


    ダークモードの必要性

    低視力の方や、明るい画面での作業が困難なユーザーにとって、ダークモードは視認性を向上させる有効な手段となります。背景色を暗く、文字色を明るくすることで、コントラストが調整され、目の負担を軽減する効果が期待できます。

    Jicooにおいても、ユーザーが自身の利用シーンや個々の好みに合わせて選択できるダークモードの実装を行なっています。https://www.jicoo.com/features/dark-mode

    画像

    これは、単なるデザインのトレンドとして捉えるのではなく、より多くのユーザーが快適にJicooを利用できるようになるための、重要なアクセシビリティ機能の一つと考えています。目の疲れやすさは個人差が大きく、ダークモードを提供することで、より幅広いユーザー層に対応できる可能性があります。


    ボタンの使い分けと視認性

    JicooのUIデザインではボタンの視覚的な区別を明確にしています。

    画像
    デザインシステムの一部


    ボタンはPrimary、 Secondary, 、Attentionなど状態でデザインシステム化し、それぞれの役割が一目でわかるように工夫しています。

    また、マウス操作だけでなく、タッチ操作やキーボード操作でも容易に操作できるよう、クリックやタップが可能な領域を十分に確保し、周囲の要素との間に適切な余白を設けることで、誤操作を防ぐように配慮しています。

    ここでは、単にユーザーが操作しづらいというだけでなく、特にスクリーンリーダーなどの支援技術を利用しているユーザーにとっては、操作が非常に困難になることがあります。明確な視覚的区別により、、直感的な操作を促し、アクセシビリティを向上させる上で重要な要素として考えられます。


    画面遷移の線形性

    Jicooの画面遷移は、ユーザーが現在どの位置にいるのか、そしてどのように操作を進めれば目的の画面に辿り着けるのかを理解しやすいように、論理的で一貫性のある流れを意識して設計しています。
    https://help.jicoo.com/ja/articles/7155120-%E4%BA%88%E7%B4%84%E3%83%9A%E3%83%BC%E3%82%B8%E3%82%92%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B

    例えば、予約の流れであれば、「日時選択」→「詳細入力」→「確認」→「完了」といった、段階的で予測可能な遷移となるように設計しています。

    予測可能な遷移を実現することで、ユーザーは迷うことなく操作を進めることができ、特に認知機能に課題のあるユーザーや、スクリーンリーダーを利用しているユーザーにとっては、アプリケーションの構造を把握しやすくなります。画面遷移が複雑で予測不可能だと、ユーザーは操作に戸惑い、サービスからの離脱に繋がる可能性もあります。


    SnackBarなどのフィードバックの視認性

    SnackBarなどの一時的なフィードバックメッセージは、ユーザーが操作の結果やシステムの状態を把握するために重要な役割を果たします。

    画像
    Jicooでは、積極的にSnackBarを導入しています

    Jicooでは、これらのメッセージがユーザーに確実に認識されるように、適切な表示時間と十分なコントラストを確保しています。

    特に重要なメッセージの場合は、より目立つ色を使用するなど、ユーザーの注意を引くための工夫も検討しています。システムからのフィードバックは、ユーザーが操作の結果を理解し、安心してサービスを利用するために不可欠です。


    開発に活かしていくために

    開発段階では、エンジニアとの定期的なチェックインとフィードバックを欠かさないようにします。

    UIデザイナーとして、実装されたアクセシビリティ機能を確認し、必要に応じて修正を依頼することで、最終的な製品の品質を高めることができます。一方で、エンジニアが直面する技術的な制約を理解し、常に協力的な姿勢で代替案を探ることも大切だと考えています。

    現状は、自身が学んで実践することしかできていませんが、来期はアクセシビリティに関する知識や情報を積極的にエンジニアチームと共有することも目標です。
    Jicooのデザイナーとして、チーム全体のアクセシビリティ意識を高め、勉強会や記事の紹介、意見交換などを通じて、チーム全体でアクセシブルな製品開発に取り組む文化を醸成していきたいと考えます。


    一緒に働きませんか?

    Jicooでは、一緒にプロダクトを作り上げる仲間を募集しています。
    もしご興味があれば、ぜひ一度お話しましょう!


    あなたへのおすすめ