Developer's Voice of HMDT Co.,Ltd.

HOME > PRODUCTS > MoneyTron > Developer's Voice

MoneyTron (webtron)

今回の開発担当者 木下誠/大宮聡之(株式会社ウェブトロン) @HMDTオフィス(2011.6.14)

ー制作のきっかけを聞かせていただけますか?
 依頼がきたわけではないのですよね?

大宮 はい。依頼があった訳じゃないです。
   開発を始めた時期は、2010年なんですが
   当時、あまりいい「お小遣い帳アプリ」がなかったんですよ。
   すごく詳しくつけられるけど面倒くさいアプリか
   簡単だけどダサイアプリかしかなくて。
   それだったら、作ってみようと思いまして。

木下 私も「お小遣い帳アプリ」は初めてでした。
   ホイールのデザインもはじめてだったし。

IMG_1550.PNGIMG_1550.PNG
↑シンプルなデザインのお小遣いアプリ MoneyTron

ーMoneyTronはデザインがすごくかわいいですよね。

木下 アイコンもかわいいんですよ。
   そして、その数がすごく多いんです。

大宮 随分たくさん作りましたよね。

木下 種類も多いし、ファイル数もすごいんですよ。
   一つのアイコンにつき、画像ファイルが5つあるんですよ。
   通常のタイプ、ハイライトで青くなったタイプ、白いタイプ、サイズ違い・・・
   それが通常のiPhone用とレティナディスプレイ用と・・・

大宮 鬼のようにあるんです(笑)
   ver.1ではプリセットのカテゴリしかなかったんですけど
   最近のアップデートでカテゴリの設定を、
   自由にカスタマイズできるようになったんです。
   そのタイミングでアイコンを増やしました。
   かなり大変だったんですけど、途中から楽しくなってきて
   どんどん増やしてやれ! という気分になりました(笑)

IMG_1522.PNGIMG_1522.PNG
↑鬼のようにあるアイコン

木下 アイコンのデザインってどういう発想で出てくるんですか?
   例えば・・・この「コスメヘルスケア」とか。

大宮 これは「薬草」なんですよ。
   今回は制作する時に海外のデザインを参考にしました。
   たくさん見て、平均値を出してデザインしてみたんです。

木下 保険は「傘」なんですね。

大宮 「傘」は雨をよけるのでモチーフになっています。
   保険のアイコンって「傘」か「シールド(楯)」が多いです。

   (ワイングラス=飲酒、家族=家事、薬草=コスメ・ヘルスケア、
    スマイル=デート・交際費、ネクタイ=ファッション)

IMG_1521.PNGIMG_1521.PNGIMG_1524.PNGIMG_1524.PNG

ーバージョンアップは続けているんですか?

大宮 もうすぐバージョンアップ予定なんです。

木下 次期バージョンは近日中に出るはずです。
   バグも取れるはずですし・・・(笑)
   (注:ここで話題になっているバージョン1.2.1はすでにリリース済み)

大宮 おぉ!

木下 お小遣い帳って個人情報の固まりじゃないですか。
   あまり、人には見せたくない情報が多いので
   新しいバージョンでは、パスコードロック機能がつきます。
   今までは、立ち上がりからすぐに使えるのですが、
   今回は立ち上がったらパスコード入力画面になって、
   認識されてはじめて使えます。
   これ、本当は動きも見てもらいたいなぁ。
   パスコードを間違えると、ちゃんと震えますし。

大宮 格好よくできてます。

ーどんどん進化するお小遣い帳ですね。

大宮 ユーザーからリクエストが結構くるんですが。
   その中で一番多い要望が編集機能です。
   今は編集ができなくて、記入した内容を変更したい場合は、
   一度削除して新しく入力するんですが
   編集はできるようにしてほしい、という要望が多くて・・・
   リクエストがあまりに多いので、ぜひ対応したいと思ってます。

木下 編集画面はキーボードが表示されて編集する、ということになりますかね。

大宮 そうですね。編集はやることが多いんですよね。

木下 アプリを作る時は「ブラウザ」と「エディタ」の2種類にわけられるんですよ。
   「ブラウザ」は見て楽しむだけのアプリ。
   「エディタ」はユーザーが自分でドキュメントを変更できるアプリ。
   制作が簡単なのは、実装しなくてはいけない機能が少ない
   「ブラウザ」の方です。
   だから、何かアプリを作る際に
   仕様が「ブラウザ」タイプになると比較的やることが少なく制作できます。
   「エディタ」タイプになると、作業量は3倍くらいになります。
   例えば、「大辞泉」は「ブラウザタイプ」なので、比較的作るのは楽で
   「マンダラ」は「エディタタイプ」なので大変です。
   「MoneyTron」は「エディタタイプ」ですが、
   入力内容が限定されているので、比較的楽なタイプです。
   でも、ユーザーのリクエストを聞いていくと、編集機能が膨らんで
   大変なことになるなぁ、と思っていますが。

大宮 「レポート」は基本的に見るところなんですが、
   ここに「編集」が入ってくるので、少し複雑になってきますね。

木下 円グラフも奇麗なんですよね。
   色は大宮さんのこだわりがあって、すごく綺麗です。

大宮 例えば、「外食費」と「食料品」で食べ物だけどカテゴリーが分かれています。
   でも、両方とも食べ物に関連するから、同一の色系の方がいいな、と思って
   黄色っぽいの色は食べ物系にしていました。
   今はユーザーが自由に設定できるので、変更できるんですが。

IMG_1553.PNGIMG_1553.PNG
↑レポート画面。内訳を円グラフで表示。こだわりの色が出ています。

ーデザイナー指定の色をアプリにするときに再現するのは難しいことなんですか?

木下 色は陰影がついていたりするので、単に塗りつぶすだけではなく
   プログラムで細工を加えています。

ーデザインが洗練されて、使い勝手もいいアプリって実は少ないですよね。

大宮 えぇ。あんまりないですよね。まぁ、多かったら困るんですけど(笑)

木下 だから、ウェブトロンとHMDTのタッグは、その両方を目指します!

ーマンダラもシンプルなデザインですよね。
 (*大宮さんはマンダラのデザインも担当)

木下 シンプルにしたんですよ。

大宮 シンプルにしましたよね。
   でも、難しかったですよね。概念が難しいので。
   マンダラは今泉さんの思想ありきなので、それをいかに具現化するか、
   というか、まとめるのが大変なところですよね。
   論理的にいくのであれば、
   「こういうインターフェイスで、この仕様があれば大丈夫です。」
   ということで終わりますが
   そこに「いや。これをやると脳の中でこうなって、脳の動きはこうじゃない」
   という今泉さんの思想がありますからね。

o&i.jpg
↑マンダラ定例ミーティング中。今泉さんの思想を理解した上でデザインします。

木下 プログラミング側も同じです。
   単純に「3×3」のセルを操作する、ということであれば
   論理的に攻めて、どの操作を実装すればよいか考えればいいんですけど
   そういう作り方ではないわけです。

大宮 木下さんが考えていることと、
   僕が今泉さんから聞いて、こうやって実装すればいいんだな、
   と考える設計は多分似てるんですよ。
   完成を設定して、そこにいく最速の方法はこうだろうな、と思うんですけど
   でも、やるべきことはそうじゃないからそこが難しいんですよね。
   最近、ワイヤーフレームをその場でプロトタイプにする手法を取っていて
   わりとまとまって、きちんとミーティング毎に具体化できる、
   詰まっていく形にできているので、成功したかな、と思っています。
   実装できる仕様まで、まとまる感じで。
   マンダラは特殊ですけど、アプリケーションって
   使いやすくないと使ってもらえないじゃないですか。
   結構、そういうことに基づいてアプリケーションを作れるって
   ないことだと思うんです。

ーそういうことってなんですか?

大宮 ユーザーがいかに使いやすいかということに一番こだわって作る、
   ということが出来る案件って実はあんまりないんです。
   絶対にクライアント(代理店)がいて、
   クライアントがやりたいことには従うしかないので。
   半分ぐらいは抗うんですが、結局は押し切られる形で世に出して
   星1つ、という評価になるとか。
   政治的な部分は含んでいるので
   あの体制が変わらない限りは、
   クライアントワークはなかなかむずかしいと思ってるんです。
   「大辞泉」とかはお客さんとすごく密にコミュニケーションをとりながら
   進められているから
   きちんとユーザーが満足できるものを作れているけれど
   代理店を挟んでしまうとそれができない。

木下 関わる人が多くなると、ろくなことはないですね。

大宮 信頼関係ができないとお互い信じられないから、難しいですね。
   広告系のアプリでいいものが少ないのは圧倒的にそういう理由だと思うなぁ。
   もちろん、代理店は代理店でいいところもあるんですけどね。。

ー今後、自分たちで作るオリジナルアプリの開発は増やす予定なんですか?

大宮 増やしたいんですけど、木下さんも僕もお互い時間がなくて。
   でも、マネートロンがそこそこのマネタイズができているので
   そこそこできるなら、やってもいいんじゃないかな、と思いますけどね。
   例えば、一定の期間できっちりこれを作りましょう。とプランを立てて
   せーの!でやる、というのは
   タイミングとしてはあってもいいのかな、と思っています。

木下 私も作りたいなぁ。作りたいものがいっぱいあるので。

omiya.jpg

大宮 マネタイズがそこそこなのって、販促が日本でしかないからで。
   海外のディベロッパーに見せたら、「これ、いいじゃん」っていうんです。
   でも、みんな知らないから買わないんです。
   日本ってアニメがすごい、というイメージで
   「日本製」のソフト系でいいものがあるイメージはないみたいで。

木下 もし海外で売るのであれば、「日本製」は売りにするべきじゃないんですよね。
   ソニーが海外で売れているのって、
   海外で「日本製」とはアピールしていないからなんですよね。
   製品の力だけでPRして売っていたから、
   買う方は「日本製」と知らずに買うんです。
   私は、日本のユーザーは顔が見えるから
   この人たちに使ってほしい、と思って作るけど
   アメリカのユーザーに対してはお前ら金落とせよ、と思ってる。
   それって、顔が見えないからなぁ。
   やっぱり海外に住んで、海外ユーザーのことを見ながら作るのが
   正しいんでしょうね。
   海外で売っていくなら。
   少なくとも、営業の人だけ向こうに住んでもらって売ってもらうとか。

ー顔が見える人のところで、ってことですよね。

木下 更にいうと、作る人(開発者)も顔が見えた方がいいと思っています。
   だから、この企画(Developer's Voice)をやっているんだけど。
   どういう人が、どんなことを考えて作っている、というのをアピールしたい。

ーどういう人が作っているかを見せると、買う側は安心しますよね。
 提供するだけではなくて、思いが見えて、責任が生まれると思います。
 自己満足にならないように、思いを伝えるのが重要なんですが。

木下 例えば、野菜の生産者の顔が出ている、という例で言うと、
   顔がでているだけで商品というよりは作品みたいな感じになってくる。
   そんなことは考えてないかもしれないけどね。
   でも、アウトプットに責任が出たり愛情が出るのはいいよね。

大宮 デザインの趣向も、最近ユーザーの調査に基づいてとかあるじゃないですか。
   グーグルが筆頭ですけど、どこがクリック率が高い、
   ということに基づいて作ってるんですよね。
   色も、形もクリック率に基づいていて、
   ボタンの形もMacユーザーとWindowsユーザーで違うんです。
   Windowsユーザーは丸いボタンはあまりクリックしないんですけど
   Windowsのデフォルトのような、カクカクしたボタンだとクリックするんです。
   Macユーザーは逆で、丸いボタンのデザインの方がクリックする。
   そういう統計に基づいて変えてたりするらしいんです。
   でも、僕はあまりそれは好きじゃなくて。

ー作り手の思いはないとだめですよね。

木下 私たちが作る時は、まず一枚のアプリのスクリーンショットを考えるようにしてます。
   その一枚を見たらアプリの機能がわかって、
   且つ、それの使い方もわかって、更には美しいんです。
   ユーザーが「これ格好いいから使いたい!」と思う
   スクリーンショットを作って、そこから
   機能を発生させていく、という方法です。
   それは「自分たちが何をやりたいか」ということを
   はっきりさせてからやるということなんですよ。
   それをいうと「マンダラ」とか「MoneyTron」は
   その手のスクリーンが非常に強いと思うんです。
   マンダラは「3×3のセル画面」が全てで、それを見ただけで全てがわかりますよね。
   「MoneyTron」も「ホイールインターフェイス」が非常に印象的なので
   それを見ただけで、使い方もわかって、機能もわかって
   更に「これいい。使いたい」と思ってもらえるものになっていると思います。
   私たちは、今後もそういうものを作り続けたいと思っています。

大宮 「僕が使いやすいと思うもの」「美しいもの」ってこういうことです、
   というのが、使うことを通してユーザに伝わるようなアプリを提供していきたいです。

ーぜひ作ってください!

木下/大宮 はい!そうしたいですね。

o&k.jpg

HMDTアプリケーション

icon512.png
HMDT BOOKS