採用コラム

エンジニア・デザイナー合同でスキルアップ!|Studio勉強会の様子をお届け

今回のエンジニア&デザイナー合同MTGでは、制作の幅を広げる取り組みの一つとして、
デザインツール「Figma」とノーコードWeb制作ツール「Studio」を用いた、社内勉強会を行いました!

目的

Studioについての理解を深め、自分たちの引き出しを増やしていくことを目的にスタートしたこの企画。
エンジニア・デザイナー双方にとっての学びを得られればと、各職種で以下のねらいを設定しました。

  • 共通:Studioの使い方を学び業務への導入をスムーズに行う
  • エンジニア:Studioの仕様や開発時に考慮が必要なことを学ぶ
  • デザイナー:Studioへの組み込みに適したデザインデータの作り方を学ぶ

グループワークで実践

Studioの特性や構造を体系的に理解するため、職種混合の4チームに分かれ、グループワーク形式で進めていきました。

EVOWORXでは、主にデザインツールとして「Figma」を使用していることから、今回はFigmaのプラグインFigma to Studioを活用し、デザインデータをStudioへ組み込む流れを実践しました。

まずは実際にインポート後の画面構築やアニメーションの追加を各自行います。
メンバーの中にはプラグインの使い方やStudioの操作にまだ慣れていない者も多く、最初は「インポート後のレイアウトが思った通りの動きにならない…!」と、カンプの再現や実装に苦戦する場面もありました。

実際に手を動かしながら、エンジニアとデザイナーがお互いの知識を出し合うことで、より理解が深まる時間となりました。

サイト発表

最後に、それぞれのグループが作成したサイトを発表。
同じデザインベースであっても、グループごとにHTML構造への修正方法や、アニメーションのアプローチが異なり、お互いのサイトを見比べることで新たな発見がたくさんありました。

メンバーからの声

勉強会終了後、参加したメンバーへアンケートを実施したところ、こんな声が寄せられました。

■ エンジニア

  • StudioのUIがFigmaに似ていて使いやすかった。
  • Figmaのオートレイアウトの重要性に気づいた。

■ デザイナー

  • Figmaのデザインデータが思うようにStudioに反映されず難しかった。
  • デザインデータのレイヤー設計に活かせそう。

グループで実践的に学ぶことで、それぞれ新たに気づいたことや、今後の課題を見つけることができました。

まとめ

一人一人のスキルの幅をアップデートするべく、デザイナー・エンジニア合同で行われた今回の勉強会。
Studioに触れることで新たな知識を得られただけでなく、今後の制作の可能性を広げられる良い機会となりました!

これからもメンバー同士で知識を共有しながら、より良いものづくりにつなげていきます。

Studioを使用した制作実績

今回学んだStudioは、実際の案件でも活用しています。
EVOWORXではStudioを用いたWebサイト制作も行っていますので、ぜひ制作実績もご覧ください。

国際大学グローバル・コミュニケーション・センターの研究プラットフォームサイト「FuLL」

産官学民の学びのステークホルダーをつなぐ研究プラットフォームとして、様々な研究・実践活動を推進するFuLL(Future Learning Lab)の公式サイトをStudioで実装しました。

制作したサイトはこちらから!


常に新しい制作手法を学び合い、チームで成長していける環境で、あなたも一緒に働いてみませんか?

デザイナー職はこちら

ディレクター職はこちら