はじめに
企業や案件にもよりますが、管理画面のデザインがない状態で開発を行うことはありませんか。
「ライブラリを使ったけど、このデザインでいいのかな？」
と悩むエンジニアの方もいると思います。
そこで今回は デザインの4原則 + α（余白、視線誘導） を軸に、
「心地よい管理画面のデザイン作成」 について考えていきたいと思います。
管理画面のデザイン
ユーザー画面と管理画面の開発を行う場合、
「管理画面はデザインがないので、エンジニア側でよしなに作成してください。」と依頼されることがあります
この 「よしなに」 が、とても難しいと感じています。
実際エンジニアが一からデザインするのは難しいため、UIコンポーネントライブラリを利用することがあります。
- ユーザー画面：一般の方（カスタマー）が利用する画面
- 管理画面：管理者（クライアント）が利用する画面
UIコンポーネントライブラリ
などのUIコンポーネントライブラリがありますが、
「ライブラリを使って作成したけれど、このデザインで本当に良いのだろうか？」
「コンポーネントのデザイン性は高いけれど、全体的に微妙・・・」
そんなふうに感じたことがある方も多いのではないでしょうか。
どんなに「美しくデザインされたコンポーネント」を使っても、その使い方次第で画面の印象は大きく変わります。
画面例を使いながら、 "心地よい"管理画面のデザイン作成 について紹介していきます。
心地よいデザイン
「心地よい」 （気持ちが良いこと、快適であること）という言葉は抽象的で、その感覚は人によって異なります。
まずデザインにおいて、何を持って「心地よい」と言えるのか自分なりに考えてみました。
1. 分かりやすい
- 直感的に操作しやすい。（操作性が高い）
- ユーザーが迷子にならない。ユーザーを迷子にさせない。
ここで言う 「ユーザー」 には、お客様だけでなく、実装を担当する開発者も含めたいと考えています。
例えば進行中の案件に途中から参加する場合、直感的に操作できない画面に遭遇すると
「次に何の操作をすればいいのか分からない」「自分の現在地が分からない」
と困惑することがあります。
開発を円滑に進めるためにも、両者にとっての「分かりやすいデザイン」が重要だと考えます。
2. 感情に寄り添う
- 親しみやすい。
- ユーザーがストレスを感じない。
デザインと心理の関係性は密で、単に「使いやすさ」だけでなくユーザーの気持ちを考慮することが大切です。
「次に何が起きるか」を予測できるようなデザイン（予測可能性が備わったデザイン）を意識することで、ユーザーから「不安」や「疑問」を取り払うことができます。
デザインの4原則
次に、「心地よいデザイン」を実現するために必要な「デザインの4原則」を図を用いて説明します。
「近接」「整列」「反復」「対比」 という言葉を耳にしたことがある方も多いと思います。
近接
この「ひとまとまりのグループ」を作ることで、情報を整理することができます。
※ 余談：「人は互いに近接しているもの（距離が近いもの）同士は同じグループとして認識する習性がある」という「近接の法則」があります。（プレグナンツの法則より）
整列
一定のルールにしたがって要素を整列させます。
統一感を持たせることで、視認性が向上し、直感的な理解につながります。
反復
同じ要素に対して一定のルールを繰り返すことで、一貫性や視覚的なリズムが生まれます。
一方、一貫性のないデザインからは「散らかり」や「落ち着きのなさ」が生まれ、ユーザーに混乱が生じます。
対比
大きさや太さ、色などの要素にメリハリ（強弱）をつけ、要素の優先度を視覚的に伝えることができます。
ジャンプ率（要素同士の大きさの比率）を意識すると、より対比をつけることができます。
4原則を使って管理画面のデザインを考える
続いて、「近接」「整列」「反復」「対比」を使って、管理画面のデザインを考えていきます
◎ デザイン例 (1) 修正前
上記のデザインが抱える「課題」はなんでしょうか。
- 「点検コメント」や「次回点検予約」の余白が大きく、まとまり感がない
どれがグループか分かりにくい・・・ 「近接」 - ボタンの配置がバラバラで、視線が散ってしまう・・・ 「整列」
- 同じような要素（「点検情報」と「点検者情報」）だが、項目の表現が異なる・・・「反復」
- 見出し（「設備情報」や「点検情報」）や項目、テキストのフォントサイズが同じで強弱がついていない・・・ 「対比」
などが考えられます。
◎ デザイン例 (1) 修正後
4原則に沿って、以下のように修正しました。
ボタンの配置、文字のジャンプ率、余白、統一感などを意識しました。
全体的にバラつきが軽減し、素直に情報を受け取りやすくなります。
余白
意図して設けられたスペース、すなわち「余白」には意味があります。
一方で、意図が感じられない余白はデッドスペースになり得ます。
◎ デザイン例 (2) 修正前
以下の図では左側に大きな余白が存在し、間延びしたレイアウトになっています。
この余白は本当に必要なものでしょうか。
◎ デザイン例 (2) 修正後
情報を整理したり表現を工夫することで、よりスッキリとしたデザインになります。
スクロール量も減り、画面全体がコンパクトにおさまります。
視線誘導
次に 「視線誘導」 とは、ユーザーの視線の流れをコントロールする手法です。
これをうまく利用することで、ユーザーが情報を理解しやすくなります。
人の目線は上から下へと流れるのが自然だと言われています。
グラフィックデザインやWebデザインでは「視線誘導」の大切さがよく語られますが、管理画面の操作でも「上から下」への自然な視線の流れを意識することが大切です。
視線誘導では「Zの法則」や「Fの法則」がよく用いられます。
- Zの法則：左上 → 右上 → 左下 → 右下の順に視線が動くパターンです。主にバナー、チラシ、LP（ランディングページ）などに用いられます。
- Fの法則：左から右への視線移動を下に向かって順に繰り返すパターンです。主にテキストが多いブログやECサイトなどに用いられます。
今回はシンプルな「管理画面」を例に使用するため、単純な「上から下」の流れを意識したいと思います。
視線誘導を使って管理画面のデザインを考える
1 → 2 → 3の順番にボタンを操作する管理画面があるとします。
左側のBeforeでは、2, 3, 1の順にボタンが配置されています。
この配置だと視線がバラつき、ユーザーは「次は何をどうすればいいのか？」と混乱し、操作性が下がります。
一方、右側のAfterでは、1, 2, 3の順にボタンが配置されています。
「上から下」の流れに沿って操作でき、ユーザーが迷わない親切な導線になります。
さいごに
時折ネット上で「エンジニアが作るデザインはダサい」と書かれた記事を見かけることがあります。
そう言われると、「デザイン」に対して「難しそう」「センスがないから自分は向いてない」と壁を感じるエンジニアが生まれるのではないかと思います。
私は 「デザインは誰もが学べる分野の一つ」 だと考えています。
デザインの4原則と、余白・視線誘導といった＋αの視点を取り入れることで、より美しく、そして心地よいデザインへと進化します。
記事を読んで「デザインに少し興味が出た」「画面を作成するときに参考にしよう」と思ってくださる方がいると嬉しいです。
引用
- 【2025年版】ReactのUIコンポーネントライブラリ23選 | Kinsta
- おすすめVueコンポーネントライブラリ10選 | Kinsta
- デザインパートナー デザインの4原則
- デザインの視線誘導4法則！もうレイアウトで迷わないデザインテクニックを解説
- 人間中心欲求、「心地よいUIデザイン」の必要条件5選 | note
- Wily Inc. 心地よいデザインとは？
※ Qiitaの記事を別の媒体で記載している場合がございます。ご了承ください。