LIGHTzカレンダー5日目です初めての投稿です
2年目の駆け出しデザイナー/フロントエンドエンジニアです

#はじめに
デザインとフロントエンドの両方の仕事をしているときに、
デザインでは、プロダクトのコンセプトに沿った配色、ボタンや入力フォームなどのコンポーネントの形を決めたり、システムのフローを意識して、コンポーネントの配置を考えたり、
フロントでは、設計をしたり、データの受け渡しや、UIとその機能をコーディングしたりしていきますが、そこでは、考えること、視点が違うなぁと、よく思います。

違う作業をしているので、当たり前かもしれないですが、その違いから、
デザイン→実装に進む中で、デザインファイル（XDやFigma）と実装する画面とでどうしてもギャップが生まれます。
デザインと実装のギャップにどう立ち向かっていけばいいのか、取り組んでいることを書きたいと思います。

#デザインファイルと実装のギャップ
画面を作るときにフレームワーク（bootstrapやvuetify）入れることが多く、フレームワークに頼るとそれらしくはできるけれど、カスタマイズするのは難しく、ここでデザインファイル（XDやFigma）との乖離が生まれます。
しかし、全部自分で作ろうとするのは、CSSへの高い技術や理解が必要で、効率を考えるとフレームワークは使っていきたい。
また、フロントエンドは設計、バックエンドとのやり取り、機能の実装など、やることがたくさんあり、デザインを整えるのはどうしても、機能が出来て、残った時間で、、、となることが多々。モックのデザインファイル通りの見た目にするのはどんどん後回しにしてしまいます。

自分ひとりでデザイン→UI実装の作業をしても、ギャップがあるのだから、
チームで開発していくときに、デザイナーとエンジニア間をつなぐのはもっと難しいと思います。
#ギャップを埋めていくために
デザインをするときと、実際の開発での取り組みです。
##デザインするとき
###ちょうどいいデザインにする
toBのプロダクトをデザインするときに、
実態と乖離した「良すぎるデザイン」にしてしまうことは気を付けたいと思うようになりました。

綺麗すぎる
おしゃれすぎる
かっこよすぎる

結果、離れたものができて、ユーザーががっかりしてしまわないように、
また、かっこいいデザインにばかり目が行って、欲しい情報を探しに来たユーザーの邪魔になることもあってはいけない。（デザインしているときは気持ちよくなって、やりすぎるときがある。。。）
” ちょうどいいデザイン ”を。

###説明できるデザインにする
なんとなく"こうしたら気持ちが良い"見た目だから、のような感覚で決めたデザインだと、実装しているときに、
「機能が動いてるからいいや」「画面に表示できたからいいじゃん」
とデザインを疎かにしてしまいます。（デザイナーなのに、、、）

理由があれば、デザインにも熱量を持って実装できます。
（フロントの方にお願いするときも、きちんと思いが伝わる）

難しいですが、"こうしたら気持ちの良い"の理由を言語化して、
説明できるデザイナーになりたいと思っています。

##実装するとき
現在取り組んでいることです
(自社プロダクトの開発で取り組んでいる事で、運用のコストもかかりますし、すべてのプロダクトでやったほうが良いとは言えません)
###UIコンポーネントライブラリを作る
ライブラリを作って、それを使ってもらえれば、
誰が画面を作っても、統一されたデザインにできるので良いですよね。

ライブラリは
Vue2 + Vuetify + Storybook
で作っています。

まだ、、、

フレームワーク（vuetify）を入れているので、デザインファイル通りのstyleにカスタマイズすることが難しい
フロントが使いやすいライブラリにするには
ライブラリを使って配置してもらうときに、コンポーネント間の余白などをどう伝えるといいのか

などの課題もありますが、デザイナーの手の入ったライブラリを使ってもらって、
エンジニアが少しでも、デザインファイルに近い画面を作りやすくしたいと思っています。

###StoryBookを入れて管理する
上↑の話に繋がりますが、UIコンポーネントライブラリにStoryBookを導入しています。

デザインファイルを設計図に、Storybookでボタンや、検索フォームなどのコンポーネントを作成します。コンポーネントに切り出して作っていくので、一つの部品に集中してコーディングできます。

検索結果が0件の時、文字が長く表示エリアに入らない時など、デザインファイルでは作っていないコンポーネントの状態もここで設計でき、状態の考慮漏れも無くなります。
コンポーネントのデザインと状態を管理しやすいです。

デザインファイルはただの設計図で、ライブラリのStoryBookが正しいコンポーネントとして、管理されていけばいいなと思っています。

#終わりに
読んで頂きありがとうございました。

まだまだ模索中ですが、コンポーネントライブラリを管理・運用して、自社プロダクトのデザインをしていきたいと思っています。

参考記事