失敗から学ぶ、デザインと実装の連携で気をつけていること

2023年8月9日 18:12

こんにちは、UXDCのデイブです。
前回の記事で書いたのですが、自分はもともとエンジニアでpythonやHTML/CSSを書いたりしていました。

そんなエンジニア出身の自分が、実装への連携でデザイナーとして気をつけていることを今日は紹介したいと思います！

どうしてこうなった…

自分が実装への連携を意識するようになったのは、デザイナーになる前に携わったプロジェクトで、デザインしたものと全然違うものが実装されてしまったという失敗からでした。

そのプロジェクトでは、エンジニアが誰でも同じものを作れるようにHTMLのパーツ集を作ることになり、有名なCSSフレームワークをカスタマイズして専用のパーツ集を作成しました。

パーツを配置するためのHTMLテンプレートや、パーツを使用する際に気をつけて欲しいことなど、余計なお世話と言われるくらい盛りだくさんにしてパーツ集を実装チームに連携しました。

ワクワクしながら完成を待っていたのですが、出来上がったものは、思わず「どうしてこうなった…」と唸るほど、想像とは異なるものでした。（これ以来実装物を始めてみる時はソワソワします。）

色々反省点はありますが、実装チームとの相談が不足していたことが大きな原因の一つだったと思います。
どんな素材やドキュメントがあったらみんな同じものが作れるのか、実装チームはどんなことを得意としているのか、などなど実装チームに寄り添ってあげることが必要だったのです。

前置きが長くなりましたが、そんな経験から自分が実装チームと連携する際に気をつけている4つのこと紹介していきます。
今回紹介するのはデザインファイルの作り込み方などではなく、実装チームとのコミュニケーションや立ち回りについてになります。

まずは実装チームが使用予定のフレームワークにどんなコンポーネントがあってどんなことができるのかを一通り見ていきます。

ローコードツールを使う場合は、ライブラリによって連携が容易なものやそうではないものがあるので、実装にかけられる工数も踏まえてどんなライブラリを使うのが良さそうかも実装チームと考えます。

フレームワークによってはFigmaのデザインキットが提供されていて、スムーズにデザインカンプが作れたりもするので、フレームワークが未定の場合はデザインキットの有無も選定の際に考慮したりします。

なんとなく作りたい画面のイメージがつき始めたくらいから、それが実現できるかの会話を実装チームと始めます。

使用するコンポーネントや参考になる他の画面を実装チームに見せて会話することで、実現可能性の感覚を掴んでいきます。

技術的に出来るかどうかと、工数的に出来るかどうかは別の話なので、両方の観点から出来るかどうかを確認した上で画面制作を始めていきます。

こういった会話をする中で代替案やよりユーザビリティを高くするための提案を実装チームの方から提案してくれることもよくあります。

画面を作っていると楽しくなって実装のことを忘れてしまうことがたまにあります。

もちろん実装にとらわれ過ぎない発想で画面を描いていくことは大事なのですが、最後まで実装置いてけぼりの画面を作ってしまうことは、完成品のクオリティを落としたり、実装チームとの信頼関係を損なうことにもつながると個人的には思っています。

それを防ぐためにも、デザインツールで画面を作っていくときは、実装するためのCSSを考えるようにしていて、実装に苦戦しそうだなと思ったところは、実装のイメージも併せて実装チームに連携します。

もちろん自分は実装プロではないので、「こんなデザイン考えてるけど実装できそうですか？」という会話もよく発生します。

余談ですが、Figmaはこの点とてもやりやすくて、Figmaの機能を使って作った画面はHTMLとCSSで再現しやすいように感じています。

実装された画面をレビューするときは、指摘するだけではなく以下の３点を伝えるようにしています。

指摘箇所と改善案を伝えるだけでは、実装者の方にデザインの意図を確実に伝えることができないため、同じような指摘が再度発生する可能性が高いです。

レビューを通して実装者がより良いUIを作れるようになることが、今後のデザインの幅を広げることにもつながると思っており、レビューコメントはなるべく丁寧にすることを気をつけています。

以上が自分がデザインと実装の連携で気をつけていることでした！簡単に言えば、より良いものを作るという思いでデザイナーと実装チームが密にコミュニケーションをとって連携するということです。

プロジェクトごとに関わる実装チームが変わってくることが多いため、そこが難しいところでもありやりがいのあるところだと感じています。

実装を意識しすぎてデザインの幅が狭まらないように気をつけている今日この頃ですが、これからも精進していきます！

written by デイブ
機械学習エンジニアになるはずが、気づいたらユーザーが喜ぶものを作りたくてデザイナーになってました。ビールとゲームが好きです。

この記事が気に入ったらサポートをしてみませんか？