こんにちは！UXデザイン会社ajikeが提供するUX改善サポート＆UIUXデザイナー育成サービスのDods（@Dods_ajikeInc）です。 普段ウェブサイトを見たときに「何か少し古いデザインだな…」と感じることはありませんか？実は、ユーザーに古さを感じさせるウェブサイトにはUIに共通する特徴があります。 ウェブサイトなどのサービスを担当されている方から「UIを刷新したい！」というご相談があることも多いのですが、ユーザーが「古い」と感じてしまうデザインか？その原因はどこにあるのか？は、UIの専門知識がなくても判断することができます。 今回の記事では、「古い」と感じるUIの特徴やデメリット、新しいデザインへ改善する場合のポイントについて詳しく解説します👀 古いと感じるUIデザインのめやすそのウェブサイトがつくられたのはいつ？UIデザインは時代とともに進化を続けています。2024年時点で
良いUIUXは利益になる。スピードの裏にある日本と中国で異なるUI/UXデザインの考え方 2024年5月21日 ITジャーナリスト 牧野 武文（まきの たけふみ） 生活とテクノロジー、ビジネスの関係を考えるITジャーナリスト、中国テックウォッチャー。著書に「Googleの正体」（マイコミ新書）、「任天堂ノスタルジー・横井軍平とその時代」（角川新書）など。 中国のアプリやミニプログラムのUI/UXデザインには、とにかく便利さを追求したものが多い。中国では、使いやすいアプリはユーザーの離脱を防ぎ、コンバージョンを高めてくれる上に、売上に直結すると認識されているからだ。近年、アジア圏にまたがりサービスを提供する中国企業が増え始めるとともに、その優れたUI/UXが日本にも認知されるようになっている。そのような越境アプリからは学ぶべき点が多いはず。 keyboard_arrow_down 課題を抱え
システム開発においてテストの自動化は欠かせない要素になってきている。継続的に開発を進めながらサービスを成長させるモダンな開発スタイルは、高い頻度でテストすることで品質を担保しているからだ。一方、自動テストを実施したいと考えながらも、実行まで至らない、実行し始めてもうまく継続できていないという開発者も少なくないだろう。本セッションでは、ソフトウェアテストの専門企業である株式会社ヒューマンクレストの浅黄友隆氏が、UI層を操作するE2Eテストの自動化の取り組みについて具体的に紹介した。本レポートでは、自動テストを進める際に現れる2つの山と激しい環境変化にどのように対応するのか、そのポイントを解説する。 自動テストを進めるうえで直面する2つの課題と環境変化 株式会社ヒューマンクレスト 取締役 兼 技術推進本部 本部長 / テスト自動化研究会（STAR） 浅黄友隆氏 セッションの前半で、浅黄氏は自動
はじめに フロントエンドのプロジェクトでは、UIコンポーネントのカタログとしてStorybookが用いられるケースがあると思います。 StorybookはコンポーネントベースのUI開発の助けとなるツールで、Reactのコンポーネントを独立して視覚的に確認できます。 しかしながら繁忙時や規模の大きいプロジェクトになると、メンバーの増減や開発工数等でStorybookの開発コストが高く感じられる状況があると思います。 そこで本記事では、なるべくStorybookの開発コストを軽減して、Storybookのファイルを自動生成する仕組みを考案してみました。 Storybookとは Storybookは、UIコンポーネントを独立して開発・表示するためのツールです。 React, Vue, Angularなど、様々なフレームワークに対応しており、各コンポーネントの異なる状態やバリエーションを一覧で見る
JollyUI
New name, new themes, CLINew name, theme customizer, CLIJollyUIshadcn/ui compatible react aria components that you can copy and paste into your apps. Accessible. Customizable. Open Source.
Stable Diffusion の各種 Web UI を、簡単な操作でインストール / 起動 / 管理 できるようにするソフト。 AUTOMATIC1111、Fooocus、SD.Next、InvokeAI、ComfyUI、VoltaML といった Stable Diffusion の各種 GUI を、簡単な操作でインストール / アップデート / 起動 できるようにしてくれます。 LoRA / LyCORIS / ControlNet 等の追加学習ファイルを管理する機能や、Civitai で公開されているモデルを内蔵ブラウザから直接検索＆インストールする 機能なども付いています。 「Stability Matrix」は、クロスプラットフォーム対応の Stable Diffusion パッケージマネージャーです。 AUTOMATIC1111 Fooocus Fooocus-Control
「リバース：1999」ホーム画面にて背景の光に合わせてキャラの色も変えている/2Dだと珍しい表現かも - ゲームアプリのUIデザイン
Tailwind CSSでデザインシステムを構築する［後編］ ～デザイントークンを定義するときに何を議論すべきか 2024年1月26日発売の『Tailwind CSS実践入門』の第9章「ユーティリティファーストでデザインシステムを構築する」の一部を、前後編の2回に分けて掲載します。ユーティリティファーストというTailwind CSSの発想を活かしたデザインシステム構築の最初の一歩をまとめたものです。開発者がデザインルールをTailwind CSSの設定に落とし込む過程はもちろん、デザイナーが開発者とどのように協力しあうべきかについても論じています。 本記事の内容は、書籍の最終章に当たる部分です。ほかの章の内容に言及していたり、書籍内ですでに使われた用語が説明なく登場したりするのを防ぐため、書籍の原文から一部を変更しています。 前回の記事の最後で、デザインシステムを構築する際にコンポーネン
VanJSを試してみたら開発体験が良かったので紹介します。 🍦 VanJSとは？ VanJSは、数ヶ月前にメジャーバージョンがリリースされた比較的新しいReactive UIフレームワークです。軽量、非依存、トランスパイル不要、シンプルなAPIという特徴があります。 gzip圧縮後で0.9kbと非常に軽量で、バンドルサイズの肥大化を気にすることなく手軽に導入できます。 他のUIフレームワークと比較しても圧倒的に軽量 UIもJSXを使わず、関数ベースのAPIで宣言的に構築できます。 VanJSの開発秘話はとても考えさせられるものだったので、機会があればぜひ読んでみてください。 🛠️ リファクタリング対象 Sky Follower BridgeというX(Twitter)のFollower一覧からBlueskyのユーザーを検索するChrome拡張を個人開発しています。今回はその拡張機能のco
UI = f(statesⁿ)
“UI is a function of state” is a pretty popular saying in the front-end world. In context (pun intended), that’s typically referring to application or component state. I thought I’d pull that thread a little further and explore all the states that can effect the UI layer… First-party application states Every application whether it’s a to-do list or a shopping cart or some radically complex app wil
Social LoginSocial login boosts conversion since users can easily join your platform. Then, it's a good practice to put your social login on top of the page and place the email password authentication below. Beware that privacy-oriented people prefer not to use social login then it's always good to have another option for them.
iOSプロジェクトに対してモジュール分割しながらSwiftUIを部分適用している事例 - Mirrativ Tech Blog
こんにちは、クライアントエンジニアの竹澤(@to4iki)です。 MirrativのiOSチームでは、開発効率の最大化を狙い以下に取り組んでいます。 データフローの単方向化 (Fluxアーキテクチャの強制) 宣言的UIによるView実装 (SwiftUIの部分適用) 責務分割 (モジュール分割) 今回の記事では、どのような構成でSwiftUIを適用し始めたか、また、MirrativのiOSプロジェクトの構成やプロダクト特性の課題感からセットでモジュール分割を進めている点を紹介します。 背景 前提となるプロジェクト構成 導入に向けて決めたこと SwiftUIでどこまで実装するか 本体アプリではなくSwiftPackageを活用する 垂直分割するか水平分割するか 方針やTipsを明文化し育てる 新規開発部分のUI開発をFeatureモジュールで行う SwiftPackage: SwiftUI.
こんにちは、フロントエンドエンジニアの谷（@high_g_engineer）です。 本記事では、オブジェクト指向UIデザインの書籍紹介をさせていただきます。 オブジェクト指向UIデザインとは？ 2020年6月5日発売の書籍で、アプリケーション開発に関わるすべての人が読むべき、オススメの一冊です。 オブジェクト指向UIデザインは、オブジェクト（モノ、名詞）を起点にしたUI設計手法です。 使いやすく、心地よいユーザー体験のアプリーケーションを実現する為に力を発揮します。 多くの人が行うデザインの手順と問題点 アプリ開発において、ユーザーの要望ベースで改善を進める場合、以下の手順で取り組むことが多々あります。 ユーザの要望を叶えるタスクを考える 上記のタスクに応じたUIを考える 蔵書アプリの場合、以下の様なタスクが考えられます。 本のタイトル、著者、出版社、出版日を登録する 本を検索してすでに持
WebUIについて調べた - laiso
WebUIはデスクトップアプリを作るためのライブラリ。HTML, CSS, JavaScriptでフロントエンドを作り、バックエンドをC, C++, Python, Go, TypeScriptなどの言語で開発できる。システムにインストールされているWebブラウザで動作する https://webui.me/webui.me 2023年にhassandragaさんが公開し、V言語コミッタのttytmさんらも参加した 本体はCで開発されていて、Python, Go, TypeScriptにバイディングが提供されている 似た技術としてはElectronやTauri、Gluonなどが存在する laiso.hatenablog.com zenn.dev アーキテクチャについて ElectronやTauriと比較すると、WebUIのアーキテクチャはWebアプリをブラウザで開くだけなのでより単純かつ制
Twitterの嫌いなところ第1位「アプリ開いたとき一瞬だけ気になる投稿が見えてすぐに更新されて行方不明になるところ」←それなすぎる
ゆぴぴ、ピーナツがすき @ypp_pnt いつも一瞬で文章とかワードを頑張って覚えてせっせと検索して再会してるけど、文章を覚えられなかった時or覚えた文章が間違えてたor覚えたワードがありきたりすぎて埋もれてて再会できなかった時本当に虚無 x.com/saisekai/statu… 2024-02-16 11:44:36
はじめに サイオステクノロジーの伊藤と申します。今回から数回にわたりデジタルコンテンツのコントラストというテーマで、WCAG2のコントラスト基準とWCAG3で検討が進められている新しい基準APCAについて解説していきます。 対象読者としては、ウェブサイトやアプリケーションなどデジタルコンテンツの制作に携わるデザイナーやエンジニア、アクセシビリティに関心のある方を想定しています。 現在勧告されているWCAG2の達成基準では、テキストや視覚要素のコントラストが一定の基準を満たす必要があります。たとえば、レベルAAでは文字色と背景色のコントラスト比が4.5:1以上であることが要求されます。 図1 テキストとの視認性を確保するために、背景色とのコントラスト比を考える必要がある しかし、人間の目は明るい色と暗い色のコントラストを認識する際に、明るい色の相対輝度が高いほど視認性が高くなるという特性があ
こんにちは！株式会社Rabeeでデザイナーをしています、nanamiです🌿 今回はLPやサービスサイトでよく見かける「料金比較表」のUIパーツに特化してデザインを集めてみました。 LPや特定のサービスサイトは構成要素が比較的パターン化されています。 「この要素・セクションのデザインどうしよう」となった時用に、要素ごとにデザインのパターンのストックを持っておきたい。 そんな皆さまに参考にしていただけると嬉しいです！ はじめに今回は、集めた料金比較表のデザインをこちらのサイトを参考に、テーブル型、カード型、ブロック型の３パターンに分類してリストアップしています。 特記事項以下に掲載している料金表は、記事作成時点（2024.2.27）でデザイン学習を目的として収集したものです。現在の料金とは異なる可能性がありますのでご留意ください。 【テーブル型】行＆列の表形式 横軸に料金パターン、縦軸にその
■ 登壇イベント ：生成AI新年会2024@GMO Yours・フクラス https://algomatic.connpass.com/event/306870/ ■ Algomatic HP：https://algomatic.jp/ 採用情報：https://jobs.algomatic.jp/
前回の記事の続きです。 前回までは、その1でMapped TypesとConditional Typesを、その2でDiscriminated Union TypeとUnion Distributionを見ていきました。 実をいうと本当に書きたかったのは、本稿の「Reactとそのデザインシステムの実装における型定義」という話でした。しかし、そのための前提がいっぱいあって、三部作という長編になってしまいました。 つまり、ここからが本題です。 前段のTypeScriptのテクニックを活かして、まずButtonのコンポーネントを作っていきます。また、Polymorphic Componentというコンポーネントの汎用性を上げるテクニックを取り上げます。最後に、デザインシステムの実装、共通コンポーネントのインターフェースの設計について簡単に触れて終わります。 TypeScriptで型安全にReac
はじめに Flutter好きの皆さんこんにちは！ アルサーガパートナーズ株式会社でFlutterエンジニアをしているtaiseiです！ 突然ですが皆さん、FlutterでUIの開発を進める中で、「このUIはどんなデバイスでも適切に表示されるのだろうか..?」と不安に感じたことはありませんか？ レスポンシブデザインはもちろんのこと、テキストのフォントや色、ダークモードの表示など複数のデバイスで複数の画面を一回一回チェックするのは骨の折れる作業ですし、開発を進める中で副作用によってUIが変更され、気付かないうちに開発が進んでしまうといったこともあります。 そこで、これらの問題を解決する方法として、Golden TestというUIテスト手法があります！！ 今回はこのGolden Testについて、設定から基本的な使い方、私が実際に遭遇したエラーに対するトラブルシューティング等を解説していこうと思
なぜアプリは時間の経過とともにゴミになっていくのか
「X（Twitter）はダークモードだけに」 イーロン・マスク氏が表明→後に撤回 ただしダークブルーモードは削除
X（旧Twitter）のオーナーであるイーロン・マスク氏は7月26日（現地時間）、同サービスのUIについて、白背景の「ライトモード」をなくし、黒背景の「ダークモード」だけにする方針を示した。結局は「ライトモードの維持を望む声が多い」として撤回したが、青黒いUIにする「ダークブルーモード」は削除するという。 マスク氏は当初、自身のXアカウントで「このプラットフォームはまもなくダークモードのみになる。ダークモードはあらゆる点で優れている」と投稿。しかし、ユーザーからは「ダークモードは好きだが双方に利点があるので選ばせてほしい」「UXデザイナーも解雇してしまったのか」など、批判が続出した。
タップ成功率（）は以下の式をもとに計算されます。 は誤差関数、はボタンの横幅、はボタンの縦幅です。 とはそれぞれタップ座標の軸の分散と軸の分散であり、以下の式をもとに計算されます。 、、、は回帰定数です。 より詳しい理論は論文（2章、3章）やTech Blogをご参照ください。 Tappyは 「非利き手でスマートフォンを持ち、利き手の人差し指でボタンをタップする場合」を想定しています。
BARフロントえんどう #2 「CSS Library / Framework」での登壇資料
プライベートクラウドのコンソール画面をNext.jsのApp Routerでフルリプレイスした話
CIUでは、プライベートクラウドのWeb UI開発にNext.jsを用いています。 今回はCIUのフロントエンド組織の現状についてお話した後 ・なぜNext.jsを使うのか ・古いNext.js製サービスをどのようにApp Router化したのか 以上を中心に、CIUのフロントエンド組織の今後の技術戦略などについて、Muddyな内容を織り交ぜながらお話します。
第五のUI - ニューロサイエンスとマーケティングの間 - Between Neuroscience and Marketing
Izumo Ooyashiro, Izumo, Japan 1.4/50 Summilux ASPH, LEICA M (Typ 240) 気がついたら年末。半年もブログ更新ができていない*1。その上、最近、色々な場で人に色々聞かれるたびに思うことが随分と多い。澱（おり）のようにためておくのもどうかと思われ、色々書き出すモメンタムになればと少し書けたらと思う。 - 毎週何回か登壇、取材が続いているが、このところ、繰り返し聞かれることがいくつかある。 LLMによって仕事はなくなるんですか？ 今後AIでどんな仕事がなくなるんでしょうか？ OpenAI & Microsoft、Google/DeepMindのglobal big playersがガンガンとやる中、日本はなにかやれることはあるんですか Pivotなどで言われていた物魂電才について教えてください。 今後の学校教育はどうあるべきですか
こんにちは！@Ryo54388667です!☺️ 普段は都内でフロントエンドエンジニアとして業務をしてます！ 主にTypeScriptやNext.jsといった技術を触っています。 今回はレスポンスの遅いAPIをリクエストしたときのローディングUIを紹介したいと思います。 📌 作ろうと思った背景 きっかけは生成AIのエージェントAPIを利用するとき、レスポンスを待つ時間が非常に長かったからです。。😇 生成AIのプロダクトではプロンプトを解析したり、最適な問い合わせ先を判断したり、オリジンにリクエストするなど、さまざまな処理を行う(オーケストレーションレイヤー)関係でレスポンス時間が遅くなることがあります。これをなんとかしたいと思ったのがきっかけです。 昨今の開発では、UXをいかに上げるかが求められているように感じます。できることが格段に上がったとしても、UXが悪くて利用されなくなっては本末
こんにちは、MLOpsチームです。先日OCRモデルを学習するためのアノテーションにおいて、作業効率を検証するためのPoCとしてアノテーションUIを開発しました。本記事ではこのアノテーションUIにおける工夫について、試用によって得られた知見をまじえつつ紹介します。 はじめに アノテーションUIを開発することとなった背景について説明します。 アノテーションUIとは アノテーションUIは機械学習の学習データを作成するためのUIです。アノテーションUIはアノテーション作業の効率に強く影響し、アノテーション作業によって得られる学習データの量は機械学習の精度に大きく寄与します。したがって、アノテーションUIは機械学習において最も重要なコンポーネントのひとつといえます。 UIを開発した背景 キャディではOSSツールなどのUIを用いてアノテーションが行われていましたが、ここに独自の工夫を導入すれば入力効率
こんにちは！テラーノベルでiOS/Android/Webとフロントエンド周りを担当している @kazutoyoです！ 今回はHeadless Editor FrameworkであるTiptapのご紹介と、そちらを使ってオリジナルなエディタを作成しようと思います。 Tiptapとは TiptapはHeadless Editor Frameworkと呼ばれています。 これまでWebでのWYSIWYGエディタとしてQuill.jsやDraft.jsなどが存在しました。 これらは文字の装飾や文章の編集に関するUIをデフォルトで提供しており、エディタに特別な機能を追加しようとしたり、UIを大きく変えるというのは少々大変でした。 TiptapのようなHeadless Editor Frameworkは、エディタで必要な機能のコア機能を提供し、必要なUIや機能は拡張機能として追加できるような仕組みになっ
続いてそれぞれのユースケースについて、具体的な使い方を解説します。 Figmaの使い方・操作方法 デザインをもとにコーディングする場合 ‐ Dev mode Dev modeの利用がおすすめです。現在ベータ版で公開されており、2024年中に有料プランのみ使用可能となります。 主な機能として、作成したデザインをもとにコードを自動で生成させることができます。CSS、iOSのSwiftUI、AndroidのXMLなどに対応しています。 具体的な使い方は次のとおりです。今回はログイン画面を例にしています。 画面をセクションで囲む セクション名の右横のコードアイコンをクリック Open in Dev modeでDev modeに切り替える コード化したいコンポーネントを選択すると、右側のInspectでコードを参照できる ワイヤーフレームを作成する場合 ‐ コンポーネント機能 コンポーネント機能を利
GitHub - microsoft/UFO: A UI-Focused Agent for Windows OS Interaction.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
アクセシビリティの改善のために React Aria を活用しています - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは！DOGO プロジェクトでソフトウェアエンジニアとして活動している @nissy_dev です。 DOGO プロジェクトでは、React Aria を活用してアクセシビリティの改善を行っています。 今回の記事では、React Aria を国内にもっと広めて行きたいということで、React Aria を利用することに決めた理由を振り返りつつ、React Aria について簡単に紹介します。 目次 OSS を活用した効率なアクセシビリティの改善 ライブラリの選定 React Aria の概要 Next.js App Router との相性 終わりに OSS を活用した効率なアクセシビリティの改善 DOGO プロジェクトでは、フロントエンドの刷新を進めていく中でアクセシビリティの改善についても取り組んでいます。 具体的な事例などについては、次の記事も参考にしてもらえればと思います。 各
「UIT × Bonfire Front-end Meetup #1」での発表資料です。 https://uit.connpass.com/event/300284/
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
古いと感じるウェブサイトのUIに共通する3つの特徴｜Dods｜UIUX改善支援
楽観的更新を行うための React の useOptimistic フック
良いUIUXは利益になる。スピードの裏にある日本と中国で異なるUI/UXデザインの考え方
ソフトウェアテスト専業企業が事例で語る、UIテスト自動化の始め方と続け方は？
ReactのコンポーネントからStorybookのファイルを自動生成してみた
Stability Matrix - ｋ本的に無料ソフト・フリーソフト
Tailwind CSSでデザインシステムを構築する［後編］ ～デザイントークンを定義するときに何を議論すべきか | gihyo.jp
VanJS で素のDOM操作をリファクタしてみた
Figma のデータ、少し楽になるかもしれない作り方 - Qiita
UI & UX Design Tips by Jim Raptis.
オブジェクト指向UIデザインまとめ | ランサーズ（Lancers）エンジニアブログ
第1回 デジタルコンテンツの視認性とWCAG2のコントラスト比の課題 | gihyo.jp
「料金比較表」のUIを集めてみた｜パーツ別デザインまとめ｜nanami
Reactの状態管理におけるuseReducerとuseContextの活用例
生成AIネイティブな プロダクト・UI/UXを考える
明日から使えるTypeScriptの応用テクニックその3 -Polymorphic Component編-
🥇Golden Testを導入してUI開発の不安を解消する
Tappy - Yahoo!デベロッパーネットワーク
ユーザーが直感的に理解できる「待ち時間」の適切なUIの選択方法まとめ
アクセシビリティを考慮したUI/CSSフレームワーク・ライブラリ選定
「Visual Studio Code」2023年10月更新 ～UIの柔軟性がさらに向上、編集に集中できる／Windows/macOS/Linuxで動作するフリーの高機能コードエディター
手のひらサイズのカスタムキーボード ショートカット入力の短縮化に
処理時間が長いAPIをリクエストしたときのローディングUIについて
アノテーションにおけるUIの工夫 - CADDi Tech Blog
Tiptapでオリジナルエディタをつくろう！
エンジニア向けFigmaの使い方を徹底解説 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
iOSアプリに実装されたUI要素のフレームやマージンを手軽に確認できるツールを作る - クックパッド開発者ブログ
ヤフーのユーザー5,400万人から"同意"を得るための技術