デザインシステムにおけるタイポグラフィーの試行錯誤 - DMM inside
PHPerKaigi 2024に「ゴールド」「T-SHIRT」スポンサーとして協賛！ PHPでQuineに挑戦してみた in PHPerチャレンジ企画
PHPerKaigi 2024に「ゴールド」「T-SHIRT」スポンサーとして協賛！ PHPでQuineに挑戦してみた in PHPerチャレンジ企画
こんにちは、 @mugi_uno です。 Misocaがサービスローンチされたのは 2011年です。実は2021年は10年目ということで何気に節目の年だったりします。 10年もあれば世の中的にもさまざまな技術変遷があり、Misocaもその波に乗っていけるよう、日々改善を繰り返してきました。 というわけで今回は、私自身がフロントエンド側の作業を多くやってきたこともあり「この10年間でMisocaのアーキテクチャがどのように変わってきたのか？」をフロントエンド側に焦点を絞って振り返ってみたいと思います。 ※ 意思決定に関する資料が無いものも存在するため、一部は情報に基づく推察になる点をご承知おきください。 年表 いきなりですが、ざっくり年表を書いてみました。 上部の黄色いラインは、フロントエンドに大きい影響を与えたMisocaの機能です。 これをもとに、サービスローンチから順を追って見てみます
A collection of identity style guides from around the worldSee the grids, layouts, and details designers include in brand identity style guides for clients worldwide. Browsing identity style guides helps me learn what to include for my clients, so I collated a number of samples for reference. I hope you find the resource helpful, too. Audi CI Belfast brand identity guidelines Berkeley brand identi
はじめに PDTで10/23 - 10/25に開催されたReact Conf 2019に参加してきたので、その参加レポートです。 筆者の英語力が頼りないため、内容の正確性に保証はありません。また、人名はすべて敬称略です。 ここに書ききれなかった内容については、お会いしたときに酒の肴として聞いてください。 参加した経緯 CFP募集してたから応募した 採択されなかったけど、おまけで抽選免除でチケット購入できる案内がきた せっかくだし、自前でチケット買って行くことにした なんやかんやで10/11のTSConfも行くことにした どうしてこうなったんだろう🤔 ちなみに、時系列的にはUSに3週間弱滞在してたうちの第三部です。 第一部TSConf編と第二部Los Angeles編は近いうちに書きます。 参考リンク conf.reactjs.org www.youtube.com www.youtube
render React components to Sketch; tailor-made for design systems Quick-start 🏃 First, make sure you have installed Sketch version 50+, & a recent npm. Open a new Sketch file, then in a terminal: git clone https://github.com/airbnb/react-sketchapp.git cd react-sketchapp/examples/basic-setup && npm install npm run render Next, check out some more examples! Why?! Managing the assets of design syst
iOSDC2021登壇資料、スライドのまとめです。 Twitter等で見つけ次第掲載しますが、もし資料を見かけた方or資料を公開した登壇者の方がいらっしゃいましたら、コメント等でお声がけください。 スライドや資料のリンクが見つかった場合はタイトルにリンクをつけてありますので、タイトルがリンクになっていない場合はまだ資料が見つかっていないものになります。 Day 0 Track A 大規模リファクタリングの極意 forteeのリンク SwiftUIで使ったアプリを1年運用してみてわかったこと forteeのリンク Initiatives in Rakuma iOS App forteeのリンク SwiftUI で実プロダクトを音速リリースした話 forteeのリンク Track B agoraを使ってライブ配信機能を1ヶ月半でリリースした話 forteeのリンク A Swift Stack
デザインシステム浸透の取り組み：目安箱の運用とデザインシステム株主総会 - enechain Tech Blog
はじめに なぜ民主化か 目安箱の設置と対応件数 デザインシステム株主総会の開催 第一回：前期の事業報告と今期の事業計画について 第二回：プロダクトAで先行して実装した新・共通UIと今取り組むべきアクセシビリティ 第三回：プロダクトBで取り組んでいたカレンダーコンポーネントのFIXまでのプロセス振り返りとユーザー像をどうイメージするか デザインシステム名称の全社募集 まとめ はじめに enechainプロダクトデザインデスクのマネージャーの近藤（@add_kk）です。 1つ前のtakurintonの記事『デザインシステムの開発者体験向上の試み』に続いて、弊社のデザインシステムでの取り組みについて紹介させていただきます。 enechainでは会社全体のOKR *1 に基づき、4ヶ月サイクルで各組織がOKRを立てています。デザインシステムチームは専任メンバーがいない有志のチームであるため、OKR
Government Design Principles
1. Start with user needs Service design starts with identifying user needs. If you don’t know what the user needs are, you won’t build the right thing. Do research, analyse data, talk to users. Don’t make assumptions. Have empathy for users, and remember that what they ask for isn’t always what they need. Why we care more about effectiveness than efficiency or satisfaction by John Waterworth 10 ti
DBDesigner 4
General Information - What is DBDesigner 4? DBDesigner 4 is a visual database design system that integrates database design, modeling, creation and maintenance into a single, seamless environment. It combines professional features and a clear and simple user interface to offer the most efficient way to handle your databases. DBDesigner 4 compares to products like Oracle's Designer�, IBM's Rational
Figma for VS Code - Visual Studio Marketplace
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter. Streamline your design to code workflow with Figma for VS Code Figma for VS Code lets you navigate and inspect design files, collaborate with designers, track changes, and speed up implementation - all without leaving your text editor. Improve developer productivity by eliminating the context switching and busy work
今回は、無料ダウンロードできる高品質HTML5/CSS3テンプレート素材をまとめてご紹介します。どの素材も高品質なだけでなく、テキストエディタで編集しやすい仕様となっており、サイト制作が捗るアイテムが揃っています。 ここで紹介するHTMLテンプレートは、どれも無料で、Bootstrap 4フレームワークを中心にした、デザイントレンドもうまく取り込んだ、あらゆるウェブデザイン案件に対応してくれます。2018年のウェブデザイントレンドもうまく取り入れているので、サイト開発のデザインやレイアウトの参考にもいかがでしょう。 レイアウトで選ぶウェブデザイン・HTMLテンプレート厳選40個総まとめ 2018年版 Argon Design System Bootstrap 4フレームワークを利用し、100種類を超える独自コンポーネントを揃えたテンプレート。ウェブサイトに必要なパーツはもちろん、サンプルペ
サイボウズOfficeのフロントエンド刷新（DOGOプロジェクト) をやってます！ - Cybozu Inside Out | サイボウズエンジニアのブログ
DOGOプロジェクトのマスコット こんにちは。サイボウズOffice開発チームの西谷です。 昨年より、私たちは”DOGO”と銘打ち、サイボウズOfficeのフロントエンド部分をNext.js App Routerを用いて刷新しています。 本ブログではこの刷新プロジェクトの概要やこれまでの取り組みについてご紹介します。 プロジェクト発足の背景 刷新の方針 刷新後のサイボウズOfficeを支える技術 アプリケーションフレームワーク モニタリング テスト インフラ CI・CD これまでの取り組み Next.js側で画面のルーティングを制御する リリースパイプラインの構築 全画面共通部分の実装 今後の取り組み メンバー募集しています！ プロジェクト発足の背景 サイボウズOfficeはこれまで、パッケージソフトウェアとしていくつものバージョンを重ね、クラウドサービスへ転身し、時代に合わせて様々な形に
Carbon Design System
Carbon is IBM’s open source design system for products and digital experiences. With the IBM Design Language as its foundation, the system consists of working code, design tools and resources, human interface guidelines, and a vibrant community of contributors.
ZackはUXPinのUXデザインライターです。彼の仕事はUX Magやawwwards、 Speckyboyで出版されています。 デザインシステム、パターンライブラリ、スタイルガイドという言葉が、同じような意味で使われていることがあります。 これら３つのコンセプトには繋がりはあれども、決して同じものではありません。 この記事では、定義を明確にして、それらがどのように繋がっているかを視覚化します。そしてデザインシステムを構築するための、主なガイドラインについて紹介します。 デザインシステムの定義 まず直接の定義を理解しましょう。そうすることで、これらの概念がどのように繋がっているかを学び、より良い製品作りに活用する方法を考えることができます。 デザインシステム―デザインの基準やドキュメント、原則、および基準を達成するためのUIパターンやコードコンポーネントなどのツールキットを、すべて含んだ
React Spectrum Libraries A collection of libraries and tools that help you build adaptive, accessible, and robust user experiences. GitHub React SpectrumA React implementation of Spectrum, Adobe’s design system. Spectrum provides adaptive, accessible, and cohesive experiences for all Adobe applications. Explore React Spectrum React AriaA library of unstyled React components and hooks that helps yo
Lingo: Digital Asset Library, Design System Manager & More
Lingo is the visual home for your brand. It is designed to help teams organize, manage and share their assets in one place.
デザインシステムの目的を考える｜seya
デザインシステムの目的とは？ と問われるとあなたはどんな風に答えるでしょうか？ おそらく「ユーザに一貫性のある体験を提供するため」「デザイン資産を再利用できるようにして生産性を上げるため」そんな答えが一般的だと思います。私もそんな感じで捉えていましたし、間違いなくそれらはデザインシステムの効能だと思います。 が、細かいところをよくよく考えると「一貫性とは具体的にどこが一貫していることを指すのか」「一貫性を優先させることによってユーザの不利益になるシーンもあるがそれは本末転倒な結果なのではないのか」「生産性というのは "ユーザ体験の向上" を念頭に置いた場合であって、それが必要ないならシステム化しないで開発した方が速いのではないか」 そんな数々の疑問が私の頭に湧き上がり夜も8時間しか眠れなくなりました。 猫と寝る人間という訳でデザインシステムの目的をなるべく具体的に検討した軌跡を記したのがこ
[レポート] デザインシステムにおけるフロントエンド #linedevday_report | DevelopersIO
オハコンバンニチワ CX事業本部の清田です。 LINE DEVELOPER DAY 2019 の DAY2 に参加してきましたー。自分の中で注目している DesignSystem についてとりあげている 「 デザインシステムにおけるフロントエンド 」セッションがあったので参加しつつレポートをご紹介できればと思います。 概要 2019年11月20日（水）・21日（木）にグランドニッコー東京 台場でLINEのデベロッパーカンファレンス「LINE DEVELOPER DAY 2019」が開催されました。 タイトル デザインシステムにおけるフロントエンド [Front-End in Design System] スピーカー 岡崎 晶彦 氏 [LINE Front-end Standardizationチーム Front-end Engineer] セッション概要 LINEは、クライアントアプリ/W
![[レポート] デザインシステムにおけるフロントエンド #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)
Security is important. Nobody wants to be the person advocating for less security. So nobody wants to say it. But somebody has to say it. So I guess I’ll say it. The way npm audit works is broken. Its rollout as a default after every npm install was rushed, inconsiderate, and inadequate for the front-end tooling. Have you heard the story about the boy who cried wolf? Spoiler alert: the wolf eats t
Greetings everyone! With the recent launch of our Early Access preview of 1Password 8 on macOS I wanted to take a few minutes to pull back the curtain on this software development project that is over two years in the making. Before we get into that, though, I think a bit of backstory is warranted. 1Password 7, 6, 5, 4… With a fifteen year history, 1Password has seen a lot of changes across all ou
Figmaは、ブラウザ上から利用できるデザインアプリですが、特にチームでの共同デザインプロジェクトに最適なツールと言えます。 さらに、「こんな機能があればいいのに」というときも、プラグインを利用することで、自分好みにアプリの使いやすさをカスタマイズできる点も人気の理由のひとつです。 今回は、何千とあるプラグインの中から、実際にインストールしてみたWeb制作の作業効率がアップする便利なFigmaプラグインやツールをまとめてご紹介します。 自分だけの「最強」Figma、はじめませんか。 Figmaって何？ Figmaには、本格的なイラストも描くことができるベクターツールをはじめ、ウェブサイトのプロトタイプ作成機能、完成したデザインをWeb用HTMLに変換など、デザインプロジェクト全体を通して必要なツールが揃います。 Figmaはブラウザ上でデザインを行うため、共同作業によるリアルタイムのコラボ
Google Developers Blog: Flutter 1.0: Google’s Portable UI Toolkit
Share Facebook Twitter LinkedIn Mail Posted by Tim Sneath, Group Product Manager for Flutter Today, at Flutter Live, we're announcing Flutter 1.0, the first stable release of Google's UI toolkit for creating beautiful, native experiences for iOS and Android from a single codebase. Cross-platform mobile development today is full of compromise. Developers are forced to choose between either building
ARR100億円を超えたSmartHRの新CEOが、非公式チームで自らもコードを書き、自社プラットフォーム上でプロダクトを動かし、あわよくば販売しようとしている話 - 宮田昇始のブログ
Nstock CEO / SmartHR 創業者の宮田です。 「SmartHR はもうスタートアップではない」 創業者の私は、ここ1〜2年そう考えていました。 しかし、それは誤りでした。SmartHR は規模こそ大きくなりましたが、そのカルチャーは今もスタートアップそのものでした。いえ、もしかしたら昔よりもスタートアップしているかもしれません。 新 CEO の芹澤さんが3人だけの非公式チームをつくり、自らもコードを書き、社内課題を解決するプロダクトを自社プラットフォーム上で動かしている。 プロダクトはその出来の良さから、社内で自然と流行り、なんなら製品化して顧客に販売することも考えはじめています。 昨日のブログで芹澤さんはあえて「新しい大企業」という言葉を使ってはいましたが、こんなにスタートアップらしいエピソードは、創業期の SmartHR にもあまりなかったような気がします。 今回は、S
Collections WWDC23 Tech Talks WWDC22 WWDC21 WWDC 2020 WWDC 2019 WWDC 2018 WWDC 2017 WWDC 2016 WWDC 2015 WWDC 2014 Platforms iOS macOS tvOS visionOS watchOS Subtitles Arabic English French German Japanese Korean Russian Simplified Chinese Spanish WWDC23 14:26 Explore the USD ecosystem WWDC23 iOS, macOS Discover the latest updates to Universal Scene Description (USD) on Apple platforms and learn how
A design system only comes to life when it’s used to create meaningful experiences. Last year, Google introduced the Material Design Awards to recognize best-in-class achievements in employing Material Design. This effort extends beyond our direct team as well—earlier this year, at Google I/O 2016, Robinhood was presented with the Google Play Award for Best Use of Material Design. With so much exc
Replacing Sass · Discussion #44 · Shopify/foundational-design-system-proto
We’ve noticed several growing pain points to using Sass at scale. Some of these apply to Polaris and teams using Polaris, while others impact development across Shopify. In Polaris, the original Sass variables, functions, and mixins are creating a burden with newer technologies that have been introduced: CSS variables and JS utilities. This has led to added overhead in how these technology layers
私の周りでも、Figmaを使用する人がだいぶ増えてきました。 Figmaでデザインする時に役立つ、便利なテクニックを紹介します。Figmaでの日常的な作業から、デザインシステムや巨大なデザインファイルを扱う場合に作業効率がアップします。 9 Figma Design System Tips. by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. 一括でカラーを変更する場合は、選択色を使用する 2. この便利なショートカットで、レイヤーを整理できます 3. テキストのスタイルを見つけるには、検索を使用する 4. カラースタイルをすばやくナビゲートするには、リストにする 5. レイヤーをすばやくナビゲートするには、ショートカットを使用する 6. コンポーネントの交換は、このショートカットが便利
Microsoftがシアトルで開催中の開発者会議「Build 2017」の中で、クロスプラットフォーム向けのデザインシステム「Fluent Design System」を発表しました。 Fluent Design is Microsoft's new Metro UI for Windows and more - The Verge https://www.theverge.com/2017/5/11/15615812/microsoft-fluent-design-system-project-neon-features The new Windows UI: Microsoft Fluent Design System | Ars Technica UK https://arstechnica.co.uk/information-technology/2017/05/windows-u
デザインシステムが作り出す明文化への道
明文化をテーマにしていた2016年 今年の初めデザイン SDK のようなものが欲しいという記事を書きました。開発者から提案されているフロントエンド寄りのスタイルガイドはコードの品質管理と、見た目の再現性を高める上で有効な手段です。しかし、これだとコードを理解していることがスタイルガイドの利用・関与の大前提になります。すべてのデザインがコードから始まるとは限らないですし、デザイナーであれば Sketch や Photoshop といった日々使うツールを活用して最低限の品質を保つ手段が必要になります。 共通言語を作っていく。 これは文字通り言葉だけでなく、UI を始めた視覚的な部分など、今まで好みや感覚で済ませていたこともきちんと言葉にすることも指しています。デザイン批評も共通言語を作り上げるために必要なプロセスです。 建築家クリストファー・アレグザンダーの著書「Pattern Languag
Microsoft、Googleの「マテリアルデザイン」のような「Fluent Design System」発表
米Microsoftは5月11日（現地時間）、年次開発者会議「Build 2017」でWindows 10の新しいデザインシステム「Fluent Design System」を発表した。 UWP（Universal Windows Platform）のデザインとユーザーインタフェース（UI）構築のための指針や基礎的構成要素を示す、米GoogleのAndroidのための「マテリアルデザイン」に相当するシステムだ。 「fluent」という単語は、流れるような、雄弁な、緩やかな、というような意味を持つ。専用サイトのサンプルを見ると、現在のWindows 10のデザインよりも立体的だったり、光を使ったり、さまざまなテクスチャを使ったりしている。
GitHub’s CSS
I’m always interested in the development details of other products, particularly their styleguides and approach to CSS. Given my penchant for the otherwise inane CSS details, I decided to write a bit about GitHub’s CSS. Contents Given the length, here’s a helpful table of contents. Quick facts Preprocessor Architecture Linting Two bundles Included via Sprockets Performance Documentation Primer Ref
こんにちは、今年1年でキーボードを3回買い替えたUXライターのkunyです。今は、NiZのATOM 66を使っています。 SmartHRでは、textlintに独自のルールプリセットを追加して利用しています。textlintは4人で運用していますが、自分もメンバーの1人です。この記事では、textlintの便利さを世の中に伝えたく、textlintの利用シーンや利用者の生の声をご紹介します。 ※この記事は、2021年SmartHRアドベントカレンダーの13日目の記事です。 textlintの利用シーン 開発現場において、各自のローカル環境・GitHubと連携したCircleCIで文言の正誤を判定しています。 ローカル環境では、エディター上でコマンドを実行すると、「エラー内容」と「正しい表現」がわかります。コマンドで「正しい表現」に置き換えることもできますが、前後の文脈を確認しながら文言を修
You Don’t Need A UI Framework — Smashing Magazine
Developers often reach for UI frameworks like Bootstrap or Material UI, hoping that they’ll save a bunch of time and quickly build a professional-looking app. Unfortunately, things rarely work out this way. Let’s talk about it. Every now and then, someone will ask for my recommendations on UI frameworks. By “UI framework”, I mean any third-party package that is focused on providing styled UI compo
デザイン組織の成熟度に合わせたデザインシステム提案
難易度が高過ぎな海外事例 Web で公開されているデザインシステムは、インスピレーションにはなりますが、最初に目指すものとして相応しくない場合があります。好例として紹介される Salesforce の Lightning Design System が最初に GItHub にデプロイされたのが 2015年の9月。プロジェクトが始まったのはもっと前だと思うので 4 年くらい続けているはずです。Salesforce で働くデザイナーの数は分かりませんが、 LinkedIn で調べると 300 名以上のデザイナーが検索結果に表示されます。 少なくとも 300 名のデザイナーが働いている組織が 4 年くらいかけて作っているものと同等なものは作れません。欧米の事例は「自分たちでツールを作ることもあります」と言うような大規模組織が多いことから、参考にならない場合があります。 ひとまず原則や色から始める
GitHub - aws/aws-northstar: NorthStar is an open source design system with reusable React components for rapidly prototyping intuitive, meaningful and accessible user experience. It simplifies your work and ensures consistent, predictable user experience
NorthStar is an open source design system with reusable React components for rapidly prototyping intuitive, meaningful and accessible user experience. It simplifies your work and ensures consistent, predictable user experience at scale for your customers. With NorthStar, you can focus on innovation and do more with less.
Web Design System: Migrating Web Components To React | Mercari Engineering
This post is for Day 8 of Mercari Advent Calendar 2022, brought to you by Williams Kwan from Mercari Core team and Faisal Rahman from the Mercari Architect team. Intro Mercari internal design systems power the UI in Mercari web apps. It allows Frontend engineers to implement UI changes quickly by providing UI building blocks. The design system is currently built using Web Components but we are in
Seven months since setting out to refresh the Mozilla brand experience, we’ve reached the summit. Thousands of emails, hundreds of meetings, dozens of concepts, and three rounds of research later, we have something to share. If you’re just joining this process, you can get oriented here and here. At the core of this project is the need for Mozilla’s purpose and brand to be better understood by mor
PIXIV Design System 2021 の発表をしました（後編） #pixivdevmeetup - pixiv inside
こんにちは。フロントエンドエンジニアのpnlyです。 こちらの記事は前後編に分かれた記事となっておりますので、前編の記事「PIXIV Design System 2021 の発表をしました（前編）」もあわせてご覧いただけるとよりお楽しみいただけると思います。 前編では、デザインシステムを作ろうとして試行錯誤したエピソード、そして出来上がった設計思想についてお話しました。そしてこの後編では、その思想をどのようにして実現したのかについて具体的な実装をご紹介します。 デザインシステムの実装 "pixiv-elements" 前回の記事で出てきました"デザインシステムの三層構造"の実装は一つのモノリポジトリで管理されています。ガイドラインの根本となる定数以外にも、その定数をより利用しやすくするためのユーティリティや型定義、CIスクリプト、Storybookなどのドキュメントなど、デザインガイドライ
From today, Mercari has a bold, inclusive new look for the UK and a new design system you can see live on iPhone and Android. We think it’s kind of a big deal. Started in Japan now we’re hereLet’s rewind 12 months. Mercari, the number one marketplace in Japan, lands in London along with the red box that is its iconic logo, eager to be picked up at baggage claim and introduce itself to the UK. Make
チェックボックスの indeterminate 状態は将来多分なくなるdate2024.3.14(Thu.)tagsDesignFrontend 近年お手本にしがちなデジタル庁の Design System では定義がされていませんでしたが、「チェックボックスの indeterminate 状態」について考えたところ、多分将来的に無くなるんだろうなと予想を立てました。 第三の状態: indeterminateチェックボックスを使ったフォームが入れ子のとき、子が全て選択されていないことを示す表現として indeterminate が使われることがあります。 基本的にはチェックされているかいないかを表す checked 属性の true false を使いますが、別の属性として indeterminate (未決定状態)属性 の true か false があるため、トライステートとなります。
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Misocaフロントエンドの歴史と未来 - 弥生開発者ブログ
Brand identity style guides | Logo Design Love
React Conf 2019に参加した話 - sasurau4のブログ
Introduction · react-sketchapp
iOSDC 2021セッション資料まとめ - Qiita
レイアウトで選ぶWebデザイン・HTMLテンプレート40個総まとめ 2018年版 - PhotoshopVIP
デザインシステム、パターンライブラリ、スタイルガイドそれぞれの定義と違い
React Spectrum Libraries
npm audit: Broken by Design — overreacted
1Password 8: The Story So Far | 1Password
Figmaを最強デザインツールにする便利な無料プラグイン、ツールまとめ
All Videos - Videos - Apple Developer
Material Design Awards 2016 - Library - Google Design
Figmaでデザインする時に作業効率がアップする便利なテクニックのまとめ
Microsoftがより優れたデザインのアプリを開発するための「Fluent Design System」を発表
textlintプロジェクトの現在地 - SmartHR Tech Blog
Arrival – Mozilla Open Design
Mercari UK’s New Look & Design System
チェックボックスの indeterminate 状態は将来多分なくなる - feb19