フロントエンドエンジニアがUIデザインを学ぶ #000

2025-07-02T04:59:04+09:00 | 1分で読めます | 更新日時 2025-07-02T04:59:04+09:00

@

UIデザインを学んでいくぞ!という意思表示です。

なぜ?

理由としては、以下です。

  • 自分の仕事の幅を広げるため
  • AI 時代に生き残るため
  • 成長の機会を逃さないため

私は 4年以上 Web のフロントエンドエンジニアをやっています。
機能開発においては、デザイナーさんが整えてくれたデザインを実装するのが主な仕事になります。

一緒に仕事をしていったり、自分自身の開発の経験も増えていくなかで、
逆に私からデザインについて質問したり提案したりすることも増えてきました。

  • エンジニア的な観点で 技術的な制約で難しいです >< って話、
  • 1ユーザーとしての UI/UX の観点でのデザイン調整の提案、
  • 両方の観点で、システム共通の UI コンポーネント (≒ デザインシステム)を議論、

などなど。

その中で、デザインの知識があると、より良いコミュニケーションができるなと感じました。


最近の経験では、社内でデザイントークンをきちんと定義しようという動きがありました。

エンジニアとデザイナーでデザイントークンについての輪読会を自分主催で開催したりして、みんなが納得しながら進められるようにしました。

現行のパターンや経験から、「アレの定義が必要だよね」って話や「こういう風に定義すると便利だよね」って話は2つの職能でいい感じに議論できました。

しかし、実際にどういう値を設定するのかなどはデザイナーにお任せになってしまいました
たとえば、フォントサイズの基準はいくつで、どういう数列で増やしていくのか、のような話です。

それらのデザイナーから提示されたものについては、「なんでその値なのか」、「どういう意図があるのか」を聞いて理解はできたつもりです。
しかし、自分の中に知識や思想がないので、浅めの理解はできても、共感や議論はできないなという感覚がありました。

デザイントークンについては、自分が引っ張っていくぞーという気持ちがあったので、少しずつでも学んで議論できるようになりたいなと思いました。


最初にあげた3つの理由について、上記を踏まえて少し詳しく書いていきます。

自分の仕事の幅を広げるため

  • デザインシステムやデザイントークンなどの、エンジニアとデザインの両方の知識が求められるところで、高品質なアウトプットを出せるようになりたい。
  • デザインと実装を取り持つような役割を担えるようになりたい。
    • Figma のプラグインをつくったりして、開発・デザインの効率化を図ったりしていますが、こういった動きをもっと増やしていきたい。
    • デザインプロセスへの理解を深めることで、効率化のポイントが見えてくると思っています。
  • ちょっとしたデザインの調整や提案ができるようになりたい。
    • 簡単な機能や改善であれば、1人で爆速でできるようになりたい。

AI 時代に生き残るため

  • AI によりいろんな仕事がスピードアップしていく中で、マルチにいろいろできる人がガンガンAI活用するのが強いと思っています

エンジニアがいらなくなることはしばらくはないと思ってます。強い専門性をもったエンジニアもまた、価値があると思うので、その方向も引き続き伸ばしつつ前提です。

成長の機会を逃さないため

  • せっかくデザインのプロと仕事してて、実装を通して長時間 UI を見ているのに、UI についての学びがないのがもったいない。
    • 体系的な知識がないので、そういったインプットが抜けていってしまう。
    • 学ぶ土台を作って、日々の開発での学びを最大化したい。

こんな感じの考えのもと、学習を決意しました。

デザインめちゃくちゃ興味あるぜーーー、っていうモチベではなないので、続くのかちょっと不安ですが、
学習の先に楽しい未来があると思っているので、頑張っていきたいと思います。

学習のゴール

ひとまずは、このブログのデザインを自分で作って実装することを目指します。

まずは、本を読んだり、UI トレースなどから。

© 2024 - 2025 nabekou29 Blog

🌱 Powered by Hugo with theme Dream.

About Me

ソフトウェアエンジニア5年目。 主に Web のフロントエンドの開発をしています。

個人では Neovim の拡張や Chrome の拡張を作ったりして遊んでます。 一時期電子工作にもハマってましたが最近はあまりできてない。