このたびSUPER STUDIOでは、日頃からお付き合いのあるSafie社（セーフィー株式会社）と合同で、企業の垣根を越えたデザインセクションの交流会を開催しました！

普段はまったく別の会社で働く同セクションの交流会ということで盛り上がり、ざっくばらんな意見や質問が多数飛び出す非常に有意義な時間でした。ここでは交流会実施にいたった経緯を解説しつつ、公開できる範囲で当日のレポートをお届けします。

交流会の目的

今回の交流会を開催した目的は、ずばり「知見の共有」です。

事業会社のデザイナーは外部のデザイナーとの接点が少なく、ロジックやテクニックがガラパゴス化してしまったり、属人的になってしまう部分が少なからずあります。そこでデザインに関する考え方やツールの使い方、デザインセクションの担当業務などについて共有し、双方の学びとする場を設けることになりました。

「こんな問題をこんなふうに解決したよ！」「これを実現させるためにこうしたよ！」という経験談から気づきを得て、業務に生かすことを目的に実施しました！

交流会当日の流れ

今回の交流会はオンラインで実施しました。大まかな流れは以下の通りです。

1. オープニング
2. SUPER STUDIOのパート
3. Safie社のパート
4. 質問タイム

各社のパートでは登壇者4名が順番に会社＆セクションの紹介とライトニングトーク3本をおこない、トークごとに質問を受け付ける形で進めました。じっくりと時間をかけて聞きたいことや全体を聞いたうえで出てきた疑問などは、最後の質問タイムに回しています。

SUPER STUDIOのパート

会社とデザインセクションの紹介

SUPER STUDIOの事業内容は、法人向けのECプラットフォーム「ecforce」を展開しつつ実際に自社ブランドのECショップを運営し、そこで出る課題をキャッチアップして解決のための新機能を実装する形を取っています。

デザインユニットではecforce、D2C事業、コーポレート等 複数の事業をサポートしています。

その中でも主力のecforce事業はマーケティングからプロダクト領域をカバーしており、施策を同時並行で進行していくために高い生産性が求められています。
複数人での作業を効率的に行うためにデザインシステムの導入をしており、UIコンポーネントや各種資料のテンプレート等を随時アップデートし、ecforce全体の価値向上と生産性の両立を目指しています。

1.Figmaで資料作成

SUPER STUDIOライトニングトーク1本目のテーマは、「資料をFigmaのテンプレートで作る」です。

マーケティングチームからドラフトを渡されて資料を作るとき、「ページ数が多いと気持ちが折れてしまう」「時間がかかる」「作っていくうちにトンマナが崩れ出す」といった課題がありました。

そこで工数を抑えながらトンマナの揃った資料を作れるよう、Figmaでテンプレートを構築。ドラフトの形式に沿ってアセットからテンプレートを引用するだけでデザイン性の高い資料が作れる仕組みを構築しました。

Figmaのオートレイアウトは資料づくりとも相性抜群です。ただし、ページ番号を振る機能はないので、プラグインで解決するなどの工夫をしています。

2.イラストシステムの構築

2本目のテーマは「直感的に使えるイラストシステムの構築」です。およそ8ヵ月間をかけ、好きなパーツを呼び出すだけで誰でも簡単にイラストが設計できるシステムを作りました。イラストの種類は人物のほか吹き出しやグラフ、アイコンなど多岐にわたります。

誰が使ってもecforceらしさを表現できるイラストシステムを構築するために、まず要件の整理から始めました。その後イラストレーターの選定やディレクションをおこない、Figma移行を経てブランドサイトや資料に反映しています。

Safie社のメンバーの方々からは「難しかった点は？」という質問がありました。開発で大変だったのは要件整理やどういうイラストが必要なのかを洗い出す作業で、ヒアリングや話し合いを重ねた経緯はデザインセクションならではの苦労として共感いただけたと思います。

3.モーショングラフィックスの導入

3本目のテーマは「モーショングラフィックスの導入」です。次世代EC構想の「ecforce next」ではプロダクトの認知向上を目的に、従来はテキストや静止画だった44の機能紹介をモーション化しました。

具体的なプロセスとしてはまずFigmaでシナリオを作成し、それをAfter Effectsにエクスポートしてモーションを付けています。エクスポートには「AEUX」という無料プラグインを使用しました。同じ方法を動画バナーにも応用しています。

Safie社のメンバーの方々からは、モーションデザイナーとグラフィックデザイナーとの連携に関する質問などがありました。アニメーションの表現を口頭で伝えるのは難しいのですが、現場では擬音とジェスチャーを駆使しているとお伝えしたところ、場が和むと言った場面もありました。

Safie社のパート

会社とデザインセクションの紹介

Safie社の事業は、クラウド録画型映像プラットフォーム「Safie」の開発・運営・販売、および関連サービスの提供です。防犯カメラ本体のほか、映像を見るビューアーなども扱っています。デザインセンターは事業全体のデザイン業務を担う部署で、コーポレートアイテムをはじめプロダクト、Web、紙媒体、動画など、幅広い分野を担当しています。

SUPER STUDIOとの大きな違いは、別部署であるマーケティング部門にもデザイナーが在籍している点です。マーケティング部門のデザイナーは顧客獲得のプロモーションが主な業務で、デザインセンターはプロダクトやブランディングがメインと、担当業務が異なっていることを解説していただきました。

1.デザインシステムの今

Safie社ライトニングトーク1本目のテーマは、「デザインシステムの今」です。

Safie社では、OEM展開をしているが故の二重管理や、一貫性のないデザインが原因となっている使いにくさ、開発やメンテナンス効率の悪さといった問題が発生していました。

こういった課題を解決するために、2021年にデザインシステムプロジェクトが発足。Figmaコミュニティ公開を経て、2023年6月時点では実際にプロダクトに反映させる段階にまで発展しています。

Safie社のデザインシステムで注目なのが、単純に置き換えるだけでなく負の部分を改善しながら実装している点です。今回は具体的にユーザーを惑わせるUIをデザインシステムで解決した事例を紹介していただきました。

2.制作ツールの移管

2本目のテーマは「制作ツールの移管」です。

Safie社では、デザインにおける負の部分を解消するために、制作ツールをAdobe XDからFigmaに移管しています。移管にあたりコンバーターを使ったものの、多くの不具合が発生。そこで必要な改修を「不具合の修正」「データ構造の整理」「運用のための開発」という3つのカテゴリに分類して作業を進め、Figmaでの運用を実現させたことを紹介していただきました。

今後は業務効率化のためにバージョン管理の仕組みとコンポーネントライブラリを実装し、デザインシステムに紐付けてデザインの一貫性をキープしつつ、更新や改修を簡単にして業務効率化を実現していくとのことです。

3.ブランドキービジュアル開発とカメラ個装箱デザイン

3本目のテーマは「ブランドキービジュアル開発とカメラ個装箱デザイン」です。

Safie社が取り扱っている防犯カメラとドックをセット販売するための個装箱を、シンプルなデザインからSafieのブランドを表現できるデザインにリニューアル。その際、OEM展開であってもSafieを想起できることや汎用性などの要件を満たすために、最初の情報収集から着地までどのようなプロセスを辿ったかを解説していただきました。

今後はキービジュアルをほかのツールにも展開するなど、社内・社外へのSafieらしさの浸透を図っていくとのことです。

SUPER STUDIOからは、ほんのり和テイストのシンボルカラーやシンボルマークに込められた意図などについて質問させていただきました。他社のデザインの背景を知る機会はなかなかないので、貴重な機会になったと感じています。

交流会を終えた感想

どのようなプロセスで仕事をすすめているか、どのような悩みを持ち、どう乗り超えたのか、違う組織のケーススタディの情報交換ができてとても有意義でした。Safie社様のブランドロゴの成り立ち秘話なども聞けて楽しい時間を過ごせました。また機会があればぜひ交流したいと感じています！

CX Growth Studio Group Design Unit　清水

お互いにデザインシステム運用の初期フェーズだったので、自社ができている事や課題点などを改めて認識する良い機会になったと思います。また、普段では聞けない自社ブランドの成り立ちや想い、現状に至るまでの試行錯誤も垣間見え、良い刺激になりました。

CX Growth Studio Group Design Unit　衣笠

モーショングラフィックデザイナーという職種が社内でも特殊であるだけに、他のデザイナーたちがどんな悩みを持ってどのように解決していくのか具体的に聞いてみる機会が少なかったですが、今回の勉強会を通じて私たちのチームも他の会社のデザインチームも、他のデザイナーたちの仕事の話を直接聞くことができ、楽しいしとても勉強になった時間でした。

CX Growth Studio Group Design Unit　ジュン

おわりに

約2時間半におよんだ今回の交流会では、デザイナーとして刺激を受けると同時に多くの学びを得ることができました。デザインという絶対的な正解がないものだからこそ、悩んだり壁に突き当たったりしたときに「ほかの人はどうしてるんだろう？」「意見を聞きたい」と思うことも少なくありません。デザイナーとしての成長するために、また交流の機会を設けたいと考えています。

SUPER STUDIOでは一緒にecforceを盛り上げていくデザイナーを絶賛募集中です！興味を持っていただけた方はぜひご連絡ください。