Goodpatchは、2021年9月1日に創業10周年を迎えました！
それを記念して、特設Webサイトを当日より公開しています。
BEYOND THE STATUS QUO | Goodpatch 10th Anniversary
Webサイトには、次の10年に向けて私たちが大切にしていきたい考え方がコピーやビジュアルで表現されています。Webサイト公開後、ありがたいことに社外で数々のコメントをいただきました。
今回は、そんなWebサイト開発チームの舞台裏を座談会形式でお届けします。
10周年の節目に爪痕を残したい！それぞれの思いで10周年サイト開発が始動
ー 今回のWebサイトは、皆さんの本業であるデザインパートナー事業とは別の「サブプロジェクト」の中で開発されたものですよね。それぞれ本業がある中で、Webサイト開発をやろうと決めた理由を教えてください。
UXエンジニア 大角：
僕は代表の土屋が社内向けに書いた社長報がきっかけです。4月ごろに投稿された記事で、タイトルは「みんなで作るGoodpatch10周年」。最後に「Goodpatchの創業10周年をみんなでお祝いしたい！何かやりたい人はぜひチャレンジしてみてほしい」と書かれていました。
土屋が社内向けに公開した社長報。手伝いたい社員からのコメントが多数寄せられた
僕は2016年にGoodpatchに入社して、今では古株と呼ばれるようになり、せっかくの10周年は何かやりたいと思ったんです。自分に何ができるだろうと考えた時に、10周年を祝うWebサイトの開発を思いつきました。
UXエンジニア 大角
そこでプロジェクトを一緒に進めてくれる仲間を探すところからスタートして、最初に声をかけたのが同じくエンジニアの上垣でした。
ー 上垣さんは最初に話を聞いた時はどう思いましたか？
エンジニア 上垣：
自分が働く会社の創業10周年に立ち会える機会ってなかなかないですよね。僕は2021年1月に入社して以来、リモート中心で働いていたこともあり、この機会に社内イベントに関わってみたい気持ちもありました。「この10周年の節目に爪痕を残したい！」という感じでした（笑）。
エンジニア 上垣
ー デザインを担当されたナリさんは、参加するかどうか相当悩んだと聞きました。
UIデザイナー ナリ：
そうですね。私もこれまで社内向けのプロジェクトにはあまり関わったことがなく、加えて10周年記念にふさわしいWebサイトのデザインというところでプレッシャーもあって…。「本当に私にできるのかな」としばらく悩んでいました。
UIデザイナー ナリ
UXエンジニア 大角：
今回のWebサイトはGoodpatchのストーリーに残るような価値あるプロジェクトだからこそ、僕らはナリさんに絶対入ってほしいと思っていました。それで多方面から口説いていったんです。
UIデザイナー ナリ：
指名をもらって嬉しい気持ちはありつつ、引き受けるか迷っていた時、10周年のブランディングチームからある動画が届いたんです。「なり、一緒にやろうよ〜！」って私に呼びかけてくる、という内容でした。そこまで言われたら、もう「私がやるしかないじゃん！」と（笑）。
今自分がデザインパートナー事業で担当しているプロジェクトがグロースフェーズだったこともあり、今回のWebサイトではゼロから新しいものを作る経験ができるのも楽しそうだなと思い、参加を決めました。
ー 田邉さんはなぜこのプロジェクトに参加されたのですか？
プロジェクトマネージャー 田邉：
大角さんと企画をしていたプロジェクトマネージャーの同僚から「今こんなことしてるんだよね」と話を聞いたのがきっかけです。
私は初めての転職で2021年2月にGoodpatchに入社しました。その直後にこんな大きなイベントに関われるなら是非やりたい！という気持ちでしたね。
社内プロジェクトはクライアントワークと比べると納期を調整しやすいものですが、私はスケジュールの制約もあってこそ、デザイナーやエンジニアの創造性に拍車をかけると思っています。その上で「これ今のスケジュールで間に合う？」「困ってることある？」と聞いて回る役割の人も必要なんじゃないかなと思ったので、参加しました。
プロジェクトマネージャー 田邉
周年記念Webサイトを社内で作りきった理由
ー サイト開発にあたり、まず最初にしたことを教えてください。
UXエンジニア 大角：
今回10周年の節目にGoodpatchとして掲げた「BEYOND THE STATUS QUO」という言葉に込めた想いを、ブランディングチームに共有してもらうことから始めました。それを僕らが自分なりに解釈して、表現方法や届け方を考えていく過程が大事だと思ったんです。
GoodpatchのBXデザイナーKaiが教えてくれたこのStauts Quoという言葉はラテン語で「現状や当たり前」という意味です。
Goodpatchがこの10年やってきたことは、それまでのデザイン会社の当たり前とされた事を疑い、固定観念やバイアスに囚われずに領域を越えて挑戦してきたからこそ今があります。
「UIデザインに市場はない」
「デザイナーにビジネスは理解できない」
「デザイナーは給料が安い」
「デザイン会社はスケールできない」
「デザイン会社が上場は難しい」こういった誰かが歪めてしまった固定観念に対して、その当たり前の裏側にある本当の価値を問い直し、世の中に発信し、未来を見据え泥臭く挑戦し続けて来ました。Goodpatchという会社はこれをやってきたことで今があります。
このBeyond the Status Quoという言葉には常に現状や当たり前を問い直し、今の延長線上ではない未来を目指していくという想いが込められています。
UXエンジニア 大角：
BEYOND THE STATUS QUOに込められた「現状を問い直す」「望ましい未来をつくる」といった想いは、Goodpatchがずっと実践してきたことであり、長く働いている僕にはすんなり理解できましたし、今後Goodpatchが大きくなっても、現状を問い直し、挑戦し続ける会社でありたいと思いました。「BEYOND THE STATUS QUO」に込めた想いを、社内だけでなく社会全体に届けたいという気持ちが強くなりました。
ー なぜ外部パートナーの力を借りずに、社内だけで作ろうと考えたのですか？
UXエンジニア 大角：
確かに、外部パートナーに頼ればWebサイトのクオリティは上がるかもしれません。でも、10周年を迎えたGoodpatchの覚悟を余すことなく伝えるためには、あえて社員だけでWebサイトを開発することにチャレンジしてみたかったんです。
エンジニア 上垣：
大角がWebサイト全体のディレクションを担当してくれていたので、僕はデザインが固まる前から、Next.js で基礎部分を実装していました。
詳しくはGoodpatch Tech Blogに書いているのでぜひご覧ください。
関連記事：上垣が執筆した Goodpatch 10周年記念サイトを支える技術
開発期間やリソースも限られている中では、デザインが出来上がる前から実装に取り掛かり、企画と実装を同時進行したのは良かったと思います。
技術的な実現可能性とビジュアルを両立させる
ーーWebサイトのビジュアルはどのように決めていったのですか？
UXエンジニア 大角：
Webサイトで「BEYOND THE STATUS QUO」をどのように表現するかはとても悩みました。最終的なアウトプットに辿り着くまでにはたくさんの試行錯誤がありましたね。チームで最も密なコミュニケーションをとった部分でもあります。
UIデザイナー ナリ：
今回は「BEYOND THE STATUS QUO」に込めた想いをストーリーとして伝えるために、Webサイトという手段を選んでいました。そこで、ストーリーを伝えることに適したインタラクションのリサーチから始めました。ビジュアルデザインを固めきる前に、「こんなインタラクションはどうかな？」というのを上垣さんと話し、実装してもらい、技術的な可能性を確かめていきました。様々なパターンを検証しましたが、最終的には現在のスクロールに連動してメッセージが現れるインタラクションを用いて、Webサイト全体でひと繋がりのストーリーを表現しています。
参考にしたのはDogstudioやAirPodsのサイトです。
DogstudioのWebサイト
AirPodsのWebサイト
ー ビジュアルではなく、技術的な実現可能性から考えていたのですね。表現のイメージのすり合わせはどのように進めたのですか？
UXエンジニア 大角：
ナリさんがAfter Effectsを使ってアニメーションを素早く制作して見せてくれました。実際に動くアニメーションがあったことでイメージのすり合わせがしやすく、とても助かりました。
プロジェクトマネージャー 田邉：
ナリさんがあげてくれた参考サイトのように、元々は3Dを検討していたんですよね。でもそのためには3Dモデルを作って、それをプログラムで動かして…と、たくさん時間が必要そうだとわかって。
どうしようとなっていた時に、ナリさんがAfter Effectsで作ったプロトタイプを見せてくれて、「これだ！」と盛り上がりました。最初のプロトタイプがきっかけになって、3Dに固執しない方向性で進めることになったんです。
最初のプロトタイプ
ー 同じものを見て会話する、Goodpatchらしい進め方ですね！ほかにも苦労した点はありますか？
UXエンジニア 大角：
「BEYOND THE STATUS QUO」を表現するモチーフとして、レンズと炎を使いたいとブランディングチームからは聞いていました。炎を表現することには本当に苦労しましたよね。フィードバックをもらうと「炎っぽくない」と。どうすれば炎っぽさを出すことができるのかとても悩みました。
ブランディングチームから提案された3つのモチーフ
UIデザイナー ナリ：
赤い炎やオレンジの炎など、炎には色だけでも様々なバリエーションがあります。今回表現したかったのは、温度が最も高い青い炎でした。が、炎のゆらゆら揺れるアニメーションを取り入れながら、理想の青をグラデーションで表現するのが根気のいる作業でした。最終的にAfter Effectsで20枚ほどのレイヤーを重ねて、納得いく色の炎を表現できました。
炎のプロトタイプ
エンジニア 上垣：
炎のゆらめきのアニメーションとインタラクションの部分は、実装してみると文字が読みづらくなってしまったので、一部省くことになってしまって。ナリさんがギリギリまで粘ってくれていたのを見ていたので、もっと詰めたかったところです。
あと少し詰めたかったところで言うと、スクロールに連動して最初のメッセージが現れるところは、もっと滑らかに見せたかった後悔があります。10周年Webサイトを9月にリリースしてしばらく経ちますが、「また作りたい」という気持ちが芽生えてきています。次こそリベンジしたいですね。
ー 最後に皆さん、このプロジェクトを振り返っていかがでしたか？
エンジニア 上垣：
リリースするまではドキドキしましたが、反応が良かったので嬉しかったです。リリース当日は社員総会があったのですが、僕は内心バグがないかヒヤヒヤしていました（笑）。でも、隠しコマンドにも気づいていただけたり、好意的な声が多くてホッとしましたね。うれしかったです。
UIデザイナー ナリ：
私もTwitterで多くの人が反応してくれたのが、すごく嬉しかったです。Goodpatchの卒業生も見てシェアしてくれていましたね。SNS上に寄せられたたくさんのコメントをみて「頑張って良かった！」という気持ちになりました。それまでの疲れも吹き飛びましたね。
プロジェクトマネージャー 田邉：
個人的な話になりますが、私は子どもを持つ親としての価値観も考えさせられました。「BEYOND THE STATUS QUO」を親としてできてるかな？と、考えるきっかけになりました。このムーブメントに向き合う中で、当たり前を疑うことや、視点を変えて見てみることの大切さに気付くことができましたね。
UXエンジニア 大角：
全体をディレクションしていた身としては、サイトについてのいい反応をもらうことでメンバーに「このプロジェクトに関わって良かった」と思ってもらうことが一番大事だと思っています。メンバーに「関わって良かった」と思ってもらうことが、僕の一番の喜びです。
以上、10周年を記念したWebサイト開発の舞台裏をお届けしました！開発メンバーの想いやこだわりを知った上でWebサイトを見ると、また違った風に見えるかもしれません。
BEYOND THE STATUS QUO | Goodpatch 10th Anniversary
Goodpatchでは、クオリティにこだわりを持つデザイナーとエンジニアを絶賛募集中です。
興味を持ってくださった方、是非お気軽にご連絡ください！
中途採用：
ジュニアUIデザイナー
シニアUIデザイナー
フロントエンドエンジニア
プロジェクトマネジャー
新卒採用：
22新卒採用・UIデザイナー
22新卒採用・エンジニア
23卒新卒採用マイページ登録