スタートアップテクノロジーデザイン部の仕事を紹介します！

こんにちは！スタートアップテクノロジー・デザイン部の李（イ）です！

スタートアップテクノロジーは、Webサービスやアプリのデザイン・開発を請け負ったり、自社プロダクトのエンジニア教育サービス「RUNTEQ(ランテック)」を運営している会社です。

デザイン部ではUIやWebのデザイン、コーディングまで幅広く担当しているのですが、社外から見るとわかりづらい部分も多いかと思います。

そこで今回は、デザイン部の仕事内容をご紹介します！

デザインやコーディングの仕事に興味を持っている方は、ぜひご覧ください！

デザイナーとコーダーが一丸となってUIを作り上げる

デザインは自社で制作して、コーディングは外部へ委託したけれど、意図するデザインの実現が難しい！連携がうまく取れない！納期が遅れがちになってしまう！

こんな状況ってよくありますよね。

自社で密にコミュニケーションをとり、デザインからコーディングまでを完結できたら、よりスムーズに制作できるのではと考えたことはありませんか？

スタテクデザイン部では、プロダクト開発の速度を向上するために、要件定義やデザイン、コーディングまでを一貫して担当しています。

また、プロダクトのUIデザインだけでなく、ビジュアル面のデザインや、制作の進行管理などにも関わっています。

UIのデザイン制作の流れ

画面設計をする段階ではまず、ラフスケッチやワイヤーフレームのようなイメージを制作することが多いです。

その後、機能要件などをプロジェクトに参加しているチームメンバーと議論しながら全体像を掴み、詳細な画面デザインやプロトタイピングへと進んでいきます。

UIのコーディング業務

デザイン部メンバーは、HTMLやCSSだけでなく、SlimやERBのようなViewファイルをフレームワーク上で直接さわって作業しています。（弊社の場合はRuby on Railで開発しているシステムが大半です。）

HTML、CSSファイルをエンジニアに渡して、システムに組み込んでもらう流れだと、受け取ったエンジニアはとにかく大変！コーダーから受け取ったHTML、CSSを毎回フレームワークに合わせて変形する手間が発生してしまいます！

デザインチームがコーディングまでを引き受けることで、見た目に関する部分がエンジニアから分離されて、システムの設計や開発に注力できるような体勢を整えています。

開発部との連携にはFigmaも活用！

弊社ではリモートワークを中心にして仕事を進めていて、社内コミュニケーションツールとして、ZoomやDiscord、Slackを導入しています。

しかし、言葉だけのコミュニケーションでは、アウトプットに対する認識揃えが困難になることがあります。

このような課題を解決するために、Figmaというデザインツールを導入していて、チーム内で作るものの認識を揃えています。

FigmaはUIデザイン作成はもちろん、機能に対しての仕様やコメントなどを書き込むことができるので、コミュニケーションのコストが大きく下がります。特にデザイナーとエンジニアのあいだのコミュニケーションで活躍しています。

また、Figmaは共同編集も可能で、ZoomやDiscordを繋いで手を動かしながら作業ボリュームを見積もったり、疑問点を洗い出したりすることができます。

ソースコードはGitHubで管理

GitHubはソースコードの管理などができるサービスで、ほぼすべてのプロジェクトをGitHubで管理しています。

大昔は、コーディングが完了したファイルをそのままエンジニアに渡していたこともあったのですが、誰がどこをいつ修正したのか追いかけられなかったり、ファイルがなくなったりすると、現場はカオスになってしまいます。今思うと、非効率的なやり方だったなーと思います。

デザイン部のデザイナー、コーダー全員がGitHubを使っているので、システム連携後の不具合対応や改修などの品質管理もしっかり行っています。

デザイン部内でレビューが完了したプルリクエストを、Slackを使って開発部に受け渡します。

まとめ

今回は、スタートアップテクノロジーのデザイン部の仕事について紹介しました。

スタテクのデザイン部の特徴は、

・デザイン部内でデザイナーとコーダーが柔軟に連携をとっている
・デザインからコーディングまでの作業ができる
・GitやFigmaで開発部などと連携をとっている

ということですね。

スタテクのデザイン部は、UIデザインのプロになりたい！コーディングのプロになりたい！UIデザインからコーディングの仕事まで全部経験したい！と思っている方には最高のステージだと思います。

興味を持っていただけたデザイナーの方は是非、応募を検討してみてください！