スペースマーケット DESIGN

本

スペースを簡単に貸し借りできるサービス「スペースマーケット」のデザイナーによるマガジンです。デザインへの想いや考え方、社内での合宿やイベントなど、クリエイティブに関するテーマで発… もっと読む

運営しているクリエイター

#figma

筋の良さを意識したUIガイドラインへの取り組み

スペースマーケットのデザイン部所属UIデザイナー伊東です。先日Twitterでリンクとボタンの扱いが話題になっていたのを見かけました。こういった記事や言及に関連して、スペースマーケットのWebアプリケーションでリンクやボタンをどのように扱っているか（・これから扱っていくか）について、現時点でのUIガイドラインやデザインシステムにおけるオブジェクト指向的なUI設計への取り組みを紹介することで他の組織やデザイナーが何か気付きを得ることができれば、と思ったので記事にしてみます

プロダクト品質の向上に注力するチームができました - 目指すもの・立ち上げ・開発

株式会社スペースマーケットのデザイナー、中原です。今一番欲しいものは床暖房です🔥 昨年スペースマーケットの開発チーム（ユニット）の一つとして「MQチーム」が誕生しました。特定のKPIや予定されている機能改善・施策の実現などを目的としているチームとは異なり、「プロダクトの品質向上を目指し、改善を繰り返す」ことを目的としたチームになります。今回はそのチームが目指すもの、立ち上げ〜運用をどのように行っているかを紹介したいと思います。なぜこのチームが必要なのか🤔ちなみに

Figma でモーダルやポップアップ等の状態変化をプロトタイプする

こんにちは！　UIデザイナーのmarinです。 1年半前にメインデザインツールをFigma に移行した際の記事を書いたのですが、理由のひとつにプロトタイピングがしやすいことを挙げていました。今回はその件についての深堀りを、Figma のプロトタイプを実際の業務でどのように用いているのか例を挙げて書きます。 ※Figma のプロトタイプが初見の場合は、公式のFigma Tutorial: Prototyping を見ておくのをおすすめします。 Figma のプロトタイプの

2020年、事業会社の開発組織で機能するデザインシステムを目指して #3 システム編

年始を跨いでの投稿となってしまったために、何とも間の悪いタイトルではありますが、今回もスペースマーケットにおけるデザインシステムの事例紹介といったところで、いよいよ最終回です。 #1の原則編、#2のカラー編ときて、今回は構築がひと段落したデザインシステムをどのように運用し、社内で共有して以降の業務へ活用していく体制をどのように整えたか紹介していきます。運用しやすく参照しやすい仕組み作りこのデザインシステムを社内へ共有し、参照しやすい状態を目指す上で、デザイン部内だけでな

Figma のVariants 機能でコンポーネントの管理を最適化する

こんにちは！　UIデザイナーのmarinです。 2020年10月末にFigma に搭載されたVariants 機能、便利ですね〜！　Figma はこんなことができたらいいのになぁと思うことをどんどん実現してくれるので大好きです。早速スペースマーケットでもVariants 機能を活用しているので、そもそもVariants 機能とは何か・何が便利なのかという簡単なおさらいと、実際の適用に至るまでを紹介します。 Variants 機能とは？複数のコンポーネントをひとつにまとめる

2020年、事業会社の開発組織で機能するデザインシステムを目指して #2 カラー編

こんにちは、スペースマーケットデザイン部の伊東です。前回に引き続き、今回はカラーパレットを再定義した件について紹介します。さて、前回の記事ではデザイン部がデザインシステムへの取り組みを開始した経緯と、根幹となる原則を考えたりしました。プロダクトに携わる皆が参照できるようなシステムにしたい思いがあったので、私達のデザインシステムにおいては伝えやすくて分かりやすい（デザイナーに限らず普遍的で誰でも馴染みがあり、覚えやすい）言葉を選んで言語化することを第一に意識しました

デザインプロセスの共有をペアデザイン・リモート環境でやってみた

こんにちは！　UIデザイナーのmarinです。新型コロナウイルスの流行に伴い、2020年2月よりスペースマーケットでもリモートワークが推奨となり、約半年が経過しようとしています。コロナ禍以前でも週に1度はリモートワーク日だったので、比較的リモートワークに慣れているのもあって大きな混乱は特にありませんでしたが、フルリモート環境におけるペアデザインは初めての試みだったため、その時の知見を残します。今回のペアデザインの内容ペアデザイン実施の背景や意図、また、それによって手法

2020年、事業会社の開発組織で機能するデザインシステムを目指して #1 背景と原則編

こんにちは！株式会社スペースマーケットデザイン部の伊東です。リモート勤務が常態化した中で、デザイン部としても"これからの働き方"を模索した上での試みが増えています。例えばリモートランチや、週2のチェックイン（仕事へ入り込む前の朝にアイスブレイク的に行われるリモート雑談。毎回簡単なテーマを設定して話します）、Figmaを活用したペアデザインなどです。まだまだ課題も残しているのが実際の所ではありますが、完全リモートの体制以前と比べて仕事の効率を損なわないよう各々が意識しな

Figma のAuto Layout機能を適応して楽をする

こんにちは！　UIデザイナーのmarinです。 2019/12/6 にFigma がアップデートし、Auto Layoutという機能が搭載されました。このAuto LayoutをFigma ユーザーの皆様がどう活用しているか知りたくて、まずは自分から紹介してみようとこの記事を書いています。 Auto Layoutとはその名の通りなのですが、UI上のサイズ変更やオブジェクト等の入れ替えを自動的に調整してくれる機能です。Sketch にもSmart Layout というよく似

Sketch × inVision × Zeplin × GitHub(Abstract)からFigma に移行してみて

こんにちは！　株式会社スペースマーケットデザイン部の久保です。ここ数年はデザインツールの戦国時代と言われるほど世の中には色んなデザインツールがありますが、2019年10月現在のスペースマーケットのデザイン部ではFigma をメインに使用しています。この4年間でPhotoshop → Sketch ⇔ XD → Figma とスペースマーケットに合ったデザインツールを探して右往左往していましたが、今のところはFigma を使用するのが最適解だと感じています。 Sketc

デザインツール「Figma」を5名のデザインチームに導入して半年経った振り返りとビジネスメリットについて

はじめまして＆こんにちは！株式会社スペースマーケットデザイン部マネージャーの横井 @rinoside です。 2019年4月にSketchからFigmaへの移行を行い、運用をはじめて約半年が経ちました。会社組織で移行を検討している方に少しでも参考になればと思い、移行した経緯やそのメリット・デメリットなどの振り返りをまとめてみました。主に金銭面などのビジネス的なメリットや移行時・運用時の振り返りをメインとしているため、基本的な使い方などの解説は省いています。ある程度Fi

Figma でざっくり作るプロトタイピング

こんにちは、スペースマーケットデザインチームの伊東です。現在スペースマーケットの UI デザインは Figma で行っています。以前は Adobe XD や Sketch を使っていたのですが、わりと最近になって移行しました（デザインツールに関して、導入を決めたきっかけやメリットに関しては改めて記事として投稿できれば幸いです）。私自身、スペースマーケットに入社してから初めて Figma を触ったのですが、あまりドキュメントを読み込まなくてもすぐに使える（≒ Ske