$30 off During Our Annual Pro Sale. View Details »

ユーザーのペルソナを元にしたアクセシビリティガイドラインを作りたいというアイデア - レバレジーズ x ココナラ x ニフティ 合同フロントエンド勉強会

ユーザーのペルソナを元にしたアクセシビリティガイドラインを作りたいというアイデア - レバレジーズ x ココナラ x ニフティ 合同フロントエンド勉強会

ニフティ株式会社

July 21, 2023
Tweet

More Decks by ニフティ株式会社

Other Decks in Design

Transcript

  1. ユーザーのペルソナを元にした
    アクセシビリティガイドラインを作
    りたいというアイデア
    ニフティ株式会社
    HOTAKE a.k.a 関歩武

    View Slide

  2. 自己紹介
    後述するポイントサイトの開発、運用
    フロントエンド関係は業務ではあまり触れてい
    ません
    自分で興味があり勉強しています
    NAME: HOTAKE(関 歩武)

    View Slide

  3. 担当サービス
    運営実績20年以上、累計会員数330万人以上の「ポイントサイト」
    の紹介

    View Slide

  4. 今日話すこと

    View Slide

  5. 今日話すこと
    社内のWEBアクセシビリティガイドラインを作りたいよねという話

    View Slide

  6. Webアクセシビリティってなんだ?
    Webアクセシビリティ = Webページにある情報や機能の利用しやすさ
    様々な人々
    様々な状況(デバイス)

    View Slide

  7. Webアクセシビリティってなんだ?
    Webアクセシビリティ = Webページにある情報や機能の利用しやすさ
    様々な人々
    様々な状況(デバイス)
    どのような人、状況でも利用しやすい
    システムにする

    Webアクセシビリティを高めること

    View Slide

  8. 政府のサイトの使いやすさにも関わっている

    View Slide

  9. 君はどれくらいアクセシビリティの理解あるの?
    何冊か本読んだり、した程度のペーペー
    見えにくい、読みにくい「困った!」
    を解決するデザイン 

    デザイニング

    Webアクセシビリティ 

    インクルーシブ
    HTML+CSS&JavaScript 


    View Slide

  10. 全ての人に使いやすいという理念にマジ共感
    心持ち的には…

    View Slide

  11. 弊社はどうなのか?

    View Slide

  12. 社内でのアクセシビリティガイドライン
    2009年に作られたものがある
    メンテナンスされていない

    View Slide

  13. あらためて広めたいと思った
    ただ、回線の会社だし結構幅広いユーザーに使用されるサービスが多い
    改めてここら辺に力を入れるようにできたら良いよなぁ

    View Slide

  14. どんなことをやってきたか
    - 社内勉強会
    - 社内LT、外部LT
    - 社内ツールで使ったりとか

    View Slide

  15. 広まったと言えるか
    ちょこちょこ、気にかけている人は出てきている感じがある。
    ただ、自分含めて業務に取り入れられている人は…

    View Slide

  16. で、ガイドラインですよ
    各社色々なガイドラインを公開したりしている
    改めてこういうの作って社内で使えるようにすると良いかな
    f社 Y社
    C社

    View Slide

  17. 実際に政府のガイドラインをみてみる

    View Slide

  18. ただ、このガイドラインを
    提示してやってくれるか🤔

    View Slide

  19. 会社の発展のためにやらないといけない
    機能追加開発A
    やらないといけない案件開発 B
    やらないといけない案件開発 C
    アクセシブルな実装作業
    やらないといけない案件開発 D
    やらないといけない案件開発 E

    View Slide

  20. ビジネスサイドの人 エンジニアの人
    それ会社的に何でやんの ?
    利益になるのか?
    気にかける意味あんの ?

    View Slide

  21. もう一度政府のガイドラインをみてみる

    View Slide

  22. 図もあってわかりやすいけど…
    結構専門家向けな気がする
    具体的に何に繋がるのかわからない

    View Slide

  23. 世にガイドラインは結構存在する、けど
    基本的に専門家向け、優しくてもエンジニアやデザイナー向け
    ● タイトル(例: エラーメッセージはわかりやすく通知する)
    ● ルールの説明
    ○ どういうことをやらないといけないのか
    ○ なんのためなのか
    ● 実際の実装方法
    ビジネスサイドや知識ない人でもわかるようなものが少ない
    へぇー…そうなんだ

    View Slide

  24. 会社内に広げるには少し違うな

    View Slide

  25. 最近こんな本を読んだ
    この本、すごくよかった
    こういうユーザのこういう困ったを
    解決するためにこういうデザインをすると
    良いですよ、みたいなことが書いてある
    実際のユーザが見える!!
    見えにくい、読みにくい「困った!」を解決するデ
    ザイン


    View Slide

  26. W3Cのサイトにも例が存在する
    W3Cにもユーザの実例をまとめたものがある

    View Slide

  27. これ良いな
    実際のユーザを想像して、やらないといけないことがわかるし、
    どんなユーザに自分のサイトが使いにくいと思われるのか?みた
    いなところも確認しやすい

    View Slide

  28. ここら辺をもとに、もう少しHTML/CSS/TS(JS)で
    の実装方法などを追加して、ユーザの種別から
    確認できるガイドラインを作ったら良いかも

    View Slide

  29. それでやりたいと思っていること
    ユーザをベースとしたガイドラインの作成
    例えば年代別で以下のようにユーザのペルソナを作って、別々にページを用意して、そ
    こからやらないといけないアクセシビリティの実装方法やルールに繋げていく
    ● 太郎くん(5歳)
    ○ 幼稚園に通っていて、ひらがなを描けるようになってきた。会話では難しいことはわからないがある
    程度の意思疎通ができる
    ● 敏夫さん(30歳)
    ● 文枝さん(60歳)

    View Slide

  30. これによって
    ● どういうユーザのためにその施策を行うのか説明できる
    ○ このページでいう〇〇さんのようなユーザのために施策を行います
    ● 年齢のデータなどとの関連性から説明できる
    ○ 弊社のシステムでは 50代の人が多いのでその人たちのためにこのページに書かれているこの理
    由でこの施策を行います
    事業における必要性をビジネスサイドにも説明して、
    アクセシブルな開発がしやすくなる

    View Slide

  31. まずはさっきの本やサイトをベースに社内の勉強会で発表しな
    がら意見を聞いてまとめていきたい💪

    View Slide

  32. fin

    View Slide