入門記事単語書籍

管理画面を開発するときの設計指針。ゼロからわかる作り方

あなた
あなた

管理画面を開発することになったけど、どう作ればいいの? デザインの記事は見つかるんだけど。どう設計すればいい? 必要な機能ってなに?

という悩みについてお答えしてきます。

この記事では、管理画面を設計する上でなにを考えればいいか、指針をまとめていきます。また、プロダクトのフェーズにおける管理画面の考え方についても整理します。

この記事を読むことで、管理画面の作り方がよくわからない状態から、どう作りはじめればいいかがわかるようになると思います。

私は上場企業やスタートアップなどで20以上のプロダクトを作ってきました。そのすべてに管理画面をもっていました。たくさんの管理画面を設計・開発した経験をもとに、この記事を書いています。

管理画面とは

あなた
あなた

そもそも管理画面ってなんなの? なにをする画面なんだろう。

管理画面は、『プロダクトの運用を目的としてデータを管理するための画面』のことをいいます。基本的には運用者のみがアクセスや操作を許されていますね。

管理画面を作る上で、まず『利用者』と『目的』のふたつを押さえておくことが大切です。

管理画面の利用者

管理画面の利用者には、大きく分けると:

  • 運用者
  • ユーザ

のふたつの役割がいます。ユーザとは、たとえばブログサービスにおける投稿画面のようなイメージですね。この記事では、前者の『運用者』が使う管理画面について書いていきます。

管理画面の目的

また、管理画面の目的には、大きく分けると:

  • オペレーションのため
  • データ分析のため

のふたつがあります。この記事ではどちらもふまえますが、どちらかというと前者のオペレーションを目的とした管理画面について書いていきます。

まとめ:管理画面とは

管理画面は『プロダクトの運用を目的としてデータを管理するための画面』です。管理画面を設計する前に、まず利用者と目的を明確にしておきましょう。

管理画面の設計指針

あなた
あなた

管理画面についてはなんとなくわかったよ。じゃあ次にどう設計すればいいのかについて教えてね。

では、管理画面をどう作ればいいのか、なにを考えて作ればいいのかについて書いていきますね。これはプロダクトの種類について変わってくるので、ここでは共通する普遍的なことについてまとめます。

まず表にまとめて、それからひとつずつ見ていきます。

番号設計項目
1認証をどうするか決める
2認可する対象を決める
3テストを書く
4監査用のログを記録する
5自動でバックアップを取る
6機能を決める
7体験を決める
8デザインを決める
9外部サービスの利用を検討する

1. 認証をどうするか決める

まず認証をどうするか決めます。GoogleやSlackなどのアカウント連携がよさそうですね。どのアカウントを使うかは、組織が利用しているプラットフォームに応じて決めればいいです。

あとは、IPアドレスによる制限をかけるなど、他の手段とあわせて認証するとセキュリティが強化されます。

実装がラクだからといって、プロダクト本体のユーザ基盤を利用してしまうと、セキュリティの担保が難しくなったり、管理画面がプロダクト本体と密結合になってしまうので、基本的には避けた方がいいと思っています。

2. 認可する対象を決める

次に認証した運用者の役割によって許可する操作を分けていきます。たとえばアルバイトや業務委託の方など、アクセスしていいデータが変わってくることがあるので、これを分けます。

やり方としては、まず管理画面上の操作の一覧をスプレッドシートなどに書き出し、許可する役割をセットで書いておくことで、実装しやすくなります。テストも書きやすくなりますね。

3. テストを書く

管理画面は大切なデータを扱う画面です。不具合があってデータに不整合が起こってしまうと大変なので、当然ですがテストを書きましょう。テストを自動で実行し、不具合を検出できる環境も作っておきます。

4. 監査用のログを記録する

誰がいつどんな操作をしたのかを記録します。組織によっては必要になるので、事前に確認しておきましょう

5. 自動でバックアップを取る

システムのバグや操作ミスなどでデータが意図しない形になってしまったときに、もとに戻すためにバックアップが必要になってきます。管理画面がなくても必要ですが、念のために項目として書いておきます。

6. 機能を決める

管理画面にどんな機能を作るかを決めていきます。管理画面といっても、通常のプロダクト開発と同じやり方で作ります。つまり、基本的には『それがないと成り立たない機能のみ』を作ります。

作るだけではなく、使わなくなった機能はどんどん消していきましょう。これについては『プロダクトに機能を追加するかどうかを判断する方法』で詳しく説明しています。

7. 体験を決める

体験とは操作をしたときのメッセージ表示やアラートの出し方などですね。運用者もユーザと同じで、マニュアルに書いたところで操作ミスなどは必ず起こります。このミスができるだけ起きないよう、メッセージの出し方やアラートを出す基準を決めましょう。

8. デザインを決める

どんなデザインにするかを決めます。管理画面のデザインにはコストをかけられないかもしれませんが、見た目がよくないと運用のモチベーションに影響してきます。これって結構大切だったりします。

CSSフレームワークなどを使って、最低限の見た目は整えるようにしたいですね。

9. 外部サービスの利用を検討する

機能を作ることは負債であるという認識をもつことが大切です。たとえば分析はRedashを用いるなど、できるだけ外部サービスを利用するようにしましょう。

プロダクトのフェーズに応じた管理画面

上で管理画面の設計指針についてまとめました。ただ、管理画面の作り方はプロダクトのフェーズによっても変わってきます。とくに、Product/Market Fitの前後で変わります。

PMFをめざしているとき

PMFをめざしている段階では、日々変化するプロダクトに対応できるよう、オペレーションをまわしていく必要があります。このための開発スピードがなにより大切になってきます。

開発スピードを優先するために、管理画面を作るためのフレームワークなどを用いることを検討します。

PMF達成後

PMFを達成したということは、ある程度オペレーションが固まったことを意味します。この段階では長期的な運用を見据えて、自前で管理画面を作ることを検討します。

PMFをめざす過程では機能の追加・削除が繰り返されると思います。汚くなった機能やソースコードを一度整理するのもこのタイミングがよさそうですね。

管理画面に対する基本的な考え方

管理画面は、基本的にはプロダクトと同じです。ユーザ=運用者が抱える課題を解決するために、管理画面を作ります。

このため、誰が運用者なのか、運用者はなにを解決したいのか、どう解決するのかを、ひとつひとつ検証しながら作っていくべきです。つまりリーンスタートアップの考えに基づいて作っていきます。もちろん、一度作って終わりではなく、継続的に開発していく必要がありますね。

あなた
あなた

管理画面はプロダクトのフェーズに応じて作り方を変えることが大切なんだね。プロダクトと同じように作る、というのも分かったよ。

まとめ

管理画面は主にオペレーションのために運用者が使う画面です。運用者をユーザととらえ、リーンスタートアップの考え方に基づいて作っていくことで、よりよい管理画面になっていきます。

管理画面を作るときはプロダクトのフェーズに応じた作り方をすることで、小さいコストで作っていけます。

Webエンジニア&プロダクトマネージャ。 プログラミングで『ひとりで働く』を模索中。 三重の山の中で妻とこども、ネコとのんびり暮らしています。

Follow @zenizh
\ 記事をシェアしよう /

この記事を気に入っていただけましたら、ぜひフォロワーの方にシェアしてくださいね

ツイート画面をひらく
関連記事関連書籍
現場で使えるRuby on Rails 5

共著で『現場で使えるRuby on Rails 5(マイナビ出版)』を書きました。

Amazonでみる
© Product Development IO