なぜエンジニアが作る画面はダサいのか…?「理由」と「対策」を徹底解説【エンジニア向け画面デザイン講座】 - Qiita

なぜエンジニアが作る画面はダサいのか…?「理由」と「対策」を徹底解説【エンジニア向け画面デザイン講座】UXUIDesignUIデザイン画面設計 1.はじめに エンジニアの私がデザインを本気で勉強した結果、デザイナーとエンジニアはそもそも思考が大きく違っているということがわかりました。 今回は「それ」をデザインに苦手意識のあるエンジニア方にも理解してもらえたらと思い、わかりやすくまとめてみました。 2.アプリの画面デザインを考えてみよう まず、こんなアプリを考えてみてください。 フィットネストレーナーが使うアプリ トレーニングルームでお客様とお話しながら使う 端末はタブレット そして 会員の個人情報確認 前回までのトレーニング状況の確認 次回の予約受付 といったことをします。 使える情報としては、こんな感じです。 あなたならどう画面デザインをするか、もしお時間があったら考えてみてください。

[delta-ja]

さらっと流されてるけどBさんの手順1が死ぬほど重いステップで年単位で中にいる人かそういう人への入念なヒアリングが必要。勝手な想像でBを作ると大炎上するよ。Aは使いにくいけど安牌なことが多い。

[niemands]

デザイナーはお客さんのニーズに応じてAでもBでもデザインできる。エンジニアはAのデザインしかできない人が多い。そこが大きな違いだと思う。

[hatest]

AがいいかBがいいかはお客さん（使う人）に聞かないとわかんないよね。一画面で一覧化したAのほうが使いやすいってお客さんもいるのよ。作る側の思い込みでカッコイイのがいいってのは違うと思う

[kotaponx]

なんていうかこの手の文章で、職制を対立軸に据えるのはあんまり良くない気がするね。よくある理系文系みたいなもので。

[north_korea]

「フィットネストレーナーが使うアプリです」って最初に書いてあるのに「業務による」「管理画面はこれではだめ」みたいなクソリプが多くてかわいそう

[rdlf]

機能設計と画面設計の話がごっちゃになっていない？自分はBの手法でも配色とかでダサくなる自信があるぞ。

[sigwyg]

Bを先に出しても、Aにしてくれってお客さんに言われるよ。業務システムはイケてるデザインよりも、一覧性と効率重視なのだ。toCならカッコよくする。

[wsmfp327]

熟練度によって複数のUIが必要な気がする。 初心者はBで、仕組みがわかってくるとAの方が使いやすそう。

[miki3k]

ターゲット層が違う画面を設計しているように見える。

[n314]

とても良いけどサンプルがちょっと引っかかるかな…。一般ユーザー向けじゃない情報をぎっしり詰め込んだ文字だらけの管理画面って、作ってるこっちよりオペレーターの方が把握してて使いこなしてる。

[deloreanmc12]

自分は典型的SEデザインだな…

[vivit_jc]

ウワ〜〜〜〜〜〜今日から毎日6か条を唱え続けます

[urd0401]

「情報をジャンキーにインプットしたいし、自分はインプット可能である」という認識なので、Aを作って自己満足しがち

[dnasoftwares]

表向き用にBを作り管理に備えてAも用意しなきゃいけなくてドッカーンという話ではなかったね（

[MochikingChuck]

あれれ〜？Aさんの画面なんか見たことあるぞ〜？最近も作ったなあ〜〜？？

[Akkiesoft]

ハーー

[Nilfs]

振り返ってちゃんと考えながら実装してみよう

[animist]

そうなるプロセスが身にしみてわかりやすい

[eijison1q89]

作り方

[rochefort]

優先順位で強弱をつけながら配置とか、言語化してるのいいやん

[harukeki]

“最後です。 表の場合行数が多いと前後の情報が区別しにくかったりしますよね。 Aさんはそこにも気を配り「行を縞々にす”

[daruyanagi]

面白かった

[digo]

自分のファッションセンスも何とかして欲しい。

[stealthinu]

これもろに自分はAさんの発想だからデザイナの人の発想は参考になった。

[daira4000]

書いてある前提条件読まずに叩いてる人設計できなそう

[masayoshinym]

ブコメで叩かれてそうって思ったら案の定だった。

[Nyoho]

素晴らしかった。使われ方、どう見えるか、どう思われるか、徹底してユーザ目線になっていることがわかった。何でもすぐ表にしてしまうのはわしはdbをそのまま出しているだけのプログラマ目線だと主張しています。

[tesla_quet]

妄想：根拠もなくあれこれと想像すること。無根拠で使える画面が作れるかい！ってなっちゃって本題が頭に入ってこなかったわ。書くなら、想定：ある条件や状況を仮に設定すること。かな？

[moondoldo]

この辺は使用目的によって変わるだろうけど、UIを作る視点として確実に学ぶことはあると思う　スマホアプリがこの考えに近い物が多い気がするね

[pupurigesu]

UIデザインの参考になるかも

[iwanofsky]

Aの良さも理解するんだが、俺おかしいんかな？

[grandcolline]

このダサい画面作るエンジニア自分すぎる。

[blackshadow]

ABそれぞれの良さがあるので状況に応じて両方作れるのが一番良いし、ユーザーによっても意見変わるので場合によってはスタイル切替も考慮する。最近何でもかんでもBタイプにしたがるSEもいてそれはそれで困る。

[yogasa]

Bみたいな、ずーーーーっとスクロールしないと欲しい情報にたどり着かないの好きじゃない（下手したらずーーーーっとスクロールしても欲しい情報にたどり着かない）

[aike]

トレーナー向けにはBが正解なんだけど、それだとデータ登録業務用にAの画面も別途作らなくてはならなくて開発も維持管理も倍のお金がかかるというのもまた事実。

[lets_skeptic]

わかる

[yasu-osu]

丁寧でわかりやすい。おまけに動画まで。伝えている内容とコンテンツ自体が整合しているのも素敵です。

[koyuman]

一概にBがいいとも言えないなって思いつつ、日々Aみたいな画面の業務アプリにムカつきまくってるからやっぱBが最高

[kanetann]

ああ、こういうのが見たかった。実例がわかりやすくて再現可能でためにしかならない、ありがとうございます。

[Lagenaria]

この記事の場合、トレーナーはほぼ確実に非エンジニアなので業務システムのような画面は使いにくいと感じるだろう。タブレット向きでないのも確か