[フレーム]
はてなブックマークアプリ

サクサク読めて、
アプリ限定の機能も多数!

アプリで開く

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

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

エントリーの編集

loading...

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

タイトルガイドライン

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

タイトル、本文などの情報を
再取得することができます
コメントを非表示にできます コメント表示の設定

ブックマークしました

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

Twitterで共有

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

1855users がブックマーク コメント 276

ガイドラインをご確認の上、良識あるコメントにご協力ください

0 / 0
入力したタグを追加

現在プライベートモードです 設定を変更する

おすすめタグタグについて

よく使うタグ

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

1855 users qiita.com/mskmiki

ガイドラインをご確認の上、良識あるコメントにご協力ください

0 / 0
入力したタグを追加

現在プライベートモードです 設定を変更する

おすすめタグタグについて

よく使うタグ

はてなブックマーク

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

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

ユーザー登録

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

記事へのコメント276

  • 注目コメント
  • 新着コメント
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
この記事の場合、トレーナーはほぼ確実に非エンジニアなので業務システムのような画面は使いにくいと感じるだろう。タブレット向きでないのも確か

その他

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

リンクを埋め込む

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

プレビュー
アプリのスクリーンショット
いまの話題をアプリでチェック!
  • バナー広告なし
  • ミュート機能あり
  • ダークモード搭載
アプリをダウンロード

関連記事

usersに達しました!

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

気持ちをシェアしよう

ツイートする

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

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

ブックマークしたユーザー

  • Yh02122025年07月27日 Yh0212
  • accelerk2025年06月24日 accelerk
  • spirit92025年05月01日 spirit9
  • ultra_sirouto2025年04月20日 ultra_sirouto
  • sea295x22025年04月20日 sea295x2
  • route_haduki2025年03月07日 route_haduki
  • oomn2024年09月30日 oomn
  • showgotch2024年08月16日 showgotch
  • nunnunun2024年08月03日 nunnunun
  • meityou2024年04月15日 meityou
  • fpbon2024年04月10日 fpbon
  • syque2024年03月20日 syque
  • mkusaka2024年03月09日 mkusaka
  • mirabakesso-0w02024年01月30日 mirabakesso-0w0
  • teematsu2024年01月22日 teematsu
  • akiyoko2024年01月22日 akiyoko
  • njrhh2023年10月18日 njrhh
  • iwalk_h2023年09月24日 iwalk_h
すべてのユーザーの
詳細を表示します

ブックマークしたすべてのユーザー

いま人気の記事

いま人気の記事をもっと読む

いま人気の記事 - テクノロジー

いま人気の記事 - テクノロジーをもっと読む

新着記事 - テクノロジー

新着記事 - テクノロジーをもっと読む

同時期にブックマークされた記事

いま人気の記事 - 企業メディア

企業メディアをもっと読む

はてなブックマーク

公式Twitter

はてなのサービス

Copyright © 2005-2025 Hatena. All Rights Reserved.
設定を変更しましたx

AltStyle によって変換されたページ (->オリジナル) /