3ヶ月でvue.jsを使って動くWebサービスを作ってみた
まえおき
生活していたら、「こんなサービスあったらいいなぁ」と思うことがありますよね。でも、個人でリッチなWebサービスを作るのは、かなりの技術力と時間が必要だろうと思っていました。
今回は、素人の僕が3ヶ月かけて、Webサービスを作って公開した話です。
デザインをしたことも無ければ、UI/UXについて考えたのも初めてだったので、間違ったことや、逆に当たり前のことを言ってるかもしれませんが、温かい眼差しでお願いします。
自己紹介
僕は、会社員として働いています。
ナウいWebカンパニーとかではなく、普通の会社員です。分野はIT系ですが、コードを書いたことは、入社してから1度もありません。関係者に電話したり、ExcelやPowerPointで図形を配置するのが僕のお仕事です。
きっかけ
僕はマンガが好きでよく読んでます。最近は、コミックサイトを見ても、有名な作品は読み切った感が出てきてしまって、「何かおもしろいマンガないかなー」と思っていました。
ある日、偶然某マンガサイトで青年コミックをレビュー数順に検索してみました。（普段はこんな探し方しない）
すると案外知らない作品って、いっぱいあるんですよね。特に気になったのが「金魚妻」。レビュー数が1万件越えてて、評価も高かったです。
普段は絶対読まない系統だったけど、読んでみることにしました。そしたら、これがめちゃくちゃおもしろい！！
短編なのに、登場人物の感傷がしっかりと描かれていて、あっという間に全巻読んでしまいました。
この経験から、「知らないけど、おもしろいマンガってたくさんある。こんな作品を掘り出して、オススメしてくれるサービスがあったらいいなぁ」と思いました。探してみたら、この世に無かったので作ろうと思いました。
プロジェクト発足
僕は、まず友人に声をかけました。自分ひとりでは、絶対に最後までやりきれない自信があったから。自分との約束って簡単に破ってしまうけど、人との約束は守ろうと思いますよね。だから、人と約束しました。
彼も僕と同じで、コードを書くような仕事はしていませんでした。僕がギラギラしながら、構想を話すと「それいいね！」ってことで一緒にやってくれることになりました。
メモ帳にサービスのイメージを書きながら、「こんな体験ができたらいいなー」と話し合っているうちに、僕の思いついたサービスはより鮮明になっていきました。
サービスのイメージ
一言で言うと、感情(きもち)という新しい切り口からマンガを探すサービスです。
作品に感情を付けるために、作品について書かれた文章を解析することにしました。自然言語処理（NLP）ってやつです。かっこいい。響きがかっこいい。
軽く調べてみたところ、Pythonを使えば、素人でも簡単にNLPが実装できそうなライブラリがあったので、それで見通しが立ちました。人類すごいです。
図
プログラミングの勉強
Excelおじさんが2人集まっても、サクッとWebサービスを作れるほどの技術力は当然ありません。僕らはプログラミングの勉強から始めることにしました。
まずどんな技術使って作るか決めないといけません。Qiitaなどを参考にしながら、いまプライベート開発でWebサービスを作るならどのような技術が主流かつ、学習コストが低そうかを検討ました。
結果、UI側の実装にVue.js、API側の実装にFlaskを使うことにしました。（調べて初めて知ったワード）
使う技術が決まったので、10日ほどで、ドットインストールのVue.js講座と「Vue.js入門」という本を流しました。どちらも、非常にわかりやすかったです。
ドットインストールのVue.js講座は有料でしたが、無料体験期間中にやりきってしましました。ドットインストールさんごめんなさい。全然お金払ってもいい内容でした。
本は8割くらいで、必ずしも必要なさそうな内容も混じってきたので読むのをやめました。Flaskやサーバー周りはほとんど友人に任せました。
ここからは、サービスを作りながら学んだことや気を使ったことについて書いていきます。
UIの実装は後回しに
UIは後回しにして、まずは機能から実装しました。UI/UXって明確な答えがないから、絶対にケンカになる（議論が長引く）と思ったからです。
同じ理由で、サービスの名前も最後の最後に決めることにしました。
同じ機能を実現しているサイトを参考にした
サービスを作る上で、マンガの情報や表紙、URLをどうやって用意するかが最大の課題でした。
そこで、同じことを実現しているサービスを参考にしました。例えば、あるサイトでは、マンガの表紙をamazonの商品画像APIを使って用意していることがわかりました。
これを使おう。そのためには、ASINかISBNというユニークコードが必要でそれを集めるには、ここを参考にして…という具合です。
最小の労力でそこそこのUI
Excelおじさんには、ボタンとかを1からデザインするセンスも時間もありません。
そこで今回は、Elementsを使いました。Elementsは、Vue.jsのUIフレームワークです。シャレオツで基本的なUIは部品が用意されていて、自分のサイトに置くだけで使うことができます。
ってさっきの本に書いてたので、使いました。
結果、最小の労力でそこそこのUIが実現できたと思います。
画像
主役はマンガの表紙
作っている途中に気付いたのですが、マンガの表紙は主張が激しいので、それだけでサイトデザインに影響します。
でも、よく考えるとユーザーが一番見たいのも、マンガの表紙です。であれば、開き直ってサイト自体は薄い味付けにして、マンガの表紙を主役に置くことにしました。
サイトを開いた瞬間、目にマンガの表紙が飛び込んでくる。そんな体験を目指しました。
画像
サービス外で盛り上がってもらう仕組みを考える
まず、サービス内でユーザーに長時間遊んでもらうのは難しいと思いました。
電子コミックサイトとかは、様々な特集があって、それを見てるだけでも楽しめますよね。あれは、中の人がたくさんのコンテンツを用意してくれているからです。
しかし、プライベートな開発では大量のコンテンツを用意できません。そこで、逆にサービスの外に出ていってもらって、そこで楽しめるような仕組みにできないかと考えました。「〇〇った～モデル」です！(命名)
検索する→検索結果をシェアする→Twitter上で盛り上がってもらう→また検索してもらうみたいなイメージ。
具体的には、検索した結果をTwitterで共有できるようにして、外部から検索結果ページに飛んできた人向けに、再度検索するボタンを中心に置きました。
ユーザー体験は、必ずしもサービスの中で完結する必要はないかもしれません。
少しでも新しい体験を
プライベート開発で、GAFAが提供するような、革新的な体験を実装することは難しいです。（GAFA言いたかっただけ）
だからといって、ありきたりなサービスだと目も向けてもらえません。
そこで、このサービスは、感情(きもち)からマンガを探すことをキラーポイントにしました。恋愛やバトルなど、カテゴリによる検索は既にコミックサイトで提供されていましたが、感情をキーにマンガを探せるサイトは見当たらなかったからです。
せっかくプライベートで作るんだから、抜け目のないサービスよりも、スパイスの効いたやつがいいです。
次の動作がわかるように
実装した機能を画面上に並べるだけだと、ユーザーが次に何をすればいいかわかりにくいと思いました。理想は、特に説明しなくても、次に何をすべきか迷わないようなUIです。
そこで、次の2つのことに気を使いました。
◆ユーザーに動きを見せる
動きを見せることで、いま何が行われているかをユーザーに示すことができると考えました。
具体的には、タグを選んだときに数字がカウントダウンされていき、作品が絞られていってる様子がわかるようにしました。そして、十分に絞り込めたら、ボタンの色をグレーから赤に変えるようにしました(アクティブ化)。
こうすることで、自分はいま何をしていて、どこに向かっているのかがわかりやすくなったと思います。
◆部分的に何かのUIに似せる
ユーザーが迷わないために、部分的にどこかで見たことがあるUIを採用しました。
例えば、タグの選択画面は、色の変化（淡色から濃色）をGoogle画像検索のUIに似せました。Google画像検索のUIが唯一の正解だとは思っていませんが、ユーザーがどこかで見たことあるUIにすることで、操作のイメージがつきやすくなると思いました。
モチベーション管理
仕事をしながら、サービスを開発するのはそれなりに大変です。がんばりすぎると、息切れしてしまうことが目に見えました。
そこで、休日のどちらか半日と、平日1日(2時間)くらいの共同作業と、あとは個人ワークにすることで、お互いの仕事もプライベートも犠牲にせずに開発を続けることができました。
早めのリリースと改善
よく言われることですね。サービスを作っていると、最初は「素晴らしいアイデアが降ってきた。俺って天才では？」と思っていても、途中で自分のアイデアはとてもつまらないものに思えてきます。
例にもれず、僕も思いました。「こんなもの作って誰が使うんだろう。」って。
そこで、とにかく早く本番環境に乗せることを意識しました。ある程度、形になった時点でレンタルサーバーを契約して、本番環境に移しました。身銭を切れば、覚悟が決まりますね。
納期もコストもないプライベート開発において、こだわり始めたらキリがないし、最悪リリースできないということになりかねません。とにかく早めに本番環境に移して、改善を重ねることで「世に出す」という絶対防衛ラインを死守しました。
せっかく作り始めたものが、リリースできないことが一番怖いですからね。
できたサービス：emore
サービス名は、emotion(感情)+recommend(薦める)でemoreです。
感情＋気になるタグを選んぶことで、7000作品以上の中から、一致するマンガを探すことができます。
今は少年・青年マンガだけを対象にしていますが、もうすぐ少女・女性マンガも追加しようと思っています！
みなさん、ぜひ使ってみてくださいね！
この記事が気に入ったらサポートをしてみませんか？