Webデザイナーが約半年でRubyエンジニアになった話

# はじめに

初めまして！わっちゃと申します。

弊社代表の「わっちゃさん、アドイベントカレンダーに参加してみたらどうですか？」という一言から今回記事を書かせていただくことになりました。

お題をDockerにしようかと思っていたのですが、
一番最初の投稿は「WebデザイナーからRubyエンジニアに転身」した話をしたいと思います。

最近Twitterなどを見ていると「未経験者からエンジニアを目指す」方々が多いと感じています。
未経験者からエンジニアの事例はあるのですが、今回はあえて「Web業界で働いているけど、エンジニアになりたい」人へ向けて記事を書くことにしました。

# デザイナー・マークアップエンジニアとしての経歴

私は元々、大学卒業後に法律司法職の仕事をしていました。
2015年の12月からWebデザイナー・マークアップエンジニアとして転身いたしました。

## なぜクリエイター職に転身したのか

なぜデザイナー・Web制作のクリエイター職に転職したくなったか簡単に説明します。
高校・大学と硬式野球をやっており、ずっと野球に熱中していました。
（高校時代最後の夏は某ハ●カチ王子と投げ合いの末力尽きました…ボソッ）

大学も野球の設備・環境・新興勢力として力を伸ばしている大学にセレクションを受けて入学。
「学歴どうこうではなく、今の俺はこれを全力でやりたいんだ！」という気持ちで、
やりたいことに力を注ぐ全力少年スタイルで過ごしておりました。（今も変わらずですが。苦笑）

学部は副産物として選べる法学部をたまたま選びましたが、結果的に法律の勉強も面白くハマり大学卒業後はそのまま法律職に。
大手行政書士事務所・司法書士事務所で外回りをしながら働いていましたが、ある時に法律業界が窮屈に感じてきました。

基本的には過去の判例・慣習に倣うことを良しとする業界（または偶々その会社がそうだった）のか、
大学の学歴で優遇・差別されたり、多くは語りませんがその他色々とあり…

「過去は過去で大事だけど、もっと未来に向かって道を切り開いて行けるようになりたい」と強く思うように。
そこで法律の勉強を一旦ストップし、マーケティングの勉強を開始。
これが性に合っていたのか物凄く面白くて楽しくて、「１つの文化を作りたい！」と、マーケティング業界の方に心が動いていました。

すぐにマーケティングの師匠的な方が見つかり、その師匠がおっしゃっていた言葉。
「マーケターとしての流儀もも勿論、水と油と思われがちなクリエイターの流儀を知ることでマーケターとしてももっと輝けるし、
マーケターの意識のあるクリエイターは様々なかけ算をでき、様々な業界の境界線を跨ぎ飛び越えられる」

この言葉に感銘を受け、「デザインや様々なプロダクトが出来るクリエイターってどんな職業？」と興味を持ったところから、
Web業界に興味を持ち始めました。実際業界に入ってみると、楽しくてあっという間に時間が過ぎてしまいました。

## デザイナー・コーダーとして

1社目は内装会社の正社員Webデザイナー（マークアップエンジニア）として従事し、尊敬できる姉御な先輩と出会い何とかWeb業界の仕事に慣れました。が、会社及び役員への不信感が強く残り先輩方と揃って退職。

2社目の転職先は開発会社へ。
ここでは主にWordpressを使用したWeb制作とWebサイトのデザインを担当。
PHPを使うとは言っても、元々会社にあったテーマなどを使用するため、一から構築するという経験はあまりできませんでした。

入社から半年過ぎたくらいから、あるコンペに応募した作品が高評価を受け本格的にデザイン部門へ。
ここからはデザイン担当として殆どコードはほぼ書かずに、お客様の元へ出向きどのようなコアを大切にし何を体現したいかヒアリングした上で、ひたすらAdobe IllustratorとPhotoshopをゴリゴリに触る日々が続きました。
（時には動画編集も。）

今思うと、ゴリゴリにデザインを担当できたのは良かったと思います。

ただこのままずっと同じことの繰り返しの日々にキャリアに不安を感じていました。
というのはデザインとフロントエンドは勿論、サーバーサイドもできてマルチに活躍したいという青写真が自分の中にあったからです。

そんな時、あるきっかけでフリーランスエージェントの方と面談することになりました。
元々フリーランスの興味があったためワクワクして面談に臨みました。

# エージェントとの面談を通し、自分の市場価値を知る

ある程度情報を集めていたので事前知識はあったのですが、改めてデザイナーとエンジニアの単価の差を知り愕然とした自分がいました。

というのは
「デザインの部分を評価されているから、デザイナー面の能力を主力としてもっと伸ばしていきたい」
と思っていた部分があった為です。

しかし面談をきっかけに成長戦略を考え直し、
「デザインもできるエンジニアになると市場価値が上がる」
と思うようになりました。

よくよく考えてみると、言語もHTMLとCSSとJSを主に触り、たまにPHPを触る程度。
スキルとしてはこのまま先に進んでも、いずれ頭打ちがやってくる。
それだったらデザインは一旦置いておき、がっつりプログラマーとして転身してみよう。

そう思い、ようやく本格的に「エンジニアになるにはどうすればいいか？」考えるようになりました。
2018年2月初旬のことでした。

エンジニアになる道を探ってみると、様々な情報がある中で「ポテパンキャンプ」の情報が入ってきました。

Qiitaを閲覧されていらっしゃる方はご存知かもしれません。
詳細は[こちら](https://camp.potepan.com/)を参照していただきたいのですが、30歳を越した私にとってもチャンスがあると感じ、ポテパンキャンプを通してRubyエンジニアになろうと決心しました。（奇しくも決心した日は2月24日、Rubyが誕生した日でした。）

ポテパンキャンプに入るにあたって

* 3ヶ月で10万円（税別・キャリアコース）
* PCはMac（Unix）を指定（Windowsはサポート対象外）

という絶対的条件があったため、資金を貯める必要が出てきました。
後述しますが正社員のまま働いていても資金が到底溜まりそうにないため、4月からはマークアップエンジニアのフリーランスとして活動を開始しました。
（この時にはフリーランスとして案件が決まる基準である業界経験2年は過ぎていました。）

# サーバーサイドエンジニアになるまでの期間

ポテパンキャンプを受講すると決めたのちに、以下のように準備を進めました。

①フリーランスで活動するために様々なエージェント（ポテパン含む）と面談
②フリーランスとして事業に参画・資金貯め
③Rubyの勉強を開始（ドットインストール・Railsチュートリアル）
④ポテパンキャンプに参加の意図で面談・Railsの勉強を開始（YassLabの動画講義）
⑤ポテパンキャンプ受講開始
⑥転職活動開始・決定

ざっとですが、こんな感じでRubyエンジニアになるために進みました。
順を追って振り返ってみます。

## ①フリーランスで活動するために様々なエージェントと面談

2月頃から様々なフリーランスエージェント会社に登録し、10社前後面談を行ってきました。
目的としては「Rubyエンジニアになるためのステップを踏む」でしたので、現在のスキルで単価40万前後あればOKと設定していました。

正社員の時には額面25万手取り20万前後だったため、税金で10万円前後出て行くというざっとした計算でも、40万円前後の単価は当初の予定よりは短期間で目標達成を成し遂げるに充分な単価でした。

また、後にポテパンにてポテパンキャンプを受講することは自分の中でイメージとして固まっていた為、ポテパンフリーランスに登録し面談させていただきました。

その時は「後に是非ポテパンキャンプを受講したいと思っているのですが、そのための助走資金が必要なります。それまでの間はフリーランスとしてマークアップエンジニアのお仕事を紹介していただけたら幸いです。」という旨を伝え、マークアップエンジニアの仕事を複数ご紹介していただきました。

色々な条件のもと、ポテパン経由ではありませんでしたが4月からWeb制作会社のフリーランスマークアップエンジニアとして活動することが決まりました。
この時の月単価は43万円となり、資金が溜まりそうでした。

## ②フリーランスとして事業に参画・資金貯め

晴れてフリーランスデビューを果たし早速Rubyを勉強！と思ったのですが…Web制作会社の仕事はとても大きな仕事が振られました。
お客様が某大手ゼネコンでや某飲料系大手会社・某大手航空会社・某M神宮本殿のサイトであったり、納期の関係で終電で帰宅できない日が続き、勉強する余裕がありませんでした。

ただRubyの勉強はできませんでしたが、Web制作の経験はとても大きな財産となりました。また超過労働分も出していただいたので、忙しかった時期は月単価43万円を大幅に超える収入となり、資金作りに拍車をかけました。

この時綿密に予想収支の計算をし、MacBookProを購入できることに！
そのため、4月には某大手家電メーカーに出向き、15インチのMacBookrPro（25万円前後）で24回払いのローン購入。

13インチのMacBook Proの方が安く持ち運びやすくコスパもいいのですが、デザイン案件も今後復活可能性があると見込みを立てて15インチを購入することにしました。プログラミングをやるだけならば13インチでも困らない為、その辺はご自身の用途で選ぶといいと思います。

## ③Rubyの勉強を開始

4月からフリーランスとなりいきなり多忙だったのですが、5月半ばで一段落したため、そのタイミングでRailsの勉強を開始しました。

### まずはドットンストール

いきなりRailsチュートリアルをやると情報が莫大に入ってきて消化不良を起こすと判断。そこで

* ドットインストールの[Ruby on Rails 5入門 (全28回)](https://dotinstall.com/lessons/basic_rails_v3)を10周ひたすら繰り返す
* MVCモデルの概念に慣れてきたら、その時に[Railsチュートリアル](https://railstutorial.jp/)に入る。

上記のような勉強を開始しました。
ここでは割愛しますが、MVCモデルのフレームワークは初めてだったので慣れるのに時間がかかりました。しかし、5周ほど簡単なWebアプリを作ると大よそ学習しなければならない点がわかってきました。
あとはひたすら反復し、Railsチュートリアルに入るための準備を完了させました。

※2020年追記
今思うとこの段階は飛ばしても良かったような、そうではないような…

### Railsチュートリアル開始

MVCモデルなどを理解し、[Railsチュートリアル](https://railstutorial.jp/)を開始。
それでも初心者には非常にレベルが高く、1回目の途中で「ん…？これは相当厳しいぞ…。」
とゴールまでの道のりが非常に遠く感じられました。

そのためYassLab株式会社が提供している「[解説動画](https://railstutorial.jp/#screencast)」を即刻購入し、ビデオ学習に切り替えました。ビデオ学習の内容だけでも36時間はあります。

当然働いていたため1周36時間の講義に時間を割くのが厳しいです。
そこで電車の中ではタブレットで学習できるようにDLし、さらにはDLした動画から音声のみを抜き出しスマホで繰返し耳で聴きながら学習する環境を作りました。

幸いにも仕事中のイヤホンがOKだったため、仕事しながらRailsチュートリアルの音声をひたすら聞いていました。動画では視覚情報が入ってくるため流してしまうところもあったのですが、音声のみだと感性が研ぎ澄まされると同時に想像力をフルに働かせることになるため、ビビットに情報が入ってくるようになりました。今思うと音声のみの勉強がとても役に立ったと思います。

## ④ポテパンキャンプに参加の意図で面談

ポテパンキャンプでやって行く目処もある程度立ったため、ポテパンキャンプに入るための面談を設定していただきました。

時々「ポテパンに落ちた」という情報を目にすることもあるのですが、私は以下のように心がけていました。

* 技術は後からついてくる。現段階での技術力・勉強の進捗が具合云々は最低限をこなした上で、「この人と働きたい！是非紹介させて欲しい！」と思われるような人物であること。そのように成長すること。

* 自分がRubyエンジニアになることだけを考えずに、サービス運営側にとってどのような人に来て欲しいのか？どうすればお互いのメリット・価値を共有できるのか？
　→「俺は客だ!!」というクレーマー気質のマインドは自分自身が一番損します。サービス提供側も「最高な顧客」はとても大切に扱いますし、どの業界でも共通して優先的に最高なサービス・情報を誰よりも先に共有・提供します。

* 「コミュニケーション能力」とは会話できることだけの意味ではない。相手の言わんとしていることの意味を汲み取り、それをしっかりと適切な形にした上で、さらに提案できること（デザイン思考）。
 →「営業経験があるからコミュニケーション能力が高い」と思われる節があるのですが、求められているコミュニケーション能力が同じとは限りません。

極論ですが「自分がやりたいこと・成し遂げたいこと」は相手にとってはどうでも良く、「相手にとってメリットを感じること」に集中して会話をするイメージです。ここでは詳細は書きませんが、面談でも勿論あらゆる面で上記のように考えた上で行動しました。

結果的にメールでの合否ではなく、その場でポテパンキャンプ参加の合格をいただき、7月から晴れてポテパンキャンプに参加することになりました。

## ⑤ポテパンキャンプ受講開始
この章はポテパンキャンプのカリキュラムのネタバレになってしまうため、詳細は書きません。

しかし、受講生誰もが言うことなのですが「一番初めの課題がRailsチュートリアルよりも激ムズ」と感じるかもしれません。ただしRailsチュートリアルの一山を超えていると作業ベースでは対処できることは多い為、「何を設定したいのか？」と課題の意味を汲み取り、ゴールを適切にイメージすることが大事だと思います。

ある程度実装を終えた後にプルリクを立てて、現場経験豊富なレビュアーに様々なレビューをしていただきましたが、殊勲の価値を感じる様々なアドバイスをいただくことができました。

こればっかりは独学では絶対に体験できません。
時には厳しいと思うこともありましたが、日々目からウロコが落ちる状況でした。
アドバイスをいただいたことはメモし上達することに専念いたしました。

レビューはRubyのことは勿論、gemの設定からインデント、Githubのコミットの粒度の大きさ、他様々多岐に渡ります。心の底から受講してよかったと思います。

これで3ヶ月10万円は破格の値段ですし、例え3ヶ月で終わらずに1ヶ月延長として5万円を支払うとしても、それでも安い上に価値が高いと思います。

## ⑥転職活動開始・決定

こちらはサポート終了期間の2週間前に動き始め、無事に2社内定をいただくことができました。
現在はベンチャーでありながらも勢いがあり、RubyだけではなくPHPも書く機会も多いスタートアップ企業で働いています。

開発ではフロントエンドもScssやJSをがっつり書く機会もあり、Webデザイナーの経験がとても活きています。

# おわりに

現在はWeb開発のキャリアを積んでいますが、
「売れるデザインとは何か？」と言うような、マーケティング・デザイナーとしての知見もどんどん増やし磨きに拍車をかけて行きたいと思っています。

「Webデザイナー・クリエイターとして現在はキャリアを積んでいるけど本格的なWeb開発方面の仕事をやりたい。」
「給与・単価を今より数段階上げたい。」
「活躍の場を広げたい」

と言う方、断じて甘くはなく苦しいことは多々ありますが、Web開発者として活動しやすい土壌自体は増えています。（決して簡単とは言えませんが…）
一度キャリアを見つめ直してみるのも良いかもしれません。

そんな方々に一つの参考材料としていただけましたら幸いです。