マガジンのカバー画像

デザインシステム

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

#デザインシステム

デザインシステム勉強会「ds.t Episode V: atama plus」での質問に答えます

デザインシステム勉強会「ds.t Episode V: atama plus」での質問に答えます

こんにちは。atama plusのヌマタです。
先日1/16に勉強会「designsystems.tokyo Episode V: atama plus」を開催しました。来場いただいた方々ありがとうございました!

designsystems.tokyoとは、デザインシステムに取り組む各社が知見や学びを共有するガチな勉強会です。その第5回目としてatama plusのデザインシステムの1年間につい

もっとみる

コンテンツ作りの基準は言語化できる?「デザインシステム」と「コンテンツ」との接点

今運用を担当しているオウンドメディアについて、運用を別の人に任せるために「オウンドメディアの運営ガイドライン」を作って明文化することに取り組んでいます。。やってみると、これがなかなか奥が深い・・・・。単純に使っているツールの説明をしたり、ケースを場合分けすれば
良いところは作りやすいけど、「コンテンツ作りの基準を言語化」というのはなかなか難しいと試行錯誤中。

そんな中、最近デザイン(特にUXデザ

もっとみる
見ているだけで楽しく、学びが多いAudiのデザインガイドライン

見ているだけで楽しく、学びが多いAudiのデザインガイドライン

デザイナー・エンジニア間でルールの認識合わせをしやすくしたり、コンポーネント化することでブランドらしい一貫性あるデザインにする目的で用意されるデザインガイドラインですが、Webの世界で仕事をする私たちは、デザインガイドラインといえば、Googleのマテリアルデザインを思い浮かべる人も多いかと思います。

Audiのデザインガイドラインは、Web系の会社が作るものに加えて、主張する主役が「自動車」と

もっとみる
デザインシステム前夜 - デザインシステム構築奮闘記① -

デザインシステム前夜 - デザインシステム構築奮闘記① -

こんにちは!atama plus UX/UIデザイナーの林田です。
私たちは現在、デザインシステムの構築に取り組んでいます。この連載は、スタートアップのインハウスデザイナーたちがデザインシステムを1から構築する様子をレポートして、参考にしていただければという趣旨ではじめました。
※2018年末頃からの取り組みを徐々に記事化していっております。

初回の今回は、デザインシステム構築に至る背景を紹介し

もっとみる
デザインシステム構築ツール Specify (アルファ版) を使ってみた

デザインシステム構築ツール Specify (アルファ版) を使ってみた

デザインシステムを構築するためのツール、Specifyのアルファ版が使えるようになったので少し触ってみました。
(Ver 0.7.1)

なぜSpecifyに期待するのか私はWebアプリの(UI)開発に関わっているのですが、デザインのアウトプットとして一番管理されるべきなのは「ソースコード(HTML/CSSなど)」だと思っています。
(もちろん自分の役割、担当範囲、チームのスタイルによりますが)

もっとみる
クラシルのWebチームでデザインシステムを少しずつ構築していっている話

クラシルのWebチームでデザインシステムを少しずつ構築していっている話

delyのWebチームでプロダクトデザイナーをやってるkassyです。

現在、Webチームではデザインシステムを少しずつ導入しています。今日はその取り組みについてご紹介したいと思います。

今回の作業を行ったチームのメンバー構成
デザイナー × 1
フロントエンドエンジニア × 2
フロント兼サーバーサイドエンジニア × 1

デザインシステムとはなにか
とはいえデザインシステムと言われてもなん

もっとみる
まずはちいさくはじめよう!デザインシステム勉強会

まずはちいさくはじめよう!デザインシステム勉強会

ノゾエです(@conoito)

最近お世話になっている坪田さん(@tsubotax)の手配で、
吉竹さん(@ryo_pan)をお招きし、
デザインシステム勉強会を開催していただきました。

坪田さん:「これって内容をnoteとかにまとめて書いたりしても大丈夫ですよね?」
吉竹さん:「いいですよお」

とのことでしたので、ありがたくまとめさせていただきました〜〜〜感謝です🙏

ちなみにこの勉強会

もっとみる
Atomic Design と Figma の組み合わせでデザインが便利になる|デザインシステムの作り方

Atomic Design と Figma の組み合わせでデザインが便利になる|デザインシステムの作り方

スマートキャンプデザインブログ、デザイナー/エンジニアのhaguriです。

ユーザー体験の統一化のために大切な「デザインシステムの作り方」について紹介します。(スマートキャンプでもまだまだ模索中......)

スマートキャンプでは、インサイドセールスに特化したCRM「Biscuet(ビスケット)」という新サービスを発表をしました。

まだ開発中のサービスですが、このBiscuet(ビスケット)

もっとみる
Design Systems community conference 「Clarity2019」 報告会に参加してきた

Design Systems community conference 「Clarity2019」 報告会に参加してきた

9/24にdesignsystems.tokyo主催のサイバーエージェントさんで開催されたds.t #Clarity2019 Redux in Tokyoに参加してきました。

この会はClarity2019というデザインシステムのカンファレンスに参加してきた人たちの報告会です。

ハッシュタグは、#designsystems_tokyo なのでこれでツイッター検索すると実況が追えます。

もっとみる
【チームライブラリ活用編】 デザインシステムを #Figma でもっと強くする

【チームライブラリ活用編】 デザインシステムを #Figma でもっと強くする

【まずやること編】 デザインデータをSketchからFigmaにお引越ししよう
もあわせてドウゾ

・・・

ノゾエ(@conoito)です。

今年3月頃に、SketchからFigmaに、UIまわりのデータの移行を行いました。
約半年が経った9月現在、特に大きな問題もなく快適に本運用を行なうことができています。

今日は、Figmaに移行してから行なった、
コンポーネントの整備からスタイルの最適

もっとみる
ゼロから始めるデザインシステム - チーム開発を加速させるデザインアプローチ! #全文公開

ゼロから始めるデザインシステム - チーム開発を加速させるデザインアプローチ! #全文公開

こんにちは!トライブグループという会社でCDOをやっています、原田佳樹 @yoshigorouuといいます。前回はこんな記事を書きました!

9/22(日)の技術書典7に@scrpgilと共著で「ゼロから始めるデザインシステム - チーム開発を加速させるデザインアプローチ!」という本を出展します。

それに合わせて、事前に本書の本文を公開することにしました。技術書典というイベントは年々盛り上がって

もっとみる
デザインシステムを持たない組織のこれまでの取り組みとこれからを考える

デザインシステムを持たない組織のこれまでの取り組みとこれからを考える

こんにちは!はのめぐみです。キッチハイクというサービスでデザイナーをしています。

2019年9月19日に開催された React.js meetup #9 にて、デザインシステムをテーマに登壇しました。トークタイムとパネルディスカッションの2部構成で、私はイベント前半部分のトークを担当させていただきました。この記事は、そのフォローアップを含んだ紹介記事です。

スライド資料は全編公開しています

もっとみる
CI&UIリニューアルしながらデザインシステムを作った話

CI&UIリニューアルしながらデザインシステムを作った話

「コデアル」という求人サービスのデザインシステムを作ってみました。CIリニューアルに伴う全スタイル&コンポーネントの刷新、エンジニア&デザイナー間の協業、そして約3ヶ月運用してみた感想をつづってみます。

実際に使っているドキュメント、Sketchファイルはこちら↓

・Codeal Design Guideline
・Codeal UI Kit.sketch
・Sketch Tips for C

もっとみる
ファームノートのプロダクト開発におけるデザインシステムの役割

ファームノートのプロダクト開発におけるデザインシステムの役割

もう先月になりますが BtoB のデザイナー勉強会で デザインシステムについて LT をしたので、改めてファームノートにおけるデザインシステムの役割についてまとめてみようと思います。

デザインシステムとはデザインシステムの定義と作成方法、導入事例 より

デザインシステム:デザインの基準やドキュメント、原則に加えて、基準を達成するためのUIパターンやコンポーネントなどのツールキットをすべて備えた

もっとみる