top of page

13/4/27

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

Image by Olia Gozha

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

約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は・・ない・・やろ?」

宮元 直也「いいっちゃない?」

Koichi Murata「いいっしょ」

ここらで、『流石にGoboothって名前はどうなんだろう?』という話が上がるようになった。

私も100%ダメだと思っていたし、何か言葉が濁点ばかりだったので、親しみにくい気がしていた。

チーム皆で話し合うと、色々な案が上がったが、これぞ!というものはなかった。


そんなとき、村田がポツリと漏らした言葉が

Koichi Murata「駅だから、エキーノっていいんじゃね?”ーノ”はイタリアン的な感じで」


これを聞いて即、全会一致。

世界初のオンラインフリーマーケットの名前は『ekino』になった。

Tさんがさっそく幾つかロゴ案を出してくれた。




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

(半分ぐらいネタだった・・・はず)

最終的には、このロゴに決った。


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


細かい部分の作りこみ

ここからデザインは細かい部分の作りこみに入る。

大まかな構成は決定していたので、部分部分を少しずつ良くしていった。




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


複数のパターンを用意してもらい、みんなで細かいところを詰めていった。

思えば、膨大な作業量をこれだけ1つ1つ、きちんきちんとやってくれる人は、中々いなかっただろうと改めて思う。

作業に疲れた時はイラストとか書いてくれてテンションが上がった。


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


機能毎のデザインも大詰め。

結果的にこのように変わっていきました。


新規出品 初期デザイン



新規出品 中期デザイン



新規出品 最終デザイン




少しずつ、手探りしながら、ようやくこの最終形まで落ち着いた。

『値下げ交渉可』『取引駅変更可』等も、終盤になってようやくついた機能だ。

サービスの仕様は、Webサービスの場合は特に、予め決まっている場合は少ない。

いつでもすぐに変更出来るので、作りながら考えるのが1つの定石で、その点に関して間違いはなかったと思う。

サービスとしての総合的な準備も始め、利用規約・説明文は村田、Google Mapのjsは神岡、と少しずつ分担も決まっていながら、サービスとしての形が出来ていった。



ekino 完成

そうして、出来上がったのが オンラインフリーマーケット『ekino』だ。

ekino - 近くの駅が、みんなのお店に - オンラインフリーマーケット

http://ekino.jp/



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


Webサービスをゼロから作ってみて感じたことは、

  • 最終形は予想出来ない

  • 簡単ではない。1つ1つ、きちんと作るととても労力がかかる

  • 1人1人の細かい拘りが良さを作る。神は細部に宿る。

  • コンセプトワークは非常に重要。何のためのサービスなのか。ユーザーに何をして欲しいのか。

等などだ。


そうして此処から、ekinoを皆に使ってもらうために奮闘していくのだが・・・

その続きのストーリーはこちらへ!

そちらではもう少し、デザインだけでなく、何を考えながらサービスを作っていったのかという事に焦点を当てて文章を書こうと思います。

←前の物語

PODCAST

​あなたも物語を
話してみませんか?

Image by Jukka Aalho

急に旦那が死ぬことになった!その時の私の心情と行動のまとめ1(発生事実・前編)

暗い話ですいません。最初に謝っておきます。暗い話です。嫌な話です。ですが死は誰にでも訪れ、それはどのタイミングでやってくるのかわかりません。...

忘れられない授業の話(1)

概要小4の時に起こった授業の一場面の話です。自分が正しいと思ったとき、その自信を保つことの難しさと、重要さ、そして「正しい」事以外に人間はど...

~リストラの舞台裏~ 「私はこれで、部下を辞めさせました」 1

2008年秋。当時わたしは、部門のマネージャーという重責を担っていた。部門に在籍しているのは、正社員・契約社員を含めて約200名。全社員で1...

強烈なオヤジが高校も塾も通わせずに3人の息子を京都大学に放り込んだ話

学校よりもクリエイティブな1日にできるなら無理に行かなくても良い。その後、本当に学校に行かなくなり大検制度を使って京大に放り込まれた3兄弟は...

テック系ギークはデザイン女子と結婚すべき論

「40代の既婚率は20%以下です。これは問題だ。」というのが新卒で就職した大手SI屋さんの人事部長の言葉です。初めての事業報告会で、4000...

受験に失敗した引きこもりが、ケンブリッジ大学合格に至った話 パート1

僕は、ケンブリッジ大学トリニティ・カレッジ、政治社会科学部(Social and Political Sciences) 出身です。18歳で...

bottom of page