UXとUIの比較以上の勉強をしよう | UX TIMES
日本ではなぜかUIとUXの違いだけを語る記事が多く存在していますが、私個人的にはその違いを深く理解するよりUXは深く学ぶことがたくさんあると考えています。今では少なくなったかな？と思っていたのですが、再燃しているようで、かつ、UXの考え方も違った形で理解すると良いのでは？と感じたので記事にしてました。 ミルクボーイがUI/UXを語る？ 引用<a href=httpsnotecomhajipionnn2d59507b2794fbclid=IwAR1H6gmSK 8rlODizDSriJTHROX41dD18KtYiB7lT9Vre8WHJ8IuljMeUJA>httpsnotecomhajipionnn2d59507b2794fbclid=IwAR1H6gmSK 8rlODizDSriJTHROX41dD18KtYiB7lT9Vre8WHJ8IuljMeUJA<a> UXとUIの違いを、お笑
個人的な感覚による「使いやすさ」と「ユーザビリティ」や「UX」の違いについて
個人的な感覚で語られるUI あんまり気にしてはいなかったのですが、最近良く目につく「UX」や「UI」、「ユーザビリティ」についての記事がとても、個人的主観によるものが強すぎることが多いなと見ていて思います。 たとえばこの記事において 率直に言います。 「イラッときます！」 まあ実装者目線ではこれが楽ってのは分かるんですよ…。 というのを見ていて、これは「ただのあなたの感想ですよね？」というただ、デザイナーの独善的な主観で、UIの良しあしや「ユーザビリティ」さらには「UX」を語られているのを目にします。 「それはあなたが思っただけですよね、ユーザは本当にそう感じているのでしょうか？本当に調査したんでしょうか？」そう思うわけです。あなたの感覚ではそうかもしれません。でも、地域や、世代を超えると感想ってのはコロコロ変わっていくわけです。 UIが良い悪いというのはこのように人や状況によって異なるこ
Vuestic UI — Vue.js 3.0 UI Framework
Vuestic UI is an OpenSource Vue 3 based UI framework. It is a MIT-licensed UI framework that provides ready-to-use frontend components that are easily configurable and speed up development of responsive and fast-loading web interfaces. It was initially released in May 2021 by Epicmax and that is what Vuestic UI today.
商用利用無料！さまざまなUIデザインに適した、SVG完備の美しく精密なアイコン素材 -SWM Icon Pack
企業サイト、オンラインショップ、アプリ、ブログ、プレゼンなど、さまざまなUIデザインに適したSVGアイコンが無料で利用できるSWM Icon Packを紹介します。 ホーム・サーチ・アロー・カート・メールなど、Webページやスマホアプリでよく使用されるアイコンが揃っています。また、スタイルは3種類（アウトライン・ブロークン・デュオトーン）で、美しく精密にデザインされたアイコンです。 Freebie SWM Icon Pack アイコンの特徴 アイコンのダウンロード ダウンロードできるアイコンの種類 アイコンの特徴 SWM Icon Packは、WebサイトやスマホアプリのUIに使用されるSVGアイコンのセットです。アイコンは24pxのグリッドに基づいたピクセルパーフェクトで、ベクターで作成されています。 Freebie SWM Icon Pack アイコンは8つのカテゴリに、全296種類。
ユーザインタフェース設計
Myersらの1992年の調査によれば、一般的なグラフィカルユーザインタフェース（Graphical User Interface; GUI）アプリケーション開発でコードの48%、実装時間の約半分がユーザインタフェース部分に割かれているといいます。それだけユーザインタフェースの設計は難しいプロセスなのです。 ユーザインタフェース設計で役に立つ基礎理論や評価手法、支援ツールは、人とコンピュータの関係をよりよくしていく学問 Human-Computer Interaction (HCI) で研究、開発されてきました。ただ、こうした知見を体系化されたかたちで学習する機会は（とくに国内では）必ずしも多くありません。 このWebページでは、自分が研究者になるにあたって知っておきたかった基礎的なことを、参考文献を挙げながら紹介します。想定している読者層は HCI を専門にする学生や、ユーザインタフェー
TrelloのDescription欄だけでUIを超えた手触りが良すぎて学びしかない - Make組ブログ
TrelloのUI（UX）が素晴らしすぎます。UIと言っても表面上のデザインだけでなくて、基本的な要素の手触りが良すぎます。 とくに上の写真にあるDescriptionがすごい。ここだけで作り込みがすごすぎてビックリする。 これはカード（Todoリストでいうタスク）の説明欄です。入力はtextareaででき、URLなどが入力されると表示される際はリンクになります。ただそれだけの要素ですよ。 ただそういう次元じゃないんですよね。たとえば以下の機能があります。 Descriptionが空のときは「Add a more detailled description...」を表示する Descriptionが空のときはマウスホバーで背景色を濃くしてクリックを促す Description内に描画する内容があるときは、 cursor: pointer にするだけで背景色は変わらない Descriptio
画面デザインはBootstrapテンプレートを使うのがおすすめ！
画面デザインはBootstrapテンプレートを使うのがおすすめ！ コーディングスキル この記事の動画版はこちら（画像クリックでYoutubeに飛びます） Webサービスを作っていると「画面デザイン（UI）」に悩むことも多いですよね。 プログラミングスキルとデザインスキルは別物なので、通常制作会社などではプログラマーとデザイナーは分業体制になっており、UIは「デザイナー」、機能は「プログラマー」がそれぞれ担当して作り、後から合体させるといった流れになっています。 しかし、フリーランスで活動していたり、1人でWebサービスを作っているプログラマーの場合はUIデザインが疎かになっていることも多いです。 UIデザインをデザイナーに外注するという手もありますが、今回はもっと「安価」で「手軽」にUIをカッコよくするためのノウハウをご紹介します。 結論から言うと BootstrapのUIテンプレートを活
React でデザインシステムを正しく実装する - コンポーネントカタログを超えて | Wantedly Engineer Blog
Wantedly でバックエンドのテックリード的なやつをやってる @izumin5210 です。半年くらい前から取り組んでいた、UI デザインシステムの React 実装について紹介します。ソフトウェアの設計としても非常にエキサイティングだったので、ライブラリ作ったりするのが好きな人なども楽しんでもらえると思います。 TL;DRWantedly の UI デザインシステムは「WantedlyのUIをデザインする上での共通の考え方とツール＆アセット」でありエンジニアとデザイナが効率よくコミュニケーションするための共通言語となるデザインシステムを (Web) Frontend に持ち込む際は、単なるコンポーネントカタログではなく、システムが定義するものと同じレベルの抽象を持つライブラリ・フレームワークとして実装することで、より有効性を発揮するこの話が気になった（Web・モバイル問わず）フロント
15 of the Most Interesting Vue UI Component Libraries for 2024
15 of the Most Interesting Vue UI Component Libraries for 2024by Shaumik DaityariFebruary 3, 2024Web & App Frameworks “Why bother with Vue UI component libraries?” Well, Vue, or Vue.js, is a popular JavaScript library you can use to create dynamic applications on the front end. Vue, the progressive JavaScript framework, has emerged as the main competitor to Angular and React, and one of the reaso
Streamlit: データサイエンティストのためのフロントエンド｜NAVITIME_Tech
こんにちは、けんにぃです。ナビタイムジャパンで公共交通の時刻表を使ったサービス開発やリリースフローの改善を担当しています。 今回はデータサイエンティストのためのフロントエンドとして最近注目を集めている Streamlit を使ってみた話をしようと思います。 Streamlit とはStreamlit は Python でフロントエンドを構築することが出来るフレームワークです。 https://www.streamlit.io/ なぜ Streamlit なのか？最近流行りの React や Vue でフロントエンドを構築するのではダメなのでしょうか？全くそんなことはありません。むしろ表現力の高さでいうと React や Vue のほうがずっと優れています。 問題になってくるのはデータサイエンティストが分析データをプロダクトに組み込むために必要とする作業コストがかなり高いということです。 例
PrimeFaces
Your perfect companion for Angular, React, Vue and JSF featuring elegant, high-performance, accessible and fully customizable UI Components. Open source products of PrimeTek are used all around the world by 5M+ developers in Fortune 500 companies, corporations, government agencies and educational institutions.
AI時代のUXデザイン、GPT-3から考えるこれから必要なマインドセット デザイン会社 ビートラックス: ブログ
AIの活用からUXデザインを考えるシリコンバレーで話題のGPT-3とは？デモンストレーションに見る、常識を覆すGPT-3の凄さGPT-3が可能にすることとその課題今後のUXにおけるAIの役割最近シリコンバレーを中心にGPT-3というAIが話題になっている。6月にベータ版が限定公開されて以来、多くの研究者・開発者がこのGPT-3を用いた様々なデモンストレーションを公開し、その性能の高さだけでなく応用性の高さにも注目が集まっている。 一部の人々からはGPT-3の登場によってAIは大きく進歩し、AIが人間の仕事を奪う日が近づいたと言われている。 特にこれまでのAIテクノロジーと比べて、GPT-3はUXデザインへの活用が見込まれている。故に、我々ビートラックスとしてもデザイン会社として注目しているテクノロジーである。 そこで来るべきAI時代のUXデザインとそのマインドセットを考えてみようと思う。
✕はなぜ閉じるのシンボルなのか歴史を読み解く｜みーた
先日Cybozu Frontend Monthly #1 にてb4h0_c4tさんの「HTMHell special: close buttons」のお話を聴いていた中で、一つ引っかかるものがあった。 「そもそも✗(バツ)は閉じるって意味じゃないから！」 確かに。 現代、様々なUIを触ってきた中でなぜ ✕ を閉じるものと捉えているのだろうと不思議に思った。 ✕ではなくx(エックス)で表現されることも多々あるようで、こんな名言もある。 ✕とはなんなんだろう ではなぜこのクロスの記号(✕)が閉じるの意味を持ってしまったのか考えてみる。 一旦✕を見て思い出すものを上げてみようと思う。 ・◯と✕(日本の正誤表記) ・✓と✕(海外...主に欧米の正誤表記) ・プレステのコントローラー ・海外ゲームだと決定が✕、キャンセルが◯ ・宝の地図なんかで在り処を記す ・上記のツイートのようにx(エックス)とし
Vue.jsの基本からよく見かけるUIの実装方法まで、JavaScriptが苦手な人向けに解説した入門書 -Vue.jsの教科書
Vue.jsの基本から、Webページやスマホアプリでよく見かけるUIの実装方法まで、やさしく丁寧に解説した入門書を紹介します。 HTMLとCSSはできるけどJavaScriptはいまいち、Vue.jsってよさそうだけど何から始めればよいか分からない、そんな人にぴったりの一冊です。Vue.jsの解説書にはJavaScriptの基礎知識が前提のものが多いですが、本書は異なります。 本書はある程度HTMLとCSSが使用でき、JavaScriptはちょっと苦手という人にお勧めです。特に、Vue.jsに一度挑戦してみたけど、JavaScriptがいまいちの私には無理だった、、、と挫折してしまった人に特にお勧めです。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Top 5 CSS frameworks for your Vue.js project (2021) – Renat Galyamov
GitHub - streamlit/streamlit: Streamlit — A faster way to build and share data apps.
Streamlit • A faster way to build and share data apps
Streamlit を用いたデータ分析アプリ制作 - Qiita
GitHub - Textualize/rich: Rich is a Python library for rich text and beautiful formatting in the terminal.
農業分野のアプリ開発のスタート地点は『手が土で汚れてるのでアプリは操作しないな』の状態 現場で本当に求められているものの話
