こんにちは。プロダクトデザイン部マネージャーの @cw-take です。
今年Chatworkのプロダクトデザイン部で「UIデザイナーのスキルマップ」をつくりました。
この記事では簡単なスキルマップの説明をした上で、アクセシビリティスキルを掘り下げて紹介したいと思います。
UIデザイナーのスキルマップ
スキルマップ作成の背景
新しいデザイナーの入社をきっかけに、今年プロダクトデザイン部では価値観の相互理解などお互いを知るための取り組みをおこなってきました。
「UIデザイナーのスキルマップ」をつくったのもこういった取り組みのひとつです。 スキルマップを使いUIデザイナーそれぞれが持つ強みを可視化し共有することで、 伸ばしたいスキルについてお互いが支援できる環境 をつくりたいと考えました。
スキルマップの12項目
スキルマップの項目は「プロダクトデザイナーのスキルマップを考えてみた : could」を参考にしました。
項目についてはチームで話し合いましたが、結果的には参考記事のスキルマップと同じ以下12項目となりました。
この記事ではスキルマップに入れたアクセシビリティスキルについて、Chatworkのプロダクトデザイン部で考えた定義や要件を紹介したいと思います。
アクセシビリティスキル
スキルマップにアクセシビリティスキルを入れた理由
なぜアクセシビリティスキルを「UIデザイナーのスキルマップ」に入れたのか？
それは「アクセシビリティ方針と試験結果」に公開している「働き方が多種多様な今だからこそ、能力や状況に関係なく誰でも情報にアクセスできる状態を作らなければならない」という方針を、Webサイトやプロダクトといったつくる対象に限らずChatworkのデザイナーは意識・実践していくべきだと考えているからです。
誰でも情報にアクセスできる状態を実現させるため に、UIデザイナーにとってもアクセシビリティスキルは重要だと考えているため、スキルマップにも取り入れました。
スキル定義
プロダクトデザイン部では、UIデザイナーのアクセシビリティスキルを「アクセシビリティの必要性を理解して、具体的にやるべきことを提案・実現するためのスキル」と定めました。
このスキルで突出している人物像は、デザインだけではなくエンジニアリングの深い理解も持ち合わせている人をイメージしています。
スキル要件
UIデザイナーが自分の立ち位置とつぎに取り組むこと（満たすべき要件）を判断しやすくするため、スキルの習熟度に応じて4つのレベルに分けています。
| レベル 1 | アクセシビリティ対応の必要性を理解している |
|---|---|
| レベル 2 | アクセシビリティ対応を普段の業務で取り入れている |
| レベル 3 | アクセシビリティに関する方針策定と指示がおこなえる |
| レベル 4 | 世の中に貢献できる、またはプロダクトへの高度な貢献ができる |
実際のスキルマップの要件は細かく分けて書いていますが、言葉の定義などこの記事では説明しきれないところもあるので、各レベルに求める要件を少しまとめて紹介します。
レベル 1：アクセシビリティの必要性を理解している
Webアクセシビリティの必要性を理解し、自社で設定したWebアクセシビリティ対応レベルを把握して実践できるレベルです。
たとえばコントラスト比を担保する理由を理解した上で、ガイドラインに沿ったデザインをつくれることを求めます。
レベル 2：アクセシビリティ対応を普段の業務で取り入れている
Webアクセシビリティのガイドラインだけでなく、iOSやAndroidなど、プラットフォームごとに定義されているアクセシビリティ要件を把握して実践できるレベルです。
アクセシブルなコードを意識してマークアップが書けるなど、誰でも情報にアクセスできる状態の実現に向けてデザイン以外の知識も必要とします。
またこのレベルになると、デザイン提案時など普段の業務の中で「なぜアクセシビリティ観点を取り入れる必要があるか」を周囲に説明できることが要件に入ってきます。
レベル 3：アクセシビリティに関する方針策定と指示がおこなえる
チームをリードできる存在をイメージしています。
このレベルの人はWCAGなどの仕様を把握しています。アクセシビリティに関する深い理解を持ち合わせているため、アクセシビリティに関する方針や達成基準をつくって運用することができます。
また、アクセシビリティの推進に関してはエンジニアやデザイナーといった開発者だけでなく、全社を巻き込んで推進していくことを求めます。
レベル 4：世の中に貢献できる、またはプロダクトへの高度な貢献ができる
このスキルで突出している人物像は、デザインだけではなくエンジニアリングの深い理解も持ち合わせている人をイメージしています。
上記のような人物像で、社内・社外から高い評価を得ている存在をイメージしています。
スクリーンリーダーなど支援技術の特性を理解してデザインや実装を提案することができます。
推進面では社内にとどまらず、たとえば他社への発信やアクセシビリティ仕様へのコミットを求めます。
アクセシビリティスキルの定義と要件が揃うまで
チームでどのようにスキル定義や要件を揃えていったかを紹介します。
各工程で 1 時間くらい使ったと記憶しているので、アクセシビリティスキルの要件を決めるまでに大体 4 時間かかりました。
1. スキル要件を出し合う
まずは「UIデザイナーのアクセシビリティスキル」と聞いて思い浮かべるものを1人ずつ付箋に書き出し、書いた付箋を模造紙に貼り出して他のチームメンバーに向けて共有しました。
この段階でも簡単なグルーピングやレベル分けはおこなっていますが、スキル定義もチームで揃える前なのでひとまず置いてみている状態です。
2. スキル定義と人物像のイメージ
この段階では「アクセシビリティスキルとは何か」を文章にしてチームの認識として揃えました。
スキル定義は付箋に書かれている内容をもとにチーム内でいくつか提案を出し合いながら決めました。
要件をまとめていくにあたり具体的なイメージを持つため、突出してアクセシビリティスキルを持つ人の人物像もこのときすり合わせました。
3. 言葉の解釈を揃えながらグルーピングとレベル分け
付箋と模造紙を眺めながら要件のグルーピングと各スキルレベルでUIデザイナーに求めることを決めました。
WCAGの仕様理解は重いので要件を分解することなども、このとき話し合いながら決めました。
4. 重複する要件や曖昧な表現を減らす
この工程は言葉の整理に近かったのでチーム全員ではなく、1人が提案をあげて他の2人がレビューする形でおこないました。
こうやってアクセシビリティスキルの定義と要件は完成しました。
スキルマップの活用（締めの言葉にかえて）
つい先日、できたてホヤホヤの「UIデザイナーのスキルマップ」を使ってスキルの可視化とチーム内共有をおこないました。
アクセシビリティスキルだと @cw-moriya がチームリードできるスキルを持っているので、スキルアップを目指すときは彼女の活動や普段の情報収集を参考にしていきたいと思います。
まだ「伸ばしたいスキルについてお互いが支援できる環境」というには普段からサポートしあえる仕組みなど足りない部分もあるように感じますが、スキルマップによって同じ部署の人のことをまた一歩深く知れたと実感する今日このごろです。
まだまだつづくよ「Webアクセシビリティ Advent Calendar 2019」
このブログ記事はWebアクセシビリティ Advent Calendar 2019に参加しています。
つぎはrriverさん。記事の内容は「コントラストチェッカー 2019年総決算！（仮）」の予定だけど、本当の内容は記事が公開されるまでのお楽しみ！
