マガジンのカバー画像

デザインシステム

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年末頃からの取り組みを徐々に記事化していっております。

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

もっとみる
Fluid Interfaces実践 - なめらかなUIデザインを実現する

Fluid Interfaces実践 - なめらかなUIデザインを実現する

こんにちは。プロダクトデザイナーのミカサ トシキ(@acke_red)です。レシピ動画アプリ「クラシル」のUI/UXのデザイン領域を担当しています。

この記事では、WWDC2018にてAppleが提唱し、昨今のUIデザインの新たな潮流である “Fluid Interfaces” をいかに取り入れていけば良いか、クラシルでの実践事例をあげつつ、考えていきたいと思います。

※この記事は dely

もっとみる
長く愛されるコンポーネントのための取り組み

長く愛されるコンポーネントのための取り組み

はじめにこの記事はGoodpatch UI Design Advent Calendar 21日目の記事です。

僕が担当しているプロジェクトではWebアプリケーションを開発しているのですが、その開発の中で発生したコンポーネントにまつわる問題とそれを改善するための取り組みについてご紹介します。なお、この記事の中で言う"コンポーネント"はUIを構築するための"UIコンポーネント"を指すのだと思ってく

もっとみる
Sketchの命名ルールなどをまとめたGuidelineをつくりました - itachoco Sketch Guideline v0.1

Sketchの命名ルールなどをまとめたGuidelineをつくりました - itachoco Sketch Guideline v0.1

note初投稿です!株式会社ソウゾウでメルカリ カウルというプロダクトのデザイナーをしている @wataame といいます。

突然ですが、Sketchを使ってアプリのUIなどを作る時に、「このレイヤーの名前どうしよう。。Table View?」と悩んだり、レイヤーの重ね順を「Artboardに配置している順番に上から並べる?」など、悩んだ経験があるデザイナーは多いのではないでしょうか。

どれが

もっとみる
デザインガイドラインの初回構築時のポイントと運用方法

デザインガイドラインの初回構築時のポイントと運用方法

※過去ブログからの移転です

エンジニアとデザイナーが互いにプロダクト開発をしやすくするためにデザインガイドライン(あるいは拡張してデザインシステム)を作ることがあります。いま私がデザインしているプロダクトであるHERP ATSでは1年前にデザインガイドラインを設けて運用しています。

デザインガイドラインを実際に構築して1年ちょっと運用してみて「最初に構築するときここまで考えておけばよかったな」

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

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

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

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

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

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

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

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

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

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

もっとみる
美大卒でもない私がCIやBI、ロゴやブランディングが得意なデザイナーになれたのかという話

美大卒でもない私がCIやBI、ロゴやブランディングが得意なデザイナーになれたのかという話

これは フェンリル デザインとテクノロジー Advent Calendar 2018 17日目の記事です。

このアドベントカレンダーを書くにあたって、ロゴの話を聞きたいという声を複数いただいたこともあり、漠然とロゴのカーニングのことでも書くかなぁと思ってぼちぼち準備していたのだが、コリスさんで デザインの基本: フォントのカーニングとは、カーニングの基本的なやり方 という私が書きたかったことの3

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

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

ノゾエです(@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 なのでこれでツイッター検索すると実況が追えます。

もっとみる