【SUPER STUDIO様×Safie】デザインセクション交流会開催レポート
6/30(金)に、SUPER STUDIO様と合同で、デザインセクションのオンライン交流会を開催しました。
その交流会のセーフィー側の発表の紹介と、私の感想を備忘録としてまとめてみました。
ライトニングトークのテーマについて
デザインシステムについて：碇石さん
まずは碇石さんより、「セーフィーのデザインシステムについて」の紹介です。
デザインシステム発足より前、セーフィーでは、要件の追加があった際は、「すでに実装されているデザインに準拠して展開しているけれど、細かな決まりはない」状態でデザイン作業を行なっていました。
このプロジェクトは2021年12月に発足し、今年の6月にFigmaのデザインコミュニティに公開、現在はプロダクト等への反映を順次行なっているフェーズになります。
私は2020年に入社したので、このプロジェクトが立ち上がる前より業務を行なっていたのですが、前述の通り、細かい決まり事はなかったので、パーツの追加等の業務を行う際も、現在実装されているデザインの余白やフォントサイズなどを細かく調査し、デザインを作る必要がありました。ボタンについては、同じような要素であるのに、高さが異なっている箇所があったり、色が微妙に異なっていたりと差異が発生していた状態でした。
また、同じセーフィー内のサービスであるにもかかわらず、要素の大きさが違ったり、見せ方もまちまちだったりと、そういった事象が起きていました。
デザインシステムの実装・公開は今年の6月と記載しましたが、よく使用する色やボタンなど、使用頻度が多いパーツは早い段階で作成を始めていて、2022年頃から試験的に運用がされていました。
私も、とあるプロジェクトで試験使用をしていたのですが、細かいルールがしっかりと定められていたため、今まで調査で時間を取られていた作業部分が大幅に時間短縮になりました。
私が使用した段階では、まだまだ不足しているパーツがあったり、細かな調整が必要な箇所もありましたが、それでもとても画期的だったことを覚えています。
その試験試用からさらに改善を経たものが、現在公開されているデザインシステムになります。
デザインシステム作成後もまだ課題はあり、当てはめてみたら想定していたよりも大きいなどの課題が発生していて、違和感がある箇所については今後もデザインをチューニングしていく予定となっている。とのことです。
私は完成してからまだデザインシステムを活用する業務に携わってはいないのですが、まとめられたカラーシステムなどから情報を活用することはあり、「どこの色を参照すればいいんだっけ？文字サイズはどこが正なんだっけ？」という迷いが発生しなくなったため、非常に業務が回しやすくなりました。
今後はこのデザインシステムを使用してより効率的に、より一貫性のあるサービスを展開して行くことを目標としています。
デザイナーの誰がデザインを作成しても一定の品質を保つことができ、実装者の時間短縮はもちろん、ユーザーにとってももっと使いやすい、親切なサービスにしていくことができたらと思います。
文中で紹介した弊社のFigmaデザインコミュニティはこちら
Adobe Xd → Figma移行の取り組み：大川さん
続いて、大川さんからAdobe XD → Figma移行への取り組みに関してです。
セーフィーでは現在、紙類や資料を除くwebなどのほぼ全てのデザインをFigma上で行なっていますが、今年の年始頃まではAdobe XDを使用してデザインを行なっていました。
Figmaへ移行した理由については、Adobe XDの単体プランが突然販売終了したことにより、いずれは完全になくなってしまうこと、アップデートがされなくなってしまうことを懸念したためです。
プロジェクトの話に戻ります。
先にも記載した通り、デザインデータの大半がXDだったため、今後の運用を考えmagicalというコンバーターを使用してFigmaデータに変換を行いました。
しかし、データを変換した際にインスタンスが外れてしまったり、コンポーネントが破損したりしていて、使用できる状態にするには人の手を加えて修正しなければならない点が多く存在していました。
私も、機会があったので変換後すぐのFigmaデータを拝見したのですが、同じようなコンポーネントが複数存在していたり、リンク切れを起こしていたりと、使用時にどれを正として使用したらいいのかがわからなかった記憶があります。
2の工程のコンポーネントの命名変更では、従来日本語名で命名していた部分を、コーディングのしやすさを考慮して改めて英語名に修正するという作業を。
4の工程のコンポーネント内の調整では、自動変換されたコンポーネントの内部構造がバラバラになってしまっており、その部分の整頓や、Figma運用しやすいレイヤー構成への変更・オートレイアウト化などの調整を行っていただきました。
そして最後に整頓したデータから、テキストスタイルの設定や、カーラースタイルの設定を登録、ボタンなどにはバリアントの設定をし、ようやくデータの修正が完了です。
今回の対応は、あくまでFigmaを使用できる状態にする暫定的な対応になりますが、今後はデザインシステムとも紐づけ、デザインに統一性を持たせること、より作業の効率化を図ることが目標となります。
コンポーネントを使用する機会があって、早速整理いただいたFigmaデータを活用したのですが、変換後すぐのデータとは比べ物にならないくらい、とても綺麗に整頓されていました。どこから要素を流用すれば良いのか迷うことがなく、目的のコンポーネントに辿り着けます。
目的としていた効率化はすでに活用する私たちに恩恵があると感じていますが、ここからさらに、デザインシステムと紐付け、デザインの一貫性を保ちながら、変更や更新を容易にすることが目標となります。
このアプローチにより、デザインにおける誤った表現や矛盾を減らし、UXの向上に貢献すること、そして、効率的なデザインワークフローを実現し、さらなる時間とリソースの節約をデザインセンター全体で目指して行きたいと思っています。
余談になりますが、発表者の大川さんより、発表時間が5分では時間が短く、コンポーネント整理の件から派生した別案件のFigmaデータ管理についても、もっと話したかったと後で感想を伺いました。
このプロジェクト対応で、Figmaが何もわからなかった状態から、今では部署でFigmaマスター的な立ち位置になっていて、私も困った時は相談させていただいております(笑)
ブランドキービジュアルの開発とカメラ個装箱デザイン：がっさーさん
最後はがっさーさんより、ブランドキービジュアルの開発とカメラの個装箱デザインについてです。
とてもシンプルだったSafie Oneというカメラの個装箱が一新。まずは元のデザインと、完成したデザインから比較してみます。
和の模様のシンボルを現代風にアレンジ+「S」を忍ばせる遊び心がありつつ、シンプルでセーフィーらしいデザインに仕上がっています。
このプロジェクトですが、元々ダンボールに印刷するということもあり、一色印刷でも表現可能なデザイン、また、OEM展開があることから、セーフィーらしさを全面に出し過ぎることができない、という制約がありました。
その上で多少はセーフィーらしいエッセンスも入れ込む必要があり、実行プロセスでは、他社事例の収集とデザイン案作成に大幅に時間を割いて実行しました。ブラッシュアップの工程では、有志メンバーのアイデアも借りながら練り上げています。
質疑応答の際に、どうして和テイストなんですか？といった質問が上がりました。
実は、セーフィーのシンボルマークの鳥は、千鳥の家紋がモチーフとなっているため、和を意識したデザインを取り入れています。
セーフィー創業当時、防犯カメラ市場は映像データ流出などの問題が起こっており、防犯カメラ＝怖いイメージという印象の方が多かったそうです。
そこで、創業者である佐渡島は、防犯カメラの怖いイメージを無くして、より身近に感じてもらいたい。親しみを持ってほしいと思い、自分達の身の回りにあるものを使おうというアイデアから、この千鳥をアレンジしたシンボルマークや和テイストに近いブランドカラーが誕生しました。
今後のブランドへの展望としては
今回作成したKVを他ツールへも実装展開する
ブランディングデザインと防犯デザインの方向性整理
社内外への「Safieらしさ」の浸透
というところを目指しています。
コーポレートデザイン周りは、私もそれなりの頻度で参加させていただいていますが、社内に関しても以前より大幅にメンバーが増えたため、社内への「Safieらしさ」の浸透も課題だと思うところは、いくつか思い当たるところもあります。
また、今ではある程度の方向性も固まっていますが、防犯カメラという商材を扱っているため、セーフィーは幅広い業界や年齢層をターゲットしているため、訴求の幅が広いところが改めてデザインの課題になってきていると感じていた時期もありました。
ブランディングに関しては、以前デザインセンターのメンバーでマッピングや話し合いを開催したこともありました。
目線合わせのためのワークショップを開催したり、勉強会を開催したりする機会が少しづつ増えてきていて、その一環として活動したものです。
こちらは組織の拡大に伴う活動として、有志のメンバーで実践してみたもののため、公式に発表しているものではありません。
それまではデザイナー個々の持つぼんやりとした「Safieらしさ」像で仕事をしていたので、具体例を持ち寄ってお互いに意見やイメージを出し話し合った機会は、これが初めてだったかもしれません。
このマッピングの会を経て、私たちの中で随分と「Safieらしさとはなんだろう」という共通認識が随分と固まったように思いますし、今回の個装箱デザインは、このマッピングがとても活きた事例だと思っています。
交流会の感想
事業会社のデザイナーをしていると、普段別の企業のデザイナーと話をする機会がほとんどないため、自社では行っていない事例などに関しては、とても興味深いお話を聞くことができました。
同じような事例に関しては、「うちはここで苦労した！」と話し合える交流会で、とても有意義な時間でした。
5分という短い時間の発表だったので、話者はもっと話をしたかったところ、聞いている側ももっと話を聞きたかったところがあったのではないかなと思います。
セーフィー側の発表に関しては、私が入社した2020年頃より環境がガラリと変わり、とにかくデザインをつくる、の状態から、品質はもちろん、今後の運用や関係するメンバーの時間やユーザーをより意識して作っていくフェーズに変わってきたと改めて実感しています。
フェーズの変化に慣れるまでは苦戦した仕事もありましたが、今はここでご紹介したデザインシステムやFigma運用が形になってきて、以前とは比べ物にならないくらいデザインがしやすい環境になってきたと感じています。
今後は整えていただいたシステムを活用して、よりよくできる箇所はブラッシュアップに貢献できたらと考えています。
今回はこのような機会を設けていただき、ありがとうございました
SUPER STUDIO様の記事はこちら
Safieデザインセンターでは、一緒に働く仲間を募集しています！
「映像から未来をつくる」のビジョンのもと、一緒に働く仲間を募集しています！
デザイン / UXエンジニア募集中
https://open.talentio.com/r/1/c/safie/pages/78880
2025年新卒採用サイト
https://safie.co.jp/teams/newgrads/
最後までお読みいただきありがとうございました。
この記事が気に入ったらサポートをしてみませんか？