【エンジニア向け】“心地よい”管理画面のデザイン　〜 デザインの4原則 +α 〜


# はじめに

企業や案件にもよりますが、管理画面のデザインがない状態で開発を行うことはありませんか。

「ライブラリを使ったけど、このデザインでいいのかな？」
と悩むエンジニアの方もいると思います。

そこで今回は **デザインの4原則 + α（余白、視線誘導）** を軸に、
**「心地よい管理画面のデザイン作成」** について考えていきたいと思います。

# 管理画面のデザイン
ユーザー画面と管理画面の開発を行う場合、
<font color="#07975F">「管理画面はデザインがないので、エンジニア側でよしなに作成してください。」</font>と依頼されることがあります

この **「よしなに」** が、とても難しいと感じています。
実際エンジニアが一からデザインするのは難しいため、UIコンポーネントライブラリを利用することがあります。

- ユーザー画面：一般の方（カスタマー）が利用する画面
- 管理画面：管理者（クライアント）が利用する画面

## UIコンポーネントライブラリ
- **React**  
  - [React Bootstrap](https://react-bootstrap.netlify.app/)  
  - [ChakraUI](https://chakra-ui.com/)  
  - [Material-UI（MUI）](https://mui.com/)

- **Vue**  
  - [Vuetify](https://vuetifyjs.com/ja/)  
  - [Bootstrap](https://bootstrap-vue.org/)  
  - [Vue Material](https://kinsta.com/jp/blog/vue-component-libraries/)

などのUIコンポーネントライブラリがありますが、

「ライブラリを使って作成したけれど、このデザインで本当に良いのだろうか？」
「コンポーネントのデザイン性は高いけれど、全体的に微妙・・・」

そんなふうに感じたことがある方も多いのではないでしょうか。

どんなに「美しくデザインされたコンポーネント」を使っても、その使い方次第で画面の印象は大きく変わります。
画面例を使いながら、 **"心地よい"管理画面のデザイン作成** について紹介していきます。

# 心地よいデザイン
「心地よい」 （気持ちが良いこと、快適であること）という言葉は抽象的で、その感覚は人によって異なります。

まずデザインにおいて、何を持って「心地よい」と言えるのか自分なりに考えてみました。

## 1. 分かりやすい
* <font color="#4968ab">**直感的に操作しやすい。（操作性が高い）**</font>
* <font color="#4968ab">**ユーザーが迷子にならない。ユーザーを迷子にさせない。**</font>

ここで言う **「ユーザー」** には、お客様だけでなく、実装を担当する開発者も含めたいと考えています。

例えば進行中の案件に途中から参加する場合、直感的に操作できない画面に遭遇すると
「次に何の操作をすればいいのか分からない」「自分の現在地が分からない」
と困惑することがあります。

開発を円滑に進めるためにも、両者にとっての「分かりやすいデザイン」が重要だと考えます。

# 2. 感情に寄り添う
* <font color="#4968ab">**親しみやすい。**</font>
* <font color="#4968ab">**ユーザーがストレスを感じない。**</font>

デザインと心理の関係性は密で、単に「使いやすさ」だけでなくユーザーの気持ちを考慮することが大切です。

「次に何が起きるか」を予測できるようなデザイン（予測可能性が備わったデザイン）を意識することで、ユーザーから「不安」や「疑問」を取り払うことができます。

## デザインの4原則
次に、「心地よいデザイン」を実現するために必要な「デザインの4原則」を図を用いて説明します。

 **「近接」「整列」「反復」「対比」** という言葉を耳にしたことがある方も多いと思います。

### 近接
![blog_2505_yuki_4原則_近接.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1104075/d8fc7634-623c-4d4d-a9dc-255d64fc27e6.png)



この「ひとまとまりのグループ」を作ることで、情報を整理することができます。

※ 余談：「人は互いに近接しているもの（距離が近いもの）同士は同じグループとして認識する習性がある」という「近接の法則」があります。（プレグナンツの法則より）

### 整列
![blog_2505_yuki_4原則_整列.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1104075/e974b5a9-aafb-49ef-b0f8-9bce9f252d43.png)

一定のルールにしたがって要素を整列させます。<br>統一感を持たせることで、視認性が向上し、直感的な理解につながります。

### 反復
![blog_2505_yuki_4原則_反復.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1104075/2cb0ff04-3166-4758-8d89-3e3de1c07123.png)

同じ要素に対して一定のルールを繰り返すことで、一貫性や視覚的なリズムが生まれます。
一方、一貫性のないデザインからは「散らかり」や「落ち着きのなさ」が生まれ、ユーザーに混乱が生じます。

### 対比
![blog_2505_yuki_4原則_対比.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1104075/d6ed3c24-4c3d-4600-b375-04fedcec58c7.png)

大きさや太さ、色などの要素にメリハリ（強弱）をつけ、要素の優先度を視覚的に伝えることができます。
ジャンプ率（要素同士の大きさの比率）を意識すると、より対比をつけることができます。

### 4原則を使って管理画面のデザインを考える
続いて、「近接」「整列」「反復」「対比」を使って、管理画面のデザインを考えていきます

#### ◎ デザイン例 (1) 修正前
![blog_2505_yuki_4原則_修正前.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1104075/2f7ddf6d-8f79-4836-b22a-0ac95f33d26d.png)

上記のデザインが抱える「課題」はなんでしょうか。

* 「点検コメント」や「次回点検予約」の余白が大きく、まとまり感がない<br>どれがグループか分かりにくい・・・ <font color="#4968ab">**「近接」**</font>
* ボタンの配置がバラバラで、視線が散ってしまう・・・ <font color="#4968ab">**「整列」**</font>
* 同じような要素（「点検情報」と「点検者情報」）だが、項目の表現が異なる・・・<font color="#4968ab">**「反復」**</font>
* 見出し（「設備情報」や「点検情報」）や項目、テキストのフォントサイズが同じで強弱がついていない・・・<font color="#4968ab"> **「対比」**</font>

などが考えられます。

#### ◎ デザイン例 (1) 修正後

4原則に沿って、以下のように修正しました。
![blog_2505_yuki_4原則_修正後.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1104075/8492b6bd-5218-4be0-af0a-d5989675af83.png)

ボタンの配置、文字のジャンプ率、余白、統一感などを意識しました。
全体的にバラつきが軽減し、素直に情報を受け取りやすくなります。

# 余白
意図して設けられたスペース、すなわち<strong>「余白」</strong>には意味があります。
一方で、意図が感じられない余白はデッドスペースになり得ます。

#### ◎ デザイン例 (2) 修正前
以下の図では左側に大きな余白が存在し、間延びしたレイアウトになっています。
この余白は本当に必要なものでしょうか。

![blog_2505_yuki_余白_修正前.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1104075/97661c49-1b37-49cf-a6c8-18d51938eb21.png)

#### ◎ デザイン例 (2) 修正後
![blog_2505_yuki_余白_修正後.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1104075/ea34917a-549d-4d54-97b2-390483df65d5.png)
情報を整理したり表現を工夫することで、よりスッキリとしたデザインになります。
スクロール量も減り、画面全体がコンパクトにおさまります。

# 視線誘導
次に **「視線誘導」** とは、ユーザーの視線の流れをコントロールする手法です。
これをうまく利用することで、ユーザーが情報を理解しやすくなります。

人の目線は上から下へと流れるのが自然だと言われています。
グラフィックデザインやWebデザインでは「視線誘導」の大切さがよく語られますが、管理画面の操作でも「上から下」への自然な視線の流れを意識することが大切です。

視線誘導では「Zの法則」や「Fの法則」がよく用いられます。

![blog_2505_視線誘導_法則.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1104075/00fed04a-7b09-4a3c-aaab-f3e09e9a9a1c.png)

* **Zの法則**：左上 → 右上 → 左下 → 右下の順に視線が動くパターンです。主にバナー、チラシ、LP（ランディングページ）などに用いられます。
* **Fの法則**：左から右への視線移動を下に向かって順に繰り返すパターンです。主にテキストが多いブログやECサイトなどに用いられます。

今回はシンプルな「管理画面」を例に使用するため、単純な「上から下」の流れを意識したいと思います。

### 視線誘導を使って管理画面のデザインを考える

1 → 2 → 3の順番にボタンを操作する管理画面があるとします。

![blog_2505_yuki_視線誘導.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1104075/c4248b46-c3cb-4f65-90d4-d899dcaf1b60.png)

左側のBeforeでは、2, 3, 1の順にボタンが配置されています。
この配置だと視線がバラつき、ユーザーは「次は何をどうすればいいのか？」と混乱し、操作性が下がります。

一方、右側のAfterでは、1, 2, 3の順にボタンが配置されています。
「上から下」の流れに沿って操作でき、ユーザーが迷わない親切な導線になります。

# さいごに
時折ネット上で「エンジニアが作るデザインはダサい」と書かれた記事を見かけることがあります。
そう言われると、「デザイン」に対して「難しそう」「センスがないから自分は向いてない」と壁を感じるエンジニアが生まれるのではないかと思います。

私は **「デザインは誰もが学べる分野の一つ」** だと考えています。
デザインの4原則と、余白・視線誘導といった＋αの視点を取り入れることで、より美しく、そして心地よいデザインへと進化します。

記事を読んで「デザインに少し興味が出た」「画面を作成するときに参考にしよう」と思ってくださる方がいると嬉しいです。

# 引用
- [【2025年版】ReactのUIコンポーネントライブラリ23選 | Kinsta](https://kinsta.com/jp/blog/react-components-library/)
- [おすすめVueコンポーネントライブラリ10選 | Kinsta](https://kinsta.com/jp/blog/vue-component-libraries/)
- [デザインパートナー デザインの4原則](https://designpartner.jp/principle/)
- [デザインの視線誘導4法則！もうレイアウトで迷わないデザインテクニックを解説](https://dezasuta.com/columns/eye-guidance/)
- [人間中心欲求、「心地よいUIデザイン」の必要条件5選 | note](https://note.com/dorisukeone/n/n4edd7d29bf51)
- [Wily Inc. 心地よいデザインとは？](https://wily.jp/and-design/and_design0045/)

---


<font color="#7d7d7d" size="7">※ Qiitaの記事を別の媒体で記載している場合がございます。ご了承ください。</font>