社外にも公開しているSmartHR Design Systemは、ライティングに関するガイドラインも充実しています。この記事では、UI文言を検討したいと思ったときにそれらのガイドラインをどのように活用するとよいのか、おすすめの参照方法を紹介します！ チェックリスト的に参照したいライティングスタイル ライティングスタイルには、UI文言に限らずヘルプページやリリースノートなどにも適応したいガイドラインがまとまっています。 基本的かつ具体的な内容で、数も多くないので都度チェックリスト的に参照するのがおすすめです！ヘルプページやリリースノートも含めて、開発に関わる文言や文章を書く機会に参照すると、自然と頭に入っていきます。 迷ったときに参照したい用字用語
How Spotify’s Design System Goes Beyond Platforms | Figma Blog
Design Manager Juli Sombat sheds light on how a need for more cohesion led Spotify’s design systems team to take a cross-platform approach to components. In 2019, when our leadership at Spotify unveiled their ambition to make audio content available and consistent to anyone on any device, our design team faced a significant challenge: Spotify would now be available across 45 unique platforms, and
ユーザーにとって取り返しのつかない操作を提供する際の基準を定義しています。 基本的な考え方一度実行するとやり直しや巻き戻しが効かない操作のことを「取り返しのつかない操作」としています。 サービス内でのデータ損失の原因の多くは人的ミスによるものです。 ユーザーの誤操作によって「取り返しのつかない操作」が実行されないよう、提供時に十分に配慮しましょう。 代表的な取り返しのつかない操作取り返しのつかない操作の代表的なものとして以下のような操作があります。 登録されたデータを削除する操作設定をリセットする操作復元方法がない、または復元に複雑な手順を要するステータスの変更操作取り返しのつかない操作ボタンの提供方法取り返しのつかない操作をボタンなどのコンポーネントで提供する際は、ユーザーの誤操作を防ぐために可能な限りメイン操作領域の遠くに置く（1）、または領域を変更して置くこと（2）を推奨します。 上
GitHub - digital-go-jp/design-system-example-components: デジタル庁デザインシステムのサンプルコンポーネント
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
Compose Multiplatform で Bluesky のクライアント作ってみた / Bluesky client with Compose Multiplatform
The Design System Ecosystem
What does a mature, end-to-end design system look like in a big, complex organization? What are all the moving pieces, and how do they hang together as a well-considered architecture? What’s required and what’s optional? Hold onto your butts, because we’re going to go deep on this one. Let’s start here: a design system’s relationship to digital products can be boiled down like so: There’s a design
I've updated Figma's internal design system file to include all the latest features introduced since its last update in 2019: Components with variantsVariablesAuto layoutFigJam
Understand the basics of design systems, what they are, how they work, and how they can change the way you design. Design systems are often the unsung heroes of the products we use every day—from mobile apps and websites to the interfaces on television screens and car dashboards. They serve as the DNA for product design, encoding the principles and elements that define the very experience users in
ヘルプページを書くうえでの基本的な考え方と表記ルールをまとめました。 ドラフトを自分でレビューする際は「チェックリスト」を活用してください。 また、このページで記載していない表記ルールは、プロダクトデザインにおけるライティングスタイル、用字用語、UIテキストに準拠します。 ユーザーが確実に目的を達成できる状態を目指しましょうヘルプページの役割は、ユーザーが目的を達成するサポートです。 情報を簡潔明瞭に伝えて、ユーザーが操作につまずかないようにしましょう。 不要な情報や曖昧な表現は目的達成の妨げとなるため、削除や言い換えを検討しましょう。 チェックリスト情報を取捨選択しましょう必要な情報を漏れなく記載する不要な情報を記載しない本文への追加情報に用いる囲み要素の多用を避ける情報を適切に配置しましょう先に知っておくべき情報から順番に配置する関連する情報は近くに配置する見出しや箇条書きを適切に使う
SmartHRのプロダクトデザインシステム史上最大のアップデートがはじまります。 ー SmartHR Design Systemの現在地（2024年4月版）｜週刊プロデザ by SmartHR
開発組織も当然大きくなっており、プロダクトデザイナーのプロダクト開発への関わり方もアップデートしつつあります。 「デザインシステムは、それを運用する組織の体制や構造に強く影響を受ける」ということで、現在、2つの状況からデザインシステムは次のステップに進むフェーズにきています。 デザインシステムの進化を後押しする2つの状況 マルチプロダクト戦略SmartHR がマルチプロダクト戦略を打ち出したことで、「ユーザーインターフェースの品質と一貫性がもたらす使いやすさ」がより重要になってきました。競合他社との機能のコモディティ化が進むなか、「使いやすさ」は商品価値として差別化要素の一つと位置づけられます。詳細はダイレクターのfumiya(@tyoys00)さんの前回の記事をぜひ読んでください。 プロダクトデザイン組織の拡大マルチプロダクト戦略を受けて、私たちは「プロダクトの使用性を担保する開発者で
A Global Design System
TL;DR: This is a call to action to create a Global Design System that provides the world’s web designers & developers a library of common UI components. A Global Design System would improve the quality and accessibility of the world’s web experiences, save the world’s web designers and developers millions of hours, and make better use of our collective human potential. Sounds pretty good, right? I
GitHub - figma/code-connect: A tool for connecting your design system components in code with your design system in Figma
Code Connect is a tool for connecting your design system components in code with your design system in Figma. When using Code Connect, Figma's Dev Mode will display true-to-production code snippets from your design system instead of autogenerated code examples. In addition to connecting component definitions, Code Connect also supports mapping properties from code to Figma enabling dynamic and cor
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
UI文言を検討するときのSmartHR Design Systemの歩き方｜稲葉志奈
Windows版「Word」、「Excel」、「PowerPoint」のアクセス権管理機能が改良へ／Fluent Design Systemに準拠、わかりやすく、使いやすく
取り返しのつかない操作 | デザインパターン（共通） | SmartHR Design System
Material 3 やめました / Good-bye M3 design system
UI2: Figma's Design System | Figma
What Is a Design System | Design Systems 101 | Figma Blog
ヘルプページの書き方 | ヘルプセンター | SmartHR Design System