【CTO meetupイベントレポート】UI/UXデザイン×フロントエンド開発

2018年6月11日、UI・UXデザインをテーマにしたイベント「CTO meetup UI/UXデザイン×フロントエンド開発」が開催されました。 イベント前半はUI・UXデザイナーとしてのキャリア形成の転換点を語り、後半はUI・UXを開発する際のノウハウが紹介されました。第一線で活躍中のUI・UXデザイナーらが語る、フロントエンド開発のポイントをレポートします。

ご登壇者

菊池 聡氏
菊池 聡氏(言語:Rust)
ウェブディレクションズイースト合同会社 CEO
日本で最も早くから「モバイルファースト」、「レスポンシブWebデザイン」に注目し広めた人物で、レスポンシブWebデザインの第一人者と呼ばれている。 ASCII.jp - Web Professionalで2012年度はアクセス数ランキング1位。数百ある記事の中から、6つの記事が同ランキング入りするなど人気の記事を記載するなどテクニカルライターとしても活躍する。 スマートフォン案件から大手企業サイト、自社プロジェクト等を行う傍ら世界最高峰イベント Web Directions の日本を統括し、米国、豪州、イギリスのカンファレンスへ参加しWeb技術の研鑽し続けている。世界に有名な NNGのUXサーティファイドの日本人初の取得者である。
林 優一氏
林 優一氏
株式会社EmotionTech プロダクトマネージャー
ソーシャルゲーム・Web開発会社にてエンジニア、本部長、CTOを歴任。 現在はプロダクトマネージャーとして自社プロダクト企画から開発までを統括。 経営ボードメンバーとして経営にも参画し開発部部長、VPoE、フロントエンドエンジニアを兼任。 技術顧問として複数社に対し技術的、組織的なアドバイス、Angularコミュニティ運営の手伝いなどの複業も行なっている。 UXを意識したサービス開発が得意。
aggre氏
aggre氏
フレームダブルオー株式会社 CTO
行動分析スタートアップ、ファッション系ウェブメディアを経て、現在はフレームダブルオー株式会社に CTO として在籍。Web Components を全面採用し ooapp.co, renderly.io を開発。新しいウェブ標準やサーバーレスアーキテクチャ、リーンスタートアップを積極的に活用している。 過去登壇実績 ライブラリーを使わずコンポーネント指向のビュー開発やフレームワークの代用が可能なWeb Componentsの技術理解を深めるための勉強会をPolymer Japan(Googleスポンサード)で主催、登壇した。
登壇内容:現場の Web Components / Real world Web Components
登壇時connpass: Web Components Cafe by Polymer Japan
早河 優氏
早河 優氏
フェンリル株式会社 デザインフェロー
12 年間一貫して、制作会社のデザイナーもしくはディレクターとして Web サイト・スマートフォンアプリを中心としたデジタルコンテンツの企画・デザイン制作・ディレクション業務に従事。フェンリルではクリエイティビティが求められるナショナルクライアントとの大型プロジェクトにおいて、企画からデザイン制作・プロジェクト管理を担当している。
モデレータ
ひらい さだあき氏
ひらい さだあき氏
株式会社グッドパッチ 執行役員 CTO & Vice President of Product
2015年1月にGoodpatch入社、2015年12月にCTOに就任。 これまではSIerでJavaを使った開発やLinuxのインフラ構築などを経験し、前職の食べログではインターネット予約サービスの開発(Rails/JavaScript)にエンジニア携わりました。
Goodpatch入社後は、プロトタイピングツールProttのエンジニアリーダーしてプロジェクトマネージメント、チームビルディング、プログラミング(Ruby/Rails/JavaScript)、パフォーマンスチューニングなどを行ってきました。CTOとしてエンジニアリング組織作り、エンジニアリング評価制度策定、技術選定、環境整備、エンジニア採用などを行っています。 現在はVice President of Product(プロダクト責任者)として、Prottのプロダクト開発を推進し、事業目標達成に向けて取り組んでいます。
プライベートではhtml5jというコミュニティのスタッフとして活動し、執筆/登壇活動を行っています。 フォントが好きで、FontLoversというFacebookグループを友人と立ち上げ、フォントに関するイベントなどを開催しています。好きなフォントは秀英体とOptimaです。

flexy-uiux-event

キャリアのスタート そのキャリアからスタートした理由とは?

D.ノーマンの大学でUI・UXの理論を学ぶ

ひらい:みなさんのキャリア上で、デザインの仕事に関わるようになった転換点についてお伺いしたいと思います。

菊池:もともとは貿易会社をやっていたんですが、そこからWeb事業に転向しまして。その後、UX LONDONを運営している友人に誘われUX DAYS TOKYOを立ち上げようと、そこでUXのイベントをやるならしっかり勉強しようと『誰のためのデザイン?』で有名なドナルド・ノーマンのいる海外の講座で2年ほど学びました。

ひらい:HCIでは何を学ばれたんですか?

菊池:基本は認知心理学の勉強でしたね。ユースケース別のビデオを見て、理論をひとつずつ学んでいく……という感じで。講師の中にはAppleのパスワードフィルターやジニーエフェクトを作った講師からフィッツ・ローなどの理論などを教えてもらいました。

早河:私の場合、iPod Touchの発売時期がキャリアの大きな転換点だったと思います。板を触るだけで音楽が聞けて地図も開ける……という新鮮な体験に衝撃を受けまして。それがきっかけでWebデザインからアプリのUI設計へと転向しました。

ひらい:WebとアプリのUI設計では大分勝手が違いますよね。UI設計に関する情報はどのようにキャッチアップしていったのでしょうか?

早河:当時は表層的な見栄えに関わる部分、例えば「いかにボタンの質感にこだわるか」などを競うのが腕の見せ所、という風潮がありました。なので今振り返るとUI・UXといったところまではあまり意識出来ていなかったなあと。最近ようやくUXについて話せるようになってきたかな、という感じです。

flexyevent

UI・UX部門を作るよう経営陣に直訴

ひらい:林さんはエンジニアやCTOを経て、その後プロダクトマネージャーに就任されていますよね。

林:以前はソーシャルゲーム開発を手がける会社でエンジニアをやっていました。当時はソーシャルゲームに対して、「射幸心を過剰にあおる」というネガティブなイメージが付きまとい始めていました。 実は私も射幸心をあおるのはあまり良くないと思っていたんです。どうせゲームを作るなら面白いゲームを作りたい、それならゲームの世界観を含めた根本的な部分をしっかり設計したいという思いが募り、5年くらい前、経営陣にUI・UX専門の部門を作ろうと直訴して、そこのリーダーに就任しました。

ひらい:UI・UX部門の立ち上げで社内の体制に変化は?

林:それまではディレクション部門が企画を立てて仕様書を作り、デザイナーチームにパスした後、エンジニアが受け取るという流れでした。それを企画会議にデザイナーも参加するようにすることで、企画段階でプロトタイプを作りつつ全員で話し合いながら制作していくという体制へと変えることが出来ましたね。

サーバサイド構築に踏み込み、デザインに関わり始める

aggre:転換点は2つあります。 ひとつはWebサービスを作ろうと思い立ち、サーバサイドに踏み込み始めた時。それまではWordPressのプラグインをこねくり回してなんとかしていましたが、もはや「既成品ではどうにもならない」と限界を感じ、サーバもいじろうと思い立ちました。 もうひとつはその後スタートアップにジョインした時。Webデザイナーがいない会社だったので、私が業務を担当することになったんです。

ひらい:Webデザインの知識はどうやって習得されていたのですか?

aggre:独学です。実はあまり書籍は読んでいなくて、MDNを徹底的に読み漁ったり、珍しいデザインを見かけたらインスペクトして「どう実装しているのか?」を理解していきました。
ちなみにエンジニアになった時も独学です。最初はCakePHPから入り、チュートリアルを一通りやりました。基本的には地雷を踏み抜き、バッドパターンに直面しながら成長していくという非効率な学習方法でしたね(笑)。 フロントエンドイベント

UI・UXを考えるうえで、重要視しているポイントは

迷うくらいなら「出して検証、その後改善」

ひらい:早河さんはUI・UXを考える際に、インタビューを重視していると伺いました。インタビューを元にサービスやプロダクトを作るうえで大事なことは何でしょうか?

早河:ユーザーが画面上のタスクをこなすことで、「どういった気持ちになって欲しいのか」を考えることです。具体的なものが出来上がっている段階であればプロトタイプをご使用いただくこともありますし、「新機能追加についてどう思う?」など抽象的なアイデアに関するものはアンケートをとったりしています。 インタビューをすると、「自分の意図していた使い方ってほとんどされていないなあ」「伝わらないなあ」と実感出来る。その結果をフィードバックし、作業に落とし込むという形でプロダクトを作っていますね。

ひらい:なるほど。ところでtoBとtoCではUI・UXの考え方にも差が出てきますよね?

菊池:KPIの話で言えばtoBのほうがtoCより緩く設定される傾向があります。バックエンド系のシステムだとKPIが求められないことも多い。ですが僕はその逆に、だからこそKPIを出すように心がけています。

林:KPI設定と同時に、スピード感も大事です。うちは最低限のユーザーヒアリングを済ませておくことは前提で、「迷うくらいなら出して検証」というスタンスをとっています。その後、改善すべきところは改善する、でいいのではないか。

ひらい:ちなみに出した後の検証はどうされていますか?

aggre:うちの会社は、基本的にはGoogleOptimizeなどのA/Bテストツールを使っていますね。目標を設定しておいて、その目標にどちらがより近い結果を残せたのか判断して決めます。

ひらい:しかしA/Bテストが出来るのは何か比較対象がある時に限られてしまいますよね。新機能を出そうといった時に過去に比較する対象がなかったりする場合は?

aggre:その場合でも、その機能が求められるかどうかを判断出来る材料を作ります。ただ場合によっては、メールでユーザーに告知して反応を見るだけ、あるいはサイトにダミーとして乗せて押されたかどうかの反応を見るなど、別の方法をとることもあります。

マルチスキルが「エンジニア的コミュニケーション力」習得のカギ

ひらい:林さんはプロダクトマネージャーとして、どのようなエンジニア・デザイナーと働きたいと考えていますか?

林:必要なスキルというのは仕事の内容によって都度ごとに変わります。ただマーケットの需要という意味だと、最近はデザイン+コーディング、デザイン+マーケティング、フロントエンド+バックエンドと言った具合にマルチスキルが必須化しているように感じます。

菊池:そもそもなぜマルチスキルが重視されるかと言うと、エンジニアにとってのコミュニケーション能力、つまり「他の人がやっている仕事が分かる能力」の形成に一役買うからです。コミュニケーション能力が高いチームはベロシティも高くなる傾向にある。スクラムを組んで開発する際には大事なスキルです。

aggre:今うちにはエンジニアは僕一人ですが、3人目くらいまではデザインもできるエンジニアだけの採用になると考えてます。将来的に事業がスケールして4人目を採ることになったら、出来上がったもの全体をコードレビューするチーフデザイナーをとりたい。プロトタイプがなくともいきなりコーディングに入れる人、そういう「デザインが出来るエンジニア」が欲しいです。

uiux-event

スキルを身につけるには「まずはやってみる」こと

ひらい:様々なスキルや知識を身につけるうえで、なにか共通するポイントなどはありますか?

早河:出来る人に習うというのが一番手っ取り早いですね。もうひとつは実際に自分で作ること。私は以前、早押しクイズアプリのようなものを作りまして、その過程でアセットの作り方などを覚えていきました。ただ、HIGに即したものをどう作るか、といったノウハウ部分は仕事を通じて覚えましたね。

林:面白そうだったらとりあえずやってみる、というのは大事。Webの技術って大体無料で試せますから、やったうえで投資する必要があるのか確かめるのがいいのではないでしょうか。

菊池:ある技術を習得するため勉強する際には、必ずその技術が「他の選択肢と何が違うのか?」をよく考えることが大事です。例えばフレームワークがどこまで続くかはいつも綱渡り。結局ブラウザが実装するものが勝ってしまう。ですからWeb技術を勉強するうえで、結局ブラウザに取って代わられてしまいそうなものについては、僕は勉強しないようにしています。


次回のCTO meet up 〜7月開催〜

【CTO meetup】IoTで多様化するデータとの関わり方
〜テクノロジーそしてキャリア。IoTとつながるスキルセットについて〜

●日時:2018年7月17日(火) 19:10〜21:40(開場18:40〜)
●IoTの活用により様々なデータを取得できるようになり、活用の幅がどのように広がったのか?また、そのために必要なスキルとはなにか?
「ソフトウェア側からみたセンサーなどのハードウェアとの付き合い方」 「IoTデータでより多様化するデータとの関わり方」 など実際にIoTを活用し、開発しているエンジニア目線からトークを予定しています。
詳細は、イベント詳細ページをご覧ください! 皆様のお越しをお待ちしております。


この記事を書いた人
flexy編集部
flexy編集部
ハイスキルIT人材への案件紹介サービス
サーキュレーションが運営するフリーランスのエンジニアを中心としたIT人材の案件紹介サービスflexy。エンジニアに役立つコンテンツも提供しています。【flexyのサービス詳細】★求人を募集している法人様向けお仕事をしたいご登録希望の個人様向け

週1日~/リモートの案件に興味はありませんか?

週1日~/リモートの関わり方で、「開発案件」や「企業のIT化や設計のアドバザリーなどの技術顧問案件」を受けてみませんか?副業をしたい、独立して個人で仕事を受けたエンジニア・デザイナー・PM・技術顧問の皆様のお仕事探し支援サービスがあります。

お仕事をお探しの方へ

お仕事をお探しの方(無料登録)
法人の方(IT課題の相談)