UIコンポーネントの大きさは外から制御しよう - Qiita
昨今のフロントエンド向けUIライブラリでは、コンポーネントの設計が重要です。この記事では、コンポーネントのスタイリング、その中でもとくにコンポーネントの大きさに関わるコンポーネント設計について考えます。 私の考える結論は、むやみに大きさを指定できるpropを生やさずに、CSSで外から大きさを制御できるようにしたほうがいいです。 コンポーネントの大きさを制御したい UIの一部分を再利用可能なコンポーネントとする場合、同じコンポーネントがさまざまな場面で使えるのが望ましいでしょう。コンポーネントが提供する機能にもよりますが、場面に応じてさまざまな大きさでコンポーネントを使用できたほうがよいこともあります。 具体例として、このようなコンポーネントを考えてみましょう。例はReactで示しますが、この記事の内容はReactとは関係ありません。 const Card: React.FC<React.P
freeeアクセシビリティー・ガイドライン — freeeアクセシビリティー・ガイドライン Ver. 202404.0-RELEASE+4.3.7
このガイドラインは、参考情報の追加や表現の改善などで、随時更新されます。 リリース:Ver. 202404.0-RELEASE+4.3.7 ガイドライン・バージョン：Ver. 202404.0-RELEASE チェックシート・バージョン：4.3.7 更新日:2024年4月23日
プロンプトでUIを生成してくれるAIサービス「v0」をUIUXデザイナーが使ってみた
デジタルプロダクション「factory4」でアプリやさまざまなIoTプロジェクトのUIUXデザインを手がける新谷友樹さんが、UIやUXにまつわるトピックについて解説する本連載。今回はAIサービス「v0」についてです。 こんにちは！株式会社Cosmowayが組織するデジタルプロダクション「factory4」のUIUXデザイナー新谷です。今回は、プロンプトからUIを作成してくれるツール「v0」の使いかたや、実際に使ってみた感想などを紹介していきます。 「v0 by Vercel」とは Next.jsを開発するVercelが、生成AIへのプロンプトでUIを自動生成するサービスを公開しました。2024年1月頭時点ではベータ版ですが、Freeプランも提供されているためログインすれば誰でも使用することができます。ChatGPTのように、プロンプトを投げるとAIがTailwind CSSとShadcn
タグ入力UIのパターンをまとめてみた - Goodpatch Tech Blog
この記事は「Goodpatch Advent Calendar 2021」の 23 日目の記事です。 初めまして、フロントエンドエンジニアの かず と申します。 自社サービスの開発でタグ入力UIを実装することになり、他サービスではどのような仕様になっているかを調査しました。 この記事では、タグ入力UIについてパターンをまとめ、それぞれのメリット・デメリットについて考えたことを共有したいと思います。 タグ入力UIとは 使用例とパターン テキストフィールド内に追加されていくパターン テキストボックスの外に追加されていくパターン ドロップダウンリストから選択するパターン ユーザー操作に対する挙動の違い タグ追加のタイミング 特定のキーを押してタグ追加 最初からタグとして入力されている テキストボックスからフォーカスが外れたときの入力文字の扱い タグ化される 消去される そのまま残る 候補表示のタ
UI-patterns.com
User Interface Design patterns are recurring solutions that solve common design problems. Design patterns are standard reference points for the experienced user interface designer. Product Insights at your fingertips. Our confidence-boosting product tools for business growth are practical guides and strategies that will immediately amplify the expertise of you and your team.
Cancel vs Close: Design to Distinguish the Difference
Topics: popups,information scent,ui elements,Web Usability,Design Patterns,back button,icons Web Usability Web Usability, Design Patterns Long ago, the symbol X meant “this is where the treasure is buried.” In today’s digital interfaces, X no longer marks the spot, but rather functions as a way for users to cancel a process or to dismiss an interim screen. How can one tell for sure whether the X m
Best Practices for Modal Windows
Are you thinking about using modal windows on your interface? Modal windows prompt users to choose an action to take before they can return to the main window. When they’re used right, they can ease user effort during a task. When they’re used wrong, they can get in the way of the user’s task. Here are some best practices that will help you design user-friendly modal windows. A modal window is a s
外国人から見た名前入力に関するBADなUIデザイン｜CULUMU / インクルーシブデザインスタジオ
こんにちは！ゲストライターのトゥクです。 前回は、連載最初の記事として私の大学の学部卒業制作研究をもとにデザインとの向き合い方について、ご紹介いただきました。 私の紹介記事に関してはこちらをご覧ください。 そして今回からは私自身や家族、友人が外国人として日本に住む中で感じていることや、出来事についてご紹介していきます。 この連載では、外国人視点から日本に住む上で感じたこと、気づき、出来事を通して、読者の皆さんに新たな視点や発見を届けたいと思います。そして社会におけるマジョリティやマイノリティに関係なく、全ての人にとって良いデザインについて共に議論できると嬉しいです。 外国語名を日本語名のフォーマットに当てはめるって難しい！今回私が紹介するのは「外国語名を日本語名のフォーマットに当てはめること」の難しさと、具体的に私が出会ったBADなUIデザインについてです。 役所や病院、インターネットの個
隠れた課題を見つけ出す「構造化シナリオ」を使った画面設計とは | 株式会社PLAN-B
いくつもの画面設計を重ねていくと、このような状況に陥ることはありませんか？ 「この部分の設計は、昔作ったあのサイトと同じ感じに」 「他社さんが作ったここイケてる！この部分をまねしよう」 というように、どこか他のサイトの「まねごと」だったり、過去に作ったサイトの「いいとこ取り」をしていたり。私自身、（深い理由もないまま）部分的に他のサイトのまねをして、画面設計をしていたこともあったと思います。 どうしてこのサイトに、この要素が必要なのか、なぜこの位置にあるのか、そしてそれがユーザーにとって本当に使いやすいのか。その理由が説明できないことに、モヤモヤしたことも。 そんな私ですが、この後お伝えする「構造化シナリオ」という考え方を使うことで、サイトを使うユーザーにとって「本当に欲しい情報」「価値を感じる情報」を、その優先度順に設計することができました。 「構造化シナリオ」を使う前は、どことなく難し
これだけは押さえよう！住所フォームの作り方 - ケンオールブログ
まとめ 住所フォームの作り方 住所フォームを作るときには以下の4つを押さえましょう。 オートコンプリート機能に最適化する 郵便番号フィールドは1フィールドにしてハイフン有無どちらも対応する モバイルUX優先なら郵便番号が入力されたら即座に補完。精度優先なら郵便番号補完ボタンを設置 住所フィールドは「都道府県」「市区町村」「町名以下」の3フィールドが基本。「建物」フィールドはオプション 本文 地域SNSのユーザー登録、ECサイトの配送先入力、資料請求、自治体サイトでの電子申請など、ウェブサービスを活用する上で住所入力は欠かすことができません。 住所入力をシンプルかつ正確に行えるような入力インタフェース（住所フォーム）は、離脱率を減らし、コンバージョン率を向上させる上で重要です。 郵便番号を入力すると対応する住所を自動入力する機能（郵便番号による住所補完）は、住所フォームの改善方法として最も効
ワイヤーフレーム、モックアップ、プロトタイプの違いとは？ | POSTD
開発者と仕事をしていると、スケッチ、ワイヤーフレーム、モックアップ、プロトタイプといった用語をよく聞くかと思います。しかし、あなたはこうした用語の意味を本当に理解しているでしょうか？ ワイヤーフレームやプロトタイプは、それぞれどんなときに利用するのか、知っていますか？ まず、アプリの構築を始める前に、スケッチ、ワイヤーフレーム、モックアップあるいはプロトタイプからスタートするべきだという理由を見てみましょう。 構築したいものがどんなものか、ブレインストーミングをしたり考え出したりするため。こうした作業により、あなたの期待するものが明確になる。 開発者にかかる費用を節約し、構築に必要なものを明らかにすることができる。 こうした作業の結果は投資家や最初の顧客、共同設立者に提示する目的で使える。 顔を突き合わせることのない開発チーム とコミュニケーションを取るためには、これらの用語を正しく区別し
三井住友銀行がnoteをはじめる理由。｜SMBC DESIGN
はじめまして。三井住友銀行の金子と申します。 私は2017年に入行し、デジタル領域中心のインハウスデザイナーをしています。 今回の投稿では、三井住友銀行にデザイナーが誕生してから今に至るまで、そしてnoteをはじめる理由、についてお伝えしていきます。 得体のしれない存在 そもそも当行で「デザイナー職」ができたのは3年ほど前。 Macはもちろん、デザインツールもないところからのスタートでした。 （今では作業環境もかなり進化していますが、それはまた別の記事にて。） 当初、何をやるか決まっておらず、周りからみればデザイナーは得体のしれない存在で、私たちとの関わり方を模索しているような状態でした。。（笑） 要件や設計が固まった後に相談をもらう事も多く、「できること限られるので、企画段階から相談してほしい！」というシーンはよくありました。デザイン界隈では、もはや”あるある”ですよね。 ただ、私の所属
Automatically record puppeteer tests - Chrome DevTools - Dev Tips
Chrome DevTools: Record tests with the puppeteer recorder Last updated: 25th November 2020 Introduction The Puppeteer Recorder feature in Chrome DevTools can monitor your webpage interactions and generate the code to automate a browser. For example, if you click on an element and type an email address into an email field, the recorder can generate the following code: await page.click("aria/Login")
The Most Hated UI & UX Pattern of 2018
Let’s play a game. I will present you with five UI/UX design patterns, in the most horrific way possible. You carefully consider my arguments, and then pick the pattern you hate the most. Shall we? Disclaimer: There won’t be any dark UX patterns in this post, like a fake hair on the screen or a non-working unsubscribe button. I think those are in a league of their own and deserve a standalone arti
レシピを見ながら楽しく実装、フォームのアクセシビリティ！その2 | フロントエンドBlog | ミツエーリンクス
<ul> <li><label><input type="checkbox"><span>選択A</span></label></li> <li><label><input type="checkbox"><span>選択B</span></label></li> <li><label><input type="checkbox"><span>選択C</span></label></li> </ul> <ul> <li><label><input type="radio"><span>いずれかを選択</span></label></li> <li><label><input type="radio"><span>いずれかを選択</span></label></li> <li><label><input type="radio"><span>いずれかを選択</span></label></l
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
USWDS: The United States Web Design System
Preview feature… New Filter UI
LINE Design System for Messenger - Guidelines
UX-mov | アプリのUIが動画で見れるギャラリーサイト
https://www.ipa.go.jp/files/000044154.pdf