「コードは書ける。でも、デザインができない」。そんな理由でポートフォリオに自信が持てず、就職活動で足踏みしてしまう。学んだはずなのに、形にできないもどかしさは、多くの初学者が抱える不安だ。
ロンドンの教室でその声を何度も聞いたマットは、「なら最初から、完成したデザインを渡して実装だけに集中できる場を作ればいい」と考える。小さく作って見せ、反応をもらいながら直し続けた先に、Frontend Mentorが生まれた。
やがて無料の“練習場”は、サブスク型のビジネスへ変わっていく。有料へ移る人は全体の1%未満。それでもサービスは伸び続けた。何が転機になり、どう広がっていったのか。
デザインが苦手でも、フロントエンドで勝負できる
大学を出たあと、人生は教科書どおりに進まない。特に実務経験がないと、「自分は何ができるのか」を見せる材料が少ない。履歴書に書ける資格があっても、それだけで採用されるわけではない。作ったものがないと、相手は判断できない。
マット・スタダートは、その現実を教室で何度も見た。ロンドンのGeneral AssemblyでWeb開発を教えていたとき、受講生たちは技術を学んだのに、就職活動でつまずいていた。理由は単純だった。見せられるポートフォリオが弱い。
そして、受講生たちは決まって同じことを言った。
「コードは書ける。でもデザインができない。だから作品がダサく見える」
マットはそこで気づく。彼らがやりたいのは、デザインを考えることではない。現場みたいに、完成したデザインをもらって、それを正確に画面にすることだ。
ならば最初から、そういう練習場所を作ればいい。
デザインデータ一式を渡して、「このとおりに実装してみろ」という課題を置く。開発者はコードに集中できる。見た目も最初から整っている。就職に使える作品も増える。
この発想が、のちにFrontend Mentorというサービスになる。
パーソナルトレーナーの限界が、転機になった
マットはもともと開発者ではない。2009年にパーソナルトレーナーとして働き始めた。
仕事は順調だった。でも2014年ごろ、壁にぶつかる。予約は埋まっているのに、収入が増えない。時間を切り売りする仕事だから、働ける時間が上限になる。値上げも簡単ではない。
他のトレーナーに客を紹介して手数料をもらう方法も試した。しかし紹介した客が戻ってこないこともあった。ジムを開く案も頭をよぎったが、借金や固定費のリスクが重くのしかかる。
もっと広い形で価値を届けたい。オンラインならできそうだ。そう思ったが、問題がひとつあった。プログラミングができない。
外注すれば作れる。でも高い。失敗したら痛すぎる。
そこでマットは決める。
「自分で作れるようになろう」
General AssemblyのWeb開発コースに入り、3か月の集中講座に飛び込んだ。学び始めると、想像以上にのめり込んだ。初めて「これだ」と感じる手応えがあった。
講座を終えたあと、マットは開発者としてフルタイムで働き始め、2015年からは同じ学校で教える側にも回った。仕事と講師を両立する日々が続く。
教室がそのまま、最初のユーザーになった
2018年、マットは週2回のフロントエンド講座を担当していた。その教室で、あの質問が何度も出る。
「次に何を作れば、就職で戦えるポートフォリオになる？」
よくある答えは「自分のための何かを作ろう」「友達や家族のために作ろう」だ。だが多くの受講生は続けてこう言う。
「自分は開発者で、デザイナーじゃない。作っても見た目が良くならない」
マットは、デザイナーの作品集サイトを見せて参考にさせていた。でもそれは根本的な解決にならない。受講生が欲しいのは、参考ではなく、最初から使えるデザイン一式だった。
そこでマットは、小さなサイトを作る。フロントエンド課題がひとつだけ置いてあるシンプルな場所。デザイン素材をダウンロードできて、あとは自分で実装するだけ。
まずは受講生に試してもらった。
反応はすぐ返ってきた。
「これ、もっと課題がほしい」
チュートリアルをなぞるだけの学習は、どうしても受け身になりやすい。でも課題形式は違う。完成までの道筋を自分で考え、手を動かす。だから伸びる。
マットは確信する。これは役に立つ。
「広めたくなる仕組み」を先に作った
マットは課題を増やしながら、自然に広がる道も作った。
完成した作品をSNSで共有しやすくする。そして共有してくれた人には、マット自身がコードレビューをする。すると「見てもらえるなら投稿しよう」となる。投稿が増えれば、サービスの名前も広がる。
さらに、発信力のある講師や動画制作者とも協力する流れが生まれた。たとえばフロントエンド講師として知られるケビン・パウエルは、Frontend Mentorの課題を使った解説動画を作った。
発信者にとっては、デザインを用意しなくていいから動画が作りやすい。視聴者にとっては、プロの考え方で課題を解く過程が学べる。両方に得がある。
使う人は学生だけではなかった。現役の開発者も、足りない部分を見つけたときに課題へ戻って補える。マットはこの学び方を「必要なときに必要な分だけ学ぶ」ものとして捉えた。
開始から8か月ほどで、同じ学校で教えていたマイク・ヘイデンが「手伝いたい」と言ってきた。2人はうまく噛み合い、マイクはCTOとして正式に加わる。
無料の遊び場が、ビジネスに変わった
しばらくの間、マットとマイクは本業を続けながらFrontend Mentorを育てた。利用者は増えていくが、サイトは無料のままだった。
転機は2020年。収益化の形が見えた。
サブスク型の有料プランを追加する。無料でも基本の課題は使える。ただ、有料だとより細かいデザインデータや、質の高い課題にアクセスできる。
有料課題は、ポートフォリオとして見せやすい本格的な作品になりやすい。採用担当に見せるなら、完成度の高いほうが強い。
登録者が増え、売上も伸びた。ただし、有料に移る人は全体の1%未満だった。それでも珍しい話ではない。無料で広く使ってもらい、その一部が課金するモデルはよくある。
マットたちが悩んだ課題は大きく2つだった。
- 登録した人を、最初の課題着手まで連れていくこと
- そこから有料へ移ってもらうこと
まず1つ目。登録直後の案内を作り直した。ウェルカムメールで「まずはこれが簡単」とおすすめ課題を示し、取りかかりやすい導線を用意する。小さな課題なら短時間で完成まで行ける。そこで「現場に近い制作は、力がつく」という実感を早めに掴める。
2つ目の有料化は、継続して価値を感じられる仕組みを増やす方針にした。学習ルートを整えたり、コミュニティからフィードバックを得やすくしたりする。使い続ける理由を増やす、という考えだ。
ポイントが、就職とつながる未来
Frontend Mentorが伸びた理由のひとつに、ポイント制度がある。課題の難しさに応じてポイントが入る。さらに他の利用者を助けたり、フィードバックしたりしてもポイントが増える。
ランキングもある。週間、月間、年間で上位が見える。コミュニティのチャットでは相談が飛び交い、作品への意見ももらえる。自分の問題が解けるだけでなく、他人の解き方も学べる。
多くの利用者が求めているのは、就職に通用するポートフォリオだ。マットはそこを理解している。だから将来的には、ポイントを採用側にも役立つ形にしたいと考えている。
採用担当が条件で検索し、その条件に強い人が上に出てくる。ポイントが高い人ほど制作物も多く、採用側は実物を見て判断しやすい。
この採用向け機能はまだ準備段階だが、企業を呼び込む動きも検討している。
小さく作って、早く見せて、直し続ける
マットが繰り返し強調するのは、「できるだけ小さく作り、早く人に見せ、改善を繰り返す」ことだ。
最初のFrontend Mentorは、見た目が良いサイトではなかった。マットは色の区別が苦手で、デザインが得意でもなかった。
それでも作った。受講生に見せた。反応を受けて直した。課題を増やした。広がる仕組みを足した。仲間も加わった。無料から有料へと形を変えた。
そうやって少しずつ積み上げた結果、学びと仕事のあいだにある溝を埋めるサービスができあがった。デザインが苦手な開発者でも、胸を張って作品を見せられる場所が。
そしてその出発点は、教室で聞いた一言だった。
「自分は開発者であって、デザイナーじゃない」