Webシステム用管理者画面作成マニュアル デザイン/HTML/CSS/JavaScript集
管理者画面の構成  
いろんなシステムがあるのと同様、それに併せて管理者画面もいろいろあります。
システムの予算によっても管理者画面は姿を変えます。 ここでは、良くあるパターンの管理者画面の参考例を元にざっと構成について書こうと思います。⇒こちらはスタンダードな管理画面例

(1)流れについて

 ログイン   一覧画面   登録・編集・削除   確認   完了   一覧画面へ戻る 

これは、一番良く見かけるパターンです。もちろん、世の中にオーダーメイドのシステムがある限り、機能を細かく言えばきりがありませんが、流れとしてはこういうパターンがほとんどではないでしょうか。
たくさんあるシステムですが、共通して言えることは、基本的に「システム内では同じパターンで作業を行う」です。 Aの管理作業時には確認画面がない、Bの管理作業時には確認作業があるというのは、 統一性のない支離滅裂な管理作業になります。
常に確実&効率化な作業を求めるがためのシステムのはずが、管理画面の稚拙さによりミスが発生したり、効率が下がるというのは最悪です。
しかしながら、機能によって例外はあります。
すべてが上記のパターンに当てはめることは難しいですし、逆にこのパターンに当てはめるがために効率が下がるという場合は例外として、確認作業・完了作業を省く場合があります(例えばCSVファイルのダウンロード、検索など)。
また、予算によって一覧画面がなかったり(公開しているサイトに掲載されたものをプレビューとして扱う場合など)、確認画面を省き、登録ボタンを押下した直後一覧画面に戻るなど。
ですが、これらは推奨できるパターンではありません。企業のページならなおさら、「確実」さを求めるために、できる限り上記のパターンに当てはめて同一作業を行う作りにしましょう。
同じ動きをルールとする管理者画面ならば、管理ミスも最小限に防ぐことができるでしょう。

(2)ログインについて

セキュリティーの為、ログインは基本的に必要だと思います。検索エンジンのクローラーが回ってきていつなんどきインデックスされるかも知れません。METAタグを入れておく方法もありますが、確実か?と言われると少々疑問ですし。また、URLを直打ちされてしまえばアウトです(割とわかるものなんですよ・・・URLって)。
ログインの方法としては、ベーシック認証もしくはHTML画面からの認証、どちらでもいいと思います。
しかし、個人的にはベーシック認証は使いたくありません。

----なぜかというと?

レンタルのシステムを借りるとき、ID・パスワードはメールで添付されてくるか、自分で覚えているか、HTML画面に表示される、テキストエディタに保存、画面キャプチャーのパターンがほとんどかと思います。メールに添付されてくる場合はまあ、さほど不自由は感じないのですが、HTML画面に表示される場合、その画面をみながらログイン画面でID・パスワードの入力をするはずです。

ベーシック認証画面を開いた状態で、ブラウザ画面を2つ開いた、新たにやメール画面を開くこととなるのですが、ベーシック認証のダイアログがでていると、画面の切り替えをする場合、タスクバーで画面を選択するしかできません。メール内のID・パスワードをコピーする。コピー後元の画面を開こうとする場合、元の画面は大体メールソフト画面の裏側で開いているはずです。もし、認証画面を前面に持ってこようとすると、タスクバーでその画面を選択するしか方法はありません。HTML画面に書かれている場合や、自分でテキストエディタに保存している場合もそうです。
しかし、普段みなさんはどうですか?裏側にあるウィンドウを前面に持ってくる場合、第一選択として裏側にある画面そのものをクリックして前面に持ってくる・・・としてませんか?また、タスクバーに出ている画面名をクリックするとその画面が前面に出てくると知っている方は問題ありませんが、実は企業でこういう更新作業をする方は以外にもタスクバーの機能を知らなかったりします。
「認証画面が裏側にいってしまって開かない」「画面が消えた、バグですか?」などと問い合わせ兼クレームが入ります。
つまりのこと、一般の方(パソコン詳しくない方)は、ベーシック認証の画面を知らない人も多いのです。

ビビたることですが、タスクバーでの切り替えが嫌い&タブブラウザを使用している私としては、ベーシック認証は使いたくありません。
・・・なんとなく安っぽい感じがしますし(実際、予算がない場合はベーシック認証やるとき多いです)。予算が許す限りはHTMLベースでの認証をしましょう。見た目も綺麗&豪華なおかつ、わかりやすいです。
HTMLベースの認証画面は、会員サイトと同じなのでインターネットしたことある人でしたら大抵はなじみがあるものだと思います。
また、お金をだしたユーザーからすれば、システムが出来上がって認証画面を見たとき、HTMLベースでの認証の方が「お金をかけたぞ!」という満足感得られるように感じます。

以前、ベーシック認証で行っていた管理画面をHTMLベースの認証画面に変えたところ、「やっぱりお金をかけると違うね!!」といわれたこともあります。普通のユーザーからしてみれば、ベーシック認証はどうも「エラー画面」っぽいので嫌だそうです。確かにグレーでシステムから出るエラーのダイアログと同じですしね。

さて、余談ですが、予算がなくともHTMLベースの認証画面を使う場合があります。それは、うちのシステムは安っぽく見せたくない!というシステム会社さんの場合です。ポリシーのようなものです。こういうところは認証部分をテンプレートとしてもっているので、予算がなくtもベーシック認証を使うことはありません。

(3)確認画面について

基本的に確認画面は必要だと思います、もちろん予算に応じてなのですが・・・。しかし、例え低予算でもできる限り確認画面は必要だと思います。登録情報をより確実にするためです。削除でも編集でも同じです。
本当にその作業を行ってよいのか?情報は間違っていないか?」。特にアクセスが多いサイトやお金が絡むサイトなど、誤った情報を一瞬でも載せてしまうと大変なことになります。過去にも取り返しのつかなくなった事件(?)も多数あります(液晶テレビの値段を間違ったとかで、価格ミスのまま大量発注が来たというのがありましたね)。

最近、確認画面での確認方法に変化があります。 例えば、登録フォームを残したまま再編集できる状態でエラーがないか?と確認できるもの、見た目自体は通常表示だけども直したいところをクリックするとフォームに変化するなど。
見た目はかっこいいし美しい(w)なのですが、余分なスクリプトが入ると、システムをテストする際、どこに間違いがあるのかわかりにくいことがあります。プログラム自体おかしいのか?確認画面で使っているスクリプトがおかしいのか?
なので確認画面を作った本人が、確認画面で使ったスクリプトを熟知していない限り使うべきではありません。
プログラマの方は自分の作ったプログラムはわかりますが、もしかすると確認画面で使ったスクリプトをあまり熟知されていないかもしれません。そうすると、予期せぬエラーがあった場合、原因を追究する際、余計な作業と時間がかかります(確認画面を作った人がシステムのテストするとは限りませんしね)。
限られた期間内に納品しなくてはいけないのに、これではスケジュールが狂います。
できればスタンダードに・・・と思います。
しかし、スクリプトを利用した確認画面が社内でスタンダード化されているのでしたら、利用するのは問題ないと思っています。

(4)完了画面について

各作業を終了する際、完了画面というものがあります。「これは必要なのか?」という論議を主人と時々します。主人は「いらない派」、私は「いる派」です。 どちらが正しいかはわかりません。正直どっちでもいいからです。

「いらない派」の意見としては、完了画面では何も確認するものも登録するものもない。見た目で「終わったよ」というお知らせをするだけなので、重要な画面ではない。いちいち完了画面で「一覧へ」というボタンを押す作業が余分なのではないか?完了画面を置くとしても、ほんの少し表示するだけで、自動的に一覧画面に行けばいい(METAでリフレッシュなど)・・という意見。
「いる派」の意見としては、ボタンを押すことで、きちんと作業が完了したと安心感を得るため。見えない場所で起きているものが正しく終了したかどうか把握することは大事。自動的に一覧画面に行けばいい(METAでリフレッシュ)というのは少し賛成。もしリフレッシュするなら、このとき自分でも移動ができるように「一覧へ」のボタンを併用する・・・という意見。

いろいろ討論した結果、今のところ私が作る、完了画面は「一覧へ」ボタンを置いています(リフレッシュしないパターンで)。
納品後どういう風に先方で変えられているかはわかりませんが・・・・・w

(5)一覧画面について

さて、多少前後しますが、最後に一覧画面について。
管理する基本となるページです。ここは登録情報の件数によってどのようにするか検討すべきところです。一覧とはいえ、件数が少なければ、ソートもページ制御も検索も必要ありません。しかし件数が多くなった場合どうするか・・・これはもう予算とのにらめっことしか言いようがありません。
件数が何十件、何百件ともなると、さすがにソート・ページ制御・検索がないと更新・確認・削除作業等の管理が大変であり、目の前に表示されている情報を把握することができなくなります。
しかしながら、機能というものは1つ足すごとに諭吉さんが増えていくものです(一番お金かからないのはエクセルでCSV作ってFTPすることですけどね!w)。
一覧画面で使う機能は管理のしやすさの要です。じっくりクライアントと相談しましょう。ちなみに以下は私の中のスタンダードです。

(1)ソート
日付順・50音順などで、各項目すべてソートできるようにする。
(2)ページ制御
1ページに表示する件数は一覧する概要情報量にもよるし、一覧する情報が常に更新する情報かどうかにもよります。
例1:会員サイトの会員情報・・・1行で治まる程度の簡単な情報の場合・管理者が特に管理することがない場合(閲覧に特化):50件
例2:会員サイトの会員情報・・・1行で治まる程度の簡単な情報の場合・管理者が管理することが多い:20件
例3:通販サイトの商品情報・・・1行で治まる程度の簡単な情報の場合:20件
例4:通販サイトの商品情報・・・1行で治まらない程度の多い情報の場合(サムネイル付きなど):10件
(3)その他
新規登録・編集・削除はこの一覧画面から作業ができるようにボタンを置く(例外はあります)。
▲UP
エルテ化粧品
▲「エルテ化粧品」スポンサーサイトです。
(c)kanri-gamen