サービス開発の現場では、「デザイナーとエンジニアの連携がうまくいかない」という課題が頻繁に聞かれます。この課題を掘り下げると、「デザイン通りに実装がされない」「実装されたUIが使いにくい」「デザインは再現されているが、体験が損なわれている」といった問題があり、最終的にユーザーにとって価値のある体験を届けることを妨げます。
私たちはデザイン会社のエンジニアとして、この課題を解決し、ユーザーにとって価値のある体験を提供するために、どのようなエンジニアリングを実践すべきかを常に考えています。
「なんか違う」の正体
- デザインカンプ通りに実装したのに、ユーザーから「なんか使いにくい」とフィードバックがきたデ
- インチェック後、デザイナーから「なんか違う」とフィードバックがきた
サービス開発ではよく聞くフィードバックではありますが、サービス開発の現場で頻発します。これらのフィードバックは、主にコードにデザインの意図がない場合に起こり、単なるピクセルの再現ミスなどによるコード品質の課題ではありません。根本原因は、「デザインの意図が開発プロセスの中で見過ごされている」という開発品質の課題です。
デザインの再現性を担保した上でエンジニアが最適化すべきは、「デザインを通じてユーザーにとって価値のある体験を届けること」です。
デザインの意図と開発品質
私たちは「デザインの意図」を、「見た目や視覚的な要素といった表層のデザインだけではなく、デザイナーがそのデザインを通じてユーザーにどんな体験をしてほしいか、何を伝えたいかという、デザインの目的や背景にある考え」と考えています。これは「なぜ、このデザインになっているのか？」という問いに対する答えであり、ひいては「なぜ、作るのか？」という問いと本質的に同じです。
エンジニアがデザインの意図を理解するためには、デザイナーとエンジニアの連携が不可欠です。デザインと開発がつながっているからこそ、デザインの意図は開発を経て、ユーザーに価値のある体験として届けることができます。
実装する前段として「なぜ、そのデザインになっているのか？」を明確にし、開発プロセスの中で仕組み化することによりデザインの意図を汲み取った開発が実現し、開発品質を向上できると考えています。
私たちはデザイン会社のエンジニアとしてデザインと開発をつなぐフロントエンド開発を大切にしています。
デザインと開発をつなぐフロントエンド開発については、以下、参照ください。
デザインの意図を汲み取ったコードとは何か
デザインの意図を汲み取ったコードとは、「デザインの目的や背景を知り、デザインを通じてユーザーに届けたい価値が開発を経て届けられるコード」と考えています。とにかくデザイナーの実現したいことを実装することではありません。開発で技術的な課題に直面した場合、デザインの意図、エンジニアリングの意図を考慮し、単なる妥協点を探るのではなく、両者の視点からユーザーにとって最適な代替案や解決策を提示します。
このようなコードは、自然と変更容易性を高めます。
例としてブランドカラーとCSSのクラス名で考えてみます。
デザインの意図
- ブランドカラーを統一することで視覚的な一貫性が担保し、ユーザーの認知負荷を軽減したい。
CSSのクラス名
-
--color-primaryなど、デザイントークンとして実装する。
ブランドカラーの変更があった際、CSS変数を変更するだけで、デザイン全体にその変更を適用できます。この状態のコードを「デザインの意図があるコード」と考え、デザインの意図を汲み取ることで変更容易性を高めます。これは、カラー以外のデザイントークン（タイポグラフィ、スペーシング、エレベーションなど）に対しても共通の考え方ができます。さらにデザイントークンを「再利用可能なコンポーネント」として実装することで、変更容易性に加え、保守・運用の観点でも一貫性を担保し、デザインの品質を維持することができます。
このようなデザインの意図を汲み取ったコードを実装する過程でエンジニアはデザイナー、もしくはデザインエンジニアと共創することで共通言語が生まれます。この共通言語を生むサイクルを仕組みとして開発プロセスに組み込むことこそが、デザインの意図を開発を経て、ユーザーに価値のある体験として届けることができるのです。
エンジニアがデザインエンジニアとコミュニケーションすることで解決できる課題については、デザインと開発をつなぐフロントエンド開発を参照ください。
まとめ
デザインの意図がなく、再現性だけを突き詰めるコードは、リリース時はユーザーに価値のある体験として届けることができるかもしれません。ただ、サービスの未来を考えたとき、一過性の体験に留まりがちです。デザイナーの考えるデザインの意図は、サービスの価値そのものなのです。デザインの意図をユーザーに価値のある体験として届ける。そのために、デザイナーとエンジニアが共創し共通言語を築く時間が、何よりも大切なのです。
もし、「デザインの意図を汲み取り、再現性のあるフロントエンドを実現したい」という課題に直面していたり、具体的な導入方法にご興味がありましたら、お気軽にご相談ください。課題解決のお役に立てれば幸いです。
デザイン再現フロントエンド実装
〜デザインの意図を汲み取り、再現性のあるフロントエンドを実現したい〜
Discussion