Figmaやめて、AIとコードでUIを作り始めた話
こんにちは、AI ShiftでUI/UXデザイナーをやってる後藤です。この記事はAI Shift Advent Calendar 2025の21日目の記事です。 この記事は、Figmaの使用をいったん停止して、AIとコードでUIデザインをするとどうなるのか、という経過報告です。 実験の途中ですので、まだ成功も失敗もはっきりしておりません。なので、本日18:30からのM-1グランプリをご覧になった方がより楽しい休日をお過ごしになられるかと思います。 結論から言うと 「デザインと実装の境界をなくした」 ことで、UIデザインの時間を「考える」に全振りできるようになりました。 そして、これからの私は課題や価値の探索というUXデザインのタスクに、多くの時間を費やしていくんだろうなと思いました。 具体的には、UIデザインを手を動かして作る時間がほぼゼロになり、考える時間を増やすことができました。様々な
[React] 新規作成画面と編集画面の実装で気をつけていること
SaaS の管理画面を開発していると新規作成画面と編集画面を実装することがよくあります。 これらの画面は一見似ているので共通のコンポーネントで実装できそうですが、意外と多くの違いがあります。 この記事では新規作成画面と編集画面を実装するときに気をつけていることをまとめてみます。 コンポーネント設計について シンプルな例でも新規作成画面と編集画面には違いがありました。 これらを1つの共通コンポーネントで実装するとコンポーネント内でIF分岐が発生し可読性が下がったり、再利用性が低くなったりします。 では両者を完全に別コンポーネントで実装したら良いのかというとそれも微妙です。新規作成、編集の入力項目は仕様的に同じであり、バリデーションも同じであることが多いです。 ここを別に実装してしまうと仕様が変わったときに変更する箇所が多くなってしまいます。 なのでフォーム部分(入力とバリデーション)は共通化
![[React] 新規作成画面と編集画面の実装で気をつけていること](https://cdn-ak-scissors.b.st-hatena.com/image/square/3536b3f00a56835807fd7ffad062d10c4ed80361/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--NYsUL-XL--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%25255BReact%25255D%252520%2525E6%252596%2525B0%2525E8%2525A6%25258F%2525E4%2525BD%25259C%2525E6%252588%252590%2525E7%252594%2525BB%2525E9%25259D%2525A2%2525E3%252581%2525A8%2525E7%2525B7%2525A8%2525E9%25259B%252586%2525E7%252594%2525BB%2525E9%25259D%2525A2%2525E3%252581%2525AE%2525E5%2525AE%25259F%2525E8%2525A3%252585%2525E3%252581%2525A7%2525E6%2525B0%252597%2525E3%252582%252592%2525E3%252581%2525A4%2525E3%252581%252591%2525E3%252581%2525A6%2525E3%252581%252584%2525E3%252582%25258B%2525E3%252581%252593%2525E3%252581%2525A8%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_34%3Akult%252Cx_220%252Cy_108%2Fbo_3px_solid_rgb%3Ad6e3ed%252Cg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzhhNDQwNmNlMGUuanBlZw%3D%3D%252Cr_20%252Cw_90%252Cx_92%252Cy_102%2Fco_rgb%3A6e7b85%252Cg_south_west%252Cl_text%3Anotosansjp-medium.otf_30%3AAI%252520Shift%252520Tech%252520Blog%252Cx_220%252Cy_160%2Fbo_4px_solid_white%252Cg_south_west%252Ch_50%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzhkZmY1MjcxNzUuanBlZw%3D%3D%252Cr_max%252Cw_50%252Cx_139%252Cy_84%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png%3F_a%3DBACAGSGT)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
