理想のUIをめざして！Webでハーフモーダルを作って磨き上げた話 - Tabelog Tech Blog
こんにちは！飲食店システム開発部オーダーチームの開発エンジニアを担当している堀口です。 食べログオーダーは、レストランでの飲食体験をより快適にするためのモバイルオーダーシステムです。飲食店に来店したお客様が自身のスマートフォンを使用してQRコードを読み取り、Web上でメニューをカートに追加し注文することができます。メニュー選択や注文操作はWebでありながら、ハーフモーダルを使用したネイティブアプリのような注文体験ができます。 この記事では、モバイルオーダーシステムのUI改善に焦点を当てます。ハーフモーダルの採用がどのようにして決定されたのか、その開発プロセス、そして実際に達成された改善点について詳しく掘り下げていきます。Reactを使用したフロントエンド開発で遭遇した課題と、それらをどのように解決したかの具体例を紹介します。 目次 なぜ「ハーフモーダル」を採用したか ハーフモーダルの導入と
これで迷わない！Modal、Dialog、Drawerの違い
ベン図で表すと以下のようになります。 （あまり一般的でない名称のコンポーネントも便宜上使用しています。） 以降、詳しく解説します。 Modal Modal は、ユーザに特定のアクションを求めるために、ユーザのインタラクション（操作）を中断させる UI コンポーネントです。 難しい表現をするならば、ユーザの操作を「モードに移行」させるコンポーネントと言えます。 もともと、「Modal」という英単語はこちらで言及されているように形容詞です。 そのため、「Modal な〇〇（名詞）」という意味が本来は適切な使い方です。例えば「Modal な Dialog」や「Modal な Drawer」などです。 今日では単に「Modal」だけで使われることが多いので注意が必要です。 Modal はユーザの操作を制限し、ユーザが特定のタスクに集中して対処しなければならない状態を作り出します。 ユーザは「モーダ
もうjsなんていらない！世界で流行っているHTMXについてまとめてみた - Qiita
HTMXとは https://htmx.org/ HTMXは、JavaScript を記述せずに、Ajax通信や高度なUXを実現できるライブラリ。 軽量 で 高速 で、既存のサーバーサイドのフレームワークとシームレスなやり取りができる。また、AJAX通信の発火、フォームの送信処理、DOMの更新などを既存のHTML要素を拡張するだけで可能とする。WebSocketやSSEにも対応しているので、チャットアプリなどにも適している。 2023 JavaScript Rising Starsでは、 フロントエンド・フレームワーク部門で見事2位に輝いた！(一位はReact、全部門だとshadcn/ui) 似たような機能として、Ruby on RailsのHotWireがあるらしい。 2024年はHTMXがくると言われているぐらい世界で騒がれているのだが、あまり日本では流行っていない。以下はGoogle
個人開発で即戦力になるツール・サイトまとめ - Qiita
はじめに 個人開発もエンジニア自体の歴も浅いSEです。 就業先がJavaをメインで使う企業なのですが、個人的にフロントエンドまわりが好きです。 元々、興味本位でデザインの本だったりUXに関する本とかを読んでいたりするのですが、 その結論の際にたどり着いたのが、 「理論とか決まってるなら、それをよしなにやってくれるor参考にできるツールとかサイト探せばよくね」 という結論になりました。なんと怠惰な思考でしょうか。 そんなわけで、こちらではデザインに限らず、色々開発に便利なツールを紹介させていただきます。 （有名なのが多いかもしれませんが、ご容赦ください、結局有名なものに行き着くのです） レイアウト関係 1. Awwwards おしゃれなwebサイトが集まっているサイトです。 ここまで個人開発でお洒落にできたらいいなと思いますが、自分はアニメーションを考えるときや、 作りたいフロント側のデザイ
ユーザーは⾃分が本当にほしいものを⾔葉にできない！UIデザインとUXデザインは別もの！先入観の罠！目からウロコなUIデザインの勉強会
羽山 祥樹＠日本ウェブデザイン @storywriter 明日7/15（金）の夜にUXデザインの無料セミナーするんだけど、ネタスライドしかアップしてないので、中身があるか不安に思われている気がしてきたw ちゃんと中身もあるよ！ ということでスライドチラ見せ！ セミナー申し込み（無料） → creativevillage.ne.jp/111762 pic.twitter.com/wJl3jUyz3b twitter.com/storywriter/st… 2022-07-14 18:04:25 リンク connpass 【UXデザイン基礎】「UXデザインとは」からはじめる「本流」のUXデザインはじめの一歩 (2022/07/15 19:00〜) ## 【UXデザイン基礎】「UXデザインとは」からはじめる「本流」のUXデザインはじめの一歩 UXデザインの根幹を理解するための無料セミナーを開催し
完璧な要件定義など幻想である。個ではなく、チームで作る要件定義 - Qiita
これはなにか エンジニア、ビジネスサイドの方に向けた、「良い要件定義の作り方」について書いた記事です。 長文がつらつらと書いてある本稿ですが、要するに言いたいことは、 ● 完璧な要件定義など幻想であり、誰がどう作っても不完全である ● そのため、一番危険なのは、とびきり賢い人が出してきた要件定義で、 「あの人が作ったんだから大丈夫」と盲目的に考えること ● 完璧にはならないことを受け入れ、ベストを尽くす姿勢が大事 ●そもそも、アジャイル開発において、完璧な要件定義は求められていない ●良い要件定義には以下のスタンスが必要 ● UXから逆算する ● 削ぎ落とす ● 個ではなく、チームで作る ● レビューを徹底する ● 3つのシナリオを想定する ということです。 ※約1万字あり、また各章について深く掘り下げる項目は別記事を添付しています。そのため、モバイルで通読するにはすこし骨が折れるかもしれ
「1枚のシート」でエンジニアとデザイナーのストレスが激減した話 - Qiita
「考慮もれ」「手戻り」をなくしたい モチベーションクラウドシリーズのデザイナーです。 フロントエンドエンジニアのみなさんは、画面デザインを見て「どう実装するんだ？」とストレスを感じたことはないですか？ 例えば... 👨💻 フロントエンド「Emptyのときはどうするんだろう？最初から考慮してほしいな...（ストレス）」 👩🎨 デザイナー「この状態も考えないといけないのか。確認するだけで1日終わるな...（ストレス）」 →お互いにとって、よくない！！！！！ こうした状態を受けて、お互いにとってストレスなく開発するために、デザイナーとフロントエンドで制作プロセスを改善しました。 今回は、プロセス改善のステップや導入してみて効果的だったツール（シート）についてお伝えします。 【まず初めに】 「UI Stack（状態デザイン）」の必要性の周知 UI Stackとは、UIの考慮すべき5つの
「早くリリースして、早く改善しよう」の落とし穴―― 開発畑のプロダクトマネージャーの失敗から学べ
はじめに はじめまして。ゆずたそ（@yuzutas0）と申します。私はソフトウェア開発者からプロダクトマネージャーへ役割を変更した後、多くの失敗を経て「マインドセットを切り替えること」の重要性を痛感しました。 この連載では、私が学んだ「プロダクトマネージャーのマインドセット」を解説します。 想定する読者・提供価値については、2つのパターンを想定しています。1つ目は「同じように失敗した経験のある人」です。自分の経験を振り返りながら「こうすればよかったのか！」と考える機会になるはずです。2つ目は「これから失敗を経験するであろう人」です。これから起きる課題について「こうすればいいのか！」と考える機会になるはずです。 注意・免責 ①本連載の内容は、筆者の個人的な見解にもとづきます。適宜ご自身の立場に置き換えて、読み進めていただければと思います。万が一、誤りや不快な点がありましたら、どうぞ筆者個人宛
なんのためにMLを使うのかを意識する メルカリアプリにおけるエッジAIの実装・運用のポイント | ログミーBusiness
Machine Learning Casual Talks #12 (Online)は、機械学習を用いたシステムを実運用している話を中心に、実践的な機械学習に関して気軽に話せる会です。メルカリのバーコード出品機能を例に、TensorFlow Liteを使ったエッジAIの実装・運用のポイントについて、大嶋氏が語りました。後半は運用について。前回の記事はこちら。 計測改善大嶋悠司氏（以下、大嶋）：結果です。アプリをリリースしましたが、タップしてくれる人は想定以上に少なかったです。さらにバーコード出品の増加率もほとんどなかったです。タップしてくれる人が少ないので、そもそも機能が使われていないので当たり前ですよね。 ここにいる方には当然かなというふうに思いますが、じゃあそのあと計測して改善していこうというフェーズが当然出てきますよねという話です。 今回、機械学習のモデルは、本かどうか。正確には本・
UIが嘘をつく？ UXデザインにおける「楽観的な更新」とSPAでの作り方 - カミナシ エンジニアブログ
こんにちは、デザインエンジニアのショウです。 突然ですが、UI/UX デザインにおいて、「楽観的な更新」という言葉を聞いたことがありますか？あまり聞いたことがなくても、実は日常にたくさん存在しています。 例えば、 twitter や facebook のいいねボタン。いいねをタップした直後に色がつくのですが、実はサーバーへのリクエスト送信と UI 上のいいねの色付きが同時に発生しています。つまりサーバーからの通信結果待たずに UI を更新しています。 他に、trello でタスクカードを隣の列に移動したり、iMessage や Facebook メッセンジャーでのメッセージの送信、Kindle アプリで途中までしかダウンロード出来てない本が読めることなども楽観的な更新です。 図：楽観的な更新を採用しない時と採用した時のメッセージ送信のUI （引用元） 楽観的な更新の意義 早くも 1968
Googleが採用するUXデザイン手法「3対1の法則」とは デザイン会社 ビートラックス: ブログ
先週アップしたエシカルデザインに関する内容に関して、具体的にどのようにして“正しいデザイン”を行えば良いのかという質問が寄せられた。 一つの方法は、UXピラミッドの原則に従ってプロダクトの体験価値を検証したり、UXハニカムを活用する方法もある。 それらに加えて今回紹介したいのは、GoogleのAndroidチームが採用しているUXデザイン手法である。とてもシンプルですぐにでも活用できる内容になっている。 進化するデジタルプロダクトに対するUXデザインアプローチサービスのデジタル化やDXが進む中で、多くのプロダクトにおける「完成」という概念がなくなり、デザインは常に進化し続ける必要性が出てきた。特にユーザー体験においては、デバイスの進化やユーザーの感覚の変化などを考慮し、常に改善を続けなければならない。 では、実際にどのようにデザインの良し悪しを判断すれば良いのだろうか？継続的にバージョンア
hoverとタッチスクリーンデバイス
Findy Team+ Awardを受賞したかった！ベストプラクティス応募内容をふりかえり、開発生産性向上もふりかえる / Findy Team Plus Award BestPractice and DPE Retrospective 2024
無料＆スクリプトひとつでウェブサイトに「視点の追跡機能」を実装できる「WebGazer.js」レビュー
ウェブサイトを作成する際、文字やリンク、画像といったコンテンツの配置を決めるには、閲覧者がどのような「視点移動」を行っているかという情報があると便利です。無料のオープンソースソフトウェア「WebGazer.js」を使うと、スクリプトひとつで自身のウェブサイトに視点移動の追跡機能を実装することができます。 WebGazer.js: Democratizing Webcam Eye Tracking on the Browser https://webgazer.cs.brown.edu/# WebGazer.jsを使用している様子は、以下のムービーを見るとよくわかります。 WebGazer.js: Scalable Webcam EyeTracking Using User Interactions - YouTube まずはWgetコマンドを利用して「webgazer.js」ファイルをダウ
UXを評価するときに検討したい６つの指標
２. レコメンデーション 満足度と同じように、レコメンデーション もUXを測定する有効な尺度です。言うまでもなく、素晴らしい体験をしたユーザーはそのプロダクトやサービスを誰かにすすめる可能性が高いでしょう。したがって、レコメンデーションの可能性を測定することが、ビジネスの世界で流行しているのも驚くべきことではありません。レコメンデーションの測定には、主にネットプロモータースコア（NPS）が使われています。 NPSは非常にシンプルな方法です。のちに述べますが、シンプル過ぎるとさえ言えるでしよう。次のような１つの質問をすることで、NPSを計算することができます。これにより、顧客がどれだけプロダクトやサービスに強い愛着をもっているかを知ることができます。 このコンセプトは非常に魅力的に見えますが、Jared Spool氏が素晴らしい記事『NPSの弊害と、それに対してUXの専門家ができること』の中
やってはいけないUIアニメーション
ここの画面ではメインボタンの「START」を目立たせたいのですが、右上のボタンに目がいってしまいます。 右上に目がいってしまうのは、最後に動く箇所に視線が移動するので不必要に右上に視線が誘導されます。 他にもコントラストや動き量がメインボタンよりも大きく変化しているため、いやでも目についてしまいます。 不必要に待たせている 最後に動かすところに視線が行きますが、視線をメインボタンに向けさせようと最後のアニメーションを長くしてしまった結果、ユーザーがアニメーションによって待たされている状態になってしまいました。 メインボタンはすぐに押してゲームを遊べることが大切になるので、最後にボタンを大きく動かして目立たせてもユーザーは早く押させて欲しいと思ってしまうので、アニメーションは短くサッと出して上げてユーザーが気持ちよく行動できるといいですね。 動き過ぎ、優先順位が曖昧 全てが動き過ぎてしまい、
「要件定義」がうまく機能しない「3つの壁」
はじめに 「ユーザーエクスペリエンス(UX)デザイン」という言葉を、よく耳にするようになりました。UXデザインの分野には、エンドユーザーのニーズをつぶさに拾いあげることで、プロジェクトやビジネスを成功に導くためのノウハウが集まっています。 UXデザインの基本のひとつは「エンドユーザーにインタビューにいく」ことです。 本連載を通じて、ユーザーインタビューの「はじめの一歩」を体験していきます。第1回、第2回では、「そもそもユーザーニーズはどのようにすればわかるのか」について解説します。 「エンドユーザーにうれしいものづくりをしよう」と考える UXデザインでは「私たちは、誰を『しあわせ』にするために、ものをつくっているのだったか?」を強く意識します。 UXデザインの根本的な思想は、「エンドユーザーにうれしいものづくりをしよう」と考えることです。エンドユーザーにうれしいものをつくり、ビジネスがうま
Bad な UI を改善する 「UI Stack」 って知ってます？｜nr
突然ですが、「UI Stack」ってご存知ですか？ アメリカのプロダクトデザイナー Scott Hurff さんが3年ほど前に世に出した考え方で、考慮すべき UI の5つの側面を示したものです。 当時「これは使える！」と思って社内向けに作った勉強会資料を見つけて、今でもやっぱりすごく大事だと思ったので、備忘録的に書いておきます。 ちなみに元記事はこちら。（英語です） UI Stack とは？Stackとは、1つの画面が持つ（複数の）側面、状態、ステータスのようなもの。その側面ごとに最適化されたUIを設計しようするのが UI Stack の考えです。 Scottさんが紹介しているUI Stackは5つ。 ※図はScottさんのページから引用 ・Blank State（空っぽの状態） ・Loading State（ローディング状態） ・Partial State（部分達成状態） ・Error
Vue.js + Elelment UI + Lottieでお手軽にいい感じなUI/UXを作ってみる - SMARTCAMP Engineer Blog
デザイナー兼エンジニアの葉栗です！ スマートキャンプでは以前からWebフロントエンド開発にVue.jsを取り入れています。 Vue.jsなどコンポーネント指向のフレームワークは、UIフレームワークも豊富で、お手軽にリッチなUIが構築できるのでいいですよね。 今回は私のお気に入りの、Vue.js + Elelment UI + Lottie というライブラリを使って、数十分でできる簡易的なログインページを作ってみようと思います。 0から構築をはじめて、レイアウト設計、ElementUIで実装、Lottie組み込み、完成といった感じで詳しく説明していきます！ 完成画面 😊 使用技術 Vue.js Element UI Lottie（ロッティー） 実装します！ 事前準備 Vue CLIをインストール プロジェクトを作成 ElementUIをインストール ログイン画面を作成 不要コードの削除 コ
入力時間11％減！書きやすいエディタのUIデザイン - クックパッド開発者ブログ
こんにちは、投稿開発部の佐野大河（@sn_taiga）です。 先日、クックパッドのiOSアプリでレシピのエディタ画面をリニューアルしました。今日はそのUIデザインの設計についてお話します。 方針は「簡素化」 エディタ画面は、レシピを考えて記録・投稿する人にとって重要な機能の一つです。レシピには材料や作り方、料理写真、タイトル、紹介文などさまざまな項目があり、頭の中にある料理をこれらの形に落とし込んでいくのはなかなか大変な作業でもあります。なので、レシピを書く際の手間を減らし、ユーザーがストレスなくレシピを書けることを目的に「簡素化」という方針を定め、改善に取り組みました。具体的に行ったことは大きく以下の二つです。 １.入力や編集のステップを少なくする 以前のエディタ 新しいエディタ 以前のレシピエディタはひとつの項目を選択するとモーダルが開き、入力を終えたら元の画面へ戻ってくるウィジェット
サービスに求められるものを、6段階に分類する｜深津 貴之 (fladdict)
「サービスの体験をよくする」というのが、漠然としてどうすればいいかわからないとき、まずユーザー体験を6段階に分類するのをオススメします。 この図をベースに、 ・あなたのプロダクトの現状 ・やろうとする施策やアップデートが、それぞれどのレイヤーに属するかを見て、基本は低レイヤー（機能より）のものから、充足させてゆきます。 下記は、家を例にしたのユーザー体験です。 Lv 0. 存在しない家がない。寒い。そして何も解決してない。 Lv 1. 機能がある屋根と壁と床がある。とりあえず雨風がしのげる。色々と我慢すれば、まぁ生きていける。 Lv 2. 安全と安心地震で壊れない。水漏れしない、火災報知器がついた、ドアに鍵がかかるようになった。最低限の信頼性が担保できる状態です。 Lv 3. 使いやすい、わかりやすいまっとうに使えるか。家のなかで迷わない。生活導線が機能するか。キッチンや冷暖房などがスムー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
