PIXIV Design System 2021 の発表をしました（前編） #pixivdevmeetup - pixiv inside
2021/10/25追記 おまたせしました。この記事の後編も公開しておりますので、合わせてお読みください。 inside.pixiv.blog こんにちは。プロダクトデザイナーの yksk とフロントエンドエンジニアの f_subal です。 ピクシブにはデザインシステムを開発するチームがあります。ピクシブが運営する数多くのプロダクトが共通のガイドライン、コードを使ってUIを設計できる体制への移行を目的としており、そのための仕組みづくりに取り組んでいます。 今回は、先日行われた pixiv DEV MEETUP 2021 のセッション「PIXIV Design System 2021」で発表した、技術的な取り組みについて前後編に分けて発表します。 前編にあたるこの記事では f_subal パートの内容をおさらいをしていきます。 PIXIV Design System 2021 昨年のpix
Figma Community file - デジタル庁サービスデザインユニットでは、一貫したデザインや操作性でウェブサイトやアプリを提供するための仕組み「デザインシステム」の構築に取り組んでいます。どなたでも構築中のデザインシステムのデザインデータを閲覧することができます。 デザインシステム構築の目的の詳細はデジタル庁ウェブサイトをご覧ください。 更新履歴 2022.12.28 リンクテキスト、テキストエリアのガイドを更新しました 2022.11.14 軽微な修正を行いましたアイコンを一部修正しましたテキスト入力、テキストエリアの表記揺れとカラー違いを修正しました 2022.11.12 軽微な修正を行いました最新状態ではな...
1.はじめに 私は(筆者は)モバイルエンジニア転職を目指す立場です。個人的にアプリのUIデザイン知識はデザイナーだけでなくエンジニアにも必須だと思っています。私自身がアプリ開発の過程でデザインについて指摘され、「このままデザインに無知では良くないと思った」、「同じような立場の方にモバイルアプリのデザインの事を少しでも知ってもらいたいと思った」その２つの理由から本記事を執筆しました。 現在、エンジニアを目指している方やアプリ開発はしているけどモバイルデザインについて改めて知りたいという方、そのような方向けに改めてiOS・Android双方のデザインガイドラインについてまとめてみました。 2.iOSとAndroidのデザインの考え方 2020年現在、iOSではHuman Interface Guidelines、AndroidではMaterial Designの考え方をもとにアプリUIが作られ
デザインシステムは、作ってからが本番。｜いちはら
デザインシステムってどうやって作るの？運用どうするの？について考える。 こんにちは、クックパッドデザイン推進部部長のいちはらです。 クックパッドのレシピサービスにはapronというデザインシステムがあります。それが、この度Figma Communityに公開しました👏 ほんの一部ですが公開しましたので、このデザインシステムを作って得た気づきや、その後のことを一問一答形式で書いていこうと思います。この記事が、ガイドラインやデザインシステムについてお悩みの方の参考になればいいなと思います！ １、どうしてデザインシステムを作ったの？ ユーザーに価値を届ける速度や品質を保つため。 デザインの指針がないと、とくに意図なくいままでを踏襲したデザインを使い回しをしたり、必要なコンポーネントがバラバラに点在していたりと開発効率やデザイン品質が低くなります。 apron誕生の経緯についてはわかりやすく書い
SmartHRのプロダクトデザインの生産性を高める“デザイン”のためじゃないデザインシステムとは（Schema2022）｜wentz
こんにちは。 SmartHRでプロダクトデザインをしている@wentz_designです。 本記事は、2022年11月2日に開催された「Schema by Figma 2022 Tokyo」で発表した「“デザイン”のためじゃないデザインシステム」のスライドを元にした内容になります。 早口で話して20分くらいかかる内容になりますので、お時間のある時に読んでみてください。 また、記事に構成する上で文字だけのスライドなど一部を省略していますが、全スライドはFigma Communityに公開していますので、気になる方はそちらも見てみてください。 以下本編です。 はじめに自己紹介私はSmartHRのプロダクトデザイングループには9人目でジョインして1年と7ヶ月ほどになり、これまでの職歴も含めるとB2B SaaSプロダクトのデザイナー歴は約5~6年ほどになります。 メインでは、SmartHR基本機能
こんにちは、ログラスのデザイナー高瀬です。 今回はデザインシステムの理想と現実について話していきたいと思います。 デザインシステムって素晴らしいけど、いざ実装しようとするとプロジェクトの扱いや開発優先度の調整って難しいですよね？ 今回はそんなデザインシステムにまつわる開発優先度と対策の話をしていきたいと思います。 前提 ・私達は経営管理クラウドLoglassというプロダクトを開発しています ・toB SaaS 視点での見解が多いです ・現在デザインシステム構築中です ・Loglassのデザインシステム構築の中で感じた理想と現実について話していきます デザインシステムは美しくも辛いデザインシステム導入の目的や方法に関して、今では優良なnoteや書籍がたくさんあり私もとても参考にしました。ユーザーの体験・ブランド価値の提供や開発の効率化など、その効能や目的はとても美しいです。 一方でデザインシ
「とりあえずNoto Sans JP」、考え直してみませんか？｜SOMPO Digital Lab デザインチーム
SOMPO Digital Labデザイナーの松葉（ https://twitter.com/tiyou01 ）です。 ウェブサイトやアプリのUIで使う書体、「とりあえずNoto Sans JPで…」と決めてしまった経験はないでしょうか？この記事はそんな「とりあえず」に心当たりのある皆さんに向けて書かれています。 Noto Sans JPという書体Noto Sans JPはAdobeとGoogleの共同開発による書体で、Adobeからは源ノ角ゴシック／Source Han Sans、GoogleからはNoto Sans JPという名称でリリースされました。この記事ではNoto Sans JPの表記で記載します。 2014年にリリースされて以来、Noto Sans JPはUIで利用する日本語書体としてすっかり定着しました。現在はウェブサイトやアプリで見ない日はないと言ってもいいくらいです。
大規模toB SaaS「HRMOS」のフロントエンド開発にDesign Systemを導入した理由
HRMOSでは複数存在するモジュールの体験を統一するために「Design System(デザインシステム)」の開発を行ってます。 そこで本日は HRMOSにおけるDesign System メリットだけではない、Design Systemのデメリット を中心に紹介をしたいと思います。 Design Systemとは？ 『Design System』という本の一節にこう書かれています。 デザインシステムとは、デジタルプロダクトの目的を達成するために首尾一貫したルールで編成された、お互いに関連づけられたパターンとその実践方法です。パターンは繰り返される要素で、これらを組み合わせてインターフェースを作成します。 — Design Systems - アラ・コルマトヴァ HRMOSにおいてのDesign Systemとは、いわゆるUI Kitのようにデザインパターンが羅列されているだけでなく、いつ
近年、UI/UXデザインで活躍するデザインツールとしてAdobe XD、Figma、Sketch、InVisionなどさまざまなツールが登場しています。本記事では日本での人気が高い「Adobe XD」と近年盛り上がりを見せている新進気鋭のデザインツール「Figma」にフォーカスして機能の紹介、比較をします。 UI/UXデザインツールには、大きく分けてデザイン機能とプロトタイプを作成し共有する機能の2種類の機能があります。今回の記事では、デザイン機能に重点を置いて紹介します。 Adobe XDを使っているけどFigmaも気になっている方や、その逆という方のデザインツール選定のヒントになればと思います。 Adobe XDとは？ Adobe XDとは、2017年に正式リリースされたUI/UXデザインツールです。IllustratorやPhotoshopと操作感が似ておりAdobeユーザーであれば
LINE株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。 LINEヤフー Tech Blog Developer Relationsチームの三木です。 11月20日から21日にかけて、LINEのエンジニア向け技術カンファレンス「LINE DEVELOPER DAY 2019」を開催しました。社内外のエンジニアの皆様3,000名以上にご来場いただく大盛況なイベントとなりました。ご来場いただいた皆様、登壇いただいたゲストの皆様、運営に携わっていただいた皆様、誠にありがとうございました！ 今年のLINE DEVELOPER DAYは、より深く幅広い分野に関連した内容を提供するために、二日間の構成としました。全部で68個のメイントーク、42個のショートトラック、9個のポスターセッション、６個のハンズオンセッション、19個のブー
達人出版会
探検! Python Flask Robert Picard, 濱野 司(訳) BareMetalで遊ぶ Raspberry Pi 西永俊文 なるほどUnixプロセス ― Rubyで学ぶUnixの基礎 Jesse Storimer, 島田浩二(翻訳), 角谷信太郎(翻訳) 知る、読む、使う！ オープンソースライセンス 可知豊 きつねさんでもわかるLLVM 柏木餅子, 風薬 R／RStudioでやさしく学ぶプログラミングとデータ分析 掌田津耶乃 データサイエンティストのための特徴量エンジニアリング Soledad Galli(著), 松田晃一(訳) 実践力をアップする Pythonによるアルゴリズムの教科書 クジラ飛行机 スッキリわかるサーブレット＆JSP入門 第4版 国本 大悟(著), 株式会社フレアリンク(監修) 徹底攻略 基本情報技術者教科書 令和6年度 株式会社わくわくスタディワール
freeeの社内異動制度「異動戦国」のチーム紹介を一挙公開 - freee Developers Hub
こんにちは、DevBrandingのellyです。 先日ブログでご紹介したfreeeの社内異動制度「異動戦国」、この時期になると社内では毎年、異動希望者を募集するために各チームの熾烈なPR合戦が繰り広げられます。 今回は、その際のSlackや社内WikiでのPR合戦の様子をご紹介します。募集期間中の社内の雰囲気やfreeeの開発組織にはどんな仕事があるのか、どんな魅力があるのかを知ってもらうきっかけになれば嬉しいです。 Slack上で繰り広げられた今年のPR合戦の様子 チーム紹介 SREチーム DBREチーム DXチーム IAM （認証認可基盤開発）チーム サービス基盤チーム 課金基盤チーム ERP基盤チーム データ基盤チーム コアエンジン（外部サービス連携）チーム AIラボチーム 会計チーム LEGO（Public API・アプリストア開発）チーム 人事労務チーム 金融チーム プロジェク
諸事情で締め切りまでに歌詞を考えないといけないのですが、全く思いつかないので、表題の駄文を書き始めてしまいました。 とある IT の事業会社でインハウスデザイナーのマネージャー、エンジニアのマネージャーをそれぞれ短い期間ですが数年経験した身として、ふとした場でこの話が聞こえてくることもあるので、考えをまとめてみました。あくまで IT 系のデザインの話ですのでご注意ください。 デザイナーや、デザイナーに関わる誰かの参考になりましたらと思います。 UI や Web に関わるデザイナーはコードを書くべきかまず、これをデザイナーに言えるのは以下のパターンです。 社長、経営者（給料を出す人）そのデザイナーのマネージャーや、先輩デザイナー（キャリアを導く人）そのデザイナーが入るプロジェクトマネージャー・エンジニアの「お願い」（猫の手を借りたい人）「一般論として『デザイナーはコードを書くべき』とは言えな
フロントエンドとオブジェクト指向
フロントエンドの実装にオブジェクト指向をどのように取り入れるかを考えます。 動機 近年のフロントエンドは、Reactなどのフレームワークを使ったコンポーネントベースの設計が主流だと思います。コンポーネントは、HTMLによるマークアップ、CSSによるスタイリング、JavaScriptによる振る舞いがひとまとめにされた、再利用可能な部品です。 コンポーネントの設計を考えていると、次のような疑問が生じます。 何を基準にコンポーネントで分割すればよいか。 コンポーネントの粒度はどれくらいが適切なのか。 どのタイミングで抽象化すれば開発コストが無駄にならないか。 分業した際にコンポーネントの分割や粒度の基準をどのように統一するべきか。 そこで、いろいろ調べたり試したりしたところ、フロントエンドの設計にオブジェクト指向を取り入れることが、これらの答えの一つになるのではないかと考えました。 この記事では
Wantedly の UI デザインシステムは「WantedlyのUIをデザインする上での共通の考え方とツール＆アセット」でありエンジニアとデザイナが効率よくコミュニケーションするための共通言語となる デザインシステムを (Web) Frontend に持ち込む際は、単なるコンポーネントカタログではなく、システムが定義するものと同じレベルの抽象を持つライブラリ・フレームワークとして実装することで、より有効性を発揮する Wantedly におけるデザインシステムは、「プロダクト・デバイスをまたいでも・誰がデザインしても体験やブランドとしての一貫性を保つ」「デザインの生産性を向上させ、デザイナ - エンジニア 間コミュニケーションを改善することで、ユーザに価値を届ける速度を向上させる」といった目的のために作られたものです。 より詳しくは、デザインシステムが加速させるプロダクト開発 / Desi
ICSはフロントエンドを専門とするウェブ制作会社ですが、オウンドメディアとして技術情報発信サイトを運用しています。このサイトは開設から8年目をむかえましたが、今年は「国内のウェブ水準を前進させる記事を。話題のテーマも、他のサイトでは読めないニッチな技術も」をテーマとしてやってきました。そんなICS MEDIAにとっての2021年を、あらゆる数値を使って多角的にレポートします。 今年はどの記事がもっとも読まれたのでしょうか？ 今年執筆した記事で上位10記事をピックアップしました。 1位 : スクロール演出の作り方 トレンドウェブサイトから学べ！ JavaScriptで作る本格スクロール演出 20,800 PV ウェブサイトを魅力的にするスクロール演出。スクロール演出を3種類にわけ、それぞれの実装方法を解説しています。ウェブサイトを「より良く魅せたい」というニーズが大きいのか、この記事が202
脱・Atomic Design - HTML+CSSコーディングの粒度分類法（HTML Parts） - Qiita
はじめに HTML+CSSコーディング専用の粒度分類を紹介します。 この仕組みは、デザインやワイヤーフレームなどの視覚情報を分解することに焦点をあて、分解した対象を部品化する流れも併せてガイド化した汎用手法です。 世の中には、コーポレートサイト / ポータルサイト / サービスサイト / システム管理画面 / ブログサイト… といった様々な種別のサイト、Webページがありますが、これらの「完成予想図（視覚情報）」を同じ方法で分解して、コーディング用の部品にできます。 粒度と言えばAtomic Designが有名ですが、この「HTML Parts」も粒度そのものの考え方についてはAtomic Designの踏襲です。その上で「思考の入り方・捉え方」や「名称と定義」をコーディング側に寄せることで、CSS設計やコーディング業務を標準化しやすくしています。 ※この記事は標準化ノウハウ公開の一環とし
こんにちは。VRoid モバイル/StudioのUIを開発したねこまんまです。 先日VRoid モバイル/Studioで利用しているuGUI記述ライブラリ『Mux』を公開しました🎉 github.com 実は以前、pixiv TECH SALONで少しだけ紹介させていただいたのですが、今回はこのライブラリの魅力をより掘り下げて見たいと思います🔍 uGUI? uGUIとはUnityのアプリケーションで使うことができるUIツールキットです。他にもUnityには、新しく開発されているUI ToolkitやUIWidgets、サードパーティーによるものなど様々なものがあります。uGUIはその中でも成熟しており、Unityに標準的に含まれることからよく利用されています。 uGUIの特徴は、Unityのヒエラルキーに則ってUIが構築されることです。そのため、Unity Editorを用いて編集する
社内向けにまとめていたものを加筆修正して公開します。 アクセシビリティの学習を始める人の助けになれば嬉しいです。 YouTube freee アクセシビリティ研修動画～全職種対象～ freee アクセシビリティ研修動画～技術職対象（Basic） freee アクセシビリティ研修動画～技術職対象（Advance） a11ygogo A11yTokyoMeetup Webコンテンツ 全般 WCAG WAI-ARIA HTML/CSS デザインシステム、ガイドライン その他 書籍 アクセシビリティ全般 HTML
この記事は、弁護士ドットコム Advent Calendar 2023の25日目の記事です。 前日は tsuchiya さんの「ログや例外についてレビューや実装時に意識していること」でした。 はじめに: 人と成りては童子のことを棄てたり インターネットの海には、不幸な開発プロジェクトの話が溢れています。例えば「とにかく言われた通りに作ればいいんだ」「スケジュールにコミットしろ」「遅れは徹夜で取り戻せ」「障害を起こしたら減給だ」など*1。 プロダクト開発に携わる人であれば、こうしたやり方が無意味どころか逆効果であることはご存知でしょうか。では、なぜこうしたやり方が提唱されてしまうのでしょうか。 それは、旧来のビジネスの常識*2に照らせば、ある意味でまっとうなやり方だからです。問題は、プロダクト開発においてはビジネスの常識が通じないことにあります。 (加えて、にも関わらず旧来の常識が押し通され
ここ数年「デザインシステム」はIT業界を中心に流行語になっていますが、どうにも「〜システム」と呼んでしまっていることと、実際にそれが指している概念がはっきりしないが故に、私にとっては積極的に使いたくない語になってしまっています。皆さんが「デザインシステム」の語で言及しているものは、本当に同じ概念を指しているのでしょうか？ 定義にあたってみる「デザインシステム」「Design system」の言葉の定義を軽く調べてみました。 とりあえずWikipedia（英語）にはこのように書かれています。 デザインシステムは、任意のアプリケーションを組み立てるのに用いる再利用可能なコンポーネントと標準規約の集まりです。デザインシステムは、モバイルアプリケーションやWebサイトなどデジタルプロダクトのデザインと開発をサポートします。パターン、コンポーネントライブラリ、デザイン言語、スタイルガイド、コード化さ
JSConf JP 2022 https://jsconf.jp/2022/talk/pack-front-end-practices-into-the-design-system-and-redistribute Twitter https://twitter.com/__sakito__
プロダクトに眠る時限爆弾「UX負債」との向き合い方
デザインにもある『負債』 作ってから指標を考えるのではなく、何を計測すべきか事前に決めたほうがデザインがしやすくなります。作る目的がハッキリしますし、目的に沿った デザインフィードバックができるのもメリットです。 プロダクト / サービスの成長のためには、適切な指標をもつことが必須です。しかし、すべての施策が計測できるわけではないのが悩ましいところです。例えば「ボタンの一貫性を整える」といった施策に取り組んだところで、クリック率は上がらないですし、ユーザーテストをしても判断が難しい場合があります。 だったらすぐにユーザーインパクトのある施策をしたほうが良いということになって後回しになりがち。こうした『しっかり考えて作ったほうが良いけど、優先順位が落とされてしまう施策』はたくさん眠っています。他にも大事なことがあるのは間違いありませんが、放置しておくとだんだんプロダクトの『負債』が溜まってい
デザインツールなどを開発しているDiagramは2月10日，Figma上でUIのデザインをユーザと共同で作成できるAIベースのデザインコンパニオンGeniusのプレビューを公開した。 Genius by Diagram URL：https://www.genius.design/ 🔅 Introducing Genius, your AI design companion in @figma It understands what you’re designing and makes suggestions that autocomplete your design using components from your design system. Genius is coming soon. Join the waitlist → https://t.co/ldAdWySptX pic
この記事では現役デザイナーDmitriy Buninが、より良いアイコンをデザインするときに心がけている8個のポイントをまとめてご紹介します。 WebサイトのUIインターフェースにおいてアイコンは重要なデザイン要素のひとつです。 アイコンは、コマンドやコンテンツを視覚的にあらわし、背後にある意味合いを伝える言語と言えます。ユーザーがすぐに理解、認識できるようにシンプルで効果的なビジュアル、メタファーを表現する必要があります。 現役デザイナー直伝、アイコンデザインがもっと良くなる８個のヒント ヒント１ – グリッドを設定しよう アイコンはひとつだけ作るのではなく、ほとんどの場合はセットでデザインすることになります。アイコンセットの統一感を持たせるにはグリッドが必要となります。 以下サンプル例のようにセーフゾーンを決め、キーラインを設定しましょう。アイコンのまわりには、少しの余白スペース（Bo
フルスタック、VPoE、デザインエンジニア、フロントエンドの極み──4つのパターンで語る「フロントエンドキャリアの分岐点」 - TECH PLAY Magazine
TECH PLAYERが「なりたい姿」を叶えるために、背中を後押しするTECH PLAY Talkシリーズ。第一弾はフロントエンジニアとして紆余曲折を経てきた『フルスタックパターン』小林泰士さん、『VPoEパターン』あほむさん、『デザイナーパターン』ymrlさん、『フロントエンドの極みパターン』mizchiさん、4人の現役＆元フロントエンドエンジニアの「キャリアの分岐点」を紹介する キャリアの分岐点#1『フロントエンド→フルスタックパターン』小林 泰士さん 株式会社NEW SHIP CEO 小林泰士さん フリーランスのコーダーからキャリアをスタート トップバッターで登壇したのは、NEW SHIP CEO 小林泰士さん。業務委託でROXX、シェアダイン、APERITEが運営するワインのサブスクサービス「ポケットソムリエ」などの開発に携わっている。 大学時代は広報やライターといった活動と平行し
OpenAI API を使ったデザインからコード生成する Figma プラグイン - Gaudiy Tech Blog
こんにちは。ファンと共に時代を進める、Web3スタートアップのGaudiyに、6月からお試し入社する seya（@sekikazu01）と申します。 ここしばらく話題になっている、OpenAI が提供する ChatGPT を代表とした LLM。この記事では、そんな OpenAI の API を使って Figma からコード生成するプラグインを作ってみた過程を記していこうと思います。 先に背景をちょっとお伝えしますと、Gaudiy ではPSFに向けて、複数パターンのUI・機能を実際に提供しながら検証を回すことを予定しています。 すでに定義したコンポーネントはある程度使い回せるものの、ページ実装の試行回数の増加が見込まれる状況です。ここの作業効率化のために、コンポーネントをしっかり活用しながらも、ちょっといじればプロダクション利用可能な React コードを Figma から書き出すトライとし
5年半勤めたエンジニアチームを辞めて、UXチームにジョインしました - freee Developers Hub
こんにちは、お久しぶりです、 id:ymrl です。 2019年も年末調整とAdvent Calendarの季節がやってきました。いつものごとく、今日から25日まで毎日、freeeの開発に関わるメンバーが日替わりでブログを書いていきます。ということで、この記事はfreee Developers Advent Calendar 2019の1日目です。よろしくお願いします！ エンジニアチームを辞めました freeeに入社したのは2014年の1月で、エンジニアチームには5年半いたことになります。入社したときにはエンジニアが10人くらい、全部でも20人もいないような小さな会社だったのが、5年半で25倍以上の規模の会社になりました。デカくなった。 5年半のあいだ、ほぼエンジニア一筋でやってきたんですが、思うところがあって今年の6月末まででエンジニアのチームを離れ、7月からUXチームで働いています。今
"デザインシステム"の過度な一般化とその対応について - Continuity is The Father of Success
デザインシステムという単語が、曖昧に、広い意味で使われているように感じるこの頃。 デザインシステムについて見聞きすることが増えてきました。 かくいう自分も、デザインシステムに関してブログを書いたり、参考にしたりしています。 モバイルアプリ業界に、デザインシステム導入や検討の流れが来ているようです。 ただ、デザインシステムの議論には話の筋がとっ散らかっているという印象が拭えません。 「デザインシステムで解決したいこと」や「デザインシステム導入のコスト」、そ「デザインシステムを誰が管理するか」あたりが、特に雑多な印象です。 デザインシステムとはナニで、どう適用されるモノなのか。 そして、特に起きがちなデザインシステムの過度な一般化について、扱ってみます。 デザインシステムの過度な一般化 試みたいこと デザインシステムのカバー範囲の分解 Level 0 Level 1 Level 2(広義のデザ
「政府統一Webサイト構築に向けたサービス基盤及び デザインシステム等の実証に関する調査業務」 の公告に係る説明会 2021年8月12日 内閣官房IT総合戦略室 はじめに 2 本日は説明会へのご参加ありがとうございます。 ・15:00-15:30 仕様書内容のご説明（IT室） ・15:30-16:00 質疑応答 ※最大16:30まで 【お願い】 ・ご説明中は音声はミュート、ビデオはオフに設定をお願いします。 ・ご質問いただく際は、はじめに社名とお名前をお知らせください。 ・説明会は録画させていただきますのでご了承ください。 公告概要 3 ・案件名 政府統一Webサイト構築に向けたサービス基盤及びデザインシステム等 の実証に関する調査業務 ・競争の方法 一般競争入札（総合評価落札方式） 価格点70点＋技術点140点＝合計210点 ・今後のスケジュール 8月23日（月）12時 技術等提案書等の
UIコンポーネント以外から始めるデザインシステム
UIコンポーネントは表層的な解決手段 以前「デザインシステムを作る前にデザインのシステムを理解しよう」という記事で、組織がもつデザインのシステム（仕組み）の理解を深めることが重要であると書きました。 「えいや！」で UI コンポーネントが揃ったライブラリを作ることは難しくありません。しかし、組織にとって意味のある UI コンポーネントになっているかは別問題です。 たとえコードの書き出しまで出来るデザインシステムを作ったとしても、ある一部の人たちが楽になるだけの最適化に止まる場合があります。作り手視点のメリットだけでなく、組織への貢献という広い視野が抜けていると「作ってみたけど浸透しなかった」ということになります。 UI コンポーネントを作るだけでも様々な要素の積み上げで成り立っています。簡略化された図ですが、UI コンポーネントを作る前に様々な課題を解決しなければいけません。 事業目標 今
2022年、Figmaで特にお勧めしたいプラグインのまとめ
Figmaにはプラグインがたくさんあります、その中から特に便利なプラグインを紹介します。WebサイトやスマホアプリのUIを作成するワークフローに役立つ便利なプラグインばかりです。 20 Awesome Figma Plugins to improve your Workflow by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 特にお勧めしたいFigmaのプラグイン 終わりに はじめに 私はここ数年の間、Figmaの多くのプラグインを実際に試し、定期的に使用してきました。Figmaコミュニティで提供されるプラグインは改善され続け、その勢いは衰える気配がありません。 私がこれまでに使用してきたプラグインの中で、特にお勧めできる20個のプラグインと、現在も更新されているプラグインをまとめるのに良
TLDR: Material Designをカスタマイズして利用した話 最近、デザインシステムって言葉よく聞きますよね。airbnbではDLSというデザインシステムを持っていたり、UberはBase Webというデザインシステムを持っていたり、アメリカ連邦政府も持ってたりします。国内のIT企業でもデザインシステムを作成しているとの事例もよく耳にします。 デザインシステムとは？ デザインシステム：デザインの基準やドキュメント、原則に加えて、基準を達成するためのUIパターンやコンポーネントなどのツールキットをすべて備えたもの。 デザインシステムの定義と作成方法、導入事例 | UX MILK では、デザインシステムってのはどういったもんなんでしょうか？これまでも、スタイルガイドやコンポーネントライブラリといったものは聞いたことがありますが、デザインシステムというのはそれらも含めたもう少し大きなモ
Webアクセシビリティーの品質規格として参考になることが多い「JIS X 8341-3:2016」の制定以降に出てきた、比較的新たな課題に対しての対応事例などを掲載。例えば、スマートフォン向け表示への対応例などを紹介している。資料内の事例は、デジタル庁内業務で蓄積してきた実例に基づいて取り上げているという。 デジタル庁は「Webアクセシビリティーを向上させるには、非常に専門的な複数の規格とガイドラインが必要。一方で、適切なやり方が分からないまま、現在は間違っている対応の踏襲、不要・過剰な対応、不適切な対応をしてしまう場合がある」と説明。初心者が利用できる行政機関向け研修資料が足りていない現状を指摘した。 そこで広報・サービス開発などを担当し、Webアクセシビリティーの改善に取り組む必要がある事業者向けに、知識ゼロからWebアクセシビリティーを学べる解説資料を作成。調達・受託事業者と適切なコ
こんにちは、東芝のUIデザイン担当の池田Rです。 PCやスマホを使っていると「ショッピングカート」や「サムアップ」「虫メガネ」など様々なアイコンを目にします。普段意識することはありませんが、実はこのアイコン、テキスト無しでユーザーに情報を伝えることができる重要なアイテムです。 この記事では、そんなアイコンのデザイン検討から完成までのお話をご紹介します。 アイコンには、アプリケーションを起動するランチャーアイコン、メニューの補足やボタンの役割を果たすシステムアイコンの大きく2種類があります。ここでは東芝の様々なアプリケーションで使われるシステムアイコンに絞ってお話します。 １．まずは手書きで「メッセージする」のアイコンのモチーフは“吹き出し”。「ロックする」のモチーフは“南京錠”といったように、まずは使用用途ごとにモチーフを考えます。システムアイコンは誰にでも正しく意味を認識してもらう必要が
Utility First な CSS in JS フレームワークの導入と３ライブラリの比較 - JX通信社エンジニアブログ
JX 通信社のフロントエンドでは React TypeScript や Emotion のような CSS in JS を技術選定することが多いです。弊社 SaaS の FASTALERT、新型コロナ関連情報などでも同様の技術選定で、過去にもエンジニアブログで紹介してきました。 tech.jxpress.net tech.jxpress.net 今日は、Emotion の活用の極地「Utility First な CSS in JS フレームワーク」についてご紹介します。 Emotion で開発する悩み 素の Emotion や類似の CSS in JS ライブラリでは、 1 つの TS/JS ファイル内に CSS を書くような感じでスタイル設定を行っていきます*1。CSS in JS ライブラリに概ね共通しているのが、 styled.タグ名 でスタイリングすることです。 const Tit
こんにちは、サイボウズ開発本部長の佐藤 鉄平 (@teppeis) です。 勉強会などで社外のエンジニアと話していると、 「サイボウズって採用してたんですか？」 みたいに言われてしまうことがありました。 こりゃいかん、もっと積極的に活動してかないとなー、ということで、今年から開発本部内にも採用チームを設立し、この note を立ち上げて情報発信していくことにしました。 最初の投稿である今回は、サイボウズはなぜ採用したいのか？についてお伝えします。 サイボウズってどうなのよ？サイボウズは「チームワークあふれる社会を創る」という企業理念の元に、情報共有を支援する企業向けの SaaS を提供しています。主要4製品 (kintone, Garoon, Office, Mailwise) はいずれも堅調に成長し、日経コンピュータの顧客満足度調査では2年連続1位を獲得、SaaS の重要 KPI である
GMOペパボのデザイン部という会社横断組織で（自称）デザインエンジニアをやっているgyugyuです。好きな鮨ネタはスズキです。 この記事は GMOペパボデザイナー Advent Calendar 2022 の13日目の記事です。昨日は たるたるさん の 【2022】minneのアクセシビリティを振り返る でした。 この記事では「短期的には効率が下がるものの、中長期的にはより大きい効用をもたらす社内ツールのデザインをしたこと」と、そこから導き出される「社内ツールでもデザインをすることの重要性」について説明します。 前提 この記事におけるデザインとは この記事において、デザインという言葉で意味しているものは情報設計のことです。リッチなビジュアルの作り方や美しいUIパーツの作り方についてはこの記事では説明していません。それらについてはペパボの他のデザイナーが素晴らしい記事を書いているので、そちら
コードでデザインをするということ｜Hiroki Tani
この記事は2022年12月10日開催のSpectrum Tokyo Design Fest 2022で話したセッションの内容を文字起こししたものです。 僕は15年ほどWebに関する業界で働いています。はじめは小さなベンチャーでWebデザイナーとして仕事をはじめ、自分でデザインして自分でコーディングするというキャリアからはじまりました。それからフロントエンドデベロッパー、UXエンジニア、デザインエンジニアと肩書を変えてきています。 その中で、CSS設計の書籍の執筆や、Figmaのプラグイン開発、デザインシステムのリードなどの活動をしてるんですが、基本的にはコードを書くことをメインにしつつも、デザインに近い領域で仕事をしてきています。 Code is a Material僕がデザインとコードの両方についての考えを巡らせるきっかけになったのは、2019年に観たデザインシステムのカンファレンスのい
コンポーネントを配信するシステムについて構想する
はじめに この記事は、Cloudflare が提唱する Fragment Piercing (フラグメント・ピアシング) の記事(Cloudflare Workersによるマイクロフロントエンドの段階的な採用)を読んだ筆者が、そこから得たアイデアとそれをPoC（概念実証）している「コンポーネント配信システム」についてドキュメント化したものである。 この記事で取り上げられているシステムなどは、まだ実用段階に達していないものが多く含まれている。 デザインシステムとコンポーネントの配信 近年、デザインシステムを構築したり公開する企業や組織が増えている。 「デザインシステム」の価値は、Storybookのドキュメントに次のように示されている。 デザインシステムは複数のプロジェクトを横断してチームが複雑で、丈夫で、アクセシビリティの高いユーザーインターフェースを構築するための再利用可能な UI コン
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Design System 1.2.1 | Figma Community
モバイルアプリにおけるUIデザイン - Qiita
デザインシステム開発優先度の「難しさ」と「対策」｜hikaru-takase /Loglass
最新版で比較するAdobe XDとFigmaの違い - デザイン機能編 - ICS MEDIA
LINE DEVELOPER DAY 2019 を開催しました
デザイナーはコードを書くべきか - feb19
Web アプリのデザインシステムライブラリ | Wantedly Engineering Handbook
これがフロントエンドで話題になった記事！ ICS MEDIAの2021年 - ICS MEDIA
uGUI記述ライブラリ『Mux』を公開します - pixiv inside
Webアクセシビリティ学習リソースまとめ （2023年3月版）
プロダクト開発はなぜ直観に反するのか - 弁護士ドットコム株式会社 Creators’ blog
「デザインシステム」がよくわからないので、理解の仕方を変えてみる｜usagimaru
デザインシステムにフロントエンドのプラクティスを詰め込んで再配布する
Figma上でUIデザインを考えてくれるAIデザインコンパニオン「Genius」発表 | gihyo.jp
現役デザイナーが教える、アイコンデザインがより良くなる８個のヒント
「政府統一Webサイト構築に向けたサービス基盤及びデザインシステム等の実証に関する調査業務」の公告に係る説明会 | 内閣官房IT総合戦略室
がんばらないデザインシステム - MOL
デジタル庁、初心者向け「Webアクセシビリティー」導入ガイド無償公開 非技術者向け、専門用語は少なめに
伝わりやすく使いやすいシステムアイコンができるまで｜東芝 UIデザイン
サイボウズ、本気で採用活動するってよ｜Cybozu Developers
使いたくなる社内ツールを作るためにデザインをしよう - Pepabo Tech Portal