ユーザーに刺さるUIデザイン実用テクニック37選
UI Tipsで公開された「UI Tips for Landing Pages & Apps by Jim Raptis」より許可をもらい、日本語抄訳しています。 シンプルなUIデザインテクニックで、より良いユーザーインターフェースをデザインし、ユーザーが満足する方法を一緒に学びましょう。 現役UIデザイナーのジム・ラプティス氏が実際の製品でテスト、検証した実用度の高いテクニック集なので、手軽に試すことができ、効果的にホームページやアプリのUIを改善できます。 時間がない人のために、今回紹介するテクニックのまとめがこちら。 各項目では実際のサンプルをつかって、「良い例」と「悪い例」を比較。すぐできる解決策と一緒に詳しく紹介しています。 ユーザーが恋に落ちるUIデザイン実用テクニック1. ソーシャルログイン2. より良いメニューデザイン3. グーテンベルグの法則4. モーダルの削除5. 不揃
v0（ブイゼロ）の使い方を徹底解説！始め方や料金、プロンプトも紹介
テキストだけでサイトやアプリを構築できるv0（ブイゼロ）と呼ばれるAIツールが、SNSを中心に話題となっています。 v0では、テキストだけで（ノーコードで）、サイトの見た目（UI：ユーザーインターフェース）やゲーム・アプリを作成できます。 とはいえ、「v0が話題なのは知っているが、どうやって使えばいいのかわからない」と疑問をもっている方は多いでしょう。 そこで本記事では、v0の始め方や使い方を徹底解説しています。また、実際に作成したプロダクトや、v0を使うコツも紹介しているため、ぜひ参考にしてみてください。 この記事を読むことで、v0の使い方がわかり、デザイナー以外の方でもクオリティの高いプロダクトを作れるようになるでしょう。 弊社SHIFT AIでは、v0の特徴や使い方、本記事では紹介してない活用例などをまとめた資料を法人様向けに提供しています。 ご興味のある方は、ぜひ以下のリンクからダ
CSSのユーティリティクラスと「関心の分離」——いかにしてユーティリティファーストにたどり着いたか（翻訳） - yuhei blog
Tailwind CSS作者のAdam Wathan氏による「CSS Utility Classes and "Separation of Concerns"」の日本語訳です。翻訳に当たって原著者の許諾を得ています。 2021年10月29日に全文再翻訳しました。 この数年の間で、私のCSSの書き方は、非常に「セマンティック」なアプローチから「ファクショナルCSS」と呼ばれるものに変わりました。 この書き方でCSSを書くと、多くの開発者からかなりの反感を買うことがあります。そのため、私がいかにしてここまでたどり着いたかを説明することで、その過程で得た教訓や洞察について共有したいと思います。 第1段階 「セマンティック」なCSS よいCSSのためのベストプラクティスとして、耳にするであろうことのひとつは「関心の分離」です。 考え方としては、HTMLにはコンテンツについての知識のみを含めるべきで
CSS設計における、すべてがコンポーネントであるという誤謬
後日追記: WEB+DB PRESS Vol.133でさらに詳しく書いた。 BEMによってもたらされた、コンポーネントベースのアプローチでは、「ページはコンポーネントの集合によって表現されるべきであり、ページに含まれるのはすべてがコンポーネントである」と考える。しかしこれまでCSSを書いてきた経験から、これではデザイン意図をまともに表現することができないと感じ始めた。なぜなら、普通デザイナーはページのすべてがコンポーネントであるとは考えないからだ。 もちろんページの構成要素のなかには、明らかにそれが「コンポーネント」であると意識して作られたものもある。ただしそれは一部であり、全部ではない。「コンポーネントもあれば、コンポーネントではないものもある」という感覚のほうが普通なのだ。 典型的なUIライブラリにある、「ザ・コンポーネント」みたいなものだけではページは完成しない。例として、一貫してB
When You Should Use a Breadcrumb Navigation
If you’re ever lost in a large territory, the first thing you’d want to know is where you are. Once you know that you can figure out how far you are from your destination. This is why shopping malls offer wayfinding maps with “You are here” indicators. Users want to know where they are when they’re lost deep in a site’s navigation. Knowing where they are will inform them on where they should go. Y
Using UI System Fonts In Web Design: A Quick Practical Guide — Smashing Magazine
Microsoft restarted conversations about system UI fonts with its original Windows Phone design language, which relied heavily on typography in general, and on a font named Segoe in particular. No wonder that the idea of using those fonts is spreading through the web world as well. Whether you want your website to feel more like an app, to draw clearer lines between the content and user interface,
Colors - Ant Design
Ant Design interprets the color system into two levels: a system-level color system and a product-level color system. The system-level color system mainly defines the basic color palette, neutral color palette and data visualization color palette in the design of Ant Financial. The product-level color system is in the specific design process, based on the color of the system to further define the
10年後も生き残るデザイナーの条件とは サイボウズ「kintone」開発チームからそのヒントを探る
サイボウズは2月14日、都内で開催された「Creators MIX 2020」において、「アジャイルのプロセスとデザイナーの変化 -開発チームに欠かせないデザイナーになるために-」と題した講演を実施。開発本部 UX・UIデザイナーの樋田勇也氏が登壇し、組織で求められるデザイナー像について解説した。本記事では、その様子をレポートする。 最初にアジャイル開発に加わった際に行った3つのアクション 樋田氏は、制作会社でのデザイナー勤務を経て2016年にサイボウズに入社。現在は、業務改善プラットフォーム「kintone」の開発にデザイナーとして携わる。kintoneとは、業務で必要なシステムを、ドラッグアンドドロップなどの直感的な操作によって、ユーザー自身が簡単に作ることのできるクラウドサービス。通常のシステム開発に必要なプログラミングは不要だ。 樋田氏のデザイナー歴はおよそ10年。「デザインのプロ
Developing UX Agility: Letting Go of Perfection :: UXmatters
A few years ago, our Development organization championed a move from a waterfall development approach to an agile development process. [1] Our User Experience Design team had already established a well-respected place in our organization, and everyone had a clear understanding of our roles and responsibilities within our waterfall development process. However, the agile literature that informed ou
プロンプトで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
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
効果的な管理画面を デザインをするために 避けるべき5つの罠
Breadcrumb Navigation Increasingly Useful
Form Page - Ant Design
Stay on the Page - Ant Design
Make it Direct - Ant Design
Layout - Ant Design
https://antv.antgroup.com/en/specification/language/palette
The guide to responsive web design in 2024 | Webflow Blog
The Beginner's Guide to Responsive Web Design (Code Samples & Layout Examples)
AIUI.me - Screenshot to code
