【ITニュース解説】Why I wanted to learn coding as a UX designer

現代のソフトウェア開発において、デザインと開発は密接に連携する分野であり、デザイナーがフロントエンド開発の基礎を理解し、また開発者が主要なユーザーエクスペリエンス（UX）の原則を学ぶことは非常に重要だと広く認識されている。互いの領域を理解することで、開発チーム全体の協力体制がより円滑になり、成果物の質も向上する。しかし、まったく新しいスキルセットを習得するには多大な労力が必要であり、単に「知っておくべき」という認識だけでは、学習のモチベーションを維持することは難しい。

筆者の最初のUXデザイナーとしての経験は、ある巨大な企業で始まった。多くの大企業と同様に、その会社の開発力の大部分は外部に委託されていた。社内のデザインチームは毎週の会議や情報共有によって連携が取れていたものの、デザインが実際にコードへと変換されるプロセスは、デザイナーにとって「ブラックボックス」のようなものだったという。自分たちがFigmaというデザインツールで作成したファイルが、どのようにして動的なウェブサイトになるのか、その詳細が不明だったのだ。さらに、デザインの引き継ぎは英語で行われることが多かったが、関係者の中に英語を母国語とする者はおらず、特定のデザイン要素についてドイツ語圏のUXチーム内でさえ、どの用語を使うべきか議論になることがあった。このような状況で、自分の意図を開発者に正確に伝えたい、という強い思いが募っていった。

ある時、筆者は新任のUX/UIデザイナーとして、既存のウェブサイトを多数レビューするという最初のタスクを与えられた。何から手をつければ良いか分からず、まずはウェブサイトを巡回し、一貫性のない部分や理解できない単語をメモすることから始めた。その中で、UXのブートキャンプで学んだ「アクセシブルでなければ、それは使えない」という原則を思い出し、アクセシビリティのレビューも行うべきだと考えた。

しかし、職場支給のPCではセキュリティ上の理由からブラウザ拡張機能の使用が制限されていたため、個人用のPCを使い、ウェブアクセシビリティ評価ツールであるWAVEでエラーや警告をチェックした。結果として、大量のエラーと警告が表示されたが、当時の筆者にはその半分も理解できなかったという。

例えば、「alt-text」が不足しているという警告は、画像アイコンの横に表示されていたため、比較的簡単に内容を推測できた。しかし、「ARIA-label」とは何か、それらが何のためにあるのか、なぜ「aria-hidden="true"」や「"false"」といった記述が多数あるのか、そして「false」とは何が間違っているのか、まったく理解できなかったのだ。このように、何が問題なのかを理解できないまま、まだよく知らない開発チームにレビュー結果を説明しなければならない状況は、非常に困難なものだった。

そこで筆者は、当時の不安なインターンがしそうなことをしたという。自分以外の誰もがこれらの専門用語を知っていると思い込み、自身の無知を隠すために必死にGoogle検索したのだ。その結果、「ARIA」がAccessible Rich Internet Applicationsの略であり、多様なバリエーションがあることを知った。「aria-hidden」属性は、ウェブページ上の要素が補助的な読み上げツールなどの支援技術に対して表示されるべきか（aria-hidden="false"）、それとも隠されるべきか（aria-hidden="true"）を定義するものであると理解した。つまり、「aria-hidden="false"」は何も間違っておらず、むしろカルーセル要素の中にランダムに混入している「aria-hidden="true"」が問題となるケースを疑うべきだと気づいたのだ。

さらに、あるフライアウトメニューの項目がキーボード操作でアクセスできないという問題に直面した。他のすべての要素はフォーカス可能であるにも関わらず、電話番号の項目だけが操作できない理由が分からなかった。これらの経験が、筆者がプログラミングを学び、自らこのようなエラーを修正できるようになりたいと強く思う決定的なきっかけとなった。

ソフトウェアに携わる人なら誰でも、その基本的な仕組みを理解することをお勧めする。これにより、実際に何が起きているのか、なぜ特定のプロセスがそのようになっているのか、そしてテストがうまくいっていたのに突然動かなくなるのはなぜかといった疑問に対する理解が深まる。

コードの世界がどのように機能するかを知ることで、デザイナーはより主体的に行動できるようになる。開発用語（デブリンゴ）で要素の名称を言えるようになれば、自分が何を求めているのかを開発者に説明するのが格段に容易になる。さらに良い点として、自分のデザインと実際にコードで実装されたバージョンの違いを、具体的に指摘できるようになることだ。デザインと実装の間には常に何らかの差異が生じるものだが、例えば「ここのテキストは、中央揃えになっている<div>タグの中に右揃えで配置されているように見えますが、テキスト自体は中央揃えにすべきです」といった具体的な指示ができれば、開発者は何を修正すべきかを明確に理解し、作業効率が飛躍的に向上する。これは、デザイナーと開発者、双方にとって非常に有益な「Win-Win」の関係を築くことができる。