「設計とデザインを分けた瞬間、UIは詰む」 ユーザー視点で見直す“エンジニアの画面デザイン”：＠IT Techブログ PickUp（TISインテックグループ編）

エンジニアとして画面をデザインしてみたものの、「なぜかパッとしない」とお悩みの方は多いのではないでしょうか。実は、デザイナーとエンジニアの違いはセンスではなく、考え方や手順の違いが大きいのです。本稿では、デザインに苦手意識のあるエンジニアの方でもすぐに実践できる魅力的な画面づくりのヒントをお届けします。

[Fintan]

注目のテックブログから「現場の知恵」をあなたに――

各社のエンジニアが発信する「テックブログ」。その熱量を＠IT編集部がピックアップ。 生成AI前提時代に向けて環境が激変する中、“隣のエンジニア”は何を感じ、何を考え、どうアクションしているのか？――試行錯誤のプロセス、成功の鍵、変化に立ち向かうマインドなど現場のリアル、ナレッジを凝縮してお届けします。

本稿はTISインテックグループが運営する、開発現場から生まれた技術ノウハウを公開するサイト「Fintan」上で2021年7月21日に掲載した動画コンテンツを記事化したものです。そのため、用字用語の統一ルールなどが、＠ITのものと異なります。ご了承ください。

連載目次

　エンジニアとしてシステム開発に携わっている方の中で、次のようなお悩みを抱えている方はいらっしゃいませんか？

• いろいろ工夫しているのに、画面がどうしてもパッとしない
• 画面が「ダサい」と言われるので何とか改善したい
• 直感的に使える画面って、どんなものか分からない
• センスのある人材がいない。かといってデザイン会社に発注する予算もない

　本稿は、上記のような悩みをお持ちの方に向けた「エンジニアとデザイナーの思考の違いから学ぶ画面デザインの基礎講座」です。皆さんが抱える「画面デザインに何が足りないのか」という悩みに対する答えをわかりやすくご紹介していきます。

　実はデザイナーとエンジニアの違いは「センスの有無」の違いではなく、「思考」つまり「画面デザインを考えていく手順やポイント」の違いにあります。その手順やポイントを身につければ、センスに自信がないエンジニアでも魅力的な画面を作れるようになります。

　さて、本講座ではエンジニアのAさんとデザイナーのBさんの画面設計の手順やポイントを比較しながらその違いをご紹介したいと思います。

　最後にはすぐ実践できるエンジニアが覚えておきたい画面デザインの心得6か条を紹介しますので、ぜひ最後までご覧ください。

事例：トレーナー向けタブレットアプリ

　本講座では、フィットネスジムのパーソナルトレーナーが利用するタブレット用アプリの画面デザインを例にとりあげます。

　このアプリは、トレーナーがトレーニングルームでタブレットを使い、お客様と対話しながら利用するものです。主な機能は次のとおりです。

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

　さらに、このアプリで扱う情報は以下のようなものです。

• 会員の個人情報（会員Noや氏名など）
• トレーニング詳細情報（どんな種目を何回行ったか）
• トレーニング履歴・予約情報（トレーニングの日時や担当トレーナー名など）

エンジニアのAさんの画面デザイン

　この要件に対して、エンジニアのAさんがどのように画面デザインを行ったかをご紹介します。

　Aさんは入社8年目で、責任感が強く、きめ細かいところまで気を配れる性格なので、先輩や後輩から信頼されている方です。

　Aさんはまず、必要な情報を表として整理しました。

　そのうえで、次のような機能を画面に追加していきました。

• 電話番号やSNSへのリンク
• 画面下部の「予約新規登録ボタン」
• 削除したい行を選択するチェックボックスと、削除を実行する「削除ボタン」
• 編集や詳細確認のためのダイアログを表示する「編集・詳細ボタン」

　続いて画面上部に画面タイトルを追加し、操作説明のための丁寧な説明文を追記しました。

　これで画面設計ができました。これから画面デザインに入ります。

　まず、お客様企業のロゴで使われている青色をヘッダーや表のタイトルに入れました。これで画面全体が明るくなって、イメージがだいぶ変わりました。

　また、画面タイトルやラベル、ボタン名などがより目立つよう、太字や白抜き文字を用いました。

　脚や全身などの「部位」情報は区別しやすいよう異なる色にしました。またボタンについても青系の色で統一し、用途が一目で分かるようにアイコンを追加しました。

　さらに行を縞模様にして前後の情報を区別しやすくする工夫を施しました。最後にユーザーの写真を入れて、完成です。

　Aさんの心配りが行き届いた画面が出来上がりました。

デザイナーBさんの画面デザイン

　一方、デザイナーのBさんはどのように考えて画面デザインを作成したのでしょうか。

　Bさんは新入社員ですが、とても勉強熱心で先輩からも将来を期待されています。

　まずBさんは、このアプリがどのような場面で使われるかをじっくりと考えました。

• 名前を呼ぶ必要があるので、実は氏名の読み方が重要
• 会話の中では具体的な日時よりも、「1週間前」や「明日」といった表現の方が使いやすい
• 身体の状態を把握してもらえていると、会員も気持ちよくトレーニングができそう
• 次回予約を促すためにも予約済みかどうかは強調したい

　使える情報をじっと眺めていたBさんは、いきなりラベルを消してしまいます。

　そしてBさんは、必要な項目だけに補足情報を加えました。例えば「会員No.」は番号だけでは伝わらないためラベルを追加し、生年月日は日付の後に「生まれ」を付記しました。一方、氏名は見れば分かるためそのままにしました。

　続いてBさんは、会員の個人情報を以下の3グループに分類し、それぞれに優先順位をつけて整理しました。

• 個人の識別に使う情報
• 連絡に使う情報
• その他

　そして、その優先順位にあわせて、大きさや順番で表現しました。

　さらに、グループ内の情報にも優先順位をつけました。

　いよいよレイアウトです。先ほどの優先順位に沿って、重要なものほど上や左に配置しました。

　トレーニング履歴と予約情報についても同様にグループ化をして、優先順位をつけました。

　グループの中でデータの加工と優先順位付けをして以下のようになりました。

　これらの情報を画面上にどう配置するか、レイアウトの候補を検討します。候補となったレイアウト形式と特徴は以下の通りです。

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

　今回はカード形式を選択しました。

　レイアウトが決まったところで、先程整理したデータを優先順位にあわせて配置してみます。

　ここでやっと機能の追加を始めます。

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

　最後に、部品が期待通りの用途で認識されるよう装飾して完成です。

2人の画面デザインを見比べ

　2人のデザインを見比べてみましょう。

　デザイナーのBさんの画面デザインは、ぱっと見ただけで情報が目に入ります。説明文がなくとも、直感で操作できそうな印象です。一方で、エンジニアのAさんの画面デザインは、じっと見なければ情報を把握できません。また、ボタン同士の間隔が狭くタップ操作が難しいかもしれません。

　なぜここまで違いが出たのでしょうか。2人の画面デザインの手順を振り返ってみましょう。

エンジニアのAさんとデザイナーのBさんの画面デザインにおける手順と意識の違い

　エンジニアのAさんはまず情報を表にまとめ、そこに必要な機能を追加しました。その後、操作方法がわかるよう丁寧な説明文を付け加え、最後に色づけや装飾といったデザイン作業を行いました。

　つまりAさんにとって、画面デザインは「画面設計の後にあるプラスアルファ」と位置付けられていました。

　一方デザイナーのBさんは、このアプリが実際に使われる場面を想像し、情報のグループ化や優先順位付け、加工などを徹底的に行いました。続いて、優先順位に沿って情報に強弱をつけながら配置して、必要な機能を追加。仕上げとして、「部品をどう認識してほしいか」を意識しながら画面全体を装飾しました。

　つまりBさんはAさんと異なり、「設計」と「デザイン」を明確に分けることなく、「設計そのものがデザインである」という意識で画面デザインをしています。

　このようにエンジニアとデザイナーでは、画面デザインの考え方や手順、意識するポイントが大きく違います。そして、デザイナーが実践していることも、それほど難しいことではないと実感していただけたのではないでしょうか。

エンジニアが覚えておきたい画面デザインの心得6か条

　画面デザインの考え方や手順、意識するポイントの違いを理解いただいたうえで、ここからは「デザイナーのような画面を作るためにエンジニアが覚えておきたい画面デザインの心得6か条」をご紹介します。

その1.いきなり表をつくるところから始めない

　これはエンジニアのAさんがやっていたことです。誤解しないでいただきたいのは、「表を使うのが悪い」という意味ではありません。 ただ、一度表を作ってしまうと思考が固まってしまい、表ではなくグリッド形式やリスト形式が適している場合でも、気づきにくくなってしまいます。

　まずはいきなり表に落とし込むのではなく、じっくり比較しながら最適な方法を考えることが重要です。

その2.なくても伝わるものは削る

　「氏名（漢字）」「氏名（かな）」などのラベルや、情報の区切り線は絶対に必要なものだと思っていないでしょうか?

　「シンプルイズベスト」という言葉があるように、デザインにおいても、なくても伝わるものは極力削っていくことが成功のカギです。

全ての要素について「絶対に必要だ」という固定観念にとらわれずに、一度立ち止まって考えてみてください。

その3.情報は強弱をつける

　全ての情報を同じサイズ・色・調子で並べると、次の画像の左側の例のように単調でつまらない印象になりやすいです。

　右側の例のように優先順位にあわせて強弱をつけて表現すると、一目で情報が目に入り、画面を魅力的に見せることが出来ます。これを一般に「メリハリ」があると言います。

その4.データの加工を厭わない

　データベースの値を画面にそのまま表示したくなりますが、ユーザーの利用シーンをイメージしながら「面倒でもデータを加工する」ことが大きな違いを生みます。可能な範囲で構わないので、データ加工を取り入れましょう。

その5.装飾で「どういうものか」を表現する

　装飾は「今風」や「おしゃれ感」を演出するものではなく、「これは押せるボタンだ」「ここが選択されている」「重要な情報だ」「ここを押すと追加機能が出てくる」といったように、ユーザーに部品の意味や状態を直感的に伝えるものです。

　これにより、丁寧な説明文がなくとも直感的にユーザーが操作できる分かりやすい画面となり、説明文で画面が煩雑になることがなくなります。

その6.設計とデザインを線引きして区別しない

　設計とデザインを明確に区別しないようにしましょう。

　たとえば、Aさんが作成した表を元にBさんのデザインを作成するのは、どんなに優秀なデザイナーが装飾しても非常に難しいことです。設計時点でデザインの限界が決まってしまうのは非常にもったいないことです。なるべく画面デザインとは画面設計であるという意識で進めましょう。

　以上が「エンジニアが覚えておきたい画面デザインの心得6か条」でした。こちらを意識して画面デザインをしていただけると、魅力的な画面作りができるようになるはずです。

　本稿に掲載している図は、下記ページに掲載されている講座資料PDFから抜粋しています。

• エンジニアとデザイナーの思考の違いから学ぶ画面デザインの基礎講座

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

• いらすとや
• Google Fonts
• りいのフォント
• Get Waves
• Devices from Facebook Design

元ブログもチェック！

元記事はコチラ。ぜひチェックしてみてください！