Intro 「議論だけ」のカンファレンスを、長いこと開催してきた。 個人的には好きなので、他にもあったらいいと思っているが、そういうカンファレンスは他に見ない。 カンファレンス自体を、筆者のような個人が手弁当でやれるのは、もう最後かもしれないと今回ひしひしと感じたので、これまでどうやってきたのかを残しておくことにする。 「議論」だけ 特に日本では、勉強会やカンファレンスは、「スライドの発表会」形式として定着している。 これは、絞られたテーマについて、まとまった形で聴くことができ、資料も後で共有できる点でメリットはある。 しかし、全部がそうである必要はないのでは? とずっと思っていた。 特に懇親会では、雑に集まって、雑に議論が始まり、雑に盛り上がって、勉強になる上に単純に楽しいという経験をした人も少なくないと思う。 スライドで発表する場合は、スライドに収まる話しか出てこない。 30 分しか枠
アクセシビリティを普段の開発に定着させるためにやったこと #STORESアドカレ - STORES Product Blog
STORES Advent Calendar 2022 の 24日目の記事です。 こんにちは。業務委託で STORES の開発をしている @inouetakuya です。 昨年のアドベントカレンダーでも アクセシビリティについての記事 を投稿し、そのなかで、 hey もアクセシビリティの取り組みはまだ始まったばかりで、目標としている「普段の開発に定着させる」というところまでの道のりは遠いですが、2022年も前に進めていく所存です。 と書きました。 今回は続編として、今年 2022年に、アクセシビリティを普段の開発に定着させるために行った取り組みを紹介します。 2021年のおさらい - 学習と実践 2022年のスタート地点がどのような感じだったかをお伝えするために、2021年の取り組みにも触れておきます。 2021年は STORES にとってアクセシビリティ元年とも呼べる年で、アクセシビリテ
React Aria
Bring your own styles. React Aria is style-free out of the box, allowing you to build custom designs to fit your application or design system using any styling and animation solution. Each component is broken down into individual parts with built-in states, render props, and slots that make styling a breeze. Learn more <DatePicker> <Label>Date Planted</Label> <Group> <DateInput> {segment => <DateS
JSer.info #601 - Node.js 18.6.0がリリースされました。 Node v18.6.0 (Current) | Node.js Node.js 18.6.0ではexperimentalで実装されている--loaderの挙動の変更が含まれています。 複数の--loaderを指定した場合の順番を変更。またloaderの実装はshortCircuitを返すのが必須となっています。 そのため、すでに公開されているloaderが動かなくなっている場合があります。 詳しくは、次のIssueと記事で解説されています。 esm: add chaining to loaders by JakobJingleheimer · Pull Request #42623 · nodejs/node Custom ESM loaders: Who, what, when, where, why
Figmaのデザインシステム UI2 を分析してみる - DESIGN JOURNAL - 株式会社モンスターラボ
今回はコミュニティの中でFigma開発チームが公開しているデザインシステム「UI2」を分析してみました。さすがFigmaの開発チームが作っているFigmaデータだけあってとてもよく作られており、観察すればするほど面白い発見があります。 ファイルのページ構成 まず最初にファイルのページ構成を確認しておきましょう。構成はとてもシンプルでわずか3ページ。1ページ目の「Main」にガイドラインとコンポーネント集などほぼ全ての情報が集約されています。あとは2ページ目の「Templates & Extras」にコンポーネントを組み合わせた画面全体の構成例があり、3ページ目の「Cover」にFigmaファイルのカバー写真という形です。
If you’re new to creating color palettes for digital spaces, check out my previous article, Color for brand designers working with product teams, for tips on selecting your brand colors. 👉🏻 Follow along in Figma: Community File What is a color ramp?A color ramp, also known as a color scale, is a visual representation of how colors transition from light to dark in a smooth and continuous manner.
GitHub - sakofchit/system.css: A design system for building retro Apple interfaces
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Hey kids, you ready for me to tell you all about this newfangled thing called Bootstrap? Well get un-ready, ‘cause I’d never do that to you. It’s not that Bootstrap isn’t great, it’s just that if you work in web design, and you’ve been paying any attention at all, you already know about it. And if you don’t… well… welcome to the industry! We have some articles you may want to check out. For everyo
Perfume「Reframe 2019」
「Reframe 2019」は通常のライブとは異なり、特殊な演出を使用いたします。 本公演をよりお楽しみいただくため、公演当日は下記ご注意をよくお読みになった上で、ご来場ください。 開演中は携帯電話・ポケットwifiなど電波を発する機器の電源は必ずお切りください。 電波の影響で予定している演出が実施できなくなる可能性がございます。ご理解・ご協⼒のほど、よろしくお願いいたします。 本公演は着席でのご観覧をお願いしております。開演中は、ご⾃分のお座席にお座りのままご観覧ください。 場内でのサイリウム・ルミカライトなどの光り物の使⽤はご遠慮ください。 この先の公演をお待ちのお客様のためにも、演出・内容等のインターネット上への書き込みはお控えください。 また、「Reframe 2019」ではアンケートを実施しています。 ご⼊場時にお配りしますアンケート(WEBアンケートもご用意しております)にもご
Figma Community file - デジタル庁サービスデザインユニットでは、一貫したデザインや操作性でウェブサイトやアプリを提供するための仕組み「デザインシステム」の構築に取り組んでいます。どなたでも構築中のデザインシステムのデザインデータを閲覧することができます。 デザインシステム構築の目的の詳細はデジタル庁ウェブサイトをご覧ください。 更新履歴 2023.5.31 入力フォーム構築時の指針となるテンプレートを追加しましたカラー、タイポグラフィ、テキスト入力などを更新しました 2022.12.28 リンクテキスト、テキストエリアのガイドを更新しました 2022.11.14 軽微な修正を行いましたアイコンを一部修正...
この雑記を書く問題意識は、Tailwind CSSに対して向けられている世の人々の不満が、Tailwind CSSがコミットしていることから外れた、お門違いの期待の押しつけになっているのではないかと感じるところにある。 ライブラリやフレームワーク、道具にはそれが作られた目的があり、果たそうとするコミットメントがある。その圏内において果たされていないコミットメントに対する不満は、それ自体の存在意義にかかわる意味を持つが、しかし利用者が一方的に寄せた期待が果たされないことに対する不満はそうではない。 念押しするまでもないと思うが、これはTailwind CSSに対して不満を向けるべきではないという話ではまったくない。むしろ、その不満の下敷きとなっている Tailwind CSS への期待が Tailwind CSS 自体によってコミットされたものでないとしたら、不満を向けてもしょうがないのでは
Markuplint - An HTML linter for all markup developers. | Markuplint
Conformance checkingThe markup needs to written valid code. This is important to keep the promise of the standards that do not break webpages through each user agent. Markuplint can conformance checking given the specs that are HTML Standard, WAI-ARIA, and more. On Your House RulesYou may have the house rules on your project or your organization. You can check based on your policy or your manageme
CSSスタイルガイドをStorybook for HTMLに移行した話 - RAKSUL TechBlog
こんにちは。印刷のラクスルでフロントエンドを担当している菅野です。 2週連続の投稿となります。(前回の記事: Jestを実行した時に、同時にESlintを走らせてみる) 現在、印刷サービスのフロントエンドエンジニアとデザイナーでデザインシステムの構築・整備を行っています。 その一環として、運用中のCSSスタイルガイドをStorybookに移行しました。 今回は、移行を決めた動機や導入時に得られた知見、今後の運用についてご紹介したいと思います。 [caption id="attachment_4313" align="alignnone" width="1024"] 運用中のStorybookの画面[/caption] これまでのスタイルガイドにおける課題感 該当プロジェクト(印刷のラクスル)ではPostCSSを使用しており、社内でデザインのコンポーネント一覧を共有するために、postcss
Web24 (2021/05/07 18:00〜)
Motivation イベントができなくなって久しい でもそろそろ Web について議論する場がほしい どうせオンラインでしかできないなら、オンラインでしかできないイベントにしよう オフラインカンファレンスのように 3 トラックなどでやるのは難しい(面倒くさい) 縦につないでやればいい 移動もないし、好きなときに好きなところを見れば良い GW どうせすることがない みんなが自粛する最後の GW になるかも 24h あればどこかは見れる オンラインで 24h イベントやろう Arrange テーマごとに 1.5h のセッションでたっぷり議論 全員が登壇者兼運営 登壇者の発言は組織のものではなく個人のもの 資料、画面共有、打ち合わせ、台本なし お金を動かすことはしない チケット、グッズなどの作成 スポンサー、協賛をつける Zoom + Youtube Live Zoom に 登壇者が次々に入っ
A tale of politeness
Here are my 2 cents on “one of many” experiences about working abroad as a foreigner in Japan. As my profile is public and I don’t hide my name, I see no point in hiding things which can be googled but less obvious details will be anonymized. Edit: someone made a reddit thread about it. A coin is attractiveI joined LINE in May 2018. It’s funny you know, because I’d never had expected to work in Ja
よりシンプルにより明るくリニューアルしました！ LINEは主要4か国だけでも利用者が1億6,700万人を超えるサービスとなり、生まれ変わったLINEの姿を初めて目にするユーザーの反応はどうだろうか？ …というドキドキする気持ちを抱えていました。新しいLINEのデザインに対する私たちの思いや、どのような過程でどんなクリエイティブの成果物を制作したのか、見ていきましょう！ 2020.12.14 FacebookTwitterLineLine コミュニケーションアプリから進化するLINE。Life on LINE！ LINEは2011年にコミュニケーションアプリとしてスタートしましたが、2020年現在ではマンガやMUSICなどのエンターテイメント系のサービスや、LINE Pay、LINE証券などフィンテック系のサービス等、様々な領域でLINEのファミリーサービスが追加されています。 私たちのビ
Design Tokens Format Module Draft Community Group Report 24 July 2023 Latest published version: https://tr.designtokens.org/format/ Editors: Daniel Banks Donna Vitan James Nash Kevin Powell Louis Chenais Feedback: GitHub design-tokens/community-group (pull requests, new issue, open issues) Abstract This document describes the technical specification for a file format to exchange design tokens betw
デザインシステムとは？ 簡単にいうと、デザインシステムは、デザインに関することを体系化・構造化したものです。 具体的には、デザインの目的・原則やデザインの基準を定めるVIガイドライン、UIパターンやコンポーネント、ライブラリなどの再利用できるものが含まれます。 そのため、デザインシステムを導入することで、 1つのプロダクトで、200色の白が存在すること や 見た目、機能が同じものを何個も存在することがなくなるため、 大規模なプロダクトやサービスをチームで開発・運用していくのが効率的になります。 また、デザインとコードの両方で一貫性のある見た目にもできるため、 デザインの苦手なエンジニアでも、簡単に、デザインの意図に沿ったUIやクオリティの担保されたUIを作成することができます。 知っておきたいデザインシステム ○ 国内のデザインシステム 国内の企業・組織が公開しているデザインシステムを10
XP.css
A design system for building faithful recreations of old UIs. Intro XP.css is an extention of 98.css. A CSS library for building interfaces that look like old UIs. See XP.css on GitHub See 98.css on GitHub This library relies on the usage of semantic HTML. To make a button, you'll need to use a <button>. Input elements require labels. Icon buttons rely on aria-label. This page will guide you throu
はじめにこのnoteで紹介するカラーシステム設計プロセスは、多くの人にとってはやりすぎで、役に立たない場合も多いです。 既存のカラーシステムやカラーシステムジェネレイターを利用するのが、最短かつ最適ルートだと思います。 デザインシステムやカラーシステムは「プロダクトのためのプロダクト」なので、とある事業における一つの解である、という前提で読んでください。 今もまだ多くの課題を抱えたものではありますが、イベントなど様々な場面でカラーパレットに興味を持っていただける機会が多かったため、自分が知らない誰かの知見に助けられたように、微力ながらコミュニティに貢献するべく、未完の状態で状態でお見せすることにしました。 Framework by Figma登壇資料 後でFigma Communityにも掲載します シチュエーションにおける最適解繰り返しますが、今回説明するような煩雑で、複雑で、面倒な、プ
Most inputs have something in common — they are happiest with a companion label! And the happiness doesn’t stop there. Forms with proper inputs and labels are much easier for people to use and that makes people happy too. A happy label and input pair In this post, I want to focus on situations where the lack of a semantic label and input combination makes it much harder for all sorts of people to
Pollen is a highly configurable, responsive library of style-agnostic CSS variables for your next design system. It lets you write faster, more consistent, and more maintainable styles. Made and maintained with ❤️ by the fine people at Bokeh.
Introducing Flutter 3
We’re delighted to announce the launch of Flutter 3 as part of the Google I/O keynote. Flutter 3 completes our roadmap from a mobile-centric to a multiplatform framework, with the availability of macOS and Linux desktop app support, along with improvements to Firebase integration, new productivity and performance features, and support for Apple Silicon. The journey to Flutter 3We started Flutter a
Welcome to the W3C design system - W3C Design System
This design system documents the styles, components and templates available to use on your website. Find out how to get started. How the front end assets (CSS and JavaScript) are organised and compiled is discussed below. ¶CSS The design system uses Sass - specifically the SCSS syntax) - which is compiled into CSS files. The CSS approach is heavily influenced by Andy Bell's CUBE CSS. This has some
March 2022 Update: Well the JIT is now the default way of managing Tailwind output generation, so that's cool. Unfortunately, Tailwind's purview has only grown in directions that are breathtaking in their weirdness. I remain as dubious of TW as ever, and in fact have started writing a course specifically designed to teach people how to switch away from Tailwind and use the best of today's "vanilla
繊細さんへ 辛口記事になる確率は 6% です ©いらすとや 難病患者が、毎年、恒例の継続申請をする時期になりました。 電車が遅延 私が病院に行く時に決まって、電車が大雨や事故などの理由で遅延するということが、過去に何度かありました。 今年も、家を出る１時間前に、電車が遅延していることがわかりました。 予約した時間までに病院に辿り着けるか予測できなかったので、念の為、病院に連絡を入れました。 一部区間だけ遅延していない鉄道会社を利用することで、危機は回避できました。 臨床調査個人票作成の依頼 ５月上旬、病院に行き、主治医に臨床調査個人票の作成を依頼しました。 去年と同じ病院に行った 医師がパソコンから入力すると書類作成できるので、手書きよりも手間がかからない 上記の理由から、今年は一週間もかからず、書類が出来上がりましたと、病院から連絡がありました。 オンライン化に関しては、京都府は、まだ始
The organization of space is key to every great design. Spatial systems, grids, and layouts provide rules that give your designs a consistent rhythm, constrain decision making, and help teams stay aligned. This foundational scaffolding is a requirement for all design systems. In this guide, we’ll walk through the basics of defining spatial base units, creating relationship rules with grids, and br
Svelteのコミュニティによるイベント「Svelte Summit」が2021/4/25(日)に開催されました。 前回は2020/10だったのでおよそ半年ぶりの開催となります。 イントロからはじまり、発表は5分〜30分と長短合わせて16セッション、間にパペットショーやクイズレクリエーションを挟み、最後はFAQ、およそ6時間超でした。 Youtubeでアーカイブを視聴することができます。 日本時間22:00開始だったので中々しんどかったですが、Svelte日本のDiscordでみんなで実況しながら楽しく見れました(それでも眠くて途中で離脱しましたが)。Svelte日本のDiscordに、Svelte-NodeGUIをテーマに発表されたJamie Birchさんご本人が登場されて解説してくださるサプライズがあったりとても刺激的でした。 他の方に興味を持ってもらえるように、改めてYoutube
The evolution of scalable CSSA deep dive into the problems with scaling CSS on large projects. Understand the evolution of CSS best practices. IntroductionHow we write and think about CSS has changed significantly since the web’s beginning. We’ve come a long way from table-based layouts, to responsive web design, and now into a new era of adaptive layouts powered by modern CSS features. Managing a
system.css
System.css A design system for building retro -inspired interfaces Intro System.css is a CSS library for building interfaces that resemble Apple's System OS which ran from 1984-1991. Design-wise, not much really changed from System 1 to System 6; however this library is based on System 6 as it was the final monochrome version of MacOS. Fortunately, this library does not use any JavaScript and is c
GitHub - geist-org/geist-ui: A design system for building modern websites and applications.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
ユーザーインターフェイス設計（UI設計）について思ったことや気付いたこと、教えていただいたことなど、自分用の思考振り返りメモです。Twitterへの投稿やノートのメモ書き、いただいた質問への回答、チームメンバーにお伝えしていることなど、繰り返し発信していると思ったことをまとめています。 目次の序盤にある項目ほどデザインについての考え方や情報設計など、全体像に関する内容です。終盤に向かうにつれてデザインやコンポーネント設計など、より細部の内容になっていきます。今後も気付いた点があれば追記していきます。 基礎部分のスライド資料「ユーザーインターフェイス設計の基礎を振り返る」（2023年1月22日追記） このページに記載した前半の情報設計の基礎について内容を抜粋したスライド資料を公開しました。 デザインの統一感、拡張性、耐久性 ユーザーインターフェイスのデザインや使用感が統一されているか？ ユー
Tailwind Starter Kit by Creative Tim | Free & Open Source Design System
A beautiful extension for TailwindCSS.Tailwind Starter Kit is Free and Open Source. It does not change or add any CSS to the already one from TailwindCSS. It features multiple HTML elements and it comes with dynamic components for ReactJS, Vue and Angular. Great for your awesome projectPutting together a page has never been easier than matching together pre-made components. From landing pages pres
オープンソースでクロスプラットフォーム対応のRSSリーダー「Fluent Reader」がMicrosoft/Mac App Storeでリリース。
オープンソースでクロスプラットフォーム対応のRSSリーダー「Fluent Reader」がMicrosoft/Mac App Storeでリリースされています。詳細は以下から。 Fluent Readerはカリフォルニア大学バークレー校でコンピューターサイエンスを学ぶHaoyuan Liuさんがオープンソースで開発しているRSSリーダーで、ElectronやReact、Fluent UIを利用しMacやWindows、Linuxのクロスプラットフォームに対応していますが、このFluent Reader for MacとWindowsがMac App StoreとMicrosoft Storeでリリースされています。 Fluent Reader is a modern, cross-platform, and open-source desktop RSS Reader. Features:
2022年現在、ユーザーインタフェースのデザインやその開発について語る上で「デザインシステム」はどのような組織においても話題に上がるトピックではないでしょうか。 かく言う私もデザインシステムに強い関心を持っており、業務にてデザインシステムの構築・維持に取り組んでいる他、過去には私が魅力的だと思うデザインシステムを紹介するブログ記事を執筆しました。 0. デザインシステムの導入における障壁昨今はデザインシステムを構築した事例や構築の方法論の共有も盛んとなっており、その強い話題性が起因して新たなデザインシステムが続々と誕生しています。話題になっているから・便利だから・品質を上げてくれるから・ユーザー体験が向上するからなど、導入の理由は組織・プロダクトに応じて多岐に渡ると思います。 上記の理由に加え、デザインシステムを構築する前に立ち止まって考えたいポイントが「投資対効果」です。 プロダクトに応
メルカリ全エンジニアが参加した1週間の「Mercari Hack Week」結果発表！受賞したのは？ #メルカリな日々 | mercan (メルカン)
メルカリ全エンジニアが参加した1週間の「Mercari Hack Week」結果発表！受賞したのは？ #メルカリな日々 こんにちは。Brand Management Teamのmayumineとsaimaruです！（今回の #メルカリな日々は合作でお届けします） メルカリでは先日、全エンジニアが通常業務から離れ、つくりたいもの、好きなものを1週間かけて取り組む「Mercari Hack Week」が初開催、その結果を発表するDemo Dayが行われました。 メルカリのエンジニアが1週間の自由開発時間が与えられると何を作り出すのか……？気になりますよね！ 今回はDemo Dayで発表された内容の一部をレポートします。 Demo Dayには、メルカリジャパンのCEOのtamosan（田面木）、CTOのsuguru（名村）、VPoEのkoresawa（是澤）も審査員としてフル参加し、#pj-ha
オーバーレイ ファクトシート
Webアクセシビリティ オーバーレイとは何ですか？オーバーレイは、Webサイトのアクセシビリティを向上させることを目的とした技術の総称です。サードパーティのソースコード（多くはJavaScript）を読み込み、フロントエンドコードを改善します。 アクセシビリティの向上を謳うWebサイトのアドオン製品は、1990年代後半に登場したReadspeakerやBrowsealoudに遡ります。これらは、インストールされたWebサイトにテキストの読み上げ機能を追加するものでした。 その後、そのようなソフトウェアに機能を追加した類似製品が、市場に出回るようになりました。それらは、読みやすさを向上させるために、ユーザーのニーズに基づき文字サイズや色などをコントロールするものです。 最近のオーバーレイ製品のなかには、支援技術からのアクセスのしやすさを妨げる問題を修正することを目的としているものがあります。
Airbnb’s Trip to Linaria
CSS is a critical component of every web application, and many solutions have evolved for how styles are written by developers and delivered to visitors. In this post we’ll take you through Airbnb’s journey from Sass to CSS-in-JS and show you why we landed on Linaria, a zero-runtime CSS-in-JS library, and the impact it has had on the developer experience and performance of Airbnb’s web app. From S
Designers and developers work hand in hand to create beautiful products. We build these products together, with UI components in code and UI libraries in design — our design system. In design, these UI libraries might be composed of symbols or components from Sketch, Figma or Adobe XD. In code, these components might be built in React, React Native or Preact. So, how do we recognize our React comp
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「議論だけ」のカンファレンスの作り方 | blog.jxck.io
2022-07-20のJS: Node.js 18.6.0、React NativeのHermesデフォルト化、AWSのデザインシステム
How to create a color ramp used in design systems
15 Best CSS Libraries for 2019
Design System 1.2.2 | Figma Community
Tailwind CSSの二面性、デザインシステムを借りるということ | Marginalia
2020年12月、LINEがNew Designでユーザーと再会しました！
Design Tokens Format Module
【デザインシステム】エンジニアが知っておきたいデザインシステム - Qiita
IPの世界観に寄り添う、マルチブランドなカラーシステム設計論｜TORAJIRO
Microsoft、新しい「メモ帳」と「メディアプレイヤー」の一般提供を開始／Windows 11の「Fluent Design System」に準拠したデザインへ。機能も充実
HTML Inputs and Labels: A Love Story | CSS-Tricks
Introducing Pollen | Pollen
Why Tailwind Isn't for Me
特定医療費（指定難病）受給者証の継続申請 - OPLLになった田舎者
Spacing, grids, and layouts
Svelte Summit Spring 2021 簡易まとめ
The evolution of scalable CSS
ユーザーインターフェイス設計メモ | Yuya Kinoshita
そのデザインシステムは投資対効果をもたらしますか？｜Kento Norita
Connect Zeplin with React and Storybook