CLOSE

UI/UXデザイン×フロントエンド開発(全2記事)

2018.07.10

Brand Topics

PR

「作っていたゲームがおもしろくなかった」UI/UXエンジニアたちが語る、キャリアの転換点

提供:株式会社サーキュレーション

2018年6月11日、株式会社サーキュレーションが主催するイベント「CTO meetup」が開催されました。今回のテーマは「UI/UXデザイン×フロントエンド開発」。デザイナーやエンジニアなど、さまざまなキャリアを積んだ業界のトップランナーたちが一堂に会して、自身のキャリア形成やマネジメントについて語ります。パネルディスカッションの前半パートでは、ウェブディレクションズイースト合同会社の菊池聡氏、フェンリル株式会社の早河優氏、株式会社EmotionTechの林優一氏、フレームダブルオー株式会社のaggre氏が、現在のキャリアに至るまでの軌跡を振り返りました。

エンジニアたちが語る、今日のキャリアに至るまで

ひらいさだあき氏(以下、ひらい):では、パネルディスカッションの第一部を始めたいと思います。最初は登壇者の方々がどのようにキャリアをスタートさせて今にいたるのか、おうかがいしたいと思います。

みなさん、キャリアスタートさせて、そこから転職されたりフリーランスになられたりという過程で、どこかでデザインに関わってきたりもされていると思います。「キャリアの大きな転換期だったな」というところをそれぞれお話しいただければと思います。

最初は菊池さんから、キャリアの転換になったポイントや、先ほどお話にあったドナルド・ノーマンのところ。あれは資格を取られたというお話でしたよね、あのあたりを決意された理由をおうかがいできたらなと思います。

菊池聡氏(以下、菊池):僕はもともと実はWebの学校には行っていなくて、マーケティングを勉強していたのがスタートです。それがどのぐらいかな、2000年ぐらいからマーケティングを勉強していました。

最初、自分で会社を始めたんですよ。貿易の会社をやってまして、当時アメリカの友達と2人で始めたんですけど、いろいろと大企業の波に遭いまして、やめました。それで、在庫を抱えるビジネスは駄目だと思ってWebに転換して。Webでなにやろうかということで最初にHTML事典を買いまして、そこからHTMLとCSS勉強していきました。

そのあと、海外の書籍なんかを読んでHTML/CSSを勉強していくうちに、海外の人と仲よくなったりして、レスポンシブデザインだとかああいうことを始めたというのがスタートです。

HTML/CSSについては別に不安もなく普通にやっていたんですけど、たまたま知り合いから「今度UXのイベントやるけど、どう?」と言われて「じゃあやろうかな」みたいな感じで。それで「でもやるにあたってなにか勉強しなきゃいけないな」と思ったので、さっき言ったようにノーマンのところに行こうと思ったんです。

それは何故かと言うと、僕は日本と海外を比較することが多いんですけど海外だとHCIという学部があるんですね。

ひらい:Human Centered Design?

菊池:Human Computer Interactionというんですけど、要は人間とコンピュータのインタラクションについての学部があるんですね。そこは心理学、行動経済学、社会学というステップで勉強していく学部なんですけど、そういう本ねえなと思って。それで「じゃあノーマンのところへ行こうと思って、ノーマンのところに2年ぐらい行きました。

ひらい:それはドナルド・ノーマンが教えてくれるんですか?

菊池:結局ドナルド・ノーマン本人はほとんど来ないんですけど。僕が見たのはニールセンを2回くらいですね(笑)。

ひらい:なるほど(笑)。

菊池:結果、ノーマン・ニールセン・グループの講師みたいなのが6〜7人、それぞれ得意分野を教える。でも、博士号がもともと認知心理学が多いので、認知心理学を中心に勉強していくというのが多かったですね。

そこからUX/UIのキャリアを少しずつスタートしたというのが、僕の大きな転換点であり、今のキャリアにいたるポイントです。あと、マーケティングはもともとやっていたので、それでコンサルティングは食えたんだと思います。

ドナルド・ノーマンの講座で学んだこと

ひらい:ちなみにさっきほど会話に出てきたドナルド・ノーマンというのは『誰のためのデザイン?』という書籍の著者の方なんですけど、『誰のためのデザイン?』を知っているか読んだことのある人はどれぐらいいらっしゃいますか?

(会場挙手)

けっこういらっしゃいますね。

菊池:そうですね。本はやっぱり知っている方が多いですね。

ひらい:そうですね。僕ももともとエンジニアだったんですが、デザイナーの知り合いは読んでいる方が多かったので『誰のためのデザイン?』読みました。けっこう分厚くてそんなに優しく書かれているわけでもなかったので、いきなり読むのはとっつきにくかったんですけれども、それをそこでしっかり勉強されるのは大変ではなかったですか?

菊池:そうですね。やっぱり全部授業が英語なので大変だったんですけど。

ひらい:どんな講座がありましたか?

菊池:やることはほとんど心理学とか……。ノーマン・ニールセンってリサーチで有名じゃないですか? だから、すごくビデオを見せられるんですよね。一番多かったのは、認知心理学ですね。

認知心理学を勉強したあとに、ユースケースのビデオを見ます。例えばFitts's lawのユースケースだとか「ハンバーガーメニューがなぜダメか?」ということについて、むちゃくちゃいろんなビデオのリサーチ結果を見せられて、その論理を1個ずつ覚えていくというのが最初ですね。

ひらい:なるほど。学んだことは実際役に立ったりはしました?

菊池:学問って「日本的」といったら変ですけど、学問と現場が離れているイメージってありませんか? だけど、これってたぶん日本特有なんですよ。

ちょっと余談になっちゃうんですけど、MITのSloanという学校があります。あそこだと、スクールバスのルートの計算だとか、学問を使って世の中をよくすることに直結することをよくやるんですね。Fitts’s lawってみなさんご存知ですか?

Fitts’s lawというのは、ターゲットとターゲットの広さが行動、ユーザーの使いやすさに影響するというものです。Appleのジニーエフェクトってわかりますか? ウィンドウを最大化したり最小化したりする時にびよーんって出てくるアニメーションです。

ひらい:メニューとかの。

菊池:メニューがびよーんって出てくるやつとか。あとパスワードがマスクされる。あのユーザーインターフェースを作った人が講師の1人にいます。

ひらい:すごいですね。

菊池:その人が実際に教えてくれるんですが、なぜFitts’s lawなのかというのを考えたときに、ジニーエフェクトも全部理論でできているんですよね。なんていったらいいですかね、そもそもジニーエフェクトがわかったかなというのがスタートなんですけど。長くなるからちょっとあとにしましょうか。

ひらい:はい(笑)。

菊池:ということをいろいろ、AppleのユーザーインターフェースとWindowsのユーザーインターフェースの違いをFitts’s lawとかで教えてくれます。

ひらい:ありがとうございます。

自分の作品を世に見せたい→Webの世界へ

ひらい:続いて、早河さんからキャリアの転換になったところや、もともとWeb系のデザインのお仕事が多くて、そこから最近はアプリのお仕事が多くなっているということですので、そのあたりの変化も大きかったんじゃないかと思いますが、いかがですか?

早河優氏(以下、早河):キャリアのスタートは、そもそも学生時代のときに自分が作った作品を発表したり、サイトを作るブームみたいのがあって。僕はドット絵をひたすら書いていたので、それを世に見せたいという欲求でWebサイトを作り始めたのがきっかけですね。それこそテーブルレイアウトとかの時代からWebを作り始めました。

ひらい:大学はデザイン系・美大系だったんですか?

早河:いえ、趣味で作っていました。趣味がこうじて、5人くらいの制作会社でキャリアをスタートさせました。

そこでWebのデザインと、HTML/CSSを書く仕事をしていました。Flashが流行ったときには、ActionScriptを書いてみたりとか。ある程度やっていたら、リーマンショックが来て、そうこうしている時にiPod touchが出て。

あれにすごく衝撃を受けたのが、今となってはキャリアの転換点だったかなと思っています。そこに衝撃を受けてアプリ作りたいと思い、今の会社に入ることになりました。

ひらい:今の会社の前もデザイナーとしてお仕事をされていたんですよね。

早河:そうですね。ずっとWebのデザイナーをしていました。

ひらい:Flashも? ActionScriptを書きつつもデザイナー?

早河:そうですね。ActionScriptも2.0まではやってたって感じです。3.0で挫折した感じです。

ひらい:そうなんですね(笑)。

早河:はい。個人的な転換点はそのiPod touchですね。

最新技術をキャッチアップした方法

ひらい:そこでWebをずっとやられていて、そこからアプリのUIを作っていくのはだいぶ違うと思いますが、そこはどうやってキャッチアップをしていったんですか?

早河:アプリ黎明期というとあれですが、初期はいかにボタンの質感にこだわるかみたいな。

ひらい:スキューモーフィックデザインみたいな頃ですよね。

早河:1ピクセルの光と影でいかにモリっとさせるかみたいな。そこが腕の見せどころみたいなのがあったので、自分は今みたいなUI/UXというところまで考えて仕事ができてなかったんじゃないかなって思います。いかに見栄えがよく、表層的な部分のデザインに終始していたのがこの頃ですね。

最近はより深いところというか、設計や、体験をどうやってアプリとそれ以外のもので実現させるか、ということを考えることが増えてきたので、ようやくUXについてすこし話せるようになったかなという感じです。

ひらい:今はアプリを作られる場合、体験の部分はどんな人とディスカッションしていますか?

早河:主にクライアントさんとお話しさせていただいて、「どういったものを作っていきましょう?」というところからスタートさせていただくことが多いです。

あとは実際に作っていく過程でユーザーさんにインタビューすることもあります。ひらい:なるほど。ありがとうございます。

エンジニアとしての転換期

ひらい:続いて林さんからもお話をうかがいたいんですが、ここで先ほどの林さんの表を出してもいいですか?

林優一氏(以下、林):はい。大丈夫です。

ひらい:個人的に興味を持ったところなんですが、ずっとエンジニアやCTOをやられてきて、キャリアの中では継続していると思いますが、プロダクトマネージャーになることもあると思います。ですが、プロダクトマネージャーって突然できるものでもないよなとは思っていて。これまでのご経験で、プロダクトマネジメントに関わることは、エンジニアやCTOの時も多かったんですか?

:そうですね。転換期というと、ここが明らかにおかしいんですけど。

ひらい:急に伸びていっていますね。

:まさに転換期はここでした。入社時にはエンジニアとして入社をしているんですけど、リーダーが渡米してそのまま退職してしまったので。

ひらい:渡米して(笑)。

:いなくなってしまって、そのリーダーが「指名しました」と言ってそのまま去っていったので僕がリーダーになったんですけど。

ひらい:それはエンジニアのリーダーということですか?

:そうですね。もともとはソーシャルゲームの開発をWebViewをメインにしてハイブリッドアプリケーションというかたちでやっていた会社にいました。そこのマークアップ部門のリーダーとしてやってきて。

ソーシャルゲームやや陰りが出始めたぐらいの時期だったんですが、「射幸心を煽る」というのがけっこう話題になっていた時期で、ソーシャルゲームに対してネガティブな感情が世の中的に出始めていた時でした。

自分もそれはあんまりよくないなとは思っていました。やっぱりゲームを作って楽しんでもらいたいということが根底にあって、楽しんだ上でそこに対してお金を払ってもらうほうが健全なんじゃないかと勝手に思っていて。

それで、「UI/UX開発本部という専門部門を作りましょう」と経営陣にそのまま直訴しまして、「そんなに言うんだったらお前やれよ」というかたちで本部長になりました。

ひらい:なるほど。そういった部を作ろうと進言されるということは、UI/UXに業務の中で関わっていたり、その重要性を感じていらっしゃったんですか?

:仕事としてはやっていませんでしたが、作っていたゲームは、自分がやっていてもおもしろくなかったんです。言ったら怒られるかもしれませんが、楽しくなかったんですね。なので、せっかく作るなら楽しいゲームをやりたいし、そんな世界観にしたいという思いがありました。

それならもっと根本的な企画の部分からちゃんと考えて構成していかないと。ボタンデザインとか「そこにガチャの導線を置いたら売上が上がる」とかそういうことではなくて、ゲームとして、もっと楽しむためにお金を使ってくれるというかたちにしたかったんです。

ひらい:なるほど。そのUI/UXチームを作ろうと言ったのはだいたい何年頃のことですか?

:あの時は5年ぐらい前ですか。

ひらい:その頃、UIデザイナーやUXデザイナーという肩書きの人は社内にはいらっしゃたんですか?

:いわゆるグラフィック系のUIデザイナーの人たちはいました。ただ、ゲームの場合はプランナー・ディレクターというの2セクションが企画が最上位です。

ひらい:全体の企画だったりとか、あと体験の部分を考えるという?

:そうですね。そこが一番強いところだと思うので、その企画に従ってデザインやUX/UIを作る。

ひらい:なるほど。そのプランナーさんだったり、ディレクターさん、プロデューサーさんがいらっしゃったなかで作ろうとされたUI/UXの組織というのは、どんなこれまでとは違う点だったんですか?

:今までは企画、ディレクション部門が企画を作って「こういうのがやりたいです」と仕様書を書いた上で、デザイナーチームがデザインして、エンジニアチームが作るという流れでした。それを、新しい部門を作ったときに、企画会議にそのチームのデザイナーが必ず参加するという構成にしました。

なので、企画段階で「なんのためにこの機能やイベントがあるのか?」みたいなところにデザイナーを突っ込んで一緒にやいやいやりながら、「どういうことですか」「こういうことですか」と描いてもらいながらプロトタイプみたいなもの作りつつ、一緒になって作るようなルールに変えました。

ひらい:そのUI/UXチームは何人ぐらいだっだんでしょうか?

:終始いても12人ぐらいで。

ひらい:けっこう多いですね。

:ゲームが3つぐらいあったので、それぞれチームを分けてやってました。

ひらい:ありがとうございます。

デザイナーとエンジニア、2つのキャリアが交わった理由

ひらい:最後にaggreさんからも、キャリアの転換期についておうかがいしたいと思います。先ほどaggreさんのご経歴を聞いていて、今日の登壇者の中で唯一デザイナーからエンジニア、両方をされていらっしゃるなと思いました。最初はデザインというところでキャリアを始めたことと、キャリアの転換を意識して大変だったや、意外とすんなりいけたなど、そのあたりをおうかがいしたいなと思います。

aggre氏(以下、aggre):もともとデザインは好きだったんです。それは学問としてというよりも、純粋に美しいものが好きというレベルもので、「美しいWebサイトを作りたい」ぐらいの気持ちでデザインは好きでした。

僕のキャリアの転換点は2つあると思っています。1個は、今まで自分のホームページしか作っていなかったときに、サービスを作ろうとサーバサイドに踏み込み始めた時があったんです。これは、それまでWordPressのプラグインをこねくり回してなんとかしていたんですが、限界があると感じて自分でサーバサイドまで書くようになって。当然ソースも全部やりました。

その時から「既成品でなんとかならないから作ろう」と思って自然な流れで作り始めて。その時にデザインが好きだったので、やるならば美しく作りたいと思いました。

その時にサーバサイドも触り始めたので「エンジニア楽しいな」となって、実は自分でサービスを作っていたのでVCにピッチに行ったりしていたんですね。ですが、それで消耗しつつあって。

そこでふと気づいて「趣味で作れるじゃん」って思いました。だったら仕事で好きなことを開発しようと思ったので、スタートアップにWebデザイナーとして入りました。ここもデザイナーがいないチームだったので、その中で唯一デザインをやる人として、自然な流れできている感覚はすごくありましたね。

独学で知識を習得した方法

ひらい:そこでWebデザイナーとしてやっていくにしても、前提の知識が必要になりますよね。そういったところはどうやって習得されていたんですか?

aggre:僕は独学で全部学んでます。

ひらい:書籍とかですか?

aggre:書籍も実はあまり読まなくて、Webサイトです。MDNを読み漁って「ここはどう実装してるんだろう?」みたいなことを全部インスペクトして、「あっ、こうなってんだ」みたいなことをやっていましたね。

ひらい:うちのデザイナーも、Twitterを模写したり、みたいなことはやっていますね。デザイナーだと、そのサービスをスケッチで起こすという方法がありますし、エンジニアも、フロントエンドの人だと全部コーディングするということもありますよね。あとは一部のインタラクションをちょっと模写するということをやっていますね。

aggre:模写、楽しいです(笑)。

ひらい:そうですよね。そこからエンジニアになる時もやっぱり独学だったんですか?

aggre:基本的には全部独学です。最初はCakePHPから入って、チュートリアルをひととおりやってなんとなく設計の仕方がわかってきて。まぁ最初はたいていバッドパターンになっちゃって(笑)。

ひらい:(笑)。

aggre:地雷を踏んでから「いい設計ってこうなるんだ」というのをそこから学びました。非効率な方法で地雷を踏みながら成長してきてる感じはあります。

ひらい:エンジニアリングの楽しさとデザインの楽しさって別だと思いますが、デザインの楽しさというのはどんなところですが?

aggre:デザイン……デザインの楽しさってなんですかねぇ? 最近、楽しさはあんまり感じてないです(笑)。

ひらい:(笑)。じゃあ、エンジニアリングの楽しさはどんなところにありますか?

aggre:エンジニアリングは、美しく設計できて「ここを変更しやすいぞ」というのを……やはりリファクタリングが楽しいですね。

ひらい:なるほど。今のお話から考えると、aggreさんに通底しているのは、美しさをこだわっていきたいというところかもしれませんね。

aggre:はい。ありがとうございます。

ひらい:ありがとうございます。では、これでパネルディスカッション「そのキャリアからスタートした理由は」を終了します。このあと休憩を挟んで第2部を開始したいと思います。どうもありがとうございました。

(会場拍手)

続きを読むには会員登録
(無料)が必要です。

会員登録していただくと、すべての記事が制限なく閲覧でき、
著者フォローや記事の保存機能など、便利な機能がご利用いただけます。

無料会員登録

会員の方はこちら

株式会社サーキュレーション

関連タグ:

この記事のスピーカー

同じログの記事

コミュニティ情報

Brand Topics

Brand Topics

  • 大量の問い合わせにデスクはお手上げ、現場はブチギレ…… 崩壊したチームを立て直した、kintoneによる業務改善の道のり

人気の記事

新着イベント

ログミーBusinessに
記事掲載しませんか?

イベント・インタビュー・対談 etc.

“編集しない編集”で、
スピーカーの「意図をそのまま」お届け!