根掘り葉掘り、先輩に聞いてみた 第1回 どうすれば、自分の強みが見つかりますか
CSSの造詣の深さにはピクセルグリッド内で定評がある坂巻（げこたん）。そんな先輩にキャリアのことや、仕事のやり方について、わりと気ままに、根掘り葉掘り尋ねます。ぜひ、仕事のヒントに。
- カテゴリー
- インタビュー >
- キャリアパスインタビュー
発行
はじめに
普段、仕事をしている時はなかなか聞きにくい、仕事に関する悩みや疑問を、先輩社員に聞いてみます。今回は、HTML/CSSの知識が深い坂巻と、入社4年目の中野の対談です。
編集部より
今回の記事では、坂巻のことを社内での呼称のまま、「げこたん」としています。今回の記事の内容上、そのままのほうが、実際に話している雰囲気を感じていただけるかと思います。
どうやって自分の「得意」にたどり着くのか
最初はどうだったんですか？
中野：やっぱり最初に思うのは……あ、最初って言っても、もうこれが核心みたいなところがあるんですけど。僕はやっぱり、なんで、げこたんさん（坂巻）がCSSに強くなったのだっていう話をまず聞きたいと思っていて。
げこたんさんも最初は「全部やる人間」だったんじゃないかと思うんですよ。
坂巻：仕事としての最初の頃は、いわゆるウェブデザイナーで、デザインもHTMLもCSSも全部やってたね。それよりも前の、ウェブサイトをつくり始めた最初の頃というかんじだと、自分で情報発信するためのウェブサイトを持っていたけど、最初の頃はHTMLやらCSSのことはよくわかってなくてコピペが多かった。
中野：あー、最初はコピペとかで。
坂巻：CSSに関する本も読んでたけど、よくわかってなかったな。たとえばリンクの色を変えるみたいなのもよくわかってなかったですね。他の人のウェブサイトのソースを見て、a要素にa:link { color: red; }って書いてあっても、それが何かはわかってない。とりあえず、そのおまじないみたいなのをコピーして使ったりしてたなぁ。
そのあと、ウェブデザイナーとしてアルバイトを始めて、業務でやっていく中で調べたりして覚えたというかんじかな。
中野：その時に大学も辞めたんですよね。僕は大学を卒業するまで、親に敷かれたレールの上を、わりと反対せずに歩いていた人間なんですけど。
大学は商学部だったので、ウェブとは全然関係ない。関係ないところへ踏み出すのにすごい勇気というか、レールから外れるぞ、って気持ちがあったんです。
辞める時に「将来俺はこれでやっていけるんだ」みたいな気持ちはあったんですか？
坂巻：んー。特になかったような、あまり考えてなかったような気がする。ウェブサイトをつくるのには興味があったけど。
CSSが好きになったのはいつから？
中野：僕もそうなんですけど、最初はウェブサイトをつくるのに興味があって。その中で、HTML、CSS、JavaScriptが大きく分けてありますけど、僕は満遍なく興味があるんですよね、いまだに。げこたんさんはその頃から、CSSが一番好きだなって気持ちはあったんですか？
坂巻：どれもおもしろいとは思ってました。当時はサイトをつくるのには基本的に全部1人でやらなきゃいけなかったから。どれが特別好き！というのはなかったかな。
中野：今でもそうですか？
坂巻：今はデザインはやらないから、昔ほどの興味はなさそう。おばらさん（ピクセルグリッドのUIデザイナーの小原）のデザインに関する話は聞いてて楽しいけど。
中野：JavaScriptは今も興味はあるけれど、HTMLやCSSに比べるとちょっと下というか？
坂巻：なんだろう。ある程度書けて、読めはするけれど、それ以上はいいかな〜。できる人に任せよう、のっち（中野のこと）とか。
中野：（笑）なるほど。げこたんさんの社内のイメージとしては、「CSSのことは、げこたんさんに聞こう」というかんじじゃないですか。僕が将来のことを考えたときに、やっぱりそういう人間になっていかなければならない、というのはすごい思っているんですよ。
坂巻：「のっちといえば……」みたいなことね。
中野：そう。会社としては実装できる人なんて、多分、いっぱいいるわけで、ピクセルグリッドの会社の性質を考えると、やっぱりそういう何かしらのプロフェッショナルになることが大事だなって思っているんです。でも、今の自分はそうじゃない。
坂巻：なるほど。
中野：じゃあ、何に強くなるべきかって考えたときに、考え方としては2パターンあると思っているんです。一つは、会社としてこれが必要そうだから、これを勉強しようっていう受動的なモチベーションと、もう一つは、僕はこれが興味があるからやっていくんだっていう能動的なモチベーション。
僕はいまだに、満遍なく「モノをつくる」「サイトをつくる」っていうことに興味はあるんです。でも、特定の技術の細かいところをずっと追っていけるのかっていうのが……。
たとえば、JavaScriptでりぃさん（ピクセルグリッドのエンジニアの杉浦）に並べるほどの仕様を追うモチベーションがあるかと言われれば、そんなことないんじゃないかなって思いますし、げこたんさんにCSSで並べるほどに仕様に興味があるのかと言われれば、そうじゃないと思うところもあって。ちょっと嫌な話なんですけれど（笑）。
それで、げこたんさんがCSSに強くなっていくときの動機は、どちらなんですかね？ 受動的？ それとも能動的なものですか？
坂巻：うーん、前職でアルバイトから正社員になったときも、会社として、技術を学んでくださいっていうのは特になかった。会社のウェブサイトをあなたがなんとかしてつくりなさいよ、って話なんで。会社に望まれているものをつくらなくちゃいけないから、必要に応じて学んでいったという意味では、受動的なスタートだったかな。
中野：うんうん。
能動から得るもの、受動から得るもの
坂巻：でも、やっていくうちにおもしろいなって思ったタイミングはある。CSSっておもしろいな、って。CSS PANICをつくっていたあたりが、きっかけなのかな。
CSS PANIC
坂巻が、JavaScriptを一切使わず、HTMLとCSSのみで実装したゲーム。2012年に公開し、海外サイトで紹介されるなど話題となった。
中野：CSS PANICは、当時で言うとJavaScriptを使ってそうな実装を、全部CSSだけでできるよというのが光ってたわけじゃないですか。
坂巻：当時はJavaScriptは今ほど書けなかったんですよ。だからJavaScript使わずにできないかな？ って（笑）。
中野：ああ、そうか。そうなんですか。なるほど、「JavaScriptができない」ことが、むしろCSSに強くなるきっかけだったのか。
坂巻：CSS PANICの仕組みというか元ネタは他の人がつくっていたんだけど、よりゲーム性を持たせたりいろいろできるよねって。
中野：多分仕事としての案件でも、けっこう、がっつりたくさん実装されてたと思うんですけど。それと、独自に調べてつくったCSS PANICを比べると、CSS PANICをつくるほうが成長に繋がったなと感じます？
坂巻：CSS PANICを含め当時はいろいろとつくっていたから、それらのおかげでCSSの理解を深めていったみたいなところはある。CSSのプロパティは覚えればいいだけだし。CSSの3D Transformsの行列計算はわからなくても、実際に数値をいじってみると、「ここを変えると、こう変わるんだな」というのはわかるし。やっぱり興味を持って趣味でやってたときのほうが伸びたと思うね。
中野：そうか、だから「能動」のほうなんですね。自分が興味がある分野をずっとディグっていたら、それが武器になったということですね。
坂巻：そうね。仕事で物量をこなす……つまり、受動のほうは、いろいろな実装のダメパターンを理解できたということはありそう。たとえば、一見よさそうでも、テキスト量が増えたときに、崩れてしまうよねというようなケース。
中野：あー、なるほど。
坂巻：あと量産する方法を自分で考えたり。前職ではオンラインゲームの公式サイトをつくることが多かったんだけど。効率化のために、PSDファイルでデザインのテンプレートをつくっておいて、ボタン画像や、装飾枠の部分を書き換えたりして、書き出せば別の見栄えのサイトがつくれます、みたいなのやったね。
中野：なるほど。そうか。案件をいっぱいこなす中で、そういうフレームワーク的な実装ができるようになったってことですね。
坂巻：でもさ、今でも当時仕事でつくったサイトが動いているんだけど、サイトのCSSのクラス名とか見ていると恥ずかしい。
中野：今でも運用されているっていうのがすごいですね。先駆けですね。
坂巻：先駆けっていうより、当時、みんな同じようなことやってたんです。各々が考えて、似たようなことを。
中野：これって、多分納期とかもけっこう厳しかったかんじですよね？
坂巻：いろいろつくらなくちゃいけないから、けっこう要求は厳しかった気がするね。今思えば。
もしかして、「ぬるま湯」？
地獄から這い上がってきた人間には敵わないのか
中野：僕が今思うのは、新卒でピクセルグリッドに入ることができてしまって、もうやるしかないと追い込まれるような状況というのを、ここ3、4年経験してない。だから、ぬる湯に浸かりすぎちゃうんじゃないっていう気持ちが少しあったりします。
坂巻：あのね、しなくていい苦労はしなくていいのよ、しなくて（笑）。
中野：いや、でも、やっぱりげこたんさんの話を聞いていると、やっぱりその苦労の中から、かけがえのない経験を得ていて、それが未来に活きているかんじがある。これって、どう思いますか？ って話じゃないんですけど（笑）。
坂巻：わからなくはない。怒られて嫌な思いをした経験から、人に怒らないようにしようって思うようになったりとか……。
中野：揉まれていないのはいいのだろうかという不安は、常にあるなって思うんです。
坂巻：わりと揉まれていると思うよ、ピクセルグリッド。
中野：確かに、げこたんさんや、うのさんにレビューしてもらうと、それだけ高いレベルのことを教えていただけるので、そういうところで向上しているとはすごく思うんです。ただ、地獄から這い上がってきた人間に敵うとは思えないというか（笑）。
坂巻：（笑）地獄から這い上がってきた人間に教えてもらえればいいだけで、地獄にわざわざ行く必要はないの。苦労（？）してきたから、いろいろ教えてあげられることはあると思うよ。
中野：なるほど〜。
坂巻：2社目に転職したときも、それなりに地獄を見たとは思うんだけど、技術的に伸びたのかっていわれると、けっこう微妙。自分よりできる人がいるっていうのも知ったし、「ああ、凄い人たちがいっぱいいる……」って思ったこともあるから、それはそれでよかったとは思う。その中でも、CSSでは、やっぱり頼ってもらえたりはした。
でもこれ、難しいよね。HTMLとかCSSって、知識比べみたいなところがあると思っていて、たまたま私は他の人が知らなかったことを知っていただけだから。
副業もアリ、そしてやりたいことの本質を見極める
中野：それで思うのは、社内でだれかが、「これってどうだっけ？」って突発的に技術的な質問を投げることってけっこうあるじゃないですか。そのときに、げこたんさんは即答できますよね。こういうのが可能なのって、回答の一部の知識の裏に、膨大な知識量があるからだろうなと想像すると、怖いっていうか「ひぇぇっ」てなるんですよ。
坂巻：最近、ツイートを見てて、ああこれだなって思ったのがあって。その人は「好きで、やれそうだなと思ったことを、やれる範囲でやってきただけで、偉くも凄くもないし、えっそんなことも知らないの？ ってことだらけ」って言っていた。すごく共感した。
即答できるのも、そういう経験をしただけであって。その経験は自分のものだけにしないで、伝授していくから。それが経験者の役割というか。レビューをしたり、何かしらの方法で伝授していくんで。頼む、あとは頼む（笑）。
中野：いや、ほんとうにありがとうございます。勉強になります。ただ、このまま淡々と仕事をしていくと、いつかそんなふうになれるって思えないんだよな……。
坂巻：いろんな経験をしたいとか、いろんな現場を経験したというのだったら、副業で別のことをやってみるというのはあると思うけど。ピクセルグリッドでは学べないことを他の会社で学ぶみたいなのもあるかな。のっちがピクセルグリッドからいなくなっちゃったら嫌だから、ほどほどに（笑）。
中野：ありがとうございます。絶対、辞めたくはないんですけど（笑）。そうですね。現状の結論としては、興味があることをやるしかないのだと思ってます。僕の場合、なにかをつくるのが好きなんで、自分でサービスをつくってみたりとか、そういうのを続けていくしかないんだろうなって気持ちではあります。
情報の追いかけ方
坂巻：ま、それから本は読んだほうがいいよね。
中野：本を読むと経験値の回収は早いよなって思います。
坂巻：人が学んだものから学べるから。エッセンスをね。……なんだかメンターみたいなかんじになっている（笑）？
包括的にやりたいって気持ちもあったりするだろうけど、つくることに興味があるといっても、たとえば、ゲームをつくることもいろいろ役割あるよね。絵をつくるところ、プログラミングをするところ、ディレクションをするところだってある。
自分の興味は、どこらへんにあるんだろうと本質的なところを考えてみると、また見えてくるものがあるかもしれないね。
僕は、CSSでいろいろできるの単純に楽しいし、興味があるからやっているけれど、最近は詳しく知らないプロパティや機能もちょいちょいあります。そういうのを見かけたら都度調べたり試したりしてる。あと社内のesaに書いたりしてる。
esa
esaはピクセルグリッドが社内で利用している、情報共有ツールです。
中野：ところで、げこたんさんは最新の仕様とかどうしているんですか？ 一次ソースはやっぱりTwitterですか？
坂巻：HTMLとかCSSの仕様書については、Twitterで誰かがツイートしているのを見かけたら、見てみることが多いかな。仕様に興味がある人が知り合いにいたりするから。あとはふとした時に見に行ったり……。
中野：そっかあ。秘伝のフォロワーリストをもっと調節しないといけないな。
坂巻：仕様書を常に見にいっていますか？ と言われれば、見にいってないです。受け身がちになっているのは、よくないなって思っているところではある。
うまく自分の時間を取れてないなって思う。あと今は優先するものを、ゼルダにしてしまっているね（笑）。
ゼルダ
この記事の収録は「ゼルダの伝説 ティアーズ オブ ザ キングダム」が発売（2023年5月）された直後に行われたため、坂巻はゼルダに夢中だったようです。
中野：なるほど〜、あとは子育てとかですか？
坂巻：時間が取れないのをライフスタイルの変化のせいにするのはよくないとは思っている。子どもがいても、ゲームをしても、興味を失わない人はいるので。
とはいえ、やりやすさは違うと思う。他人を気にしないで時間をうまく使えるの、独身時代の強みというか。どうしても知識はアップデートしないと、古くなっていっちゃうので。
中野：そうですね。確かに。
プロジェクトを円滑に進める情報整理の仕方
中野：そういえば、以前、関わっていた案件で、ちょっと仕事の進め方が見えなくなって、タスクの整理が煩雑になっていたときがあったんです。そのとき、げこたんさんがアサインされて入ってきて、ここはこうしますっていうのを決めてくれて、さらに、このドキュメントみたらわかるみたいな状態に整理してくれて、すごい仕事の進行が円滑になった記憶があるんですよね。
坂巻：あー、僕はほかの人よりesaにいろいろ書くほうです。それがたぶん、好きで得意なことなのかもしれない。
中野：あ、そうなんですか。そういう整理したり、メモ書きしたりする能力って後天的なものなんですか？
坂巻：うん、たぶん。これまでの仕事でもいろいろタスクがあったから、それを整理するのに本を読んだりしました。技術書ではなくて、ビジネス書的なものですね。
そのときに、自分なりにタスクを整理する必要があるなとなったので、たとえば、ノートを四分割して、重要度と緊急度を軸にしてタスクを箇条書きにするんです。
そういうのを読んだり、やったりしているうちに培われたのかな。
参考図書
坂巻が参考にした本は、『すべての仕事を紙1枚にまとめてしまう整理術』です。
自分の中で優先順位が決められるようになって、何らかの方法で表現できるようになっていくから、いろいろやってみるのはいいかもしれない。無駄にはならないよ。
中野：なるほど。
坂巻：前職の部署ではカンバン方式でタスク管理やってたよ。ちゃんと機能してたと思う。ホワイトボードに紙をベタベタ貼って……。
中野：今あるツールの一番原始的なやつって感じですね（笑）。
坂巻：前職では業務依頼書っていう、他の部署へ業務を依頼する紙があったんだけど。それをちょっとつくり変えてもらって、紙の下のところに課題のタイトルとか納期を小さく書いたチケットをつくってもらった。それを切り離してホワイトボードに貼っていく。
そうすると、他部署の人が様子を見にきたときに、ホワイトボードを見れば、進捗とか、誰がどれくらい忙しいかがすぐわかる。もちろん自分たちも全体の状況わかる。部署で朝会もしてたな。他にやってる部署はなかった。
非効率なものが嫌だったっていうのがあるかもしれない。業務で必要だったけれど、別に言われてやったことではないので。
中野：あ、それは優秀な社員のやつだな。いや、なんか僕、現状に満足している感がありますね。ピクセルグリッドでも、そういう状況があるんだろうな、って思うと、ちょっと脳死してたかもしれない。
坂巻：なにか意見があったときは、「こうしなくちゃいけない」とか言わないで、「こういうのはどうですかね」って他の人に具合を聞くことから始めるといいんじゃないかな。自分だと思いつかなかったいい意見があったりするかもしれないし。口に出すのは大事かなとは思う。ピクセルグリッドって、意見を言いやすい会社だし。
中野：そうですよね。
「よしなに」の本質とは
「よしなに力」がほしい
中野：ちょっと聞いてみたいことがあったんですが、ピクセルグリッドでたまに「よしなに力（よしなにりょく：よしなに実装などをする力）」っていう言葉（造語）がでるじゃないですか。「よしなに力があるね」っていうのは褒め言葉だと思うので、やっぱり「よしなに力」のある人間になりたいと思って。
そこで、この「よしなに力」って何なんだろう？ って一時期、すごい考えたんですよ。
坂巻：うんうん。
中野：僕としては、「よしなに力」って、あんまり何かを聞いたりしなくても、ここはこうやっておくのがいいだろう、と経験から推測する力なのかなって思っているんですけど、どうですか？
坂巻：そうね。その「よしなに力」ってけっこう難しくて。相手の考えていることを先回りして「こうでしょ？」って見せてるっていう行動じゃないですか。
中野：はい。
坂巻：でも、それがうまく働かない場合も、もちろんあるんだよね。「あー、そうじゃないんです。なんで勝手にやったんですか？」ってなることもある。だから、勝手にはやらない、やる前に一度、聞く、ということかな。
中野：具体的な話で考えると、たとえば、クライアントから「APIを叩いてエラーがあったら、それを表示する」という要件がある。でも、そのエラー表示をどうするのか書かれていなかった場合に、方法として3通りあると思うんです。
1つは、とりあえず、エラー表示はここに羅列すれば表示されるので後はよしなに〜というふうに何も聞かず実装する。2つ目は、クライアントに直接聞く。3つ目は、ディレクターに聞く。
そうすると、さっき言ったように「何で勝手にやったの？」ってことにもなる可能性もあるけれど、やってほしかったことだった場合、「言ってないのにそこまでやってくれたんだ」となりますよね。これが「よしなに力」なのだろうかと。
うまくいく「よしなに」と、うまくいかない「よしなに」
坂巻：そうなるときもあるんだけど、そうじゃないときもある。
中野：そうですよね。だから、究極的には諸刃の剣感があるなって思ったんですよ。
坂巻：たとえば、この例だと、似たような事例みたいなのがあって共通の認識を持ってる場合、「あれと同じでいいですよね？」って実装しちゃうことはある。けど、まあ、やり始める前には聞く。
中野：ディレクターに聞くか、クライアントに聞くか、という選択がありますが、これはどちらに聞きます？ ディレクターに聞きますか？
坂巻：ディレクターに聞くと、ディレクターがクライアントに聞くことになるよね。その二者の信頼関係とかでもあると思うんだけど。僕だったら、めんどうなので、まずディレクターに聞いちゃう。
中野：ディレクターに聞くと、ディレクターがわからないことは、クライアントに聞くじゃないですか。そして、それがまたディレクターを通して、僕に返ってくる……それならば、クライアントに聞いたほうが早いって僕は思うんですが。
坂巻：はいはい、それはあるね。
中野：とはいえ、直接クライアントに聞いた場合、もしそれをすでにディレクターに伝えていたとか、行き違いがあった場合、「なんでエンジニアがまた聞いてくるの？」ってなって、もっと良くないかもしれない。
坂巻：その案件で、たびたびエンジニアからクライアントに直接質問する機会があって、ディレクターもそれを知っているという状態であれば、直接クライアントに聞くのでいいと思う。
お金をもらってやる仕事なので、もし自分で判断して実装するとしても、ディレクターが知らないってことはよくない。勝手にやったことに対しては、お金が取れない可能性もあるし。
「よしなに」は先走ることじゃない、相手を知ること
中野：そうか。ディレクターが忙しそうだからって気を利かせて、案件がいい感じに進んでいることが「よしなに力」だと、ちょっと考えていたけれども、ディレクターが知らないのはよくないですね。
坂巻：そうそう。自分がいついなくなっても大丈夫なようにしておきたいから、関係する人は巻き込んで置く必要があるね。その案件に関係することなのに、自分しか知らないことがたくさんある状況は良いことではないと思う。
う〜ん、「よしなに力」ってなんだろ（笑）。
中野：いや、そうなんですよ。難しいんですよ。
坂巻：相手が本当にやりたいことはなんなんですかね、ということかな。
中野：あー、なんか「馬がほしいんじゃなくて、移動手段がほしいんだ」というようなことですか。
坂巻：うん、そうそう。たとえば、ピクセルグリッドのデザイナーが望んでいることはけっこうわかる。僕は一緒にやってきた期間も長いし。そうすると、たとえばマウスオーバーしたときのデザインがなくても、こうかなというのはある程度わかるので、それを実装してみて、Slackでスクリーンショットとか動画みせて「これでいいです？」ということはできる。でもそれはGitHubにプッシュする前にチェックをしてもらう。
そういうのを「よしなに力」と呼ぶことはあるのかもしれない。
誰にも言わないで勝手に「よしなに」やるなら、何か影響のないやつだったらいいと思う。案件の情報を整理して、esaにまとめるとか、そういうのは別に勝手にやっても……。
中野：あー、何の影響もないし、喜ばれますね。聞かないでやっておくことが「よしなに力」だと思ってたけど、場面を考えて、ちゃんと聞くべきことは聞くことにします。スッキリしました。
坂巻：今の話の元になる案件でのやり取りは見たことありますよ。ちゃんと、のっちが聞いているところ。「検索結果が0件のときの表示はどうしましょう？ ほかの検索と同じように何もしないでいいですか？」って聞いているじゃない？ 漏れに気づけてるし、それを確認してて良いね！って思ったよ。
中野：言われてみれば。ありがとうございます。
自分の仕事に真摯に向き合い、「広く浅く」を恐れずに
中野：今回話をして、やっぱり、まずは会社でやらなければならないことっていうのに真摯に向き合うのが、自分ができることの第一歩なのかな、と思いました。
坂巻：会社がやりたいことが、のっちのやりたいことになることもあるし、そうじゃないこともある。だから、会社のやりたいことを1回、自分でちょっとやってみて、合わないなと思ったら、また別のことをやっていくとかがいいのかなとは思う。
中野：そうですね。パフォーマンスのことをけっこう見ているのは、案件で必要だったからというのもあるんですけど、まあ、興味もあるし。でも「興味がない」ってことのほうが少ないです。基本、興味は全部あるんです。
でもどこまで続くかというと、浅く広くになってしまいがちというか。またこの話をすると、長いかもしれない（笑）。
坂巻：知らないよりはいいんじゃないかなあ。広く浅くだけど、それを突き詰めていったら、めっちゃ広くなったら、それはそれで凄いというか。 でも、その広い中にたまに深みがあったりとかするわけじゃん。
中野：そうですね。
坂巻：社内で言えば、さゆさん（ピクセルグリッドのエンジニアの渡辺）とかもそうだけど、ウェブじゃないことを詳しく知っていたりするのって、おもしろいなと思う。だから、別にその「広く浅く」になったとしても、そうなってしまうことを恐れる必要はないというか。それでもいいんじゃない？
何もしないよりは、ぜんぜんいいと思うね。そうね、だから僕はゼルダ（笑）。でも今はゲームしてても、仕事の目線で見ちゃうときがあるね。
中野：任天堂が考える最新のUIはこれか！ みたいな（笑）。
坂巻：そうそう、人を自然と誘導していくの、すごく上手だなと思う。チュートリアルをチュートリアルだと感じさせない。ウェブにありがちな、モーダルダイアログがただ出るみたいなやつじゃないんですよね。やらされてるのに、ユーザーは自分でやったと思っている。
こういうゲームする体験でも何でも、何かしら仕事だったり人生の役に立つんだよ。「広く浅く」を恐れることなかれ。
（了）