テクノロジー

エンジニアがやりがちなUIデザインの失敗15選とその回避法 - Qiita

1: anonruru 2025/06/06 01:28

"株式会社Nuco"

2: diveto 2025/06/06 02:34

ハイフンを入れさせる郵便番号、電話番号/郵便番号住所検索の結果が「本町(1〜3丁目)/入力途中なのに「メールアドレスが不完全です」みたいな警告文/戻れないページ遷移/クレカ入力フォームが4分割

3: mojimojikun 2025/06/06 02:47

『全部、センスではなく知識と習慣の問題です』まぁそうね。ただその能力はプログラマには必要条件では無いと思うんで、失敗と言わずに優しく教えてくれるといいな(この文脈ではエンジニア≒プログラマで良いよね?)

4: jsxll 2025/06/06 02:52

むしろエンジニアではない人の方がこういう要望出しがち

5: mk173 2025/06/06 05:19

RPGレベルで攻略が難しい申請システムとかにありがち

6: natu_daze 2025/06/06 06:27

2つ目の事例で、画像左が良くないUIで画像右が正しいUIなのかって理解した。このテーマを書くなら、そこは瞬時に分からせて欲しかった。

7: juejue 2025/06/06 06:39

エンジニアがやりがちってすまんが一度も見たことない。というかそもそもUIデザインはデザイナーの領域。

8: mayumayu_nimolove 2025/06/06 07:03

これエンジニアがやる事か?むしろ仕様決める奴じゃねーの?あと、非レスポンシブを勝手にレスポンシブにしたらダメだろ。

9: favoriteonline 2025/06/06 07:06

だいぶ初歩的すぎる内容的だなぁと思ってみてたらあそこの会社か・・・ どうもここの会社はエンジニア=フロントエンドやる人としか思ってないようだ

10: tempodeamor 2025/06/06 07:22

なんぼなんでもここまではそうないやろ。

11: htbman 2025/06/06 07:32

間違えただけなのに「不正な値が入力されました」みたいな書き方されると腹立つからやめろ、とかいう話を期待した

12: tomono-blog 2025/06/06 08:15

ビジュアルバリエーションをどれだけつくるか、と、要素を統一しようというのはよく問題になりがち。重要なのは、バリエーションの中にデザイン拡張の法則ルールがあるかどうか。

13: lainof 2025/06/06 08:23

全然やりがちじゃない。むしろシステムのことを分かってないデザイナーの方が見た目だけのデザインしがちでは?

14: mullen 2025/06/06 08:48

確かに事例2がブーメランに見える

15: cvtbgspuda 2025/06/06 09:07

畑違いで恐縮なのですが、UIデザインはデザイナーの仕事だと思います。

16: otihateten3510 2025/06/06 09:12

適度に雑で草

17: pastatch 2025/06/06 09:26

これをデザイナの仕事だと言い切っちゃえる環境は素晴らしいのかもしれないけどあんまり好きではないな。

18: kohiro0 2025/06/06 09:34

“モーダル地獄” OUTLOOKのオプション画面・・・

19: tamanecoplus 2025/06/06 09:34

エンジニアが覚えること大杉問題

20: daira4000 2025/06/06 09:41

デザイナじゃなくてもこれくらいは把握してるもんでは / ソフトウェアエンジニアがやりがちかは知らん

21: toaruR 2025/06/06 09:48

キャンセルしますか [キャンセル] [実行]

22: eartht 2025/06/06 09:53

まぁどの会社でも起こってる問題というか、カンプにあるのすら無視してくるエンジニアもいつまでも居る。とはいえこの辺も、そろそろAIが介入してきそう

23: NOV1975 2025/06/06 10:12

なぜこれを「エンジニアが」と言ってしまうのか。君の周りのエンジニアを名乗る人はそんなもんなのか?

24: mysql8 2025/06/06 10:12

それは仕様です

25: pmint 2025/06/06 10:22

ありきたりでイマイチなおっさんが書いてそうな解説だけど、分かってる人にはいいかも。解決法が配慮不足なので、これで学ぼうとするのは不可。ChatGPTかきちんと分かってる人の解説がいい。「スライドパネル」って何

26: sigwyg 2025/06/06 10:31

フロントエンドエンジニアなら、むしろ苦言を呈する側じゃないかと。Webを知らないデザイナーとか、手当たり次第にA/Bテストやりたい事業側が出してくる印象。解っててやるなら良いんですけど、忠告はする。

27: hdampty7 2025/06/06 10:37

ノンエンジニアがやりがちな失敗⇒「このメールアドレスは存在しません」というメッセージを出すと登録されてるメアドが割り出せるので、ユーザ認証で細かいエラー表示はNG。

28: pyagatupa 2025/06/06 10:46

スタイルシートなど要らん

29: khtokage 2025/06/06 11:02

??? デザイナーがやるのではなくて? 評価の時点なら、プログラマがUI凝るとUIしか指摘しない人が大量に出てくるので、UIは別ですよというのが分かるようにしておいた方がいい印象ですね

30: xlc 2025/06/06 11:14

この記事の例示が何を言いたいのか分かりにくいのだが……

31: JULY 2025/06/06 11:41

Web アプリは門外漢なんで分からないんだけど、ところどころ「これ、デザイン側じゃないの?」と思った。デザインの内容に関しては、スマホ対応は企業内システムでは必ずしも、とは思うけど、概ね同意できる。

32: masayoshinym 2025/06/06 11:44

CSSフレームワークが流行りだす前の記事かなって思って思わず投稿日見てしまった。

33: sakuro 2025/06/06 11:44

体感では、こういうデザインを寄越されたDevが赤ペン入れて差し戻すケースの方が多い

34: mermaidtan 2025/06/06 11:55

まあエンジニアでできる範囲って限られてるから専門家に見てもらうほうがいいよ。理系と文系みたいな違いがあるし。

35: Goldenduck 2025/06/06 12:50

CSVをUTF8で出力するんじゃねえとかそういうことではなかったしUIでもない

36: keidge 2025/06/06 12:53

屁理屈のようなコメントに星が集まっているのが面白い。

37: sin20xx 2025/06/06 12:54

"5. テキスト多すぎて読む気失せる"の説明は不十分。この手の順番が操作結果に影響する説明は必ず順番を意識させるように表示する事が重要。特に確定操作とその他の操作は目的が異なるので明示的にする事が必要です。

38: suka6411144 2025/06/06 12:56

デザイナーがやりがちな失敗: UIをコロコロ変える

39: hatest 2025/06/06 14:31

やりがち?仕様を詰めないで、コーダーに丸投げしてるから嫌がらせで報復されてるんじゃないのか?コーダーは仕様で決めたらその通りにデザインしてくれるだろ。

40: fishma 2025/06/06 15:01

「1. ボタンっぽく見えないボタン」からしてエンジニア発ではないフラットデザインの定番だしなあ...個人的には嫌いだけど世の中そういう流れになってるし...とモヤッたらみんなそんな感じだった

41: leiqunni 2025/06/06 16:57

レ点で正解は押し付けじゃないのか?

42: PrivateIntMain 2025/06/06 17:01

かけていい予算と人員と工数と緊急度の認識が合ってればそうはならんのでは。どこかに無理があると思ったほうがいい。

43: hachiking 2025/06/06 18:45

メールアドレスを入力しただけで、メールアドレスがそのサービスに存在するかわかるようなメッセージを出すとフィッシングに利用されやすくなると思うんだけど、例として不敵では?

44: jintrick 2025/06/06 20:22

"機能開発に集中するあまり、UIが後回しになっていませんか"  なんでGUIは素人でも作っていこうみたいな雰囲気なんだ。今どきまだこんな感じなのか世の中は。糞だった20年前と変わってないってか。専門特化してくれよ

45: tomoshiro377 2025/06/06 22:44

日本の分析機器メーカーのUIは最悪なんだけど、あれって「権威の先生」向けに作ってその先生の弟子が買って、海外では安かろう悪かろうで売る、という開発方針なのではと疑っている。

46: otchy210 2025/06/07 00:41

デザインというか、このレベルはエンジニアリングの範疇では?これらが分からずウェブエンジニアを名乗るのはさすがにまずい。

47: sabotem 2025/06/07 01:15

ガイドラインとテンプレートを用意しておいて欲しい。それに沿わないものは実装前にデザイナに要確認として。依頼側はガイドラインに沿った依頼、実装側はテンプレートを使った実装。よく見たらアウトなのあるな…。