管理画面のデザインに困ったらThemeForestを参考にする

高橋文樹

2012 年 8 月 25 日
読了3分（2,087文字）
Tips お金

この投稿は 11年半前に公開されました。いまではもう無効になった内容を含んでいるかもしれないことをご了承ください。

困ったときのThemeForest情報です。プログラマかデザインの苦手なフロントエンドデベロッパ向け。前置き長めです。

プログラマを悩ませる管理画面

昨今のWebサイトではPHPなどのサーバサイドスクリプトとデータベースを組み合せることが多いのですが、その際管理画面というものを作ることがあります。

よくあるパターンとしては、CMSや業務管理アプリみたいなものを管理画面として作り、そこで作成／入力したデータを一般客向けのWebサイトとして表示するというパターンです。

問題1: 管理画面はデザイン予算がかけられない

で、この管理画面なのですが、「デザインについて予算が割かれることがほとんどないわりに細かい注文がゴチャゴチャくる」ことが多いです。中の人はしょっちゅう触っていると何か言いたくなりますからね。

かといって、その人たちの要望をコストに反映させるための根拠はなにかというと、あんまりなかったりします。たとえば「誰でも不動産情報を登録できるサイト」のことを考えてみましょう。

不動産投稿フォームを改善し、これまで入っていなかった「駐輪場の有無」を集められるようにした
コンテンツに駐輪場の情報が入ったことで、検索による来訪者が◯%上昇した
不動産情報ページのCVRは◯%なので、◯円の収益が上がった

こんな風に、多くの人が触る部分は売上見込みが立てやすいですが、中の人専用管理画面の場合はそうもいきません。最終的には予算は取れないが最大限自分の仕事を減らしたい発注者 VS とっとと検収を終えて振り込んでほしい外注みたいな不毛な対立に陥りがちです。

問題2: 管理画面のデザインをできるデザイナーは少ない

さて、管理画面のデザインというのはまさにユーザーインターフェースという言葉がふさわしく、けっこう奥深いものがあります。こういうのを低コストでプロにおまかせできたら嬉しいなーと思うのですが、管理画面のデザインをしっかりできるデザイナーは少ないです。個人的な印象としては「パーツが足りない」ということをよく感じます。

たとえばボタン一つとっても「普通のボタン」「重要な決定をするボタン」「削除などの後戻りできないボタン」などのように役割ごとに幾つかパーツパターンがわかれているものが普通なのですが、だいたいボタンが一個しかなかったり、画像だったりします。

ボタンには役割があるので、抽象化して作ってね

こういうモジュール的な発想をできるデザイナーは少ないですし、いたとしてもスキルが高い（＝コストが高い）のでコストオーバーになってしまう可能性大です。

問題3: 管理画面のデザインは独自性よりも物量

さて、コストが厳しくて外注もダメとなると自分でやるしかなくなるわけですが、それはそれで厳しいです。管理画面のデザインは独自性を求められない（独自性があったら使い辛い）ですが、作るパーツが沢山必要です。フォームもバリデーションがたくさんあったり、Ajaxの遷移中のエフェクトがあったり、山盛り状態です。

理想的には「すべてのパーツが揃ったオレオレ管理画面テンプレートを持っている」ことなのですが、そんな人あんまりいないでしょう。

さて、すべて手詰まりになってしまいましたが、まだ大丈夫。そう、ThemeForestならね。

ThemeForestで売っている管理画面用テンプレート

以前も紹介したThemeForestですが、ここには「管理画面用テンプレート」というカテゴリがあります。

Admin Templates

$20で買えるIt’s Brain – premium admin theme

だいたい$20ぐらいで、HTML + CSS + JSのセットです。TwitterBootstrapと同じですね。個人的な感想では、管理画面限定という用途に限ればTwitterBootstarpより早いと思います。

アラートボックスのデザインをきっちりしてくれる人はあまりいません

まれにお問い合わせフォーム等のPHPスクリプトがセットとしてついてくることがありますが、あまりクオリティ高くないですし、今日日フレームワークなしで管理画面作る人もいないと思うので、出番はないです。

いずれにせよ、このクオリティで$20というのは安いですね。管理画面の受注であれば普通は数十万からのオーダーになると思うので、$20なんざ消費税にもならない額ですよガハハ

デモ見てるだけでも勉強になるよ

一番人気のあるテンプレートを買ってソースを眺めているだけでもけっこう勉強になるのですが、~~$20払えない貧乏人は~~お金使わなくてもデモを見るだけで参考になります。

こうしたテーマ販売サイトのデモにはデザイナーの凄い機能だろ？　買えよ！という怨念がこもっているので、ありとあらゆるインターフェースが載ってます。デザインが苦手な人というは基本的に引き出しが少ない人だと思いますので、ここを眺めて「ヘー、こんなテーブルの見せ方あるんだ」という具合に~~パクる~~参考にするのもいいんじゃないでしょうか。