デザイナーの僕がRailsアプリ「Hello Pilsner」をリリースしました

2018年5月4日、「Hello Pilsner」をリリースしました。

僕自身、ピルスナーウルケルが超大好きなので、僕のために作ったサービスと言っても過言ではありません。

このサービスはデザインから実装まで全て1人で行い、約2週間かけてリリースすることができました。

僕は2年前に初めてデザイナーとして働き初めたのですが、当時も1ヶ月前も変わらず、モダンなフロントエンドの知識はなく、サーバーサイドなど全く分からない「コードが書けないデザイナー」でした。

昨今、デザイナーはコードを書くべきか？というツイートが頻繁に見られますが、僕は以下のように考えていました。

2ヶ月前のツイートでありますが、この気持ちは1つのサービスを自分の手でリリースできた今もあまり変わっていません。

では、なぜ？「Hello Pilsner」を自らの手でリリースしたのかを説明していきたいと思います。

きっかけはエンジニア研修

今年度から新卒として働くことになった僕はエンジニア研修を受けることになりました。先のツイートのようにデザイナーとして尖ったスキルを磨きたいと躍起になっていた僕にとって、エンジニア研修を受けると聞いたときは「1ヶ月もデザインできないのか...」と少し落ち込みました。

とはいえ、1ヶ月の研修で何か学びを得たいと考えた僕は知り合いのRailsを学んだ経験があるデザイナー or 実際にRailsを書いていたデザイナーの話を聞きました。

彼らの話を聞いてデザイナーとしてコードを学ぶメリットを聞くこともできたのですが、それ以上に僕の心を動かしたのは「自分や身の回りの人を喜ばせる為の技術を学ぶことができた」という言葉でした。

確かにデザイナーはデザインという力を使って、いろんなアイデアを形にすることができますが、僕たちのアイデアを実現する手段がないケースがほとんどです。

しかし、コードを学ぶことで僕らのアイデアを具現化することが可能になるのです。

だらだらとエンジニア研修を続けるくらいなら、「自分や身の回りの人を喜ばせる為の技術を学ぶ」ことを目標にしようと思いました。

受け身ではありますが、僕がサービスを作ろうと思ったきっかけは新卒エンジニア研修でした。

Progateと頼れる同期

サービスを作れるようになるぞと意気込んだものの、研修の中でRuby on Railsをやる期間はたったの2日でした。当初はRails Tutorialをやる予定だったのですが、2日でこれをやるのは無理だと判断し元々課金だけしていたProgateを進めることにしました。

わかりやすく解説してくれているので、ほとんど理解しやすかったのですが「そもそもなんでこうなってんの？」という疑問が大量に発生し、その都度同期のエンジニアに質問攻めしました。

彼らの進捗と引き換えにRuby on Rails の基本的な概念をざっくりと理解できるようになりました。

Progateという分かりやすいサービスと@_kemuridama、@fkafkadyの2人がいなければ2日間でサービスを作り上げる知識を吸収することはできなかったと思います。本当に感謝しています。

アイデア構想

研修期間中に作りきることを1つのゴールに置いていたので、Railsの研修が終わり次第早速サービスの構想を練ることにしました。

冒頭でも説明したとおり、僕はピルスナーウルケルがとてつもなく好きで英語でブログを書いてしまうくらい好きです。

I love European Beer 🍺 – Masaki Haruta – Medium

サービスのアイデアを考えたときに、真っ先に浮かんだのもピルスナーウルケルです。

普段はユーザーの声をきちんと聞いて、要件定義して....ということをやるのですが、今回はサービスをリリースしきることを1番のゴールに置いたので自分の欲求の赴くままにサービス構想を練りました。

ピルスナー好きならわかると思いますが「日本のスーパーにピルスナーウルケルがほとんど売ってない」という辛い悩みがあります。とはいえ、ほとんどの店で売っていないわけではなく、ごく稀に売っている店もあります。

僕は「Amazonでピルスナーウルケルを買うのは趣がなくて嫌だと考えているので、直接ピルスナーウルケルが買える店を知りたい」という強い願望があります。

ですので、その願望を叶えるサービスを作ることにしました。

デザインフェーズ

今回の肝は如何にやることを削るかです。なぜなら今回のエンジニア(僕)が実装したことのある機能は「投稿・編集・削除・いいね」だけだからです。少ない機能で自分の欲求を満たすには何が必要かを考えました。

本来機能ベースでユーザーのニーズを満たすサービスを検討すべきではありませんが、技術的な制約の中で如何にユーザーのニーズを満たすプロダクトを作るかを検討するのかがデザイナーの仕事だと自分に言い聞かせ、画面の設計を行なっていきました。

そしてエンジニア(僕)の技術的な制約を超えた「検索機能」の提案をデザイナー(僕)として行いました。

実装フェーズ

本業のデザインもおろそかにしたくなかったので、実装時間は平日1h、休日も5hまでと決めて取り組むことにしました。最初はProgateのチュートリアルと同じような機能の実装をしていたため順調に進んでいきました。

しかし、検索機能の実装から見たこともないエラーにハマってしまいました。「エラーが出たらエラー文をコピペしてググれ」という同期エンジニアの教えを愚直に実行し、ググりつつ進めて行きました。

めげずに実装を続けた結果、ようやく開発環境で必要な機能が動くようになりました。

リリース後

開発環境できちんと動いていたので何の問題もなくリリースできるだろうと思っていましたが、想定外のバグに見舞われかなり焦りを覚えました。

当初は自分の他に使われることを想定していなかったのですが、「このサービスは素晴らしい」「これを見てビールが飲みたくなった」という声を聞くと、きちんとバグは潰していかなければという気持ちが強まりました。

本日のバグ対応の様子

最後は無事エラーが治りました！！！まさかAWSを触ることになるとは思ってませんでしたが、良い経験でした :)

今後

自分のサービスを持つ醍醐味の1つとして、普段の業務ではできない実験がたくさんできることだと考えています。ですので、「Hello Pilsner」に対しても様々な実験をして行きたいと思っています。

まず考えているのはサービスのReact化です。ちょうどAtomic Designを読んでいるので、ここで学んだことをそのまま実践してみたいと思ってます。

Atomic Design ~堅牢で使いやすいUIを効率良く設計する

次にUI改善です。今回は自分本位でサービスを設計しましたが、ユーザー視点なデザインをやっていこうと思います。(見た目も色々いけてないのでそこの改善も合わせてやりたいです)

最後に

当初はデザイナーが何でRailsを？と思っていたものの、自分でサービス作れるようになれるととても楽しいという学びがありました。これからも楽しくサービス開発やっていこうと思います！