AIUI.me - Screenshot to codeThis project is on sale, contact me if you are interested. Contact Transform any screenshot into a fully functional, reusable component with just a single click.
マイクロソフト、UIコンポーネントにAI搭載。UIが賢く振る舞う「.NET Smart Components」実験的公開
マイクロソフト、UIコンポーネントにAI搭載。UIが賢く振る舞う「.NET Smart Components」実験的公開 マイクロソフトはUIコンポーネントにAIを搭載することで、ユーザーの意図をくみ取って賢く振る舞ってくれる「.NET Smart Components」を実験的に公開しました。 入力内容をAIが自動的に適切なフィールドへペースト .NET Smart Componentsがどのように賢く振る舞ってくれるのか、デモ動画からの引用で紹介します。 従来のUIコンポーネントでは、例えば「苗字」「名前」「電話番号」「郵便番号」「県名」「町名」「番地」などにフィールドが分かれていれば、人間がフィールドに合わせて適切な内容を入力する必要があります。
AmazonのUIがダークパターンすぎて酷すぎる
AmazonがEvilに染まっていく… 購入手続きのときに、急にこんな画面が挿入されてきたんだけど、 https://tadaup.jp/55aeed90d.gif こんな絵に書いたようなダークパターンある？？ 「お急ぎ便を無料で利用できます」と書いてあるけど、 小さく「会員は\600円/月で特典使い放題」と書いてある。 つまり、「600円払えば無料だよ」と言っている。つまり、無料ではない。 読解力を測るテストで間違えるような人は、もうこれ読み取れないだろ。 しかも、その下のボタンである。 一見すると、ボタンが2つ並んでいる。 YesとNoのボタンなのかと思いきや、なんと、これはYesとYesである。 「Yes か はい で答えてください」というジョークを素でやっているのが、今のAmazonなのである。 では、Noのボタンはどこにあるのかと、画面中をよく探したら、左側に、普通のテキストの見
チェックボックスの indeterminate 状態は将来多分なくなる - feb19
チェックボックスの indeterminate 状態は将来多分なくなるdate2024.3.14(Thu.)tagsDesignFrontend 近年お手本にしがちなデジタル庁の Design System では定義がされていませんでしたが、「チェックボックスの indeterminate 状態」について考えたところ、多分将来的に無くなるんだろうなと予想を立てました。 第三の状態: indeterminateチェックボックスを使ったフォームが入れ子のとき、子が全て選択されていないことを示す表現として indeterminate が使われることがあります。 基本的にはチェックされているかいないかを表す checked 属性の true false を使いますが、別の属性として indeterminate (未決定状態)属性 の true か false があるため、トライステートとなります。
プレースホルダーのアクセシビリティ上の課題と解決策 - SmartHR Tech Blog
こんにちは！SmartHRプロダクトエンジニアのhimiです。 この記事ではプレースホルダーのアクセシビリティとユーザビリティについての課題と、その解決手段についての話を書きます。 プレースホルダーって何？ Webアプリでよく見る、フォームコントロールに値が無いときに表示するテキストのことです。 主な用途としては、フォームの入力例や入力内容の説明テキストが設定されることが多いです。 HTML Standardでは The placeholder attribute represents a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. A hint could be a sample value or a brief de
ユーザーストーリー起点のUIデザインに潜む罠 ~モーダルな機能の実装を防ぐ~｜Takashi Ohmori
アジャイルサムライ――達人開発者への道-Ohmsha Jonathan Rasmusson 著／西村直人・角谷信太郎 監訳／近藤修平・角掛拓未 訳 shop.ohmsha.co.jp Wevoxの開発も例に漏れず、リサーチやユーザーから寄せられた声といった一次情報をベースにユーザーストーリーを作成し、アジャイル的に企画→実装につなげるといったプロセスを踏む機会が増えてきました。 自分自身、ユーザーストーリー起点での企画では、 ■早い段階で、なんとなく解決方法が見える ■ユーザーニーズの解像度を上げた状態でUIデザインに入れる という実感があり、ユーザーストーリーを重宝し盲信していました。そう、あの日までは、、 改善プロジェクトのMTGで抱えた違和感 数ヶ月前、「Wevoxのユーザビリティを、問い合わせ起点から改善する」というプロジェクトのMTGにアサインされました。 Wevoxでは、お問い
UIデザイナーが知っておきたい海外の優れたデザインシステム17選 | ベイジのUIラボ～業務システムとSaaSのUIを考える
デザインシステムとは、サービス開発する上で必要となるデザインの概念、スタイルガイド、コンポーネント集などで構成されるデザインのルールです。 Salesforce.comの「Lightning Design System」が2015年に登場して以来、多くの企業がこのデザインシステムを導入するようになりました。 プロトタイピングツールで有名なUXPinが提供するデザインシステムプラットフォーム「adele」では、90個以上（2019年12月現在）ものデザインシステムが公開されています。その企業のラインナップを見ると、大手ITベンダー、SaaSベンダーのみならず、自治体、金融機関、大学など多くの業界で、組織のブランド確立のために、デザインシステムを活用していることが分かります。 GoogleやAppleが提供するデザインシステムは、既に多くのブログで語りつくされていますが、その他の企業でも素晴ら
知識０から、ちょっとUIデザインに詳しくなるnote｜やました
前回は、「UIデザインってそもそも何なの？」という概論的な説明と、UIデザイン未導入の組織の中でみんなでデザインを始めてみるための施策（プロトタイピングとユーザビリティ評価）を話しました。 今回はサービス、プロダクト開発において、デザイナーではない人でも知っていて損はないUIデザインの重要ポイントについて説明します。主に以下の３つのテーマについて順番に議論をしていきます。 デバイスやソフトによるUIの違い ユーザーにかかる身体的・認知的負荷を理解する UIの重要概念（ナビゲーション、インタラクションなど）を知る 「ちょっと」と銘打っておきながらめちゃくちゃ長いnoteになってしまったので、気になる項目だけ読むか、何回かに分けて読んでいただくことをおすすめします、。 ※どこか内容に間違ってる部分やご意見ありましたらコメントいただけたら嬉しいです。 デバイスやソフトによるUIの違い皆さんがお使
UI/UXデザイナー向けのChatGPTプロンプト集15選
UXを改善することによって、ユーザー満足度や売上の向上につながるため、UXの重要性が上がってきております。 しかし、UX改善に取り組むデザイナーの中には、ユーザー目線となることが時に難しく感じることもあるでしょう。 そんな時に、アイデア出しを助けるツールとして、SEOに強いAIライティングツール「トランスコープ」や「ChatGPT」が注目されています。 ChatGPTとは、OpenAI社が運営するAIチャットボットです。 ChatGPTへの命令文であるプロンプトを活用できると、UX改善の調査や分析などが効率化できます。 【ChatGPT・OpenAI・GPT-4とは？】の記事で、ChatGPTについて詳しく解説しているため、ぜひご覧ください。 本記事では、UI/UXデザイナー向けに、ChatGPTを活用してUX改善に役立つプロンプト集を紹介します。 日々の作業を効率化し、UX改善アイデアを
【デザインシステム】エンジニアが知っておきたいデザインシステム - Qiita
デザインシステムとは？ 簡単にいうと、デザインシステムは、デザインに関することを体系化・構造化したものです。 具体的には、デザインの目的・原則やデザインの基準を定めるVIガイドライン、UIパターンやコンポーネント、ライブラリなどの再利用できるものが含まれます。 そのため、デザインシステムを導入することで、 1つのプロダクトで、200色の白が存在すること や 見た目、機能が同じものを何個も存在することがなくなるため、 大規模なプロダクトやサービスをチームで開発・運用していくのが効率的になります。 また、デザインとコードの両方で一貫性のある見た目にもできるため、 デザインの苦手なエンジニアでも、簡単に、デザインの意図に沿ったUIやクオリティの担保されたUIを作成することができます。 知っておきたいデザインシステム ○ 国内のデザインシステム 国内の企業・組織が公開しているデザインシステムを10
『はじめよう！ 要件定義』（とそのシリーズ）を読んで、はじめよう！UIデザイン｜金 成奎
『はじめよう！ 要件定義 ～ビギナーからベテランまで』はそのタイトル通り、ソフトウェア開発に携わるエンジニアやPM向けに、要件定義の進め方について優しく解説してくれる書籍です。かわいいイラストと平易な文章がとっつきやすく、するすると読めてしまいますが、要件定義って何をどうやったらいいの？とお悩みの方に対して、まずはこれだけやっておくべき基礎知識を得ることができる、とてもわかりやすい内容になっています。 そしてそして、ここからが本noteの主な趣旨ですが、この3部作はデザイナー目線で読み解くと、極めて明瞭で本質的で実践的な、ユーザー体験設計とUI設計の進め方について学べるデザイン教則本と言えるのです。 以下、その理由と、本シリーズを使ってUIデザインを進めていく方法を実例を踏まえて解説していきます。 要件定義とはUI・機能・データを決めることいきなり『はじめよう！ 要件定義 』のキモ・コンセ
タスク指向のデザインはなぜ生まれるのか？
『タスク偏重のデザインはなぜ生まれるのか？』の続きです。 簡単だから 画面を見て悩むデザイナーが「全体はよくわからないから別にしてこの中だけ作るか」と言いながらボタンの先に画面を連ねようとしている オブジェクト指向のUIにするには手順を解体し、オブジェクトを中心に構造化する必要があります。重複しているものはマージし、必要に応じて新しいオブジェクトを定義したり新しいイディオムを検討することもあります。 （例:「簡単に新規作成する」という機能に対して複製、テンプレート、マスターというイディオムを検討する） これらはそれまで作ってきたものとうまく整合するようにしなければいけませんし、整合しないならどこをやめたら全体としてひとつの形にできるのか考えることになります。これは大変です。 対してタスク指向のUIデザインは簡単です。 新しいタスク用に新しい入り口を作って、必要な入出力を線形に並べ、例えばウ
「UIの良さ」ってのはユーザビリティだけじゃないんだよ〜UNDERTALEのUI｜Yamashita Angelica
この記事には、ゲーム「UNDERTALE」のネタバレが含まれます。 ネタバレによってゲーム体験を致命的に損なう可能性が高い作品です。今後プレイする予定のある方は、ぜひプレイ後にお読みください。 UNDERTALE（アンダーテール）とは、「知る人ぞ知る」と言うにしてはあまりにも有名になりすぎたインディーゲームです。2015年にPC向けに開発され、現在はSteam、XBOX、PSVITA、PS4、Nintendo Switch…と、多くのプラットフォームで遊ぶことができます。 ほぼToby Fox氏個人で開発した作品でありながら、各メディアのGOTY（ゲーム・オブ・ザ・イヤー）に多数ノミネートされており、「メタルギアやマリオが出てくる受賞ランキングに個人開発ゲームが入ってるってどういうことだよ！！！！！？？？？！！！！！」と当時せっせとゲームスタジオで働いていた私は卒倒しそうになりました。 こ
Figma Dev ModeとVariablesでデザイナーとエンジニアの連携を強化
✅ Dev Mode利用可 ❎ Dev Mode利用不可 2. Figma Variables Figmaで使える変数のことで、デザイン内で使用されるColor、Paddingなどの数値をVariablesとして定義し、一元管理が可能となります。Light/Darkに代表されるテーマ切替やコンポーネントのステータスやフォームのバリデーションなどを見越して、UIツールキット「Astro」にVariablesを取り込んでみました。 Variablesを取り込みたい理由 今までのFigmaの指定では、Figma上のColor指定と、CSS Variablesのネーミングにズレがあり分かりづらく困っていました。Figma側ではデザインシステムでStyles設定したカラーパレットを用い Thema/Primary という名前で登録していました。しかし、CSSではカラーに対して色の意味より具体的
アラートのOK、Cancelボタンは右と左、どちらにおくべきか？ - Qiita
はじめに 皆様は、アラートのOKボタンとCancelボタンの配置は どういった基準で決めていますか？ (右か、左か？） 勿論、スマートフォンを右手で操作する人、 左手で操作する人で、変わってくると思いますが、、、 基準はどうすべきか？ ちなみに、押しやすいのは、右か、左か？ 右手で操作する人を想定した場合 押しやすいのは、右側だと思います。 単純に親指からの距離が近いためです。 逆に左側は、親指からの距離が遠いため、 押しにくいです。 （当たり前ですね。） こういうときは、各プラットフォームのガイドラインに準拠するのがベターだと思います。 「郷に入っては郷に従え」ではないですが、 iOSの場合はヒューマンインタフェースガイドライン、 Androidの場合は、Google Material designに準拠すべきだと思います。 iOSヒューマンインタフェースガイドラインの存在 存在を知って
ウィンドウを閉じる「×」ボタンはいつから使われるようになったのか？
Windows 11では、ウィンドウの右上にある「×」アイコンをクリックすると、そのウィンドウを閉じることができます。また、macOS Venturaでもウィンドウ左上の赤い「×」ボタンをクリックするとウィンドウが閉じられます。UIにおける「×」＝「ウィンドウを閉じる」というデザインの起源について、SFライターのローレン・ウォーカー氏が解説しています。 X to Close. The origins of the use of [x] in UI… | by Lauren Archer | re:form | Medium https://medium.com/re-form/x-to-close-417936dfc0dc 「『×』をクリックするとウィンドウを閉じる」というデザインはコンピューターにおいてはほぼ標準といっていい概念になっており、さまざまなGUIに採用されています。例えば、W
Apps by Apple
Connect, create, and get things done with powerful and intuitive apps designed to be accessible, private, and secure. Journal Introducing Journal, a new app that helps you reflect on everyday moments and life’s special events. On-device machine learning provides private, personalized suggestions inspired by your photos, videos, workouts, and even the places you go. Lock Journal and no one can acce
混同しがちなUI用語の用法を整理する【モーダル/フィードバック編】｜i3DESIGN Designers
はじめにこんにちは！i3DESIGN デザイナーチームのUIデザイナー関口です。 今回は、モーダルやアラート、ダイアログなど、ユーザーにフィードバックを提供するためのUI表現における言葉としての定義の違いをまとめました。 チームのコミュニケーションの中でも混同しやすいこれらの定義をしっかりと理解することで、チーム内で共通認識を持ち、スムーズなやりとりを実現することができると思います。 ぜひ、この機会に疑問を解消しましょう！ 1.モーダル・アラート・ダイアログ・ポップアップモーダル「モーダル」の定義UIデザイナーの方であれば、「モーダル」という言葉には聞き馴染みがあるのではないでしょうか。 特に、こちらの画像のような「画面中央にかぶさるように出てくるウィンドウ」を「モーダル」と呼ぶことがあります。 しかし、「モーダル」という言葉自体は本来、「具体的なものの名前」ではなく「表示の形式・状態」を
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Galileo AI
画面によってボタンの意味を変えるUIを作るやつは何をやらせてもダメ。(温度を上げようと思って+を押したら次の画面では-だった。何を言っているのかわからねーと思うが以下略)
