翻訳記事：デザインシステムのジレンマ：見た目は似ているが、機能が違う｜Nobuya Sato
読むときについでに訳してしまおう活動。今回は、UX Collectiveに投稿されたこの記事。デザインシステムを作るときのジレンマです。 コンポーネントは、見た目が似ていても機能が違う場合があり、デザイナーや開発者はあえて使い分けて作っている場合があります。しかし、デザインシステムの健全性を機能させるには、しっかりとそれらを明文化する努力（投資とも言う）が必要で、プロダクトがスケールすればするほど管理がおざなりになり、亜種なのかそうではなく意図があるのか曖昧になりシステムが破断する危険性があります。アセットを作るだけなく、文書化と布教（教育）活動を怠らないようにしましょう。 ということで以下翻訳（著者許諾済み） Deanさんは今日本語勉強中だそうです😁 デザインシステムのジレンマ：見た目は似ているが、機能が違うなぜ異なる要素がユーザー体験にとって重要なのか By Dean Harriso
「Yu Gothic UI」フォントの鍵括弧、繋げるとブラウザ表示で重なる問題を調べてみた - 俵のメモ帳
Yu Gothic UIに text-spacing-trim を適用するとバグる を読んでいて、気になってしまったので、実際にYu Gothic UIのファイルの中身を開いて調べてみました。 発生している問題 回避策 原因 Yu Gothic UI 特有の問題？ まとめ 発生している問題 Yu Gothic UIは、Windows 10からプリインストールされているUI表示用フォントです。 手元の環境で確認したところ、Windows 11 23H2 (ビルド 22631.4317) 時点では、「Yu Gothic UI Version 1.93」がインストールされていました。 このフォントをChrome系ブラウザで利用すると、鍵括弧表示が崩れる場合があります。具体的には、 「abc」「abc」 のように、閉じ括弧・開き括弧が隣接するケースです。 」「 の部分ですね。この際に、閉じ括弧と開
デザインからアプリ実装まで一貫したデザインシステムを構築するベストプラクティス
DroidKaigi 2024 での発表資料
非デザイナーにも知っていて欲しい「色」と「特性」 - Qiita
はじめに 数年前から「デザインの民主化」「非デザイナー向けの〇〇」といったワードをよく見るようになりました。それに伴い、デザイナー不在でも制作ができる便利なツールも増えてきましたね。 ReactなどのUI制作に便利なライブラリが広く使われたり、Canvasを使ってのバナー制作を行う人も増えてきた印象があります。 一方で「たくさんあるテンプレートから何を基準に選べば良いのか分からない」「アレンジしたけど、なんだか上手くいかない」という人もいるのではないでしょうか。 「非デザイナー～」シリーズでは「知っているとちょっと得するデザインTIPS」や「話のネタになるデザイン豆知識」をお伝えしていこうと思います。 今回のテーマ「色」と「特性」 今回は色の見え方、なかでも色覚特性について書いていこうと思います。 色覚特性はさまざまな理由から、多数派とは違う色の見え方・感じ方をする状態のことを言います。色
macOS における日本語表記ルール
日本語表記ルールの目的と方向性 表記ゆれをなくしたい 日本語は表記ゆれを起こしやすい言語。同義語が多く存在するし、一つの文章内にひらがな／カタカナ／漢字／アルファベットが混合し、同じ読みの単語ですら文字種の混ぜ方によっていく通りものバリエーションが存在する。何も考えずに闇雲に混ぜ合わせると読みにくい文章が生まれてしまう。そのため新聞や雑誌では書き手が異なる記事が混在していても読みやすいよう全体で統一した表記ルールを持っている。 これはコンピュータのユーザインターフェイス（UI）でも同じ話。考えてみればユーザがアプリケーションを行き来しながら画面の断片にその都度注目する行為は新聞で複数の記事をまたぎながら流し読みするのと似たようなものだ。 とはいえ UI においては短いテキストが多いためルールの重要性が想像しにくいかもしれない。ここで一つの例を考えてみよう。ほとんどのアプリケーションで編集メ
これでもうUIデザイン用の高品質なSVGアイコンに困らない！ 商用利用無料、改変も自由な太っ腹ライセンス -blendicons
WebサイトやスマホアプリのさまざまなUIデザインにぴったりな、シンプルなソリッド・ベタ塗りからおしゃれなカラーまで揃ったSVGアイコンが完全無料で利用できるblendiconsを紹介します。 アイコンはなんと、200,000個以上！ ベーシックなUIをはじめ、ショッピングサイト、タッチジャスチャー、日用品や家具、飲食物、スポーツ、ミュージックなど、多種多様なアイコンが揃っています。 blendicons Blendiconsはデザイナーやデベロッパーが容易に必要なアイコンを手に入れられるように、200,000個以上の高品質なアイコンを作成し、ダウンロードできるようにしたサイトです。 アイコンの利用にあたっては個人でも商用でも無料で、Webサイトやスマホアプリをはじめ、プレゼンや印刷物などあらゆる用途に利用できます。アイコンをカスタマイズして利用することもOKです。ただし、アイコン素材をそ
AppleがMRヘッドセット「Vision Pro」のために生み出した「空間コンピューティング」におけるUI設計のルールとは？
2023年6月6日(日本時間)に開催されたAppleの開発者向けカンファレンス「WWDC23」の基調講演で、Apple初のMRヘッドセットである「Vision Pro」が発表されました。AppleはこのVision Proで現実空間上にアプリケーションのウィンドウやコンテンツを表示する「空間コンピューティング」を提唱しており、開発者が知っておくべき空間コンピューティングのUI設計についてAppleのデザインチームが解説しています。 Design for spatial user interfaces - WWDC23 - Videos - Apple Developer https://developer.apple.com/videos/play/wwdc2023/10076/ Vision Proに搭載されるvisionOSでは、アプリアイコンが立体的に表現されるのが大きな特徴。 アプ
これだけは押さえよう！住所フォームの作り方 - ケンオールブログ
まとめ 住所フォームの作り方 住所フォームを作るときには以下の4つを押さえましょう。 オートコンプリート機能に最適化する 郵便番号フィールドは1フィールドにしてハイフン有無どちらも対応する モバイルUX優先なら郵便番号が入力されたら即座に補完。精度優先なら郵便番号補完ボタンを設置 住所フィールドは「都道府県」「市区町村」「町名以下」の3フィールドが基本。「建物」フィールドはオプション 本文 地域SNSのユーザー登録、ECサイトの配送先入力、資料請求、自治体サイトでの電子申請など、ウェブサービスを活用する上で住所入力は欠かすことができません。 住所入力をシンプルかつ正確に行えるような入力インタフェース（住所フォーム）は、離脱率を減らし、コンバージョン率を向上させる上で重要です。 郵便番号を入力すると対応する住所を自動入力する機能（郵便番号による住所補完）は、住所フォームの改善方法として最も効
Sign-in form best practices | Articles | web.dev
Sign-in form best practices Stay organized with collections Save and categorize content based on your preferences. Use cross-platform browser features to build sign-in forms that are secure, accessible and easy to use. If users ever need to log in to your site, then good sign-in form design is critical. This is especially true for people on poor connections, on mobile, in a hurry, or under stress.
トグルスイッチの誤用をやめよう
AnthonyはUX Movementの設立者で執筆者です。素敵なWeb体験をこよなく愛し、ユーザのために日々奮闘しています。 トグルスイッチを使うべき場合と使うべきでない場合があります。デザイナーが誤った使い方をするとユーザーの混乱とイライラにつながります。使うべきタイミングを知るには、さまざまなタイプのトグルの状態や選択肢について理解する必要があります。 文脈上の状態 vs システムの状態 トグルスイッチとトグルボタンをデザイナーは混同しがちです。両方とも状態を管理しますが、トグルスイッチとトグルボタンには根本的な違いがあります。トグルスイッチはシステムの状態を管理し、トグルボタンは文脈上の状態を管理します。文脈上の状態のトグルはユーザーが見ようとしている現在の画面にのみ影響を及ぼしますが、システムの状態のトグルはアプリ全体に影響を及ぼします。 トグルスイッチを文脈上の状態のために使う
「Amazonのプライムビデオが難しい」というおかんの言い分を聴いてみた｜Tsutomu Sogitani
大阪の実家に帰った時、リビングのテレビの裏側を見たらAmazonのFire Stick TVが挿してありました。このFire Stick TVをテレビに繋ぐと、Amazonのプライムビデオを観ることができるようになります。 プライムビデオには、Amazonプライムの会員であれば、追加費用を払うことなく楽しめる映画やドラマ、アニメなどが豊富に揃っています。さらに個別に追加金額を払うとほとんどの映像コンテンツを観ることができるという、まさにTSUTAYAキラーなサービスです。 うちのおかんは月に2～3回は映画館に行くほどの映画好きなので、プライムビデオのメインターゲットといえるでしょう。本来ならプライムビデオで映画三昧の毎日を送っていてもいいはずです。 しかしながら、Fire Stick TVを挿しているにもかかわらず、プライムビデオを一度も使っていませんでした。初期設定をした私の弟が一通り使
Appleのアニメーションはなぜ美しいか考える｜まりーな／エンジニア
こちらの内容は2018年iOSDCで登壇して発表した内容を更に詳しく書いたものです。 当日のこの発表のまとめはこちら↓ 概要 ふだん当たり前のように使っている iPhone や iPad、どうしてこんなに気持ちのいい使い心地になるのでしょうかコントロールセンターのアイコンたちのアニメーションや UI のパーツに着目し、AfterEffects でアニメーショントレースを行い、得た知見を共有します。 はじめにApple 製品は触り心地がいいので、ずっと触っていられますよね。Human Interface Guidelines や WWDC2018 Designing Fluid Interfaces の発表内容をもとに、Apple が何を目指してこのように設計したのか考察した内容をまとめました。iPhone を片手に一緒に手を動かしながら魅惑のアニメーションの世界を体験してみてください。 1
OpenGLやDirectXなGUIにimguiが最強すぎる - Qiita
imguiとは imguiは、OpenGLやDirectXなどの描画環境の中で動くGUIフレームワークです（vulkanも？）。 "Immediate Mode GUI"と呼ばれるパラダイムにより、大変短く直感的なコードでGUIを構築できます。 どういうGUIコンポーネントが使えるかは、リポジトリのスクショを見ていただいたほうが良いかと思います。 デバッグや調整、テスト用のGUIを構築することが目的のフレームワークです。 環境 今回この記事ではwindows10, vs2015, Cinder（0.9.0）上でサンプルを作成しました。 Cinder用には専用のimgui拡張があるため、そちらを使用します。 https://libcinder.org/ https://github.com/simongeilfus/Cinder-ImGui 根本的な考え方や、imguiのAPIは同じですが、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Autocomplete component with Shadcn UI
Magic UI
TWBlocks - Free SaaS website blocks
Twitterの嫌いなところ第1位「アプリ開いたとき一瞬だけ気になる投稿が見えてすぐに更新されて行方不明になるところ」←それなすぎる
「推測されやすい」パスワードを入力させないためにフロントエンドエンジニアができること
デスクトップアプリケーションのUIパターン - ウインドウ編（公開版） / UI Patterns of Desktop Applications - Window Layouts
本当にあったモーダルの怖い話 / Terrifying Nonfiction of Modal
