プロンプトで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
メールアドレスの確認フィールドをなくすべき理由
UX Movementの著者、編集長。明快で効果的なデザインを愛し、ユーザのために日々奮闘しています。 メールアドレスは、もっとも間違いやすいフォームフィールドの１つです。 入力データにはさまざまな種類の文字による長い文字列が含まれているため、間違って入力してしまいがちです。これにより、ユーザーが間違ったメールアドレスを送信する可能性があるのです。 メールアドレス確認の問題 デザイナーは、メールアドレスの確認フィールドを追加することで、間違ったメールアドレスの送信を防ぐことができると考えています。メールアドレスの確認フィールドの追加で誤送信を何件か防ぐことはできるかもしれませんが、必ずしもすべてを防ぐことができるというわけではありません。 多くのユーザーは、メールアドレスの入力内容をコピーして、確認フィールドに貼り付ける傾向があります。これでは、ユーザーが間違ったメールアドレスを貼り付ける
スマホのUI考２ 〜 フィードバックについて | fladdict
UIについて徒然と考える自分用メモ、２回目はフィードバック。ユーザーに「何かがおきたよ！」と如何に明解に知らせるか？１回目はこちら 随時増えたり減ったりするよ。自分の主観だから間違ってることもチラホラあるかもよ。 振り返ってみてTiltShiftGenでは、遷移系のフィードバックは少なめにして、情報系のフィードバックを多めに調整してたんだなぁとシミジミ。多分、ブラーの処理が重かったからだと思う。隙をみてバージョンアップしたい。 一般論 ・フィードバックとは？ ユーザーの操作に対して、結果を返すこと。操作の実感。 ・フィードバックのないアプリは痛覚の無い人間。 ・物理的なフィードバックもソフトウェア的フィードバックもなければ、ユーザーは何がおきているか知覚できない。 ・何かが起きたら必ずユーザーに通知する。 ・適切なフィードバックが行われるとユーザーは快感を感じる。 ・新雪に足跡をつけたり、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Preview feature… New Filter UI
LINE Design System for Messenger - Guidelines
UX-mov | アプリのUIが動画で見れるギャラリーサイト
https://www.ipa.go.jp/files/000044154.pdf
iOSやMac OS Xの「使えるUI」が検索＆ダウンロードできる『Cocoa Controls』 | 100SHIKI
