React でデザインシステムを正しく実装する - コンポーネントカタログを超えて | Wantedly Engineer Blog
Wantedly でバックエンドのテックリード的なやつをやってる @izumin5210 です。半年くらい前から取り組んでいた、UI デザインシステムの React 実装について紹介します。ソフトウェアの設計としても非常にエキサイティングだったので、ライブラリ作ったりするのが好きな人なども楽しんでもらえると思います。 TL;DRWantedly の UI デザインシステムは「WantedlyのUIをデザインする上での共通の考え方とツール＆アセット」でありエンジニアとデザイナが効率よくコミュニケーションするための共通言語となるデザインシステムを (Web) Frontend に持ち込む際は、単なるコンポーネントカタログではなく、システムが定義するものと同じレベルの抽象を持つライブラリ・フレームワークとして実装することで、より有効性を発揮するこの話が気になった（Web・モバイル問わず）フロント
ちょっとしたシステム変更なのに時間と手間がかかるのはなぜ？｜森崎 修司
ソフトウェア開発の効率化や品質向上を研究しています。そこで感じたことを書いていきます。ITシステムに関するリテラシーが高まるともっとIT化が進むのではないかと思い、書いています。 ITシステムを利用していると改善したいことが出てきます。「こことここは同時に指定したい」「この順番が入れ替わると作業しやすい」といったこと要望を感じることは誰にでもあるのではないでしょうか。ご自身が開発に携わっていれば、変更することもできますが、社内のIT部門が管理していたり、開発会社にお願いしていたりすると、このブログエントリのタイトルのように思うことがあるかもしれません。 「ちょっとした変更なのに、なぜ時間がかかると言うのだろう。本当はそれほど時間がかからないのに、ひょっとして仕事が増えるのがいやなだけで、体よく断っているのではないか」と思ってしまうかもしれません。その可能性はゼロではありませんが、一般には次
Airbnbのデザインシステムの構築 – heru – Medium
この記事は、David Leeのbrunchを参考、Airbnb Designから翻訳しました。 この記事はAirbnbの「新しいデザインシステム(New Design Language System)」シリーズの一部です。 ソフトウェア開発とデザインをする時、私たちはよく、一回生(one-off)ソルーションを作ることが多いです。時には時間制約野中で働くことが多く、どのように進めていけばよいかがまとめられていない状態で働いているからです。一回生ソルーションが悪いものではありませんが、堅実な基礎に基づいて立てられなかったら、私たちは結局、後から技術的負債とデザイン的負債を返済しなければなりません。 ビジュアル言語は、他の一般的な言語と違わないです。言語がうまく伝えられなく、理解できない場合、誤解が生じます。プロダクトやチームの成長につれ、このような現象はもっと複雑になります。 デザインはい
デザインシステムに関わるいろいろなプロセスを図にしてみた
今までも何度か デザインシステム に関する記事を書いてきましたが、手段や考え方が中心でした。今回はプロセスに注目して、代表的な課題を図にしてみました。すべてのケースに当てはまるわけではないですが、参考にしてください。 大まかな進め方 「デザインシステムを作りました！」とドカンと発表したほうがインパクトがあるように見えますが、苦労したわりには誰も使わないものになる可能性が高いです。実際はデザインシステムの中にあるものを小さく切り出して少しずつ変えていくことになります。 正攻法であればデザイン原則から始めたほうが良いと思っていますが、組織としてどうあるべきかといった根本的なところが明文化されていないのであれば、そこからスタートしたほうが良いでしょう。デザイン原則があったほうがデザインの議論がしやすくなるので早期にもっておきたいですが、1 日でも早く成果を出したいのであれば、まず色からはじめてみ
[レポート]LINEのデザインシステム：一貫性を損なうことなくLINEのサービスの速度を上げる #linedevday_report | DevelopersIO
[レポート]LINEのデザインシステム：一貫性を損なうことなくLINEのサービスの速度を上げる #linedevday_report CX事業本部の阿部です。 この記事はLINE Developer Day:Day2の「LINEのデザインシステム：一貫性を損なうことなくLINEのサービスの速度を上げる」のレポートです。 概要とスピーカー デザインの分野では、デザインシステムを採用することが主流になっています。 デザインシステムを採用すれば、一貫性とアラインされたUXレベルを同時に達成できるからです。 デザイナーは時間に余裕ができるため、デザインコンポーネントを用いてより重要なデザインの課題に集中することができます。 Jung Young Leeが、既存の製品から8年の歳月をかけてデザインシステムを作った経験談をお話しします。 LINE Plus Product Design 5 Lead
![[レポート]LINEのデザインシステム：一貫性を損なうことなくLINEのサービスの速度を上げる #linedevday_report | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/cce94c90ddc76c1ea7c6bf4be9e744090746ae41/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2019%2F11%2Flinedevday20191.png)
UIデザイナーが知っておきたい海外の優れたデザインシステム17選 | ベイジのUIラボ～業務システムとSaaSのUIを考える
デザインシステムとは、サービス開発する上で必要となるデザインの概念、スタイルガイド、コンポーネント集などで構成されるデザインのルールです。 Salesforce.comの「Lightning Design System」が2015年に登場して以来、多くの企業がこのデザインシステムを導入するようになりました。 プロトタイピングツールで有名なUXPinが提供するデザインシステムプラットフォーム「adele」では、90個以上（2019年12月現在）ものデザインシステムが公開されています。その企業のラインナップを見ると、大手ITベンダー、SaaSベンダーのみならず、自治体、金融機関、大学など多くの業界で、組織のブランド確立のために、デザインシステムを活用していることが分かります。 GoogleやAppleが提供するデザインシステムは、既に多くのブログで語りつくされていますが、その他の企業でも素晴ら
ep.30 「デザインシステムにおけるフロントエンド」公開AMA in DEV DAY Venue | UIT INSIDE
LINE DEVELOPER DAY 2019 スピーカーである okazou に、@potato4d, @kotarok, @myakura の三人で登壇内容についての質問・座談会を実施しました。 Guest @myakura @kotarok LINE DEVELOPER DAY 2019 Day 2 での @okazou の発表 https://linedevday.linecorp.com/jp/2019/sessions/A2-3 https://speakerdeck.com/line_devday2019/front-end-in-design-system LINE のデザインシステム LINE DEVELOPER DAY 2019 Day 2 でのもう一つの発表 https://linedevday.linecorp.com/jp/2019/sessions/A2-2 h
一貫したデザインのためにデザインシステムを運用する方法
BenはUXPinのコンテンツ戦略担当者です。 Webウェブデザイナーとバックエンド開発者の両方として働いています。 人は馴染みがあるものを信頼します。そのことを知っている多くのデザイナーは、作品をできるだけシンプルにするよう努めています。また、シンプルなデザインは実用的でもあります。たとえば、一度ナビゲーションバーをデザインすれば、すべてのページで使うことができます。 しかし、デザインコンセプトはどんどん変化します。新しいアイデアを持つデザイナーが古いプロジェクトを引き継いだり、新しいコーディング手法が昨年の最先端に取って代わったりすることもあるでしょう。その結果、一貫性のないビジュアルとコードの寄せ集めになってしまいやがて問題となります。 デザインの一貫性とは デザインの一貫性がある製品は、変更を加えても見た目や動作が全体としてまとまりがあるように見えます。これは、特に大規模なサイトで
あなたの知らない「狙う広告」 0.1秒の世界：日本経済新聞
「どうして同じ広告ばかり表示されるのか」。インターネットを見ていて疑問に思ったことがあるだろう。実は、過去に見たサイト履歴などからあなたの好みや属性を機械が推測し、興味がありそうな広告を0.1秒以内に配信しているのだ。この作業が膨大に繰り返され、１兆円市場を形作る。知られざる「ターゲティング広告（狙う広告）」の世界に飛び込んでみよう。 2000年ごろまで広告取引はシンプルだった。広告を出したい企業と、出してもらいたいメディアがおり、その取引を広告代理店の営業マンがつないでいた。 ネットが普及して広告枠が大量に増え、人力で埋めるのが難しくなった。そこで2010年ごろ、広告を機械が自動で取引する仕組みが拡大。今では自動取引が全体の８割に達し、2018年には１兆円を超える見通し。 パソコンを立ち上げてサイトを開く。その瞬間、あなたが見たサイト履歴や検索した単語を機械が分析。「引っ越し先を探してい
人はなぜ「分かりやすいデザイン」でも失敗するのか｜Tsutomu Sogitani
これは私が最近よく訪問する日本橋駅直結の商業ビル、東京日本橋ビル内のエレベーターのボタンです。 唐突に質問ですが、このボタンで操作ミスを起こすポイントがあるとすれば、それがどこだか分かりますか？ 説明が必要と思いますが、このビルは7Fがオフィスロビーになっています。駅直結のB1と1Fからは7Fまで直通するシャトルエレベーターがあり、全員7Fで一度降り、セキュリティチェックをし、23Fより上にあるオフィスフロアに入ります。そのオフィスロビーとオフィスフロアを行き来するためのエレベーターのボタンがこれです。 ボタンが23Fから30Fまでしかなくて、下に大きく7Fのボタンがあるのは、そういったビルの構造からです。 私と同行したディレクター（26歳）は、打ち合わせが終わってオフィスフロアからオフィスロビーに帰る際に、操作ミスをしました。それも1度だけでありません。次の打ち合わせの帰りにもまったく同
Githubがデザインシステムを作るまでの道のり（前編）
Jerry Cao氏は、UXPinのコンテンツストラテジスト。プラットフォームのワイヤーフレーミングとプロトタイピングを行うためのアプリ内およびオンラインのコンテンツを開発しています。 Diana Mounter氏はGithubのプロダクトデザイナーおよびデザインシステムのリーダーです。 デザインと開発において15年近いキャリアをもつ彼女は、Etsyでシニアデザイナーを務めた後、2015年末にGithubのチームに参加しました。 私たちはこのインタビューで彼女に、デザインシステムにおけるベストプラクティスと、デザインシステムの作成・保守の経験から学んだ教訓について聞きました。このインタビューは、動画で見ることもできます。 また、デザインシステムの利点やプロセスについてもっと知りたければ、無料のeブック『Why Build a Design System？』をダウンロードしてください。 Gi
デザイン言語システムを入れたらコミュニケーションコストがぐっと下がった話〜メドレー TechLunch〜 | MEDLEY Developer Portal
2017-08-03デザイン言語システムを入れたらコミュニケーションコストがぐっと下がった話〜メドレー TechLunch〜ビールが美味しい季節ですね！ 最近飲みすぎて嫁に叱られて、飲み会自粛中のデザイナー・マエダです。 メドレーでは TechLunch という社内勉強会を実施しているのですが、デザインについて私も発表する機会をいただきましたので、その内容を紹介させていただきます。テーマは「DLS の導入について」です。発表資料は記事の最後をご覧ください。 DLS（デザイン言語システム）とはDLS とは DesignLanguageSystem の略で、すごい単純にいえばデザインガイドラインみたいにUI に一貫性をもたせるため、配色やレイアウト、タイポグラフィやマージンなどのルールを策定するものです。 私が主に担当しているオンライン診療アプリ「CLINICS」は、iOS、Android、W
コンテンツモデルからデザインシステムを作り出す
コンテンツモデルは平等ではないサイトの構造や配信経路を把握するために、早期の段階でコンテンツモデルの作成が必要になります。サイトマップのような全体構造ではなく、画面ひとつひとつにあるコンテンツが何かを小さな要素まで切り取って整理することで、以下の課題が発見しやすくなります。 サイトを横断して表示されるコンテンツの形状と種類サイト外での見せ方と必要な情報（ソーシャルメディアなど）ユーザーから見えないが必要な情報（メタデータなど）CMS への格納の仕方（すべて本文は好ましくない）ページという概念から一度切り離してコンテンツについて考えるのがコンテンツモデルの良いところですが、不動産サイト、eコマースといった複雑なサイトだと、コンテンツモデルを作るのは難しくなります。まずブログのような「記事」というひとつのコンテンツタイプしかないものから練習すると良いでしょう。 例えば、WordPress や
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Pairsのデザインシステムを運用してみて。デザイナー視点のツール編🛠 - eureka design
フェーズに応じて育てるデザインシステム
TechCrunch