サイゼリヤのモバイルオーダーが完全にガチ勢のための攻めた仕様になっている→逆にタブレット操作に慣れていない人ほど使いやすい仕様かも
Yuta SAWA @sawawww 数ヶ月ぶりにサイゼに来たが、いつの間にかモバイルオーダーが導入されていたんだが、流石にこれは攻めたUIだな。。。 pic.twitter.com/vn4FxpU8wr 2024-05-31 12:22:05 ラムダ🥒ラムダ技術部 @yoidea 番号を暗記していればミスなく爆速注文できそうな常連向けのUIなのは個人的に嬉しい！ リッチなUIのモバイルオーダーアプリは、視覚情報メインでわかりやすさを追求している代償として、1つの商品を選択するのに何回も画面遷移させられる傾向にあるから、対極的なこの攻めたUIを採用したのは興味深い x.com/sawawww/status… 2024-05-31 14:58:39
Python Web UIフレームワークで作るデスクトップアプリ | gihyo.jp
寺田 学（@terapyon）です。2024年4月の「Python Monthly Topics」は、Python Web UIフレームワークの1つであるStreamlitを使ってWindowsやmacOSのデスクトップアプリを作る方法を解説します。 目的・モチベーション Pythonで自動化のスクリプトを作ったり、JupyterLabやColaboratoryでデータの可視化を行うことがあります。これらを作成者以外の多くの方に利用してもらう方法として、Webシステムやデスクトップアプリとして提供する方法が考えられます。 Webシステムの構築やデスクトップアプリの作成となると、技術的なハードルがあります。他には、時間的なコストに見合わないという状況もあり得ます。 Python Web UIフレームワークを使うことで、比較的少ないコードでWeb UIからスクリプトの実行や可視化をするアプリ
【爆速UI設計術】モダンなwebデザイン素材集 - Qiita
特徴 女性らしいイメージがやや多い 下記のような柔らかい印象のイラストが多いです。 【ガジェットストック】 ガジェット関連のものを使用したい場合は、下記を使用すると良いと思われます。 【アイコン系】 【human pictogram 2.0】 オリンピックで流行ったやつです。 本サイトでは、アタッチメントをつけたりすることでかなりカスタマイズ性が高いのが特徴です。 【EXPERIENCE JAPAN PICTOGRAMS】 特徴 海外から見た日本が表現されている これはシンプルにUIが凝ってたので紹介します。 和テイストを演出したい場合は、良さそうですね！ 【ICOOON MONO】 こちら色・サイズも変更可能です！ 【Icon-rainbow】 ICOOON MONOと異なり、こちらは、中が肉抜きされているのが特徴。 【IFN FREE ICONS】 このデザインはどのようなパターンにマ
オブジェクト指向でUIを考えられるようになりたい。 - Qiita
1. 目的 UIデザインを勉強し始めました。現在「オブジェクト指向UIデザイン-使いやすいソフトウェアの原理」を読んでいます。そのため、学習進行の記録と復習を兼ねて、学んだことを記事にしようと思います。 以下「1. オブジェクト指向UIとは何か」という本書のさわり部分についてまとめています。 この記事で載せている例には私が考えたものも含まれていますので、間違い等ありましたらコメントにてご指摘いただけますと幸いです。 2. オブジェクト指向UI(OOUI) UIをオブジェクト(ユーザーが操作する時の対象物)を起点に設計します。GUIももともとオブジェクト指向プログラミングのコンセプトに合わせて考案されました。多くのアプリはオブジェクト指向型のGUIです。 最大の目的は、ユーザーがオブジェクトに対して自由な順序で働きかけながら目的を達成することです。 原則 オブジェクトを知覚でき直接的に働きか
知識０から、ちょっとUIデザインに詳しくなるnote｜やました
前回は、「UIデザインってそもそも何なの？」という概論的な説明と、UIデザイン未導入の組織の中でみんなでデザインを始めてみるための施策（プロトタイピングとユーザビリティ評価）を話しました。 今回はサービス、プロダクト開発において、デザイナーではない人でも知っていて損はないUIデザインの重要ポイントについて説明します。主に以下の３つのテーマについて順番に議論をしていきます。 デバイスやソフトによるUIの違い ユーザーにかかる身体的・認知的負荷を理解する UIの重要概念（ナビゲーション、インタラクションなど）を知る 「ちょっと」と銘打っておきながらめちゃくちゃ長いnoteになってしまったので、気になる項目だけ読むか、何回かに分けて読んでいただくことをおすすめします、。 ※どこか内容に間違ってる部分やご意見ありましたらコメントいただけたら嬉しいです。 デバイスやソフトによるUIの違い皆さんがお使
「この小さな札は何？」 サイゼリヤの注文方法が激変！ 「メニュー番号を手書き」からどう進化したのか
サイゼリヤが新しい注文方法を導入している。これまでは、各テーブルに置いてある注文用紙に利用客が番号を記入して店員に渡すスタイルだったが、どのように変わったのだろうか。筆者が都内の店舗で体験した内容を交えながら解説する。 テーブルで見つけた小さな「札」 入店後、店員に案内されてテーブルに移動すると、長方形の小さな札を見つけた。札には「いらっしゃいませ」「テーブル番号24」「注文用QR」といった情報が記載されている。見た目は、小売業界で導入が進んでいる電子棚札（画面が電子ペーパーになっており、価格などをリアルタイムに変更可能）に似ている。「この小さな札は何だろう？」というのが最初に見たときの感想だ。
静的サイト向けの全文検索エンジンと UI ライブラリの Pagefind
デモとして、このブログに Pagefind を導入してみました。ヘッダーの検索アイコンをクリックすると検索フォームが表示されるので、キーワードを入力して検索してみてください。 使い方 Pagefind は構築済みの UI ライブラリと、CLI コマンドとしてインデックスを作成するためのツールから構成されています。まずは UI ライブラリの部分から見てみましょう。 UI ライブラリ Pagefind の UI ライブラリは、検索フォームと検索結果を表示するためのコンポーネントから構成されています。この UI は以下のコードを追加するだけで簡単に利用できます。 <link href="/pagefind/pagefind-ui.css" rel="stylesheet" /> <script src="/pagefind/pagefind-ui.js"></script> <div id="s
【閲覧注意】イライラ不可避なUIデザイン10選 - Qiita
弊社Nucoでは、他にも様々なお役立ち記事を公開しています。よかったら、Organizationのページも覗いてみてください。 また、Nucoでは一緒に働く仲間も募集しています！興味をお持ちいただける方は、こちらまで。 はじめに 人は見た目が9割 皆さん一度はこの言葉を耳にしたことがあるのでしょう。内面がどれほど素晴らしくても、外見がそれに見合わないと、なかなか本当の価値を認めてもらえないものです。 この話は人間だけでなく、アプリケーションにも当てはまります。どれだけ内容が素晴らしくても、見た目がイマイチだったり使い勝手が悪かったりすると、ユーザーに敬遠されてしまいます。(私は以前ネ⚪︎フリからア⚪︎プラに切り替えたのですが、使いにくく感じたため、すぐに元のサービスに戻しました) エンジニアの皆さん、優れた技術力を持ちながら、デザインが原因でユーザー離れを招いていませんか？そうならないよう
指示したUIをAIがTailwindベースで実装してくれるv0が凄い
v0とは v0は自然言語で作りたいUIをAIに指示するとそのUIをTailwind (shadcn/ui)ベースで作ってくれるサービスです。 shadcn/uiとは shadcn/uiはRadix UIというUIをもたないヘッドレスUIに対してスタイルを当てたコンポーネント集で、TailwindというCSSライブラリを使ってRadix UIに対してスタイルを当てています。 shadcn/ui本体のライブラリがあるわけではなく、自身のプロジェクトにコンポーネントを直接コピーして使うことが特徴です！ Tailwindが好きな人にはたまらないコンポーネント集ですね！ shadcn/uiに最適に作られていますが、Tailwindユーザーであれば作られたUIをほぼそのまま使うことができます。 下の画像のようなチャット風のUIが特徴なサービスになっていて、このチャットに指示を出すことでUIを作ってくれ
Vercel、生成AIへのプロンプトでWebアプリのUIを自動生成してくれる「v0」をベータ公開。Freeプランも提供
Vercel、生成AIへのプロンプトでWebアプリのUIを自動生成してくれる「v0」をベータ公開。Freeプランも提供 Next.jsの開発元として知られるVerelは、生成AIに対して自然言語のプロンプトを与えることでWebアプリケーションのユーザーインターフェイスを自動生成してくれるサービス「v0」のベータ公開を発表しました。 v0を使うと、人間のWebデザイナーに「こんな画面を作って」「ここの色は青にして」「ここのフォントは大きく」などと言葉で指定するの同じような感じで生成AIに指示をして、HTMLやCSSなどのコードを書くことなくWebアプリケーション画面の生成が可能です。 Introducing v0: generate UI from simple text prompts. 5,000 waitlist invites were sent today—with over 25
“楽天離れ”が加速…「若者から圧倒的に支持される通販サイト」と分かれた明暗 | 日刊SPA!
筆者（田中謙伍）はAmazon日本法人に新卒入社し、現在はAmazonで商品を出品する企業のコンサルティング会社を経営している。 Amazon日本法人在籍中に副業でAmazon内で商品を出品し3億円を稼ぎ、現在はAmazon内でヒットする商品の成功要因を分析できる立場を活かし、日刊SPA!では「ヒットする商品の背景」についてお伝えしていきたい。 今回は、日本で急成長している海外ECサイト「Qoo10」と、苦境に陥っている「楽天市場」を比較してみたい。浮かび上がってきたのは、あまりに好対照で残酷な真実だった。 Qoo10はアメリカに本社を置くグローバルEC企業「eBay（イーベイ）」が、運営する総合ECモールだ。日本には2010年に進出し、2023年で14年目を迎えている。 日本では国内EC市場の年成長率の平均が10％と言われているが、Qoo10は2021年に約30％の成長を遂げており、まさ
「ChatGPTには一度言ったことを覚えていてほしい」 ベクターストアで社内向けChatGPTの頭をちょっと良くした話
「ChatGPT Meetup」は、プロンプティングからOpenAI API、さらには周辺のライブラリやHubのエコシステムまで広く活用の助けになる知見を共有し、みんなで手を動かして楽しむためのコミュニティです。1回目に登壇したのは、株式会社リンクアンドモチベーションの白田幹氏。社内向けのChatGPTを改善した時の開発について発表しました。 LLM推進担当の白田氏 白田幹氏：「Vector Storeを使って社内向けのChatGPTの頭を少しだけ良くした話」というところで、ちょっとお話できればと思っています。 はじめに、自己紹介をさせてください。株式会社リンクアンドモチベーションという会社におります、白田幹と申します。2020年新卒入社で、データサイエンティストとしてこれまで働いてきたのですが、「ChatGPT」の登場とともに今はLLM推進担当というところで、基本的には社内に向けてLLM
UIは閲覧画面からつくろう。｜Shino | Software Designer
ユーザー体験的なものをストーリーで整理し次にUIを作成するとき、閲覧・参照系より先に新規作成のUIから考える、というケースをときどき見かけます。 これ、すごい違和感あります。 ストーリーにおいてユーザーはまず新規作成するので、そのまま新規作成から着手してしまう、といったところでしょうか。 その場合、新規作成の目当てたるオブジェクトの姿が曖昧になりがちです。 そうすると、新規作成画面にしか存在しない特殊なレイアウトやコンポーネントや、特に意図がない冗長なモーダルができあがることが多いと感じています。 目当てが定まっていないうちから、それをどう作るか、どう編集するかを考えるのって難しくないですか？ 考える順番閲覧・参照系のUIを先に作ることで、それが新規作成や編集の目当てとなり、効率よく良いデザインしやすいと感じています。 例えば、私の場合、以下のように考えを進めることが多いです。 まずは「R
なぜ使われないダッシュボードが作られるかという話 - satoshihirose.log
はじめに 最近、ビジネスダッシュボードの設計・実装ガイドブックという書籍が出版された。今まであまりなかった視点から書かれたデータに関する本で面白く読んだ。 ビジネスダッシュボード 設計・実装ガイドブック 成果を生み出すデータと分析のデザイン 作者:トレジャーデータ,池田 俊介,藤井 温子,櫻井 将允,花岡 明翔泳社Amazon 作ったダッシュボードの利用が進まず、虚しさを覚えた経験がある人は多いと思う。どうしてそうなってしまうのか、自分の経験を元にまとめたいなと思ったのでまとめる。 なぜ使われないダッシュボードが作られるか なぜ作られたダッシュボードが使われないかと言うと、基本的にはそのダッシュボードがそんなに必要なものではないからだ（社内周知がうまくない、ツールの使い方がわからない人が多いなどの理由もあったりするがここでは無視する）。 必要のないダッシュボードが作られてしまう状況に関して
Figma の Dev Mode で UI の確認を楽にする｜ふじけん / kenshir0f
こんにちは、ふじけん(@kenshir0f)です。 Figma Config 2023 で Developer Mode (Dev Mode) が追加され、エンジニアなど実装を担当する人目線でのデザインの確認がより便利になりました。 この Dev Mode はいったい何が便利なのか、どうやって既存のファイルで活用するのかを紹介したいと思います。 公式のチュートリアルはこちら↓ Dev Mode とは？Dev Mode はデザインデータを実装担当者が見るときのモードです。 エンジニアが Figma にあるデザインを実装する時に、デザインに関する情報をすぐに参照したり、UIに関連するコードを確認したりすることができます。 具体的なメリットは以下の通りです。 開発に必要なデザイン・画面だけを素早く参照できる デザインに関連するリンク(GitHub や Storybook, Notion など)を
なぜ <div> に onClick がダメなのか？
■ はじめに <div>要素にonClickを渡すべきではない、ということ聞いたことはないでしょうか？ ただ、なぜ渡すべきでないのか？ 理解してなかったので今回調べてみました。 サンプルコード 今回動作確認に利用したサンプルリポジトリのコードはReactで書いています。 ■ 結論：<div>にonClickを定義するのがなぜダメなのか？ ユーザーにとって操作性の低いボタンになってしまうから、です！ 要するに UX が悪くなってしまうから！ その理由を解説していきます！ ■ 操作性の低いボタンになってしまう理由 大きく３つあると考えています。 div要素は focus を持たないから returnキー, spaceキーをonClickに変換しないから スクリーンリーダーが認識しない要素だから ◎ focus を持たないから <div>要素はfocusを持ちません。 なので、tabキーで要素に
ChatGPT×Whisperで履歴書と職務経歴書づくりを効率化 開発してみてわかった、生成AIの活かし方
大規模言語モデル（LLM）を、実際にプロダクトや実務に役立つかたちで利用している各社が見た使いどころや、実践の上での工夫について学び合うためのイベント「ChatGPT IN ACTION 実践で使う大規模言語モデル」。株式会社ROXXからは、CTOの松本宏太氏が登壇。「ChatGPT×Whisper」で作ったプロトタイプを紹介しました。 ROXX社・CTO松本宏太氏 松本宏太氏：弊社は「ChatGPT×Whisper」でいろいろプロトタイプを作っているので、その中の事例を1つ紹介して、そこで学んだ内容をもとに、今後の展望をお話できればなと思っています。 （スライドを示して）今日は、こういう感じで話していこうかなと思っています。まず、自己紹介をさせていただきます。 あらためて、株式会社ROXXでCTOをやっている松本と申します。「kotamat」という名前でいろいろやっているのですが、もとも
WebRTC と React を組み合わせるなら Flux 設計が有効
この前ポジショントークしたらそれなりに反響があったので書いてみる。 これまでの人生を振り返ると毎年ラジオや電話や配信サービスを作っている気がするし、なんかそういう仕事が回ってくることが多い気がする。 最近自分なりに答えが出たかなと思ったことがあるので言語化してみようと思う。 OGP は Flux ぽい画像だ。 注意・免責事項 ここにあるソースコードは不完全です。これは私が元々手元で実験していたボイラープレートであるとはいえ、いろんな仕事で培ったノウハウ的なものも含まれているので、念には念を入れて意図的に要件が透けそうな箇所は削除しています。 その結果元々のボイラープレートと乖離してしまい、動作しないコードになっています。ただ概念を伝えるには十分なコードになっているはずなので、脳内補完してください。質問は Twitter のメンション、もしくは Issue でのみ受け付けます。 (完全版を書
階層メニューやトーストUIが簡単に作れる新技術！ JavaScriptで利用するポップオーバーAPI - ICS MEDIA
階層メニューやトーストUIが簡単に作れる新技術！ JavaScriptで利用するポップオーバーAPI 2023年5月〜6月にリリースされたChrome 114とEdge 114には、「ポップオーバーAPI」というAPIが搭載されました。 ポップオーバーとはコンテンツの1番上に重ねて表示するUIで、ユーザーにアクションを促したり、補足の情報などを伝えるために画面に表示します。ポップオーバーAPIのMDNのドキュメントではオーバーレイ、ポップアップ、ポップオーバー、ダイアログなどを総称して「ポップオーバー」と呼んでいます。 ウェブサイトでよく見かけるポップオーバーですが、実装するには意外と調整や考慮の多いUIです。たとえば、画面の1番上に重ねるためにはz-indexで他の要素との重なり順を調整する必要があります。Escキーを押した時や要素外をクリックした時にポップオーバーを閉じるには、Java
CSSを持たない Headless な UI ライブラリと ChatGPT によるマークアップ生成を試してみる
いまさら気づいたけど Headless 系のUIライブラリが一番 AI と相性いいのではないか。 ロジックはプログラマで書けて自由度高いし、コンポーネントのネスト構造から意図を読み取れるだろうし、class 名は自由に書けるから意図を表明しやすい。 それをプロンプトとして ChatGPT or Codex にそのまま投げて書かせる、ができる。 というわけで vite + react + radix-ui + vanilla-extract で実験してみた。 プロンプト あなたは凄腕のマークアップエンジニアです。 radix-ui は Headless UI ライブラリで、UIとしてのセマンティクスのみを持っています。 次のコードは React + radix-ui + vanilla-extract で書かれた React コンポーネントです。 // Popover.tsx import
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
