美と機能のバランス ~フロントエンジニアに必要なUI・UXセンス~

【あつまれ！フロントエンドの話をしたい～！なエンジニア・デザイナー】あつまれエンジニアの森 #4

2024/06/07

https://atuen.connpass.com/event/317210/

Transcript

1. 美と機能のバランス 
 
 フロントエンジニアに必要なUI/UXセンス 
 三海 純(ミカイジュン)

2. ミカイ ジュン 
 • フリーランスエンジニア 
 • 趣味
 ◦ アニメ、ネット麻雀(雀魂)、ブルーアーカイブ 
 • 好きな有名人 
 後藤 ひとり、千早 愛音 
 陸八魔アル、 八木 唯 など 
 

3. キャリア
 • 現在 : フリーランス(自社開発) 
 ◦ Next.jsの新規開発 とバックエンドを担当 
 • 2022/03 - 2023/09: 正社員(自社開発) 
 ◦ バックエンドはPython / Nest.js(Node.js) 
 ◦ フロントエンドはReact.jsとNext.js 
 • 2020/06 - 2022/02: 正社員(受託企業) 
 ◦ Vue.js/Nuxt.jsをメイン 

6. 今ではNext.jsの 
 新規開発・設計・指導を担 当しています 

7. 直近の案件でフロントエンドの新 規開発を担当 
 デザインカンプなし で
 リリースできた 

8. 今回のテーマ 
 UI/UX 
 どこまでキャッチアップする? 

9. 結論
 UI/UXセンスはいらない 

10. 詳しく言うと・・・ 
 UI/UXはライブラリを 
 参考にすれば良い 

11. UIライブラリ一例 
 - Material-UI（MUI） 
 - Ant Design（AntD） 
 - Chakra UI 
 - Shadcn UI 
 - Headless UI 
 など

12. 例) メニューのUI 
 Chakra UI から引用 

13. どのUI/UXを使うかの決め方は 
 普段使っている 
 アプリやサイトを 
 参考にすれば良い 

14. 普段使っているサイト一例 
 - SNS
 - ゲーム
 - 動画配信サイト 
 - ECサイト 
 - 技術ブログ(Qiitaなど) 

15. 大事なのは 
 説明なしで
 どこをクリック したら
 何が起きるかわかること 
 

16. このアイコンクリックで 
 何が起きる？ 
 

17. 使いやすいサイトとは 
 わかるデザイン 
 むしろUI/UXに独自性は邪魔 
 

18. フロントエンドエンジニア 
 として活躍したいのであれば 
 UI/UXセンスが 
 必須とは限らない 
 

19. ご清聴ありがとうござ います！