UXデザイナーとしてコーディングを学びたかった理由

デザイナーがフロントエンド開発の基本的な理解を持っていることが良いアイデアであることは、今では誰もが同意していると思います。開発者も同様で、マージンやCo.の高度な使用に関するユーザーエクスペリエンスの原則を学ぶことは常に良いことだ。いずれにせよ、お互いの仕事に対する理解を深め、一緒に仕事をしやすくするのに役立ちます。そして私たちは皆、それを望んでいる！やったー！かっこいい！

しかし、まったく新しいスキルを学ぶのは（どちらの側にとっても）大変なことだ。そして私の意見では、「そうすべきと知っている」だけでは、最高のモチベーションにはならない。

開発用語

私が最初にUXの職務に就いたのは巨大企業だった。そして、多くの大企業がそうであるように、開発力のほとんどは外部から調達していた。そのため、デザイン部門は、毎週更新されるミーティングや、チーム間でのノウハウの共有など、社内でうまく調整されていましたが、デザインからコードへのパイプラインは、私たちにとってはほとんどブラックボックスでした。Figmaのファイルがどのようにしてダイナミックなウェブサイトになるのかは、私たちにとっては謎でした。

デザインの引き継ぎは、ほとんど英語で行われました。もちろん、私たちの誰も英語を母国語とする人間ではありませんでした。ドイツ語圏のUX部門内では、特定のデザイン要素をどのように参照すべきかについてすでに議論していました。

自分が欲しいものを説明できること、それだけが私の望みだった！

ストーリータイム

UX/UIデザイナーになりたての私の最初の仕事は、既存のウェブサイトを見直すことだった。何から手をつければいいのかよくわからないまま、私はまずページを彷徨い、矛盾しているところやよく理解できない表現に目を留めた。そんな中、UXブートキャンプで教わったことを思い出した： アクセシブルでなければ、ユーザビリティがない。アクセシブルでなければ、ユーザビリティがないのだ。

仕事用のノートパソコンではセキュリティ上の理由でブラウザの拡張機能がブロックされていたが、個人用のパソコンではまだ使うことができ、WAVEがどのようなエラーや警告を出すか見ることができた。たくさんありましたが、当時はその半分も理解できませんでした！なるほど、alt-textが見つからないのは、その横にある小さな絵のアイコンで簡単にわかった。でも、ARIAラベルって何？彼らは何をするのか？なぜこんなにたくさんあって、なぜaria-hidden="true"と書いてあるものと"false"と書いてあるものがあるのか？何が偽なのか？

明らかに、一体何が起こっているのかわからないということは、この時点でほとんど知り合いでもないチームにレビュー結果を説明する必要がある場合、かなり問題である。そこで私は、おそらく不安に駆られたインターンなら誰もがすることをした： 私以外の誰もが、これらの用語が何であるかを知っているに違いないと思い、自分の無能さを隠すために必死にググった！

ARIAはAccessible Rich Internet Applicationsの略で、様々なバリエーションがあることがわかりました。aria-hidden属性は、要素を非表示（aria-hidden="true"）にするか、支援技術に表示するかを定義します。というわけで、aria-hidden="false"には何の問題もなく、"true"のものは私が実際に質問する必要があるものだった！というのも、そのカルーセルの要素には、かなりランダムに混ざっているように見えたからだ。

私をひっくり返し、このようなエラーを自分で修正する方法を学ばせようと思わせたのは、フライアウトメニューの1つの項目がキーボードナビゲーション上になかったという事実だった。なぜか？他は全部focusableなのに！電話番号はどうしたんだ？

デザイナーにとってのメリット

私は一般的に、ソフトウェアを扱う人なら誰でも、その仕組みの基本を調べることを勧める。 実際に何が起こっているのか、なぜ特定のプロセスがそのようになっているのか、なぜテストがうまくいっていたのに突然うまくいかなくなることがあるのかを理解するのに役立ちます。

コードの世界の仕組みを知ることで、より多くの権限を得ることができる。 開発用語で要素を何と呼ぶかを知っていれば、自分が何をしたいのかを説明するのも簡単になる。 しかし、さらにいいことがある： 自分のデザインとコード化されたバージョンとで何が違うのかを説明するのがとても簡単になるのだ。 そして、私たち全員が知っているように、常に何か違和感があるものです。 それを指摘して、「中央揃えの<div>の中でテキストが右揃えになっているように見えるが、テキスト自体は中央揃えにすべきだ 」などと言えばいいのです。 (CSS Layout alignmentの例のような状態を思い浮かべてください。) 開発者は何を変更すべきかがわかり、あなたはこれまでで最も効率的なオフィスの王族のように感じるでしょう。 それは誰にとってもWin-Winです！

---

P.S.: 大好き、ベカ・ボーイズ！