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

気に入った記事をブックマーク

気に入った記事を保存できます
保存した記事の一覧は、はてなブックマークで確認・編集ができます
記事を読んだ感想やメモを書き残せます
非公開でブックマークすることもできます

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

テクノロジーカテゴリーの変更を依頼記事元:

qiita.com/mskmiki

適切な情報に変更

エントリーの編集

エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。

このページのオーナーなので以下のアクションを実行できます

タイトル、本文などの情報を
再取得することができます

コメントを非表示にできますコメント表示の設定

ブックマークしました

ここにツイート内容が記載されますhttps://b.hatena.ne.jp/URLはspanで囲んでください

Twitterで共有

次回からTwitterへ自動リダイレクト

ONにすると、次回以降このダイアログを飛ばしてTwitterに遷移します

1890usersがブックマークコメント

280

コメントするにはログインが必要ですブックマークを追加

ブックマークを追加

よく使うタグ

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

1890 users

qiita.com/mskmiki

よく使うタグ

はてなブックマークで
関心をシェアしよう

みんなの興味と感想が集まることで
新しい発見や、深堀りがもっと楽しく

ユーザー登録

アカウントをお持ちの方はログインページへ

記事へのコメント280件

注目コメント
新着コメント

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

2021/12/10リンク

その他

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

2021/12/10リンク

その他

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

2021/12/10リンク

その他

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

2021/12/10リンク

その他

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

2021/12/10リンク

その他

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

2021/12/10リンク

その他

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

2021/12/10リンク

その他

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

2021/12/10リンク

その他

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

2021/12/10リンク

その他

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

2021/12/09リンク

その他

yarumato“デザイナーとエンジニアはそもそも思考が大きく違っているということがわかりました。今回は「それ」をデザインに苦手意識のあるエンジニア方にも理解してもらえたらと”

2025/11/26リンク

その他

mallowlabsSEのAさんの通りの思考しちゃうよね〜

devel

2025/11/26リンク

その他

nilab“エンジニアの私がデザインを本気で勉強した結果、デザイナーとエンジニアはそもそも思考が大きく違っているということがわかりました”

2025/11/25リンク

その他

kaorun自分はデータ見てから、まず利用者がこのアプリで何をするのか、どういう流れなのか、から手をつける感じで考えてたな

2025/11/25リンク

その他

kobayas_sアプリだけでなくWeb制作でもコーディング寄りの考えか、デザイン寄りの考えかで頭の使い方が違うなと考えさせられる記事だった。もしこのアプリを使うとして、自分のやる気が出るデザインはデザイナーBさんの方。

2025/11/14リンク

その他

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

2023/06/18リンク

その他

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

2023/01/27リンク

その他

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

2023/01/26リンク

その他

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

2023/01/26リンク

その他

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

2022/12/09リンク

その他

Akkiesoftハーー

2022/03/18リンク

その他

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

2022/02/28リンク

その他

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

2022/01/16リンク

その他

eijison1q89作り方

2022/01/05リンク

その他

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

2021/12/19リンク

その他

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

2021/12/15リンク

その他

daruyanagi面白かった

2021/12/15リンク

その他

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

あとで読む

2021/12/14リンク

その他

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

2021/12/13リンク

その他

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

2021/12/13リンク

その他

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

2021/12/13リンク

その他

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

design

2021/12/12リンク

その他

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

Qiita

2021/12/12リンク

その他

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

2021/12/12リンク

その他

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

2021/12/12リンク

その他

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

2021/12/12リンク

その他

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

2021/12/12リンク

その他

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

2021/12/11リンク

その他

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

2021/12/11リンク

その他

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

2021/12/11リンク

その他

コメントするにはログインが必要ですログインしてコメント

注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています

リンクを埋め込む

以下のコードをコピーしてサイトに埋め込むことができます

プレビュー

はてなブックマークボタンを作成して埋め込むこともできます

規約違反を報告

いまの話題をアプリでチェック！

バナー広告なし
ミュート機能あり
ダークモード搭載

アプリをダウンロード

usersに達しました！

さんが1番目にブックマークした記事「なぜエンジニアが...」が注目されています。

気持ちをシェアしよう

ツイートする

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

1.はじめにエンジニアの私がデザインを本気で勉強した結果、デザイナーとエンジニアはそもそも思考が大...1.はじめにエンジニアの私がデザインを本気で勉強した結果、デザイナーとエンジニアはそもそも思考が大きく違っているということがわかりました。今回は「それ」をデザインに苦手意識のあるエンジニア方にも理解してもらえたらと思い、わかりやすくまとめてみました。 2.アプリの画面デザインを考えてみようまず、こんなアプリを考えてみてください。フィットネストレーナーが使うアプリトレーニングルームでお客様とお話しながら使う端末はタブレットそして会員の個人情報確認前回までのトレーニング状況の確認次回の予約受付といったことをします。使える情報としては、こんな感じです。あなたならどう画面デザインをするか、もしお時間があったら考えてみてください。本記事では、 SEのAさんデザイナーのBさんの二人が画面デザインをする過程を比べながら、その思考の違いを整理してみます。 3.SEのAさんの