001


歌丸師匠風に始まりましたが、お疲れ様です、ウェブサービス本部サービス企画2室のスエヒロと申します。

さてさて。


管理画面あるある


管理画面使っていますか?ウェブサービスを立ち上げる時に、一般ユーザが使う画面とは別に、裏側からデータを更新したり、ユーザ情報を確認したりするために、管理画面(ツール)を用意することが多いですよね。運用が多いサービスでは欠かせないものです。

しかしサービスを立ち上げる時に、優先的に実装されるユーザ側の画面に比べると、なにかと後回しにされがちなのも管理画面。デザインがあたってない荒野のようなテーブルレイアウトや、機能が足りなくて修行のような手運用が発生している管理画面なんかもたまに見かけますよね。

難しいですよね、管理画面。


そうだ、笑点で考えてみよう


そんな管理画面をもっと楽しく学びたい。楽しいといえば「笑点」ですね。言わずと知れた国民的番組、笑点。笑点の管理画面をつくるとしたら一体どんな機能が必要でしょうか?

今日は笑点をモチーフに、管理画面をつくる際に必要な考え方・実際の進め方を4つのポイントに分けて紹介してみたいと思います。



ポイント1「運用で行う作業を洗い出す」


まずは、サービスに対して運用で対応していく作業を洗い出していきましょう。

(例)
・大喜利で出題するお題を管理する(出題内容、出題順、小道具の有無など)
・大喜利での回答を管理する(回答内容、誰が答えたか、回答順など)
・座布団枚数を管理する(増減、山田くんの勝手判断の有無など)

など

サービスが開始された後に、運用としてどのような作業が必要になるかを具体的にイメージしなら、作業内容を洗い出していきましょう。

「落語家さん一覧では、司会者フラグか回答者フラグか座布団運びフラグがいるな」「襲名した場合に名前を変更するツールがいるな」「ナポレオンズみたいな二人組の管理はどうしよう?」など、洗い出しを進めると気づかなかった実装や、もっと詰めなければならない仕様なども明確になってきます。

002




ポイント2「参照、追加、変更、削除するデータを洗い出す」


洗いだした運用の作業内容から、さらに具体的に参照、追加、変更、削除しなければならないデータを洗い出していきましょう。

(例)
落語家管理で・・
・亭号と名前
・着物の色
・司会、座布団運びフラグ

お題管理で・・・
・お題
・例のもの

など

ID(回答者IDやお題ID)や、フラグ(司会フラグ、座布団運びフラグ)といったデータの持ち方は、エンジニアさんと相談してフォームなどのUIを決めていきましょう。

003




ポイント3「大まかな運用フローを組み立てる」


次に実際の運用フロー・作業手順などを整理していきましょう。「この作業の次に、この作業」といった流れをまとめます。

(例)
大喜利開始

メンバー自己紹介

山田くん自己紹介(歌)

お題

例のもの

回答

座布団増減

など

フローを事前に整理して、管理画面の構成に無理が出ないように遷移を整理しておきましょう。

004




ポイント4「今後必要になりそうなものをピックアップしておく」


最後にオープン後に必要な機能や、ユーザが増えてくると必要な機能などをまとめていきましょう。

(例)
・管理画面のアカウントを管理する(歌丸師匠と山田くんで権限を分けたい)
・大喜利の座る位置を管理画面からドラッグ&ドロップで変更する
・山田くんが勝手に座布団を取っていった枚数をカウントする

など

サービスインしてからの大きな機能追加や仕様変更は、サービス規模や年数に比例して作業コストもあがっていきます。事前に「こういう風になるかもしれない」「ここが変更になるかもしれない」の「かもしれない」の部分をエンジニアさんやデザイナーさんなど制作陣と共有しておくことは重要です。

座布団をやめて椅子にしたい!」「ロケ番組にしたい!」とまでなると、「機能追加」ではなく「リニューアル」のレベルになってくるので注意が必要ですね。

005




以上となりますが、ここまでくるとざっくりしたワイヤフレームが見えてきそうですね。


まとめ


・運用で行う作業を洗い出す
・参照/追加/変更/削除するデータを洗い出す
・大まかな運用フローを組み立てる
・今後必要になりそうなものをピックアップしておく


といったところでしょうか。ワイヤフレームを組む段階から「この実装はどれくらい大変か」というエンジニアさんの温度感を把握しておくことも重要ですね。まずは「これってどれくらい大変ですか?」の一言から始めるのが吉ですね。


ファンファカファカファカ、ファンファン、パフ!

NHN Japanでは、面白いことが大好きなディレクターを募集しています。