読者です 読者をやめる 読者になる 読者になる

SideCI TechBlog

SideCIを作っているアクトキャットのエンジニアによる技術ブログです。


スタートアップでも管理画面を作ろう!フルスクラッチの管理画面がもたらす効果

Other

こんにちは!アクトキャットでエンジニアをやっています、 sweep3092 と申します! ユーザ視点に立ったものづくりが得意で、SideCIでも主にクライアント寄りの開発を担当しています。

先日、SideCIの社内向け管理画面のリニューアルを担当いたしました。本記事ではその際に私が心がけたポイントをいくつかご紹介いたします。

ActiveAdminを使わない理由

リニューアル前は管理画面にActiveAdminを使用していたのですが、リニューアルに当たってフルスクラッチで開発をすることにしました。

SideCIでは多くのお客様の多種なプロジェクトに対して解析を行っているという特性上、 たとえば不具合のご指摘をいただいた際には都度詳細なエラー内容の調査が必要になります。 迅速な返答や対応のためには、適切な検索条件を設定できることや、エラー情報を生データではなく調査に最適な表示をすることが望ましくなります。 ActiveAdminやre:dashなどを使用すると驚くほどさくっとCRUDを備えた管理画面を作ることができる一方で、 これらを生のデータではなく最適化された表示を用意したり、 社内の要望に沿った検索条件を用意したり、 データベース以外の操作が必要なオペレーションに対応しようとしたり、 などの要望への対応はかえって実装や管理が大変になってしまっていました。

心がけたポイント

1. 想定されるユーザを明らかにすること

前述の通り現在弊社は社員のほとんどがエンジニアで、開発しているサービスもエンジニア向けのものになります。 そのためついついエンジニア視点でエンジニア向けの開発をしてしまいがちなので、今回は特に ターゲットユーザを明確にする ことを心がけました。

今回のリニューアルでは、markdownで記述するSideCIのドキュメント管理画面にプレビュー機能を設けました。 この機能によってドキュメント画面内で公開された場合のプレビューを確認できるようになり、入稿・公開時の意図しない表記崩れなどを防ぎやすくなりました。

f:id:sideci-dev:20160622105052p:plain

また、弊社にはクーポン発行機能がありますが、これらのユースケースはある程度限られています。 発行にあたってはいくつかの入力項目がありますが、プリセットを「クーポンの目的」として用意してやることで、 入力ミスや意図に沿わないクーポンを発行するなどのヒューマンエラーを回避できるようになりました。

f:id:sideci-dev:20160622105132p:plain

2. ユーザのユースケースを明確にする

ユーザのオペレーションの中でも、

  • ミスが発生しそうなこと
  • ミスしたときのリスクが高いもの

を意識し、確認できるような仕組みを心がけました。 あえて工数を割いて管理画面を作るのは、こうしたミスが起こりにくくすることも大きな理由だと考えています。

例えばユーザの契約プランを初期化するような超イレギュラーなオペレーションに対しては、 GitHubのリポジトリ削除画面を参考に3段階の操作が必要なものにし、極力ミスが起こりにくくなるような導線にしました。

f:id:sideci-dev:20160622105157g:plain

3. 時間をかけすぎないこと

フルスクラッチするといっても開発リソースは限られており、本来その限られたリソースは社内向けの管理画面では無くプロダクトそのものに使われるべきです。 最小限のリソースで最大限の効果を発揮するものを作る という点を意識することがより一層求められます。 要望に対して思い込みで機能を無駄に作り込んでしまったり、親切心で誰も使わない機能を作ったりしてしまうことは避けなければなりません。

おわりに

管理画面は必ずしもサービス立ち上げ初期に必須なものではなく、また直接的なサービス向上に繋がらないことも多いですが、 むしろ限られた開発リソースを開発に注ぐために開発以外を効率化する、という観点からは有意義なものになると思います。 また社内向け管理画面の開発は要望やフィードバックがすぐに得られるので、ユーザが本当は何を求めているのかを考える勉強にもなります。

今回の内容は「よく考えられた管理画面」という書き方でご紹介させていただきました。 しかしながら、これは弊社の現時点でベターであると選択したものであり、正答というわけではありません。 皆様のフェーズや課題に合わせてご検討いただき、本記事がみなさまの快適な管理画面ライフのお力になれれば幸いです。