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




# 1.はじめに
エンジニアの私がデザインを本気で勉強した結果、デザイナーとエンジニアはそもそも**思考が大きく違っている**ということがわかりました。
今回は「それ」を**デザインに苦手意識のあるエンジニア方**にも理解してもらえたらと思い、わかりやすくまとめてみました。
![スライド2_w720.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2318794/d714fc3f-457a-63f1-f0e3-be62c004c839.jpeg)

# 2.アプリの画面デザインを考えてみよう

まず、こんなアプリを考えてみてください。

![スライド5_w720.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2318794/67ba0a0d-0c12-e261-f0bb-3d1131681775.jpeg)

- フィットネストレーナーが使うアプリ
- トレーニングルームでお客様とお話しながら使う
- 端末はタブレット

そして

- 会員の個人情報確認
- 前回までのトレーニング状況の確認
- 次回の予約受付

といったことをします。


使える情報としては、こんな感じです。

![スライド6_w720.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2318794/b8df5dbe-bd3a-68e2-0953-f43c38899cb4.jpeg)
あなたならどう画面デザインをするか、もしお時間があったら考えてみてください。

本記事では、

- SEのAさん
- デザイナーのBさん

の二人が画面デザインをする過程を比べながら、その思考の違いを整理してみます。

:::note info
思考の違いを整理した記事ですので、上記の情報しか使えない前提でお願いします。「要件定義をもっとちゃんとしろ」「予算・工数はどのぐらい確保されているのか」「まずはUXリサーチからだろ」「デザインはデザイナーにやらせろ」等々…色々とご意見あるのはごもっともですが…話が広がり過ぎてしまうので、ご了承ください。
:::
# 3.SEのAさんの画面デザイン
SEのAさんはどのように画面デザインをしたかご紹介します。
Aさんは、入社8年目、とても責任感が強く、きめ細かいところまで気を配れる性格なので先輩や後輩から信頼されています。
![スライド8_w720.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2318794/84af718a-2be2-8a33-17e6-c78762803a98.jpeg)
Aさんは、まず情報を表をつかってきれいに整理しました。
![スライド9_w720.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2318794/7dfe45a9-90ee-1a84-499a-9ad8724c39e9.jpeg)
次に、機能を追加します。
「電話番号」「SNS」にリンクを貼り、直接アクセス出来るようにしました。
そして「予約新規登録ボタン」も追加しました。
![スライド10_w720.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2318794/98b964b5-e008-633e-d8a6-9d3df44f86d6.jpeg)
次は「トレーニング・予約情報」を削除するための「行を選択するチェックボックス」「削除ボタン」をつけ、そして編集/詳細画面に遷移出来る「編集/詳細ボタン」を追加しました。
これでだいぶ機能が網羅されて来ました。
![スライド11_w720.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2318794/45415ecf-5d01-c6d1-e898-4e0f524eb267.jpeg)
「画面タイトル」も必要だろうと「トレーニング履歴一覧画面」というタイトル名で一番上に大きい文字で入れました。
![スライド12_w720.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2318794/3a2c21af-6fc8-880b-06f6-7bb77958eca5.jpeg)
気配りやのAさん、ぬかりがありません。
操作に迷わないように、丁寧な説明文を追記しました。
![スライド13_w720.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2318794/501638e1-39bf-6fc8-0c05-dce99be83213.jpeg)
「画面設計」がある程度できましたね。これからお楽しみ「画面デザイン」に入ります。
![スライド14_w720.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2318794/f86cfca7-580f-5b0c-6d1d-9c9cd1bc8ccf.jpeg)
まずAさんがしたのは「色がないと寂しい!」と、お客様企業のロゴの青色を使ってヘッダーや表のタイトル部に色を入れました
だいぶ明るくなってイメージが変わりましたね。
![スライド15_w720.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2318794/4805f223-0e61-f83f-6c74-6c71e1e064f1.jpeg)
そして、重要なところ「画面タイトル」や「ラベル」「ボタン名」などがより目立つように、太字にしたり、白抜き文字にしてみました。
![スライド16_w720.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2318794/eb102a9c-60e6-34fb-5d81-8277737af2e7.jpeg)
次に「トレーニングする部位」は情報を区別しやすいように、色を変えて表現してみました。
![スライド17_w720.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2318794/287ee332-f25e-4951-4167-d06cac552899.jpeg)
ボタンも青系で統一し、それらしくアイコンを入れてみました。
![スライド18_w720.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2318794/44b26b8f-8bc2-bf46-0c1d-660bb9eec7ab.jpeg)
いよいよ最後です。表は行数が多いと前後の情報が区別しにくかったりしますよね。
Aさんはそこにも気を配り「行を縞々にする」というひと手間加えました。
![スライド19_w720.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2318794/6e7850fc-8eb5-46a4-37ad-1a500561c72e.jpeg)
はい。写真を入れて、これで完成です。
![スライド20_w720.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2318794/aeb8e9a0-ea54-191d-9349-c99cf94643e1.jpeg)
どうでしょうか。Aさんの心配りが行き届いた画面が出来上がりました。
みなさんの考えた画面と比べて似ているところ、ありましたか?
![スライド21_w720.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2318794/32d88171-8ada-39d4-7281-78eba2c91237.jpeg)
ちなみに、詳細画面はこのような感じになりました。
![スライド22_w720.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2318794/fda3a5b5-fc69-bc6e-d90c-892585e19ac9.jpeg)


# 4.デザイナーのBさんの画面デザイン
一方で、デザイナーのBさんがどのように画面デザインをしたかご紹介します。
Bさんは、まだ新入社員です。それほど経験やスキルはありませんが、とても勉強熱心で先輩からも将来を期待されています。
![スライド24_w720.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2318794/13e80684-c4ca-c7f1-8c12-8d07aa6d7b53.jpeg)
Bさんは、まずどうしたかといいますと。。。
どのように使われるかをじっくり考えてみました。

- 名前を呼ぶから、実は「氏名のよみがな」が重要だよね
- 自分ことや身体のことをしっかり知っていてくれると、会員も気持ちよくトレーニングできるだろうな
- 次回予約を確実にとりたいから、予約が済んでいるかという情報は目立たたせたい
- 会話の中では「具体的な日時」より「1週間前」「明日」とかの方が理解しやすいくていいよね

といった風に、より一歩想像を働かせてイメージを固めていきます。
![スライド25_w720.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2318794/7a69de93-1f35-13b1-a323-62c9bbe765c8.jpeg)
そして、使える情報をじっーーとみます。
![スライド26_w720.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2318794/d3c1bab7-9f0b-b563-1df0-3c41ae1fdfe4.jpeg)
そして、いきなり、ラベルを消してしまいます。大丈夫でしょうか・・・
![スライド27_w720.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2318794/8df9fcb8-ea27-f7ab-bfc5-03ef6662a0c5.jpeg)
次にBさんがしたこと、それはラベルをとった情報をみて、伝わらないところのみ必要な情報を補完します。
例えば「会員No」は、流石に「123」だけだとわからないので、「会員No.」というテキストを付加します。
また、「生年月日」は「生まれ」と補足するだけでわかるようになるので、それを追加しました。
他の「氏名」などはラベルがなくても、見れば大体なんの情報なのか理解できるのでそのままにしました。
![スライド28_w720.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2318794/2649a7f0-8f45-126f-e677-ce70e6ade9f4.jpeg)
次にしたことは、会員の個人情報グループ化してみました。
Bさんが分けたのは以下の3つのグループです。

- 個人の識別につかうような情報
- 連絡に使うような情報
- その他、会話のネタなどに使うのかなという情報

そしてそれぞれ、グループに優先順位をつけてみました。
![スライド29_w720.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2318794/2441356c-80ee-b049-e9b8-69b7a8cef4fe.jpeg)
次に、同じグループの中でも優先順位をつけて、その優先順位を大きさだったり順番で表現してみました。
![スライド30_w720.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2318794/408159d8-3959-507b-1791-6915d86223b5.jpeg)
グループ中で優先順位をつける中、「連絡に使う電話番号やSNSは、直接アクセスできるようにするならそれっぽくアイコンのリンクとかにした方がいいよね。」とか、「生年月日より、何歳っていう表現の方が会話につながりやすいよね。」と加工も始めました。
![スライド31_w720.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2318794/cabb2583-1cbc-0041-d6a9-2fcb53bc910e.jpeg)
そしていよいよ、レイアウトです。
先程の優先順位順に、このように配置しました。
「優先順位が高いものを上か左に配置」していくのが基本です。
![スライド32_w720.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2318794/0535153e-b88c-c7ef-ef75-e48ecdf251f6.jpeg)
トレーニング履歴・予約情報も同様に…
![スライド33_w720.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2318794/c03beadc-9838-ccf3-baaa-fd6e2aa51a9e.jpeg)
グループ化をして、グループに優先順位をつけました。
![スライド34_w720.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2318794/d10cf0f2-2c42-c9ee-79c1-c8fd19a113d3.jpeg)
そして、グループの中で、加工と優先順位付けをして…こんな感じになりました。
![スライド35_w720.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2318794/fedc9b3a-522f-c8fa-a004-3d5732af7acb.jpeg)
![スライド36_w720.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2318794/f9e6e764-8092-42b5-1d7e-ceefd84e630e.jpeg)
で、配置するんですが、その前に、一覧レイアウトを検討します。

| 一覧レイアウト形式 | 特徴 |
|:-:|:-:|
| 表形式  | 柔軟なソートや絞り込み、その場での編集が得意  |
| グリッド  | ビジュアル要素がメインの場合を得意  |
|  リスト | 順番が重要でかつ、ビジュアル要素もテキスト要素もまとめやすい  |
|  カード |  リストに似ているけど、さらに機能を追加しやすい |


などいくつかの候補の中から、今回はビジュアル要素もテキスト要素も使え、機能も追加しやすい「カード形式」を選択することにしました。
![スライド37_w720.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2318794/d7d382cd-3cdb-5cac-622e-5d14afa918cd.jpeg)

そして、カード形式のレイアウトの中に、先ほどのデータを優先順位順に配置。
![スライド38_w720.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2318794/fac99ef5-bc39-9eb7-30c9-8f4af5b1f05c.jpeg)
今回は最新のデータを参照することがほとんどであると思われることから、日付の降順にデータを表示することにしました。
![スライド39_w720.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2318794/0e143ecc-1a41-0c16-e60a-d3509b17cace.jpeg)
そして、ここでやっと機能の追加を始めます。

- 「電話」と「SNS」のアクセス機能
- 「予約ボタン」
- 「編集・削除」機能へのメニュー表示
- カード選択による「編集・詳細」表示


を追加しました。
![スライド40_w720.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2318794/deb625bc-9f4c-0840-5bb8-018c57fbdf4a.jpeg)
そして最後に、どういう部品として認識して欲しいかで装飾をして、完成です!!
![スライド41_w720.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2318794/8b426f4c-6d9f-7e8f-a6bd-b14a32f07069.jpeg)
どうでしようか?
![スライド42_w720.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2318794/2092a554-630c-27dd-e5ba-aa46d8e5f415.jpeg)
ちなみに、詳細画面はこんな感じになります。
![スライド43_w720.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2318794/a7c7f204-30df-ea35-c1a6-fcc89950d304.jpeg)

# 5.二人の画面デザインを比べてみよう
二人の画面デザインを比べてみましょう。どうですか?
![スライド44_w720.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2318794/1ce6e42d-3bf0-ab69-c187-cc6dc8528c56.jpeg)

デザイナーのBさんの画面デザインは「パッと見」で情報が目に入ってきますね。
そして、説明文はないけれど、なんとなく「直感的に操作できそう」な感じします。

反対に、SEのAさんの画面デザインはというと、あんなに心配りをしていたのにも関わらず、「じっとみないと情報が目に入ってこない」ですよね。
しかも、ボタンがくっつきすぎていて体格のいい男性トレーナーの太い指ではもしかしたらタップ操作が難しいかもしれません。

![スライド45_w720.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2318794/eb598d98-aca3-5375-9a3d-421806d9a500.jpeg)


なぜ、ここまで違ってしまったのか。二人の画面デザインの手順を復習してみましょう。

SEのAさんは、まず、「情報を表にまとめ」「機能を追加」しました。そして、わかりやすいように丁寧な説明をつけくわえて、そこからデザインを始めて、「色付け」「装飾」を施しました。

つまり、Aさんの中で、画面デザインのことを画面設計の後にやる「＋α」「お化粧」と考えていました。

次に、デザイナーのBさんですが、まず「どう使うかをとことん考え」「情報のグループ化や優先順位付け、加工など」を徹底的にやりました。
その後、「優先順位の順に情報を強弱をつけながら配置」して、「機能を追加」、仕上げとして画面全体の中でどういう部品であると認識してもらいたいかを意識して装飾をしました。
つまり、Bさんは「ここから設計」「ここからデザイン」という意識は全くなく、設計そのものがデザインであるという認識でした。
![スライド46_w720.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2318794/1bf62964-f8d7-9e65-e988-7b1cfd968f42.jpeg)
このように、SEとデザイナーでは「思考」、具体的にいうと**画面デザインの「考え方」や「手順」、意識する「ポイント」が大きく違う**ことが理解できたと思います。
# 6.SEが覚えておきたい画面デザインの心得6か条
違いを理解していただけたと思いますので、ここからは「デザイナーのような画面を作れるようになるためにSEが覚えておきたい画面デザインの心得6か条」として、復習をさせてもらいます。
![スライド46_w720.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2318794/da632fa2-753d-625b-4107-0e29a50b258b.jpeg)
## その1.いきなり表をつくるところから始めない
SEのAさんがやっちゃっていましたね。
誤解をしないでいただきたいのですが、これは表が悪いということではありません。
**一度表を作ってしまうと、思考がどうしても固まってしまい**、もしかしたら「グリッド形式」や「リスト形式」などがいい場合でも、それになかなか気づけなくなってしまいます。
なので、とりあえずいきなり表を作るのは我慢して、ジックリ比較して考えてみるというのが重要だということです。
![スライド47_w720.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2318794/734f67c2-d5fa-ae1e-222b-7aa44e194451.jpeg)
## その2.なくても伝わるものは削る
例えば、ラベル、情報の間を区切る線など絶対に必要なものだと思ってないでしょうか?
今回の例のように、場合によってはなくてもよかったりすることがあります。
「Simple is BEST」という有名な言葉がありますが、デザインでも**無くても伝わるものは極力削っていくことが成功のカギ**と言われています。
是非、全てのものについて「絶対に必要だ」という固定観念にとらわれずに一度立ち止まって考えてみるということを必ずしてみてください。
![スライド48_w720.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2318794/0ab21b98-c784-9176-3285-fae677f2c2d9.jpeg)
## その3.情報は強弱をつける
全ての情報を同じサイズ、同じ色、同じ調子、で並べてしまうと、やはりどうしても左のように単調で、つまらない感じになってしまいます。
それを右のように**優先順位順に強弱をつけて表現すると、パット見で情報が目に飛び込んできて、かつ魅力的に見せることが出来ます。**
これを一般に「メリハリ」があると言います。
![スライド49_w720.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2318794/828133cb-8e35-b540-ca37-05a4ea3771e8.jpeg)
## その4.データの加工を厭わない
どうしても、データベースの値と画面の表示を同じにしてしまいがちだと思いますが、ユーザの使うシーンなどをイメージしながら、面倒でもデータの加工をしてあげるだけで、これだけ変わってきます。
**出来る範囲で構いませんが、是非加工という意識をしてくれるとよい**と思います。
![スライド50_w720.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2318794/3ef6cff6-040c-ec86-514e-ac25ef7f568d.jpeg)
## その5.装飾で「どういうものか」を表現する
**装飾は「今風」とか「おしゃれ感」を演出するのではなく**、「ここは押せますよ」「選択していますよ」「ここは重要ですよ」「ここは機能が隠れています」ということを表現することに力をいれましょう。
そうすることで、丁寧な説明などがなくても直感的にユーザが理解してくれるようになり、わかりやすい画面となり、説明文でごちゃつくことがなくなります。
![スライド51_w720.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2318794/0713f6df-0d08-9274-611b-e8c960a3e0e8.jpeg)

## その6.設計とデザインを線引きして区別しない
最後は、Aさんがやってしまっていたような、そもそも「設計」と「デザイン」という線引きをしないようにしましょう。ということです。
例えば、Aさんが作った画面設計をどんなに優秀なデザイナーさんに装飾してもらったところで、下の画面にはならないのはお分かりいただけますよね。
このように、限界値を決めてしまうことはとてももったいありません。**「画面デザインとは画面設計である」** という意識ができると違いが出てくると思います。
![スライド52_w720.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2318794/daf8f11a-80e1-eae4-dc9e-ad6521f3f73a.jpeg)
## 画面デザインの心得6か条 まとめ
以上が、「SEが覚えておきたい画面デザインの心得6か条」でした。
こちらを意識して画面デザインをしていただけるとSEであってもデザイナーのような魅力的な画面作りに近づけるようになってくると思います。
![スライド53_w720.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2318794/c451ed6b-3900-70c3-ed79-6b4ae5a1f133.jpeg)


# 7.動画あります
こちらの内容を動画化してたものを下記で公開しています。もしよかったらチェックしてみてください。

 https://fintan.jp/page/1631/


[<img src = "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2318794/8d2b4ea4-fc45-b45a-384b-438229ac19d8.jpeg">](https://fintan.jp/page/1631/)



# 8.おわりに
ここまで読んでいただきありがとうございました。

**「画面デザイン＝最後にするお化粧、センスがよければすぐできる、頑張ってもできない自分はセンスがない」と誤解している人向け**に、どのように説明するとわかりやすいかと考えてまとめただけのものになります。
そんな方にお役に立てたらうれしいです。

最後に、誤解を与えないよう補足しておくと、
この記事では、「具体例を通して思考の違いを説明」しただけですので、**必ずしも全ての状況でBさんの画面がよい、そしてBさんの画面が最適解と言っているものではありません。**（そのため、Bさんを新人デザイナーにしています。）また実際はエンジニアであろうが、デザイナーであろうが様々な思考の方がいらっしゃると思います。もし、お気を悪くされた方がいましたら申し訳ありませんでした。
ありがとうございました。

:::note info
登場人物の考え方、手順、完成した画面など本記事に掲載させている内容は、初級者にわかりやすくするためにつくられたフィクションです。実際の考え方や最適なものとは異なる場合がございます。ご了承ください。
:::


## SPECIAL THANKS
編集リクエストや、文章のおかしいところご指摘いただいた方、ありがとうございます。
大変に助かりました。


本コンテンツでは下記サイトで公開されている素材を利用しています。
本コンテンツ内で使用している素材は配布元のライセンスに準拠します。

- いらすとや　https://www.irasutoya.com/
- Google Fonts　https://fonts.google.com/
- りいのフォント　http://aoirii.babyblue.jp/font/index.html
- Get Waves　https://getwaves.io/
- Devices from Facebook Design　https://design.facebook.com/toolsandresources/devices