PHPに感動したデザイナーが、“地味な管理画面”をシュッと改善させます。

Last updated at 2025-07-18Posted at 2025-06-14

続編を書きます

先月書いた、「phpに感動したので、初めてphpを触ってみたくなり、実験してみました。」の記事の続きです。

読んでくださった方、反応をくださった方、ありがとうございます。

さてさて、私はWebデザイナーなのですが、普段、Webサイトの実装ばかりしてるので、デザイナーといっても、デザインがめっちゃ得意だったり、できるわけではないです。

ですが、先月のファイルのデザインをしてみたいなと思い、今月は前編、来月に後編と、2か月連続でシリーズとして書こうと思います。

前編後編で何をするかと言いますと・・・
先月作ったPHPファイルの見た目↓をシュッとさせたいです。
ザ・プロトタイプの管理画面という感じです。レトロ感があって逆にこれはこれでアリなんですが、デザインしてみたいと思います。

なので、今月はどこをどうしたらシュッとするのか？考えてデザインし、来月はそれを実装します。

今月すること

そのためには何が必要そうか？考えたとき、以下を調査することがまず必要なんじゃないかと思いつきました。

まず、管理系のツールのデザインについて調査
- 理由･･･いつも実装してるWebサイト（表面のデザイン）とは違うから。今回は裏側のデザインなので、まず先行している世の管理系のデザインを知る必要があると思うため。
ペルソナ調査、設定
- 理由･･･どんなユーザーが使うか？をまず検討して設定しないと主客転倒した独りよがりなデザインになりかねないため。（こういうデザインやUIだから、ユーザー側が考えて使ってね。ではなくて、ユーザーに合わて作られたデザインが良いと思うから。）

そのあと、以下をします。

上記を元に、どんなデザインにするかを決める。（静的なデザイン部分、動的なデザイン部分）
デザインするときは、実装するときのことも踏まえて、考える。各デザインは実現可能なUIか？や、管理用のツールなので、できるだけ早く表示できる&サーバーに負荷をかけないように、できるだけシンプルなデザインにする。
上記を元に、ラフを描く。
カンプを作成する（今回は、PCブラウザで使用されることを想定し、PCのみに合わせて作成する）

という感じです。

デザインしていきます

管理系のツールのデザインについて調査

まずは資料集め。

数年前のだけど、参考になります。
メインカラーはほとんど白か、薄ーいグレーですね。
テーブルの行は交互に色付けされてた方が視認性が高いです。
参考にします。

あとは、以下も内容が良かったので参考にします。

ペルソナ設定

このツールは、どんな人が使うのか、想像してみます💭

思い付いたのは、

私みたいな人

そこから連想してみます。

サーバーを触れない人、見れない人
Webサイトを保守してる人
手動での権限変更にストレスを感じる人
確実に権限変更したいと感じてる人
作業を間違えたくない！と感じている人

かな？
これをAIに伝えて、ペルソナを考えてもらいます。指示としては、
「権限変更のファイルを、よりユーザーに寄り添った見た目の設計にしたいです。そこでペルソナを考えて欲しいです。抽象的な人物像は以下の通り（上記のリスト）で、これを具体的にして欲しいです。年齢、性別、職業、職歴、性格、このファイルを使う際のデバイス、どんな状況で使うか？を、具体的に3人考えて欲しいです。」

以下が結果です。

ペルソナを考慮すると、大切なことがわかってきました。
「あれ、この管理画面ってシュッとしてなくてよくない？」って気づきました。
こういうファイルを使う人は、困りごとやストレスを解決するために使うわけで、スタイリッシュな管理画面は別に彼らを助ける訳ではないことに気づきました。

どんなデザインにするかを決める。

静的なデザイン部分

この管理画面は、Webサイトみたいなオシャレ感や心を動かすセンスあるデザイン（購買意欲を促進したり集客したり）ではなく、問題を抱えているユーザーがミスなく安心して作業実行できるデザインと設計が望ましいと思います。

なので、特別シュッとしてなくていいんだと気づきました（目的が果たせれば現状でも問題は無い）。
じゃあ、安心できるデザインって何かな？と考えると、

直感的で、初めて触る人でもシームレスな操作ができるようにする。
分かりにくいものにはアイコンを使う。

などを検討しないといけないと思います。

さらに今回、デザインを考えるに当たって最重要なのは、何よりもフォント選びが大切なのかも？？とひらめきました。
理由を述べます。

数字やアルファベットの誤認ミスが許されない管理画面を触る状況だと、フォントを何にするか？はすごく大事なのかなと思いました。
実装の話になりますが、フォントをcssだけで設定する場合（Webフォントを使用しない場合）、デバイスによって、表示されるフォントは違ってしまう事があります。なので、ユーザーへの安心面への配慮として、フォントの選定と、Webフォント（Adobeフォント）を使用するという検討はとても大事だと考えます。

フォントは誤認しないものを使う（Mac、Windowsその他デバイスでも表示され、誤認が少ないフォントにする）

上記もデザインの要素に加えます。
そして、フォントは悩みますが、ヒラギノ角ゴを使用することにしました。
理由は、

管理画面で見慣れているゴシック体であること
落ち着いた印象だから。
英数字が認識しやすいと感じるから。

です。

上記が安心感に繋がるかなと思いました。

動的なデザイン部分

これも、安心感をベースに考えます。

権限が変わったことを認識しやすくする
JavaScriptのポップでの確認画面を目立たせて、注意を引くようにする
- 私は確認画面を見逃すことがたまにあります（だからこそ作業に神経を使います😮‍💨）。なんでだろ、と考えると、見逃すパターンでは、確認画面で動的に大きな変化が無いことや確認画面だと分かりにくいことが共通してました。
- 例えば、文字のみで確認させて、見た目上変化が少なく、モーダルで表示されない。
- モーダルの文字が小さく、目立たないなど。です。
ビジュアル以外で確認画面に気づかせる（確認音が出ると良いけど、技術的にできるかが懸念点）

方向性が決まったので、ラフに落とし込みます