UI/UXデザインの理解が重要、フロントエンドエンジニアのキャリア
※本記事は2018年6月に公開された内容です。
2018年6月11日、UI・UXデザインをテーマにしたイベント「CTO meetup UI/UXデザイン×フロントエンド開発」が開催されました。イベント前半はUI・UXデザイナーとしてのキャリア形成の転換点を語り、後半はUI・UXを開発する際のノウハウが紹介されました。第一線で活躍中のUI・UXデザイナーらが語る、フロントエンド開発のポイントをレポートします。
目次
ご登壇者
そのキャリアからスタートした理由とは？
D.ノーマンの大学でUI・UXの理論を学ぶ
ひらい：みなさんのキャリア上で、デザインの仕事に関わるようになった転換点についてお伺いしたいと思います。
菊池：もともとは貿易会社をやっていたんですが、そこからWeb事業に転向しまして。その後、UX LONDONを運営している友人に誘われUX DAYS TOKYOを立ち上げようと、そこでUXのイベントをやるならしっかり勉強しようと『誰のためのデザイン？』で有名なドナルド・ノーマンのいる海外の講座で2年ほど学びました。
ひらい：HCIでは何を学ばれたんですか？
菊池：基本は認知心理学の勉強でしたね。ユースケース別のビデオを見て、理論をひとつずつ学んでいく……という感じで。講師の中にはAppleのパスワードフィルターやジニーエフェクトを作った講師からフィッツ・ローなどの理論などを教えてもらいました。
早河：私の場合、iPod Touchの発売時期がキャリアの大きな転換点だったと思います。板を触るだけで音楽が聞けて地図も開ける……という新鮮な体験に衝撃を受けまして。それがきっかけでWebデザインからアプリのUI設計へと転向しました。
ひらい：WebとアプリのUI設計では大分勝手が違いますよね。UI設計に関する情報はどのようにキャッチアップしていったのでしょうか？
早河：当時は表層的な見栄えに関わる部分、例えば「いかにボタンの質感にこだわるか」などを競うのが腕の見せ所、という風潮がありました。なので今振り返るとUI・UXといったところまではあまり意識出来ていなかったなあと。最近ようやくUXについて話せるようになってきたかな、という感じです。
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人目を採ることになったら、出来上がったもの全体をコードレビューするチーフデザイナーをとりたい。プロトタイプがなくともいきなりコーディングに入れる人、そういう「デザインが出来るエンジニア」が欲しいです。
スキルを身につけるには「まずはやってみる」こと
ひらい：様々なスキルや知識を身につけるうえで、なにか共通するポイントなどはありますか？
早河：出来る人に習うというのが一番手っ取り早いですね。もうひとつは実際に自分で作ること。私は以前、早押しクイズアプリのようなものを作りまして、その過程でアセットの作り方などを覚えていきました。ただ、HIGに即したものをどう作るか、といったノウハウ部分は仕事を通じて覚えましたね。
林：面白そうだったらとりあえずやってみる、というのは大事。Webの技術って大体無料で試せますから、やったうえで投資する必要があるのか確かめるのがいいのではないでしょうか。
菊池：ある技術を習得するため勉強する際には、必ずその技術が「他の選択肢と何が違うのか？」をよく考えることが大事です。例えばフレームワークがどこまで続くかはいつも綱渡り。結局ブラウザが実装するものが勝ってしまう。ですからWeb技術を勉強するうえで、結局ブラウザに取って代わられてしまいそうなものについては、僕は勉強しないようにしています。
UI・UXデザイン関連記事のご紹介
FLEXYで公開している、UI・UXデザイン関連記事をご紹介します。本記事と合わせてご覧ください。
UI/UXデザインの進め方
こちらはUI/UXデザインの進め方についてのイベントレポート記事です。デザイン組織に様々な立場で関わってきた3名の登壇者を招き、現場の課題やその解決策についてお話しいただきました。
UXデザインとは
フリーランスとして企業のUIデザイナー、UXデザイナーとして様々なプロジェクトに従事している飯沢 邦之 氏を講師にお招きし、UXデザインとはという基礎的な知識から、自社プロダクトのUX調査手法まで語っていただきました。
UI/UXデザイナーの求人
こちらの記事ではFLEXYでお取り扱いするUI/UXデザイナーの求人についてご紹介しています。フルリモートで働ける案件も記載しておりますので是非ご覧ください。
まとめ
今回のイベントではUI・UXデザイナーとしてのキャリア形成の転換点や、UI・UXを開発する際のノウハウを語っていただきました。今回の記事を今後のキャリア形成に活かしていただければ幸いです。
■FLEXYのご紹介
FLEXYは、エンジニア、技術顧問、CTO、デザイナーの方向けに案件をご紹介するサービスです。
リモートワークや週1-5日、高単価案件など、ご希望に合った案件をご紹介いたしますので、是非お気軽にご相談ください。
