Slide 1
Slide 1 text
激しい変化の中で
個別最適された管理画面
Slide 2
Slide 2 text
自己紹介
主にエンジニア
プロのプログラマ、認定スクラムマスター、UX見習い
武田
Slide 3
Slide 3 text
本日のまとめ
あるECサイトの「管理画面」を限りなく無くしたという話
※ 管理画面のLTで管理画面をなくす話ですみません… ※
• HTMLも直接書き換える
• SQLも直接書く
Slide 4
Slide 4 text
さて、"管理画面" の話をする前に…… 画面とは？
国語辞典より
1. 描かれている絵の表面
2. 映画やテレビなどの映像
Slide 5
Slide 5 text
なんで画面が必要なの？
Slide 6
Slide 6 text
ID name account email ・・・
□ 100 aaa @aaa aaa@bbb
□ 123 takeda ～～～ ccc@ddd
UPDATE SET account='～～～' WHERE id=123;
機能としては同じ
Slide 7
Slide 7 text
昔々はいわゆる「画面」なんてなかった
いわゆる「黒い画面」のコマンドですべてをやっていた
でも、みんな画面ほしがった
> ls
./ ../ bin/ dev/
Slide 8
Slide 8 text
「画面」の効果とは？
• 普段の生活に近い感覚で操作ができる
• マウスで操作できる
• なんとなく簡単な気がする
• 画面があればエンジニアじゃなくても出来る気がする
Slide 9
Slide 9 text
「エンジニアじゃなくても出来る」とは？
つまり
「効率」と「効果」
のトレードオフ
効率 効果
Slide 10
Slide 10 text
.cta{}#custom-links-
edit{}#custom-links-
edit-dialog{}.default-
theme{}#dood{}#error-
notice{}#error-notice-
container{}#error-
notice-link{}#error-
notice-
msg{}.fkbx{}#fkbx-
text{}.float-
down{}.float-up{}.has-
link{}.hide-
index.html
タイトル
本文
画像
効果
効率
使うのは簡単！でも出来ることが限られる なんでもできる！でも使うのが難しい
Slide 11
Slide 11 text
閑話休題
（それはさておき）
Slide 12
Slide 12 text
「画面」は良いとして「管理」とは？
「画面の変更」「ユーザ情報の確認」
サービスを提供するために不可欠な機能。
管理はサービスの一機能（サービスに含まれるもの）
Slide 13
Slide 13 text
ここで改めて
「管理画面」ってどういうイメージだったでしょうか？
Slide 14
Slide 14 text
ユーザ
エンジニア
オペレータ
ユーザ
エンジニア
オペレータ
管理
画面
どっち？
管理
画面
Slide 15
Slide 15 text
ユーザ
エンジニア
オペレータ
ユーザ
エンジニア
オペレータ
管理
画面
こっち！
管理
画面
Slide 16
Slide 16 text
・画面の話 "効率と効果の話"
・管理の話 "one teamの話"
つまり
何が言いたいのか？
Slide 17
Slide 17 text
まず
「効果」を最大にするためには「黒い画面」を使おう！
Slide 18
Slide 18 text
え?
エンジニアじゃないから
HTMLなんて書けない？？
やっぱり管理画面がほしい？？？
Slide 19
Slide 19 text
いえいえ…
1人でやる必要なんてありませんよ
エンジニアとあなたは "One Team" ですよ
チームで実現できるならそれで良いじゃないですか
Slide 20
Slide 20 text
閑話休題
（それはさておき）
Slide 21
Slide 21 text
抽象的な話ばかりだったので……
とあるECサイト作ってました
{Title1}
Title2
………………………………
……………………
……………………
Image(jpg)
logo
商品編集画面
タイトル
タイトル画像（.jpg）
タイトル２
Slide 22
Slide 22 text
「商品の魅力訴求のために動画を使いたい！！
動画使えますよねっ！？」
商品画面 編集
タイトル
タイトル画像（.jpg）
タイトル２
「え… 管理画面に
.jpgって書いてありますよね……
動画使えませんよ…？」
「そうですよね……すみません」
ある時…
Slide 23
Slide 23 text
Σ(ﾟ□ﾟ；)これじゃダメっ！
やりたいこと
＜ 管理画面
だっけ？
違うよね？？
Slide 24
Slide 24 text
Σ(ﾟ□ﾟ；)これじゃダメっ！
やりたいこと ＞ 管理画面
だよね？
Slide 25
Slide 25 text
管理画面を捨てました！
{Title1}
Title2
………………………………
……………………
……………………
Image(jpg)
logo
商品画面 編集
タイトル
タイトル画像（.jpg）
タイトル２
エンジニア オペレータ
Slide 26
Slide 26 text
管理画面を捨てました！
logo
商品画面 編集
タイトル
タイトル画像（.jpg）
タイトル２
エンジニア オペレータ
New Item!!
Movie
♡
Slide 27
Slide 27 text
管理画面という制約を捨てたことで
よりユーザに価値を届けられるECサイトに変貌した
という話でした
Slide 28
Slide 28 text
！！注意！！
環境変化が激しい少品種少量のECだからできた技です。
これはAmazonみたいな安定・多品種・大量のサイトでは無理です。
Cost
管理画面
作りこみ
手作業
Cost
管理画面
作りこみ
手作業
環境
変化
↓
環境
変化
↓
環境
変化
↓
Time
Volume
Time
Volume
Slide 29
Slide 29 text
！！注意！！
逆に言うと変化が激しい世界にいるなら管理画面を作るより
手作業でone teamで効果を求める方が安くて・うまいかもしれません。
Time
Volume
Cost
管理画面
作りこみ
手作業
Time
Volume
Cost
管理画面
作りこみ
手作業
環境
変化
↓
環境
変化
↓
環境
変化
↓
Slide 30
Slide 30 text
閑話休題
（それはさておき）
Slide 31
Slide 31 text
まとめ
Slide 32
Slide 32 text
ということで、
「オペレータ」「管理画面」「エンジニア」
という垣根を壊して
１つの「サービス」
と再定義することで、
効果をとった、という話でした。
Slide 33
Slide 33 text
管理画面は
「誰かが作ってくれるからそれを使う」
という他人行儀なものではなく、
サービスそのもの
サービスをよりよくするための「道具」
ユーザーにより良い価値を届けるための「道具」
Slide 34
Slide 34 text
－ 穴ではなくドリル －
ユーザは穴が欲しいのかもしれませんが、われわれはドリルを作ってます。
必要なときに必要なサイズの穴をユーザーに届けたい。
管理画面というのは決められたサイズの穴ではなく
優秀なドリルであって欲しいと思います。
Slide 35
Slide 35 text
ご清聴ありがとうございました
m__m