劇的ビフォーアフター!ゼロからサービスを作ってみた話。オンラインフリーマーケット『ekino』

このエントリーをはてなブックマークに追加

ゼロからサービスが出来るまで。

約2年前、友達とオンラインフリーマーケット『ekino』を作りました。
ここでは、特に『デザイン』にフォーカスして当時の話を振り返りたいと思います。
Webサービスって、こんな感じで出来るんだな〜と楽しんで頂けたら幸いです。
下の方では、製作途中のデザインも公開します!

ビフォーアフターをお楽しみください!\(^o^)/

作ったキッカケ

当時、忙しかった活動も終わり、内定も決まっていたので、あとは学生生活を楽しむだけ、と言う状況だった。
また、ベンチャー企業で2年間アルバイトをした事で、Webサービスの基本的な作り方は大体学ばせて頂いていたので、そろそろ何か1つ、自分でも作ってみたいなーと思っている最中だった。

天才肌の友人、宮元

そんな中、僕のクレイジーな友達の1人である宮元が面白いことを言った。
彼はいつも道端に落ちている壊れた機械やよく分からないモノを拾って、直して使ったりして遊ぶ天才だった。
インターネットにフリーマーケットみたいなのがあればいいんやない?。みんなまだ使えるものを捨てるの、勿体無くね?
確かに!!!
それを聞いた当時の私は『動いてから考える!』のがCool!だと思っていたので、すぐに実際に作ろう!という話になった。

アイデアはある。技術もある。でも・・?

システムに関しては、よっぽどのものでなければ自分で全て作れるだろうと思っていたので特別な心配はしていなかった。
全て、今までベンチャー企業で学んだ事で作れそうだった。
(つくづく、素晴らしい会社でアルバイトさせて頂きました。  ->ピクシブに入るときの話

しかし、気になっている事があった。
デザインは・・どうしよう?
宮元は、漫画(Kakkotsuke Or Die)を書いたり自分で作曲(DTM)もする多彩っぷりだったが、流石にデザインをやったことはなかった。

(ちなみに、当時宮元が書いていた漫画はこちら。iPhoneアプリ化もしたんですが、R-18指定に引っかかって申請通りませんでした・・・・)


私は芸術方面は、からっきしダメだった。

そうして、どうしたらいいか悩んでいた時、ふと、とあるセミナーで知り合った美大の友人の事を思い出した。
彼なら・・・やってくれるかも?

可愛いけどちょっと毒舌デザイナー

彼は、その前の1年間、一緒にゲーム開発を行ったチームメイトだった。
その中でも、彼は 1. インターネットに精通している 2. こだわりがある 3. 何だかんだ言っても、必ずお願いした仕事はキチッとやりとげてくれる とても出来るデザイナーだなあとつくづく思っていた。

何か機会があれば、一緒にやってみたいと思っていたので、早速彼に『オンラインフリーマーケットを作りたい!!』と言ったら、すぐにプロトタイプを作ってくれる事を約束してくれた。
この時彼がいなければ、ekinoが生まれることはなかったと思う。
(ちなみに名前は、恥ずかしいから伏せて欲しいと言うことで、今後はTさんとします!)

作って直して、作って直して。


プロトタイプ

さて、当時のサービス名は、宮元か神岡か村田か、誰かが適当に言った『GoBooth』で暫定的にいく事が決まっていた。
フリーマーケットは個々人がブースを開き、そこでお店を開店するので、ブースに行く!という意味でGoBoothだ。
(当時私のあだ名が『ゴーブー』だったのも関係ある・・かも・・ -> ゴーブーと呼ばれた大学時代

さっそく制作に入ろうと、Tさんにお願いした事項がこの3つだ。
  • 駅で、手渡しするヤフオク的な感じ!
  • とにかくオンラインフリーマーケット!
  • Google Mapで、駅を選んだら、商品が出る感じ!
Tさんは、これだけ聞いてデザインを作ってくれた。クリエイターの鑑や。。(ひどい注文で申し訳なかったです)
Tさん!あとは頼む/(^o^)\
そうして最初に出てきたデザインがこちら。

それまで自分たちでノートに適当に書いたデザインで作り始めていたので、これを見た時、デザイナーすげーー!と思った。
あの適当な注文でここまでやってくれるなんて・・と、みんなとてもやる気になって、私はこの時必ず完成させる事を誓いました。
(ちなみにこのデザインはここから1080度以上変わっていきます)

こんな感じでロゴ案まで出してくれて、みんなでワイワイ言いながら考えていった。


コンセプトと、機能を踏まえたデザイン

これをたたき台に、少しずつ、デザインの修正をお願いしつつ、Webサービスとして実装していく事になった。

デザインで主に大きく修正したポイントは
  • 地図はメインではないので、ここまで一面に大きい必要はない
  • 左側を、ユーザーごとのリストにすると商品ごとに探すのが難しい
  • 商品1つ1つの概要がもう少し分かりやすい方が良い。
  • サイトの説明等を掲載する場所が欲しい
...etc などなど、少しずつ相談しながら修正をお願いした。
(本当は最初からこのぐらいのお願いは最低限出来たほうが良かったのだが、正直私もまったくイメージできてなかったため、このようなお願いの仕方になってしまいました。。)
特に、商品のリスト形式のところは重要だったので、ラフ画に落としながら実際に作っていった。


Tさんはレスポンスの速さと仕事の丁寧さはピカイチで、上手く言葉に出来ないながらも伝えると、すぐ此方の意図を汲んでデザインに落としこんでくれた。



そんなこんなで出来てきたデザインがこちら。


  • タブ形式にすることで、ユーザーが自由に見る項目を変更出来る
  • デザインを全体的にポップにして親しみやすさを。
  • アイテムをリスト形式で表示することで、情報を増やす
  • 地図を上手く右側に落としこむことで、使い勝手の向上
  • 縦スクロールにすることで、ユーザービリティの向上

等の部分が意識されて、大きく雰囲気が変わった。
実際にテスト版で実装し、また改善する日々が続いた。

開発のスタイルと楽しみ。

だいたい、日中は大学があり、夜はバイトがある人も結構いたので、深夜に集まることが多かった。
適当な日にみんなで集まり、深夜開発して、コンビニ行ったりアニメ見たりしながら作るのが常だった。
今思うと、結構面白いことをしてたなーと思う。
私の人生には、部活に打ち込んだり、文化祭等を一生懸命やる!的なイベントはあんまりなかったけれど、ekinoや漫画アプリの開発はやっていて自然に面白かった。
ちなみにTさんが、当時流行っていたアニメのロゴをモジってこんなのを作ってくれてました。


ekino(エキーノ)、誕生。

流石にGoBoothは、ない。

流石にGoBoothは・・ない・・やろ?
いいっちゃない?
いいっしょ
ここらで、『流石にGoboothって名前はどうなんだろう?』という話が上がるようになった。
私も100%ダメだと思っていたし、何か言葉が濁点ばかりだったので、親しみにくい気がしていた。
チーム皆で話し合うと、色々な案が上がったが、これぞ!というものはなかった。

そんなとき、村田がポツリと漏らした言葉が
駅だから、エキーノっていいんじゃね?”ーノ”はイタリアン的な感じで

これを聞いて即、全会一致。
世界初のオンラインフリーマーケットの名前は『ekino』になった。
Tさんがさっそく幾つかロゴ案を出してくれた。



最後のは、『エキンド』という最後まで残ったサービス名候補を意識して作った江戸風デザインだ。こういう遊びゴコロ溢れたデザインを沢山作ってくれるTさんは偉大!
(半分ぐらいネタだった・・・はず)
最終的には、このロゴに決った。

オンラインフリーマーケット『ekino』の誕生だ。

細かい部分の作りこみ

ここからデザインは細かい部分の作りこみに入る。
大まかな構成は決定していたので、部分部分を少しずつ良くしていった。



私が分かりにくいところは、デザインに文字で説明してくれたり

複数のパターンを用意してもらい、みんなで細かいところを詰めていった。
思えば、膨大な作業量をこれだけ1つ1つ、きちんきちんとやってくれる人は、中々いなかっただろうと改めて思う。
作業に疲れた時はイラストとか書いてくれてテンションが上がった。

(本物の100倍増しぐらいで描かれてますが・・・嬉しい!)

機能毎のデザインも大詰め。
結果的にこのように変わっていきました。

新規出品 初期デザイン



新規出品 中期デザイン



新規出品 最終デザイン




少しずつ、手探りしながら、ようやくこの最終形まで落ち着いた。
『値下げ交渉可』『取引駅変更可』等も、終盤になってようやくついた機能だ。
サービスの仕様は、Webサービスの場合は特に、予め決まっている場合は少ない。
いつでもすぐに変更出来るので、作りながら考えるのが1つの定石で、その点に関して間違いはなかったと思う。
サービスとしての総合的な準備も始め、利用規約・説明文は村田、Google Mapのjsは神岡、と少しずつ分担も決まっていながら、サービスとしての形が出来ていった。


ekino 完成

そうして、出来上がったのが オンラインフリーマーケット『ekino』だ。
ekino - 近くの駅が、みんなのお店に - オンラインフリーマーケット


みんなの協力を得ながら、自分がベンチャー企業で学んだ技術を生かし、Tさんのクオリティへの拘りを少しずつ実装していく事で、ようやく辿りついたのがこの形だ。

Webサービスをゼロから作ってみて感じたことは、
  • 最終形は予想出来ない
  • 簡単ではない。1つ1つ、きちんと作るととても労力がかかる
  • 1人1人の細かい拘りが良さを作る。神は細部に宿る。
  • コンセプトワークは非常に重要。何のためのサービスなのか。ユーザーに何をして欲しいのか。
等などだ。

そうして此処から、ekinoを皆に使ってもらうために奮闘していくのだが・・・
その続きのストーリーはこちらへ!
そちらではもう少し、デザインだけでなく、何を考えながらサービスを作っていったのかという事に焦点を当てて文章を書こうと思います。
読んでよかった
このエントリーをはてなブックマークに追加
このストーリーをブログ等で紹介する

知りたい!

テストのコメント!

是非活用して見たいです!世の中に新しいサービスを作れるなんてほんとに素敵!

思わず、すごっ!!と見入ってしまいました 笑!Webサービスってこうやって出来ていくんだなってのが、とても分かりやすかったです!初心者でも出来るのかな??と、読んでいてワクワクが止まりませんでした!

いいですね!

溝部 拓郎

こんにちは!たくろーです!好きなモノはゲーム、本、お酒です!

溝部 拓郎さんが次に書こうと思っていること

|

溝部 拓郎

こんにちは!たくろーです!好きなモノはゲーム、本、お酒です!

溝部 拓郎

こんにちは!たくろーです!好きなモノはゲーム、本、お酒です!

溝部 拓郎さんの他のストーリー

  • Nintendo DS Software開発

  • 溝部 拓郎さんの読んでよかったストーリー

  • スタートアップに関わる理由