管理画面のUIデザイン 〜参考サイト 5選〜

# はじめに
こちらの記事「[【エンジニア向け】“心地よい”管理画面のデザイン　〜 デザインの4原則 +α 〜 | Qiita](https://qiita.com/Ryuki4648/items/9d8d626d58c62bfc376f)」でも記載していますが、

「管理画面のデザインがないので、よしなに作ってください」と、デザインがないまま管理画面のじっそうを行うことはありませんか。

「ライブラリのコンポーネントを組み合わせて作ったけど、なんか微妙・・・」
と感じるエンジニアの方もいるのではないでしょうか。

そこで今回は「管理画面のUIデザインの参考になるサイト」をいくつか紹介したいと思います。

# 目次
◎ [参考サイト一覧](#参考サイト一覧)
- [codebase](#codebase)
- [fumufumuUI｜デザイン学習メディア](#fumufumuuiデザイン学習メディア)
- [UX Archive](#ux-archive---made-by-waldo)
- [Pinterest](#pinterest)
- [SmartHR Design System](#smarthr-design-system)

◎ [引用](#引用)

# 参考サイト一覧
## codebase
[https://demo.pixelcave.com/codebase/be_widgets_tiles.html](https://demo.pixelcave.com/codebase/be_widgets_tiles.html)

![yuki_blog_codebase.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1104075/14ee9cb6-55c2-4de9-a50d-7afa6de1cd72.png)

ブロック、カード、アイコンタイル、テーブル、フォームなどのデザインが豊富です。
例えば「[Forms](https://demo.pixelcave.com/codebase/be_forms_elements.html)」だとUIパーツだけでなく、レイアウトやプラグイン、CKEditorのデザインパターンも提供しています。

サイト自体の配色やレイアウトにもこだわりを感じ、シンプルだけど分かりやすいと思いました。

## fumufumuUI｜デザイン学習メディア
[https://fumufumuui.com/](https://fumufumuui.com/)

![yuki_blog_fumufumuui.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1104075/9f59b16f-3b8c-4181-bf5c-aef9a1ae4ea2.png)

大阪の開発企業・ネクストライブ株式会社（[https://nextribe.co.jp/](https://nextribe.co.jp/)）さんが運営する、Webデザイン（特にUIデザイン）に特化した学習メディアサイトです。

Webデザインに特化していますが、管理画面の参考になる記事もあります。
参考になりそうなカテゴリは[UIパーツ](https://fumufumuui.com/category/ui-parts)、[画面設計／ユーザービリティ](https://fumufumuui.com/category/screen-design)です。

特に私のおすすめの記事は
- [ログイン画面【徹底図解】UIデザインチェックリスト No.1](https://fumufumuui.com/posts/ui-checklist-login)
- [モーダルダイアログ【徹底図解】UIデザインチェックリスト No.3](https://fumufumuui.com/posts/ui-checklist-dialog)
- [問い合わせフォームの最適なデザインとは？離脱を防ぐUX改善策](https://fumufumuui.com/posts/contact-form-ux-improvement)
- [【UIパーツ徹底解説】ボタンの使い方](https://fumufumuui.com/posts/ui-parts-button)
です。

## UX Archive - Made by Waldo
[https://ryota-kikuchi.com/blog/ui-inspiration](https://ryota-kikuchi.com/blog/ui-inspiration)

![yuki_blog_uxarchive.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1104075/5399e1de-8273-4767-9f86-aa3dee84e3a3.png)

一連の操作フローに沿ってまとめられているギャラリーサイトです。
ログイン、ユーザー登録、お気に入り、設定、検索などのフロー別にスクリーンショットが並べられています。
181個のアプリ、1195個のフローが掲載されています。（2025年5月29日時点）

ちなみにサイトを運営しているのは、Waldo（[waldo.com](waldo.com)）さんというモバイル開発の自動テストツールを提供している会社です。

## Pinterest
[https://jp.pinterest.com/](https://jp.pinterest.com/)

![yuki_blog_pinterest.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1104075/bbbf76d6-8fc2-48ff-81fb-03a578db5d49.png)

**検索する際 :mag_right:**
私の場合は
「管理画面」「ダッシュボード」「control panel」「dashboard」「admin」
「ログイン」「login」「Sign in」
「data」「form」「list table」「input」「download / upload」

　　＋
  
「UI」「デザイン」「design」
のように組み合わせて検索しています。

私は普段からPinterestを見るのが好きなので、個人的にはアイデア探しにちょうどいいなと思っています。

「システム・アプリ系デザイン」というボードを作って、気に入ったデザインをそこに入れています。（デザインにピンをつける:pushpin:）

## SmartHR Design System
[https://smarthr.design/](https://smarthr.design/)

![yuki_blog_smarthr.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1104075/716ca3fb-10b9-4897-8895-4539d15abd18.png)

管理画面の参考サイトというよりは「デザインの原則」についてまとめているサイトになります。

特に参考になりそうなページは
- [デザイントークン | SmartHR Design System](https://smarthr.design/products/design-tokens/)
- [コンポーネント | SmartHR Design System](https://smarthr.design/products/components/)
- [デザインパターン | SmartHR Design System](https://smarthr.design/products/design-patterns/)
です。

分かりやすく整理されており、管理画面の参考だけでなくデザインの勉強にもなると思いました。

# 引用
- [管理画面デザイン作成の参考になるサイト11選【デザイナー3名厳選】 | GIG INC.](https://giginc.co.jp/blog/giglab/management-screen-design)
- [UIデザインに役立つ参考ギャラリーサイト9選【2023年2月版】](https://ryota-kikuchi.com/blog/ui-inspiration)

<br>

**ご注意**
2025年5月29日時点での情報になります。ご了承ください。