こんにちは。テクノロジーデザインセンターの小林です。普段は、フロントエンドエンジニアとして働いています。
一時期に話題になった、@andoshin11さんの「フロントエンドのお仕事図鑑」にも記載がある通り、フロントエンドエンジニアと言っても得意領域が様々ですよね。
私自身は、業務でReact.js/Vue.jsを使用しつつ、RFC（Request for Comments）を読んでいることもあり、フロントエンドアーキテクトが現在の強みかな、と思っています。
一方で最近は、自分の強みやキャリアを“UI/UXエンジニアリング”に振り切ろう、と考え始めています。
Why: 実体験での失敗から、UI/UXに興味を持った。
とあるプロジェクトで制作したWebサイトで、ちょっとした問題が発生しました。
その問題とは、ある特定のPCで閲覧した場合、Embed Youtubeの再生が幾度か途切れてしまうというもの。
ボトルネックを調査したところ、キービジュアルに使用されているWebGL（GPU）のパフォーマンスチューニングが正しく為されていないことが原因でした。この状態で、ハードウェアアクセラレーション（GPUレンダリング）が有効になっているブラウザかつ低スペックマシンで閲覧した場合、処理が超過してしまいます。
上記のようなボトルネックのせいで、送り手が伝えたい情報を、一定数の受け手に届けられないことは大きな機会損失です。憧れている広告クリエイター・箭内道彦さんの言葉に「広告はラブレターだ」というものがありますが、相手に届かなければ、ラブレーターにどんなレトリックを用いても意味がありません。
したがって、インパクトのある表現よりも、トレンドな技術よりも、追求すべきは情報伝達の確実性だと考え、UI/UX領域に足を踏みいれました。
What: 結局、UXエンジニアって何だ？
UXエンジニアとして著名なEmma Wedekindさんは、「UX Engineering」にて、UXエンジニアの役割を以下のように仰っています。
1. Turn the Design Language into a living, breathing component library coded in a popular JavaScript framework or library.
2. Prototype low-fidelity designs into high-fidelity prototypes using the component library.
3. Work to improve collaboration and communication between the design team and the engineering teams.
4. Promote the value and adoption of the Design System throughout – the organization.
5. Build the style guide website for the Design System.
自らエンジニアとして手を動かしつつも、デザインに対する理解を深く持ち、さらに対組織という点ではデザインとエンジニアリングの壁を取り払っていくような活動が求められそうです。非常に多岐に渡りますね。忙しそう。
一方で、「デザインとエンジニアリングの職能を同時に持つメリットは何なの？」という疑問も生まれますが、
この点について、角銅浩平さんは「コラボレーティブデザインを実践するエンジニアは何を考えているのか?」にて、
拡散のときはデザイナー的、収束のときはエンジニア的なイメージで、繰り返しながらプロトタイプとコンセプトの両方を改善してくことが重要
と述べられています。確かに私は最近、エンジニア脳で考えがちで「いかに実装コストを削減するか（収束）」ばかりを考えている気がします。デザイナー脳とエンジニア脳をプロジェクトフェーズによって意識的に切り替えることで、トレードオフの判断が容易なりそうです。
ということで、結論を以下の通りになります。
私の目指すUXエンジニアは、情報伝達の確実性を担保する人。情報伝達の確実性を高める主な手段は、情報設計スキル、アクセシビリティ理解及び実践スキル、Webブラウザパフォーマンスチューニングスキルの3点。これらのスキルを身につけるために、デザインとエンジニアリングの職能を持つ必要がある。
How: エンジニアがデザインの職能をいかにして身につけるか
大見得を切ったものの、恥ずかしながら、デザインを深く学んだことはありません。一方で、エンジニアとしては論理的にデザインを学びたいですよね。
そんなエンジニアの希望に答えてくれた本が、『Refactoring UI』でした。前置きが長くなりましたが、今回はこちらの本をご紹介したいと思います。
🔥 Excited to announce that Refactoring UI is now available!
It’s everything we know about designing for the web, packed into a single comprehensive resource.
Get it during the launch for up to 40% off 👉🏻https://t.co/XmeFrcuJVr
— Steve Schoger (@steveschoger) December 11, 2018
Refactoring UI
Tired of relying on Bootstrap? Learn how to design awesome UIs by yourself using specific tactics explained from a developer’s point-of-view.
『Refactoring UI』のランディングページに記載されているように、全編に渡って開発者視点で記述されています。
また、「リファクタリング」という題目通り、アンチパターンを提示した上で「なぜダメなのか」「なら何が正なのか」をロジカルに教えてくれます。
先日開催された「CSS Day 2019」にも著者のSteve Schogerさんが登壇されており、旅行予約サイトを例にリファクタリングをされていました。
こちらの発表では、以下の15ポイントに焦点が当てられていました。
01. Give text consistent contrast
02. Don’t use grey text on colored backgrounds
03. Use perceived brightness
04. Start with too much whitespace
05. Blance weight and contrast
06. Supercharge the defaults
07. Overlap elements to create depth
08. Use shadows to convey elevation
09. Shadows can have to parts
10. Create depth with color
11. Align with readability in min
12. Use fewer borders
13: Think outside the database
14. Alternate backgrounds
15. Greys don’t have to be “grey”
今回はこの中から、色についての項目（01. Give text consistent contrast / 03. Use perceived brightness）を抜粋して紹介します。
Give text consistent contrast
Web Content Accessibility Guidelines (WCAG) では、通常テキスト（18px未満）は少なくとも4.5:1のコントラスト比、大きなテキストは少なくとも3:1のコントラスト比で使用することが推奨されています。
例えば、ステータスを表す以下のようなバッジを作成した場合はアンチパターンです。テキストと背景色の比が要件を満たしていません。
この問題は、以下のようにコントラストを反転させることで解決できます。
Use perceived brightness
「 Practical Solutions to Common UI Design Problems」から引用
全ての色相は、固有の輝度成分を持っているようです。例えば、彩度が100％、明度が50％の黄色と青を比較すると、人間の目には黄色の方が明るく認識されます。
この理論を利用して、明度を変化させずに、意図的に明るさを調整することができます。また、色の強度を失うこともありません。
以下の例では、左が明度を直接調整したグラデーション、右が色相を調整したグラデーションです。
See the Pen perceived brightness by baco16g (@baco16g) on CodePen.
まとめ
UXエンジニアを目指す第一歩として、『Refactoring UI』を使用してUIデザインを学習しました。
今回ご紹介した「色」だけでも、永遠に深掘りできそうです。余談ではありますが、色彩検定にUC級が新設されたようなので、受験してみたいなと思っています！