Magic UIUI library for Design Engineers20+ free and open-source animated components built with React, Typescript, Tailwind CSS, and Framer Motion. 100% open-source, and customizable.
文字と行間の大きさは何が良い？読みやすさとKPI両立への挑戦
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、デザイナーの鈴木です。CTO室でユーザインタフェースの研究開発を行っています。 みなさんはスマートフォン向けのアプリケーションやWebページを作成する際、文字と行間の大きさをどうしたらよいか迷ったことはないでしょうか？ 私たちはこの疑問を明らかにするためにクラウドソーシングを用いた大規模な実験を実施し、どんな大きさの組み合わせが適切であるか定量的・定性的な分析を行いました。本記事ではこの実験と分析の結果について述べ、さらにこの知見をヤフーニュースに適用した結果どのような貢献が見られたかお話しします。 予備実験 読みやすさに影響を与えうるフォントプロパティはさまざまなものが考えられます。私たちはその中から文字と行間の大き
これがユーザーの信頼を失うデザインだ！ 最近のUIで見かけるダークパターンのしっかりとした知識が身につくデザイン書 -ザ・ダークパターン
ダークパターンとは、WebサイトやスマホアプリのUIをユーザーに惑わせるデザインにし、ユーザーの個人情報や時間やお金をかすめ取る手法です。 たとえば、知らない間にメール配信が登録されていたり、料金に手数料が加えられていたり、登録は簡単なのに退会が難しかったり、キャンセルがクリックしにくいようにデザインされてたり、さまざまなダークパターンが存在します。 最近のダークパターンをはじめ、さまざまなダークパターンを反面教師として学び、制作側として気をつけたいポイントが解説されたデザイン書を紹介します。 ユーザーとして騙されないように知識を増やしておくのにも有用です。 著者は「UXライティングの教科書（紹介記事）」や「ザ・マイクロコピー（紹介記事」などでお馴染みの仲野 佑希氏。これまではライティング主体の解説書を紹介してきましたが、本書はダークパターンの解説書です。デザインによるダークパターンだけで
デザイナーが変革に参加できる今が面白い！デザインシステム構築にも挑戦するUIデザイナーの視点。 | ANDPAD_Engineers
アンドパッドは建築・建設業界のプラットフォーマーとなるべく、新規プロダクトを続々と開発しています。それに伴い、新たなデザイナーの力が必要です。 現在、アンドパッドで「プロダクトデザイン」や「デザインシステム構築」など、幅広い分野で活躍している かわかみしずかさん。前職ではIT企業のデザイナーとして、プロダクトデザイン、デザイン戦略、ブランディング戦略など幅広い経験を積んできました。 そんな 、かわかみさん がアンドパッドのどんな点に魅力を感じて入社したのか。また、入社後にどんなことを感じているのか聞きました。 かわかみしずかさん 前職のIT企業でUIやSEOの改善、アクセス解析の導入、機能開発などに携わる。デザイン横断組織「デザイン戦略チーム」を新設して異動。自社のブランドならびにデザイナーのプレゼンス向上を目指し、デザイナーの成長支援、横断的な知見の共有やアセット化、社内外へ向けた広報活
なぜエンジニアが作る画面はダサいのか…?「理由」と「対策」を徹底解説【エンジニア向け画面デザイン講座】 - Qiita
なぜエンジニアが作る画面はダサいのか…?「理由」と「対策」を徹底解説【エンジニア向け画面デザイン講座】UXUIDesignUIデザイン画面設計 1.はじめに エンジニアの私がデザインを本気で勉強した結果、デザイナーとエンジニアはそもそも思考が大きく違っているということがわかりました。 今回は「それ」をデザインに苦手意識のあるエンジニア方にも理解してもらえたらと思い、わかりやすくまとめてみました。 2.アプリの画面デザインを考えてみよう まず、こんなアプリを考えてみてください。 フィットネストレーナーが使うアプリ トレーニングルームでお客様とお話しながら使う 端末はタブレット そして 会員の個人情報確認 前回までのトレーニング状況の確認 次回の予約受付 といったことをします。 使える情報としては、こんな感じです。 あなたならどう画面デザインをするか、もしお時間があったら考えてみてください。
ミルクボーイがUIとUXの違いを説明したら｜広野 萌
挨拶内海「どうもお願いします。ありがとうございます。今、NFTアートをいただきましたけどもね。ありがとうございます。こんなんなんぼあってもいいですからね」 駒場「いきなりなんですけどね、うちのおかんがね、好きなIT用語があるらしいんやけど」 内海「そうなんや」 駒場「その名前を忘れたらしいねん」 内海「IT用語の名前忘れてまうってどうなってんねん。あれやろ、IT用語ゆうたらどうせ、デザイン思考か、アジャイル開発か、リーンスタートアップやろ！」 駒場「俺もそう思ったんやけどちゃうらしくてな、いろいろ聞くんやけど、全然わからへんねん」 内海「そうなん？」 駒場「うん」 内海「ほんだら俺がね、おかんの好きなIT用語、一緒に考えてあげるから、どんな特徴言うてたかとか教えてみてよ」 定義駒場「おかんが言うには、製品やサービスとの関わりを通じて利用者が得る体験及びその印象の総体やって言うてた」 内海「
もうこれでUI用のアイコンには困らない！商用でも完全無料で利用できる、SVG完備のアイコン素材 -iconsax
WebサイトやスマホアプリのさまざまなUIデザインに適した、シンプルなデザインのSVGアイコンが完全無料で利用できるiconsaxを紹介します。 ホーム・サーチ・アロー・カート・メールなど、Webページやスマホアプリでよく使用されるアイコンが揃っています。スタイルは6種類、フォーマットはSVGをはじめ、Adobe XD、Figma、Sketch、Illustratorとさまざまなアプリ用のファイルも用意されています。 iconsax iconsax -GitHub iconsaxの特徴 iconsaxのダウンロード iconsaxのアイコン iconsaxの特徴 iconsaxは、vue.jsのオープンソースのフレームワーク「vuesax」の公式アイコンです。個人でも商用プロジェクトでも完全無料で利用できますが、別の名前で販売および配布はできません。詳しくはライセンスをご覧ください。
Amebaのデザインシステム「Spindle」の全貌公開
メディア統括本部・技術横断室の谷です。組織横断の活動しながら、AmebaやAmebaマンガという事業に関わっています。実務としては、コード実装をメインに、UI設計やUX設計、最近ではユーザーインタビュー等のリサーチ業務をおこなっています。 この記事では私が立ち上げから2年くらいかけて関わってきたAmebaのデザインシステムについて、その全貌を解説します。 そして本日からデザインシステム「Spindle」のサイトを試験的に一般公開します。詳しくは記事後半にて。 まず前段のお話として、Amebaという事業について説明させてください。 Ameba事業の概要 Amebaはブログサービスであるアメーバブログを主としたサイバーエージェントのメディア事業の1つです。 多くの人はおそらく「アメブロ」や「ピグ」の印象が強いですが、関連事業やサービスとしてはマンガや占い、ニュースなど色々と展開をしています。
2020年12月、LINEがNew Designでユーザーと再会しました！
よりシンプルにより明るくリニューアルしました！ LINEは主要4か国だけでも利用者が1億6,700万人を超えるサービスとなり、生まれ変わったLINEの姿を初めて目にするユーザーの反応はどうだろうか？ …というドキドキする気持ちを抱えていました。新しいLINEのデザインに対する私たちの思いや、どのような過程でどんなクリエイティブの成果物を制作したのか、見ていきましょう！ 2020.12.14 FacebookTwitterLineLine コミュニケーションアプリから進化するLINE。Life on LINE！ LINEは2011年にコミュニケーションアプリとしてスタートしましたが、2020年現在ではマンガやMUSICなどのエンターテイメント系のサービスや、LINE Pay、LINE証券などフィンテック系のサービス等、様々な領域でLINEのファミリーサービスが追加されています。 私たちのビ
「バラバラになりそうだった」メルカリUI / UXの認識をDesign Systemにまとめたデザイナーたちの話 | mercan (メルカン)
「Design System（デザインシステム）」とは、開発で必要となるデザインの概念やスタイルなどがまとめられたものです。開発効率の向上だけでなく、プロダクトの一貫性を担保するためにUIのコンポーネントを規格化。プロダクトマネージャー（PM）やデザイナー、エンジニアの共通言語として存在しています。 そんなDesign Systemが、メルカリグループ内で誕生したのは2019年夏ごろでした。 「なぜそのタイミングでつくったの？」 「Design Systemをつくった目的は？」 そんな疑問を、Design Systemの設計をリードしたProduct Designチームの@tottieと@morishy、@kitajにぶつけてみました。 ※撮影時のみ、マスクを外しています。
画面をデザインするということ - Qiita
この記事は社内の勉強会で話した内容を再編したものです。 私自身はPC/ブラウザ/スマホのアプリ開発をしている１エンジニアにすぎないのですが、対客や要件定義から開発、運用、そしてUIのデザインを担当しており、自分なりに伝えられるものがないかと試みたものです。 デザインとは デザインとは単に見た目だけの話ではなく、「ビジネス」と「ユーザーが得る体験価値」から始まり、それを実データと結びつけながら人の認知を通してどう見せるのかという作業です。 始まりの部分は最近だとUXデザイナー、終わりの部分はUIデザイナーとかグラフィックデザイナーとか呼ばれるような人の仕事です。そしてそれらを形にするのがエンジニアです。 画面を設計するまでの作業 ギャレットのUX5段階モデルに従って、どういったことを考えないといけないのか確認します。 （実際にUX５段階モデルを意識して仕事してるわけではありませんが、何かしら
ディズニー直伝！Webデザインでアニメーションの基本原理を応用する方法
この記事では、ディズニーによるアニメーションの基本原則を、どのようにWebサイトやUIデザインに適用できるか、具体的なサンプル例と一緒に紹介しています。 ディズニー社の現場で長年培われた、アニメーションの基本原則12個（英: 12 Principles of Animation）は、「生命を吹き込むイリュージョン: ディズニーアニメーション（英: The Illusion of Life: Disney Animation）」として1981年に出版され、現在でもアニメーションの基本ガイドのひとつとして広く知られています。 これらの基本原則は、もともとディズニーのキャラクターデザインのために設計されたものですが、この記事では、これらのアニメーション基本原則をUIデザインに適用する方法を探っていきましょう。 ここで紹介するアニメーションの基本原則を、どのようにウェブページに適用できるかまとめた
認知負荷の増加がWebサイトに与える悪影響
Paul Boag氏はユーザー体験デザイナー、サービスデザインコンサルタント、およびデジタルトランスフォーメーションのエキスパートです。非営利団体や企業向けに、デジタル体験の改善を目指す支援をしています。 あなたのWebサイトは、訪れるユーザーにあれこれ考えさせすぎてはいないですか？ ユーザーに大きな認知負荷をかけていて、それによってユーザーがあなたのWebサイトから離脱していっている、ということはありませんか？ もしそうならば、これは修正すべき問題で、実際に修正が可能です。 認知的な負荷による影響 この問題はWebデザイナーである私たちと明らかに密接に関連しています。ユーザーが１つのことに集中しすぎて、他の要素に気が付かなかった場合、Webサイトでの重要なCTA（コールトゥアクション）だって気づかれない可能性があるということです。そう、ものごとをクリーンかつシンプルに整理したいというデザ
Adobe製デザインシステム「React Spectrum」がすごいので紹介したい - Qiita
🚀 Super excited to announce: ♿️ React Aria — Accessible UI primitives for your design system. 👑 React Stately — State and core logic for your design system. 🌈 React Spectrum — Adobe’s design system. Learn more: https://t.co/ucVguh3rqp Github: https://t.co/e8aOfLgCVK — Devon Govett (@devongovett) July 15, 2020 7月15日にAdobeのデザインシステム react-spectrum がリリースされました。 デザイン製も優れていますが、他の部分でのクォリティーが個人的にショックだった
Sketch はもういらない？ デザインツール Figma の紹介
Figma：https://www.figma.com/ （2019 年 12 月 1 日 ： 古くなって意味消失してた部分を編集しました） Figma とは デザインツール、Figma をご存知でしょうか。 一言で表すならば、コラボレーション機能満載の Sketch です。 本記事を公開した 2017 年時点では、あまり知名度が高くなかったものの、2019 年時点ではだいぶユーザーが増えたように感じます。Google Trends で、Sketch と XD、そして Figma の今と昔を比較してみます。 2017 年 2019 年 （純粋には比較できませんが）2 年前は Sketch と Figma に約 25 倍も開きがありました。ですが現時点では約 10 倍くらいでしょうか。日本ではなんと逆転しています。（タイトルの通り！） そこでもう少し Figma に頑張ってもらうべく、本記事
UXデザイナーが覚えておきたい８つの心理学手法
ChintanはYourUXTeamのファウンダー/チーフデザイナーです。YourUXTeamはスタートアップやソフトウェア会社、デザインファームなどと協業し、ユーザーテスト全体の設計やUXデザイン・UIデザインなどを手掛ける会社です。 この記事のタイトルを見たとき、「心理学がどうUXデザインと関係するのか？」と思った方もいるかもしれません。 今回の問いはデザイン心理学とは何か、そしてそれがなぜより良いUXに関連するのかということです。通常のデザイン心理学は規律のとれたデザインや人間の反応や行動のことです。この記事では製品またはサービスのUXに影響を与える心理的要因について説明します。また、企業が製品のパフォーマンスを向上させるためにどのように役立つかも説明します。 ユーザー体験と心理学 UXデザインと心理学は古くから親密な関係にありました（社会的、行動的、認知的な観点で）。人間の行動のほ
Googleが繰り返すデザイン変更からたどり着いた極意「明白こそが至高」について解説
by Rajeshwar Bachu GoogleはGoogle検索やGmailなどさまざまなプロダクトを作成していますが、そういったプロダクトをデザインする中で得た知見などをまとめるためのデザイナー・開発者たちによる共同プロジェクト「Google Design」が存在します。そのGoogle Designが、「明白なUIこそ至高のUIである」として、ユーザーインタフェース(UI)デザインにおいて重要な要素をまとめて解説しています。 The Obvious UI is Often the Best UI - Google Design - Medium https://medium.com/google-design/the-obvious-ui-is-often-the-best-ui-7a25597d79fd デザイナーはプロダクトができる限り使いやすく、可能な限り誘導的なものになるよ
オブジェクトベースなUIデザインに取り組むための心構え｜usagimaru ⌘ Satori Maru｜note
オブジェクトベースなUIデザインの考え方が近頃注目されてきています。デザイナーとしてこれと向き合うに当たって、私なりに解釈した事柄を記しておこうと思います。 オブジェクトベースのUIとはUIデザインにオブジェクト指向の設計論を導入したものをオブジェクトベースのUI、Object-Oriented User Interfaces= OOUI などと呼ぶようです。オブジェクト指向UI、オブジェクト指向ユーザーインターフェイスと呼ぶこともあるかもしれません。そのほかにも OOUX という表記も見られますが、ここでは一貫した呼び名を定めておきたいため、便宜上 OOUI と呼ぶことにします。 私たちが普段目にするGUIは元来OOUIの思想に基づいていると考えられるのですが、中にはとても機能指向的（タスクベース）な設計で構築されたGUIが多くみられるため、特にオブジェクト指向的であるものを強調・区別す
オブジェクト指向UX | POSTD
(注：2015/11/18、記事およびタイトルを一部修正いたしました。) CNN.com で働いていた2012年6月に、大統領選挙投票日の夜のユーザエクスペリエンス（以後UX）のデザインを任されました。私はそれからの6カ月間を投票日の夜のための仕事に専念しました。しかし、仕事が成功するかしないかは、選挙結果に関係はありませんでした。私が懸念していたのは、情報の見つけやすさやデータの見やすさ、canvasでのオブジェクトの変形、そして一体どのようにしたら、iPhoneでマウスオーバーのフライアウトが動作するのかでした。CNN.com史上初めてWebデザインをレスポンシブにすることにしたのです。さらに史上初めて私が、その デザイン を担当することになったのです。 大きな賭けでした。CNN.comにとって大統領選挙投票日の夜と言えば、スーパーボウル（プロアメリカンフットボールの優勝決定戦）の日曜
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ゲームのUIを見る
