実務で生成AIサービスを開発してわかったこと
生成AIを使ったサービスを開発してわかったことをメモしておきます。 開発したもの 業種 SaaS 課題 提供サービス内でユーザーがアイディアを考えることが難しかった。様々なデータを人力で集めてくる必要があった 解決策 アイディア起案に繋がりそうなデータを自動で集めてきて提示する。手法はベクトル検索、AIによる要約生成。 その他 チャットUIは作っていない。ユーザーの入力は最初の検索テキスト入力文のみ。 開発前の検証・プロトタイピング 開発する前に生成AIの出力を検証することが必要 生成AIの出力の質はサービスの肝だから 生成AIの出力は事前の予想と違うこともあり早い段階で出力を確認しておかないと後々の仕様変更があったときにキツイから AIに渡すデータの中身を確認しておく 例えばRAGを使って社内ドキュメントやDBを検索する場合、それらのデータの中身を吟味する必要がある 必要なデータと不要な
オーバーレイ ファクトシート
Webアクセシビリティ オーバーレイとは何ですか？オーバーレイは、Webサイトのアクセシビリティを向上させることを目的とした技術の総称です。サードパーティのソースコード（多くはJavaScript）を読み込み、フロントエンドコードを改善します。 アクセシビリティの向上を謳うWebサイトのアドオン製品は、1990年代後半に登場したReadspeakerやBrowsealoudに遡ります。これらは、インストールされたWebサイトにテキストの読み上げ機能を追加するものでした。 その後、そのようなソフトウェアに機能を追加した類似製品が、市場に出回るようになりました。それらは、読みやすさを向上させるために、ユーザーのニーズに基づき文字サイズや色などをコントロールするものです。 最近のオーバーレイ製品のなかには、支援技術からのアクセスのしやすさを妨げる問題を修正することを目的としているものがあります。
おもちゃ箱のようなアプリBaaaaのUI/UXが凄すぎた件｜Yusui Hoshino
【はじめに】この記事はBaaaaと何の関係もないただの学生（25卒）が執筆しています。 【Baaaaとは】カメラで現実世界を写すことで絵文字が生成され、それをコレクションしたり、レコードに載せて音楽を奏でられるアプリ。他の人のレコードを回したりスクラッチしたりとSNS的な側面も持つ。 日本企業のwedが制作しており、同社はONEというレシート買取サービスも開発している。 【感動した5ポイント】1.UIのサイズが激しく変化する下部にあるフッターナビゲーションの大きくサイズが変化するボタンを見て欲しい。選択されている場所を色、サイズ、テキストで強調できており、分かりやすい。また、指からはみ出すアニメーションはダイナミックでワクワクする。 フッターナビゲーションそして、一体感がすごい。フッターナビゲーションを左右にスワイプすることによって、指、ボタン、中央画面が全て同じ方向に動く。まるで指で引っ
アクセシビリティ | SmartHR Design System
アクセシビリティとはアクセシビリティは、サービスや情報をどんな利用者も円滑に利用できるかの度合いです。 アクセシビリティが高いほど、より多くのユーザーが円滑に利用でき、アクセシビリティが低いほど、より多くのユーザーが利用できないということです。 アクセシビリティ向上は、障害当事者だけでなく、さまざまな環境や状況にいる人、高齢者、日本語以外を得意な言語とする人など、すべての人のためのものです。人だけでなく、サービスや情報にアクセスする機械(ロボット)もアクセシビリティの影響を受けます。 SmartHRの開発方針SmartHRは「well-working 労働にまつわる社会課題をなくし、誰もがその人らしく働ける社会を作る。」というミッションを掲げ、働くすべての人を後押しするプラットフォームをつくっています。 誰もがその人らしく働ける社会を実現するため、SmartHRはアクセシビリティの向上に取
【翻訳】なぜ、最悪のUXを持つプロダクトが市場を制するのか？（Meelis Ojasild, 2022） - 体験とデザイン、スタートアップについて
meelis-ojasild.medium.com 企業がユーザーエクスペリエンスに基づいてソフトウェアを選択するというのは神話です。しかし、PMは主にUXに注目しています。では、実際はどうなっているのでしょうか？ ソフトウェアの選定プロセス これが一般的なソフトウェア選定の仕組みです。 人々は問題とそれを解決する可能性のあるソフトウェア・カテゴリーを認識します。 ソフトウェアのカテゴリーを広くグーグル検索しています（例えば「ベストCRMツール」）。 彼らは、Googleで上位に表示されるいくつかの結果を閲覧します Googleのトップページで最もよく使われているソフトウェアソリューション（Salesforce、Hubspot、Pipedriveなど）を（精神的または物理的に）メモしておくのです。 安いものから試していく（HubspotとPipedriveとします）。 テストでは、1つのコ
エンジニアが推進するプロダクトマネジメント | Qiita Conference 2023｜小城久美子 / ozyozyo
Qiita Conference 2023で登壇の機会をいただきましたので、登壇内容を一部noteにもしておきます。登壇資料は最後に貼ってあります。 前提プロダクトマネジメントはUX、Tech、Businessの交差領域であり、各々の専門性が重なるというのが基本概念のはずです。（左）しかし、プロダクトマネージャーという職種が増えてきた結果、分業したままなんとかプロダクトマネージャーがその糊となって繋げている組織をみることがあります。（右） プロダクトマネージャーではなく、プロダクトマネジメントは各領域の専門家が集まるチームでやっていきましょう。プロダクトマネージャーはその旗を降る人であって一人でプロダクトマネジメントをするわけではありません。 エンジニアがプロダクトづくりを推進するためには、Tech x UXやTech x Businessの領域に積極的に手をだして重なりをつくっていきまし
国産スマホの“電池切れ間際はカメラ使えない仕様”……いる？ 「arrows」開発元が語るそのワケは
「電池の残量が少なくなっています。カメラを使用できません」──国産スマートフォンではそんな表示がされ、写真を撮影できない状態になることがある。この仕様に対し、不要ではないかと異議を唱える投稿が話題だ。ガジェット紹介ブログ「すまほん!!」の公式Twitterアカウント（＠sm_hn）が2月15日、「日本メーカースマホのこれマジでいらん」と画像付きでツイート。他ユーザーからは賛否両論さまざまな意見が上がっている。 【訂正：2023年2月20日午前10時 当初、FCNTは富士通の子会社としていましたが、2021年に独立していました。そのためタイトルと本文を修正しました。おわびして訂正いたします】 すまほん!!の投稿は次の通りだ。「日本メーカースマホのこれマジでいらん。お前の電池は繋げば回復する。今、目の前にある光景はこの瞬間にしかない。頼むからまともに使ってる人間が作ってくれ。ホント使いにくい」
入力支援ツール・textlintを導入したら、テキストコミュニケーションを磨く時間をたくさんかけられるようになった話｜BASE DESIGNER
入力支援ツール・textlintを導入したら、テキストコミュニケーションを磨く時間をたくさんかけられるようになった話 こんにちは。 Communication Design GroupのUXライター藤井です。 「ことばによるコミュニケーション」領域を担当しています。 UXライターが担う役割としては、直接的、間接的を問わず、あらゆるタッチポイントにおけるテキストコミュニケーションの体験をデザインすること。 前者はBASEの管理画面やメール、LPなどプロダクトすべてのタッチポイント、後者はイベントや営業資料をはじめとする、間接的なBASEとのタッチポイントが挙げられます。 では、具体的にはどんな業務をおこなっているかというと、「テキストコミュニケーションをデザインする」をキーワードに、デザインシステムの一環として「運用ガイドライン」「用語リスト」を作成、タッチポイントごとに担当を分け、最終レビ
freeeが挑戦するインクルーシブデザイン UXリサーチとアクセシビリティの交点とは？ - ポップインサイト
本日はfreeeが挑戦するインクルーシブデザインというテーマでお話させていただきます。インクルーシブデザインについて簡単に説明すると、多くのユーザの中でも普段はメインのターゲットにしないような人から示唆を得て、結果的に皆がより使いやすくなるものにしていくという考え方です。 本日はアクセシビリティというところからはじまり、どのようにインクルーシブデザインに取り組むに至ったのかという経緯をお話していきます。 簡単に自己紹介させていただきますと、私は伊原力也と申します。freee株式会社でデザインリサーチチームというチームのマネージャーをやっています。もともとデザイン会社のビジネス・アーキテクツという会社で13年間、フロントエンドやプロジェクトマネージャーや情報設計、インフォメーションアーキテクトなどをしていました。 そして2017年にfreeeに入社した当初はUXデザイナーをしていたのですが、
三井住友銀行アプリについてお話します。｜SMBC DESIGN
こんにちは！三井住友銀行 デザイナーの堀と申します。 前回の初投稿から、SNSなど多方面でたくさんの反応をいただきありがとうございました。予想以上の反響で銀行内でも話題となり、三井住友銀行のデザイナーの活動が少しでも広がったことにうれしく思います。 その中で「銀行アプリが変わった」とのコメントを多くいただき、自分たちが関わったプロジェクトがお客さまの手元に届いているんだなぁと感動しました。 今回はその「三井住友銀行アプリ」について書いていきたいと思います。 本題に入る前に…、お伝えしたいことがあります。 三井住友銀行初！2019年度グッドデザイン賞を取りました！！（ぱちぱちぱち） デザイナーだけでなく、たくさんの方々のご協力、お客さまの声から作られたアプリなので受賞したときは本当にうれしかったです。 それでは本題です。 アプリリニューアルの背景 様々な理由がありますが、まずはこれです。 キ
“アプリUIあるある”な6つのNGアイコン 見積り・経費精算SaaSを例に専門家が解説
連載：徹底解剖！ SaaSのUI／UX 本連載では、B2B SaaSや業務システムを中心にUI／UXデザインを手掛けるベイジ（東京都世田谷区）が、SaaSにありがちなUIデザインの問題を実例を交えつつ解説。SaaSスタートアップなどが、ユーザーの満足度を落とさないための改善方法を説明する。 第3回は、画面表示や機能の意味を補ってくれる便利なパーツ、「アイコン」についてご紹介します。 アイコンはほとんどのSaaSで使われているUIデザイン上の重要な要素ですが、使用する上で守るべきルールがいくつか存在します。「どんな時もアイコンを使えば情報を省略できて直感的に操作できる」ということはなく、うまく使わないと画面がより分かりにくくなってしまうこともあります。 今回例として取り上げるのは、見積り・請求管理システムです。中でも比較的利用頻度の高い、見積りの編集画面を参考に、アイコン利用の適切なルールと
フォーム入力不備の情報提示 (スクリーンリーダーのユーザーにも伝わるように) | Accessible & Usable
公開日 : 2015年4月7日 カテゴリー : アクセシビリティ / ユーザビリティ ウェブサイトのフォームで、入力に不備がある場合、問題となっている箇所および修正方法をユーザーに提示する必要があります。そのような情報は当然ながら、支援技術 (スクリーンリーダーなど) のユーザーにも伝わらなければなりません。 WCAG 2.0 / JIS X8341-3:2010 では、以下の規定があります。 入力エラーが自動的に発見された場合は、エラーとなっている箇所を特定し、そのエラーをテキストで説明しなければならない。 出典 : JIS X8341-3:2010「7.3.1.1 入力エラー箇所の特定に関する達成基準」(等級A) 入力エラーが自動的に発見された場合は、その修正方法が明らかであれば、その方法を利用者に提示しなければならない。ただし、セキュリティ又はコンテンツの目的を損なう場合は除く。 出
これだけは押さえよう！住所フォームの作り方 - ケンオールブログ
まとめ 住所フォームの作り方 住所フォームを作るときには以下の4つを押さえましょう。 オートコンプリート機能に最適化する 郵便番号フィールドは1フィールドにしてハイフン有無どちらも対応する モバイルUX優先なら郵便番号が入力されたら即座に補完。精度優先なら郵便番号補完ボタンを設置 住所フィールドは「都道府県」「市区町村」「町名以下」の3フィールドが基本。「建物」フィールドはオプション 本文 地域SNSのユーザー登録、ECサイトの配送先入力、資料請求、自治体サイトでの電子申請など、ウェブサービスを活用する上で住所入力は欠かすことができません。 住所入力をシンプルかつ正確に行えるような入力インタフェース（住所フォーム）は、離脱率を減らし、コンバージョン率を向上させる上で重要です。 郵便番号を入力すると対応する住所を自動入力する機能（郵便番号による住所補完）は、住所フォームの改善方法として最も効
コンビニ3社のセルフレジ比較
あくまで増田の行動範囲にあるものだけなので、抜けはあると思う。ご容赦いただきたい。 セブンイレブン自分がよく遭遇するのは、半セルフのあれ。 セルフですらない。ないのだが、悪くはない。 客は商品スキャンを行わず、支払い方法を選択し、その方法で支払うだけ。 モバイルSuicaで支払うことが多い増田としては、もっとも早く会計が終わる。 デメリットがあるとすれば、会計が早すぎて袋詰が間に合わず後ろが詰まること。 セルフレジではないのでそれなりに人は並ぶのでちょっとプレッシャーだ。 セブンは今後半セルフではない完全セルフレジを導入・拡大するらしいので期待したい。 ファミリーマート個人的ベストはファミマ。 スキャン方法は鏡とスキャナを利用したスーパー方式。 レジ袋も取ってJANコードを読み込むだけなので簡単。 たいていどこの店舗もレジ自体がコンパクトで、 操作範囲が狭いというメリットと商品を置くスペー
当初の懸念どおりブラウザのプッシュ通知は邪悪に使われはじめている。実装側はクリックまで購読確認を待つべき。 - mizchi's blog
追記: 2019/11/12 2年経ったけど体験が悪化し続けた結果、 Firefox がこの記事の通りになりましたね… www.fxsitecompat.dev プッシュ通知、ネイティブアプリの機能郡をWebに持ち込むPWA技術の売りの一つだが、当初から懸念されていたとおり、非常にノイジーなものとなってしまっている。自分も気づけばあらゆるサイトの購読確認を、無意識で拒否を押すようになってしまった。 hagex.hatenadiary.jp 少し前の記事。最近はどこかで wordpress のプラグインになったのか、目にする機会が非常に多くなり、非常にストレスフル。最初は技術的な目新しさからか、ある程度容認していたが、さすがにこの状況が悪化する一方で、本気でやばいんじゃないかと思っている。とくに初見のブログの記事を読む前に、購読確認が出るのが最悪の体験となっている。 そもそもプッシュ配信とは
XState + Apollo Clientでフロントエンドのステート管理 | メルカリエンジニアリング
こんにちは。メルカリのSoftware Engineerのsotaです。 この記事は、Mercari Advent Calendar 2021 の18日目の記事です。 先日限定公開が始まったmerworkのWebフロントエンドでは、より良いUXを実現するためにコードの段階から設計していこう、というテーマをもとに、ライブラリやフレームワークの選定を行なっています。その中でAPIのデータやアプリケーションのステート管理にはXStateとGraphQLクライアントであるApollo Clientを採用しています。今回はこれらのライブラリを採用した経緯やどのように運用しているかについて解説します。 XStateについて XStateはステートチャートに基づいた状態遷移を管理するJavaScriptライブラリです。ReduxやMobXのようなフロントエンドのステート管理ライブラリと比較すると、XSt
なぜエンジニアが作る画面はダサいのか…?「理由」と「対策」を徹底解説【エンジニア向け画面デザイン講座】 - Qiita
なぜエンジニアが作る画面はダサいのか…?「理由」と「対策」を徹底解説【エンジニア向け画面デザイン講座】UXUIDesignUIデザイン画面設計 1.はじめに エンジニアの私がデザインを本気で勉強した結果、デザイナーとエンジニアはそもそも思考が大きく違っているということがわかりました。 今回は「それ」をデザインに苦手意識のあるエンジニア方にも理解してもらえたらと思い、わかりやすくまとめてみました。 2.アプリの画面デザインを考えてみよう まず、こんなアプリを考えてみてください。 フィットネストレーナーが使うアプリ トレーニングルームでお客様とお話しながら使う 端末はタブレット そして 会員の個人情報確認 前回までのトレーニング状況の確認 次回の予約受付 といったことをします。 使える情報としては、こんな感じです。 あなたならどう画面デザインをするか、もしお時間があったら考えてみてください。
prefers-reduced-motion - CSS: カスケーディングスタイルシート | MDN
no-preference システムが把握している設定をユーザーが行っていないことを示します。 reduce 前庭運動障害者の不快感の引き金となるモーションベースのアニメーションの種類を削除したり置き換えたりするインターフェイスを希望することをユーザーがシステムに通知したことを示します。 Firefox では、 reduce の要求は以下の場合に尊重されます。 GTK/GNOME では、 GNOME Tweaks > General タブ (バージョンによっては Appearance タブ) > Animations がオフになっている場合。 他にも、 gtk-enable-animations = false を GTK 3 configuration file の [Settings] に追加する方法もあります。 Windows 10: 設定 > 簡単操作 > ディスプレイ > アニメ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Tappy - Yahoo!デベロッパーネットワーク
https://twitter.com/shoty_k2/status/1635921736674979840
