“デザイナー視点”は武器か、呪いか？

Works Human Intelligenceの新卒1年目のエンジニアたちが、現場で経験した「挑戦」と「失敗」、そしてその過程で手に入れた「学び」を共有するLT会の登壇資料です。

▼イベントページ
https://workshumanintelligence.connpass.com/event/382701/

Transcript

1. © 2026 Works Human Intelligence Co., Ltd. 未経験エンジニアがシステム開発を通じて学んだ視点の転換 “デザイナー視点”は武器か、呪いか？ 2026年02⽉13⽇ 株式会社Works Human Intelligence ⽊村愛華 1 新卒1年⽬エンジニアのリアル！ 失敗や挑戦から掴んだ「現場の学び」共有会
2. © 2026 Works Human Intelligence Co., Ltd. AGENDA 2 01 02 03 04 ⾃⼰紹介 Deptオンボーディング デザイナー視点は武器か、呪いか？ 結論
3. © 2026 Works Human Intelligence Co., Ltd. 3 ⾃⼰紹介 ⽊村愛華 Product Div. CSR Dept. # ⼤学ではデザインなどを学ぶ # 元UI/UXデザイナー # 新卒未経験エンジニア # 勤務予定管理の開発業務
4. © 2026 Works Human Intelligence Co., Ltd. Deptオンボーディング 4
5. © 2026 Works Human Intelligence Co., Ltd. ♦ 勤怠管理システム実装ミッション 5 Deptオンボーディング 打刻画⾯、個⼈⽤勤務状況照会画⾯、上⻑⽤勤務状況照会画⾯、追加機能を 作成する。
6. © 2026 Works Human Intelligence Co., Ltd. オブジェクト整理、要件定義、UI画 ⾯の作成など、昔の経験を武器にす るぞ！と張り切って制作に取り掛 かったが… 6 初動は良かったけど…
7. © 2026 Works Human Intelligence Co., Ltd. 7 初動は良かったけど… 予想外のエラーや作業に追われ 2週間の遅延 を起こしてしまう。 システム実装って難しい。。。。 オブジェクト整理、要件定義、UI画 ⾯の作成など、昔の経験を武器にす るぞ！と張り切って制作に取り掛 かったが…
8. © 2026 Works Human Intelligence Co., Ltd. 8 やる気と反する基礎の⽋如 ✖ 動けば正義 ✖ AIとの間違った付き合い⽅ ✖ 先の⾒通しがつかずに予定を超過 エラーが出るまで⾃分の書くコードがどうなっているかわからない。画⾯に 出れば良しのその場しのぎのロジックになっていた。 Copilotを予測変換くらいの認識で使⽤してしまっていた。Copilotなしで書 こうとしたら、⼀⾏⽬すら書けないの⾃分に絶望。。。 考慮漏れが多すぎて予定がうまく⽴てられない、守れない。データを思うよ うに動かせず、迷⾛。。。
9. © 2026 Works Human Intelligence Co., Ltd. デザイナー視点は武器か、呪いか？ 9
10. © 2026 Works Human Intelligence Co., Ltd. 10 Designer ‧ビジュアル ‧ピクセルパーフェクト ‧静⽌画 ‧ロジック ‧保守性 ‧断⾯図 果たしてデザイン経験は システム開発において武器になったのか？ Engineer
11. © 2026 Works Human Intelligence Co., Ltd. 11 直⾯した3つの呪い 💀 画⾯構築のイメージの呪い 💀 ⾃由度重視の呪い 💀 静⽌画思考の呪い Figmaではコンポーネントをコピーすれば、⾒た⽬も動きも統⼀感が保たれ ていた。コードでも同じように⾒た⽬が同じパーツ、ロジックが同じの機能 をコピペで作成してしまっていた。 1pxのズレが気になってしまうからその箇所の修正を逐⼀⾏う。その場に最 適な⾊や形を⾃由に選ぶことが、ほかのメンバーとの差になるしいい製品に つながると思っていた。 画⾯は完成された1枚の静⽌画として捉えていた。よってデータ同⼠の繋が りなどを意識できていなかった。
12. © 2026 Works Human Intelligence Co., Ltd. 12 呪いを武器に ♦ メンターの⾚裸々レビュー メンター、同期、チームメンバー、Dept(部署)のトップの⼈までもが私の抱え ている悩みを聞いて⾃分なりの答えやアドバイスを返してくれた。 多くの⼈のエンジニアとしての意⾒をもらうことによって、共通項を⾒出し、 ⾃分との差を感じられるように。 ♦ Deptメンバーとの1on1 メンターにUIやコードを⾒せ、これが理想、こう書いて、こう動いているとす べて説明した。 毎⽇何時間もかけてエンジニアとしての当たり前がなかった私の思考を正し てくださった。
13. © 2026 Works Human Intelligence Co., Ltd. 13 呪いは気づけたら武器に変わる① 💀 画⾯構築のイメージの呪い 🗡 共通化の真理 ⾒た⽬が同じなら同じコンポーネント、やりたいことを前に書いたロジック に当てはめるパズル的思考。 ⾒た⽬ではなく「そのデータが何なのか」で共通化する⼤切さに気づいた。 やりたいことを細分化して、最適な⽅法を取捨選択しなければならないと 学んだ。 結果的に*MVCモデルの輪郭を掴んだ！！ ✨ ✨ * データ処理 (Model)、画面表示 (View)、制御 (Controller)の3つの役割に分けて管理する設計手法
14. © 2026 Works Human Intelligence Co., Ltd. 14 呪いは気づけたら武器に変わる② 💀 ⾃由度重視の呪い 🗡 メンテナンス性の解像度UP 1px単位の⾃由度がメンテナンス性を殺し、⾃分しか修正できない属⼈化 コードを⽣んだ。 余⽩などの制約をコードで強制する、⾒た⽬と処理を別にするなど他の⼈で も触れるようなメンテナンス性を重要視することが結果的に⻑く続く プロダクトの鍵になると気付く。 デザイントークンやデザインシステムへの理解度UP！！ ✨ ✨
15. © 2026 Works Human Intelligence Co., Ltd. 15 呪いは気づけたら武器に変わる③ 💀 静⽌画思考の呪い 🗡 UIはデータの投影 画⾯を静⽌画として捉えていた。UIStack に則ったUIデザインはできていて も、そのデータ同⼠の繋がりなどを意識できていなかった。 データの型を決めたうえで様々な状態でデータはどうなって いることが理想か設計してから器を作ることを学ぶ！ UI = f(State) ✨ ✨
16. © 2026 Works Human Intelligence Co., Ltd. 結論 16
17. © 2026 Works Human Intelligence Co., Ltd. 17 結論 デザイナー経験は呪いになりえる。 …がその呪いをエンジニアとしての学びに変換できたときに⼤きな武器 に変わるのかも知れない！
18. © 2026 Works Human Intelligence Co., Ltd. 18