フラーさんと合同勉強会を実施しました!

デザイン, 勉強会

こんにちは、Androidアプリ開発グループの杉山です。
今回は先日3/4(月)に行われたフラーさんとの合同勉強会についてまとめたいと思います!

今回の合同勉強会

レコチョクとフラーさんのモバイルアプリエンジニア・デザイナーどうしでお互いの知見を共有し、交流を深めることを目的とした勉強会でした。
それぞれ2名の方が登壇し発表を行いました。発表終了後は懇親会も行いました。

発表内容

登壇して頂いた4名の発表内容はこちらです!

リサーチのすゝめ

登壇者:レコチョク システム開発推進部 システム開発第1グループ 山里 啓一郎さん

DSC_9503

レコチョク入社後に感じた定性的な調査が十分にできていない状況に対して、どのように周知と実践を推進したか発表していただきました。
音楽プレイヤーアプリ「PlayPASS」のプロダクトオーナー着任後、ユーザビリティに関する課題に対応する一環として、ユーザビリティテストを実施し、UXリサーチの重要性を認知させることに成功しました。
特に周知の観点では、テストの生配信や映像を使ったフィードバックなど、直接操作している映像を見てもらうことで、1つ1つの問題を自分ごととしてサービスのメンバーに理解してもらえるようになったとのことでした。
またテストでは、「バイアスを除くための設計」にこだわり「テストとしてタスクをこなすだけの作業とさせないこと」「テスト時のプライバシー情報に対する不安を解消させること」の2点をしっかりと設計して取り組み、テスト結果の信ぴょう性を高めることに努めていたそうです。
最後に今後の抱負として、レコチョクチケットサービスの事例を紹介し、画面内に閉じないリアル空間での定性調査も強化していきたいという意気込みを「越境」というキーワードを使って語っていました。

テストを行うテストユーザーにも、その結果を受け取るプロダクトメンバーにも自分ごととしてうけとり、理解実施をしてもらうことの難しさを感じました。担当しているサービスで実施する機会があれば注意点を意識してやりたいと思いました。

デザイントークンを設計してみた!

登壇者:レコチョク NX開発推進部 iOSアプリ開発グループ 河野 穣さん

DSC_9549

Eggsの大規模リニューアルに伴い生じたデザイン負債に対応するため、独自のデザインシステムの設計を導入した経緯や設計の事例を発表していただきました。
デザインシステムの開発は、一般に組織ごとに異なる目的や内容を持つため、複雑でハードルが高く、開発メンバーも含めてきっかけを作りやすい表層のデザイン要素に焦点をあてスタートしたそうです。
アセットライブラリ、コンポーネントライブラリ、そしてデザイントークンを設計し、発表内では特にデザイントークンについて、Typographyにおける「参照レイヤー」とUI上の文脈に基づく「意味的なレイヤー」の実例を用いて紹介していました。
参照レイヤーのデザイントークンとして、フォントサイズには、モバイルアプリ用に細かく調整可能で統一感のあるパターンを担保するために16pxを基準にした調和数列ベースのスケールを採用していました。
意味的レイヤーでは、「見出しだから大きくて見やすくしたい」などのようなUI上の文脈に合わせたトークンの分類、適用をGoogle Material Design3の分類を参考にしつつ行っていました。その際に現状と理想が乖離しすぎないようにするために、「Button」に対する分類を追加し調整を行ったそうです。
これらにより、目標に沿ったデザインシステムの初期構築を実現し、理論と実践のバランスを取りながら柔軟なトークン設計ができたとのことでした。今後は、エンジニアとの連携を深め、全メンバーがデザインシステムを深く理解するための情報の発信をしていきたいと話されていました。

楽しくプロダクト開発できる環境にするために気にかけていること

登壇者:フラー エンジニアリンググループ 統括マネージャー 秋田 浩孝さん

DSC_9603

プロダクト開発においてフラーさんの中で楽しく開発できる環境にするために気にかけていることについて発表していただきました。プロダクトを楽しく開発するためには、そのプロダクトに愛着を持てるようにすることが必要であると考えているとのことでした。
愛着を持てる環境にするために、開発するアプリの先にあるプロダクトを実際に体験してもらいます。その体験の中で生まれた意見をアプリに反映できるようにします。そうすると、反映させた意見が実際に現場で使われているか確認したくなります。この確認したくなる時点で愛着が湧いているといえるとのことでした。
また、自分が作ったアプリであるとより実感できるように少数精鋭での開発を意識しているそうです。自身の担当した領域が大きいほど、自分の携わったアプリから自分で作ったアプリへと意識が変わりやすいため、愛着につながると考えているとのことでした。ですが、少数精鋭だと開発の負担も大きくなってしまうので、テンプレートの作成や生成系AIを活用をすることで効率化を図る取り組みを行っているようです。
またテンプレートの活用によりいろんな案件をチャレンジしやすい環境つくりをすることで、飽きずに様々なことにチャレンジできるようにしているとのことでした。
私自身も、自分たちで開発した機能を実際に現地で試しに行った際にはとてもワクワクしてより開発を頑張ろうと思った経験があるので愛着が湧いていたと思います。これからの開発でも意識してどんどんできることに飛び込んでいこうと思いました。

デザイナーとエンジニアをつなげる3つの心がけ

登壇者:フラー 取締役副社長兼CDO 櫻井 裕基さん

DSC_9653

櫻井さんの経験の中から一番大切で今までの経験から効果があった他職種との会話の3つの「心がけ」について発表していただきました。
1つ目は興味と関心を日常に取り入れることです。同じものに対しても職種によって「良い」とされる定義は異なります。日常の会話などから、お互いの領域への興味関心を持ち、その領域の考え方を知ることで、その領域の「目」を養い、視野を広げることができます。
2つ目は文脈や意図、背景を意識して伝えることです。文脈や背景を知れば創り手としてもなぜこの形になっているのか考えをより伝えることができ、互いの理解度を深めることができます。要点をまとめて伝えることも重要ですが、背景や文脈を知るとなぜこの形になっているのかを様々な視点から理解して向き合うことができます。
3つ目は実際にサービスやアプリを使ってみて自分なりの使いやすさや、実際の挙動からの違和感をきちんと伝えることです。自分の領域ではないから、相手はきっと考えて現在の仕様になっているはずだから、正直に言いにくいなどという点から話し合われていないことも意外とあると思います。言う側も聞く側も「利用者」としてのフィードバックを持つという心構えが必要です。
以上の3つの「心がけ」を実例を用いながらお話していただきました。

デザイナーとエンジニアに関わらず、同じエンジニアの中でもフロントエンド、バックエンドと領域が違う間柄や、同じ領域のエンジニア内でも意識はしているけど実際に実行はできていないことが多い部分でもあると自分は感じました。改めて意識し直そうと思うきっかけになり、日々のコミュニケーションを大事にしたいと思いました!

懇親会

発表が終わったあとは懇親会で発表で気になった内容の深堀りや、交流を深めました!技術的な話から普段のランチ事情まで幅広い会話がされていたと思います。両社垣根なく交流できてとても楽しかったです!

DSC_9673

たくさんの方のご参加ありがとうございました!
今回はレコチョクの方に来ていただいたので次回はフラー社さんのオフィスにお邪魔させていただけたらと思います!
フラーさんのnoteでも今回の合同勉強会についてレポートしていただいているので、是非ご覧ください!

DSC_9666