JollyUINew 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.
『注文』『注文する』ボタンにするならどっち？——インターフェースのボタン名を考える上で気をつけるべきこと｜tamamomo
『注文』『注文する』ボタンにするならどっち？——インターフェースのボタン名を考える上で気をつけるべきこと これは フェンリル デザインとテクノロジー Advent Calendar 2023 19日目の記事です。 操作に迷わない、使いやすいアプリ・システムをデザインする上で、「インターフェースに添える言葉を「分かりやすく」表現することは重要です。適切な箇所で、適切なラベルを添えることは、ユーザーがアプリ・システムを使いこなすための大きな手助けになります。 特に、スマートフォンのように表示領域が小さなデバイスだと、あまり長い言葉を配置することができない、という制限があります。そのためボタンの名前は、できるだけ短く、そして一瞬で伝わる言葉にすることが求められます。 ボタンの名前は、できるだけ短く。そして分かりやすい言葉になるように。 それを念頭においた上で、考えてみてください。 「注文」「注文
Chakra UI - A simple, modular and accessible component library that gives you the building blocks you need to build your React applications.
Less code. More speedSpend less time writing UI code and more time building a great experience for your customers. import * as React from "react"; import { Box, Center, Image, Flex, Badge, Text } from "@chakra-ui/react"; import { MdStar } from "react-icons/md"; export default function Example() { return ( <Center h="100vh"> <Box p="5" maxW="320px" borderWidth="1px"> <Image borderRadius="md" src="h
「アフォーダンス」と「シグニファイア」をおさらいしてみる | Tech Blog | CRESCO Tech Blog
この本には、「アフォーダンス」や「シグニファイア」という言葉が出てくるのですが、なかなか理解が難しく、自分でもあやふやな所もあったので、再度調べなおしてみました。
脱初心者のためのUIデザインの心得
#UIのじかん https://graspy.connpass.com/event/138971/
UX DAYS TOKYO 2019
ENGLISH ビジネスのためのUX 2019年4月5日(金) - 4月7日(日)開催 盛況のうちに終了しました 成功できる強いチームになる 成功の鍵は正しいUXの知識が組織に浸透できるかです。 チーム全員で参加してスピードを上げ、ビジネスで勝てるチームづくりをしよう！ （サッカーでUXチームを考えてみよう） スピーカー 使い続けられるサービスの秘訣＝オンボーディングUXをてがけるシニアUXデザイナー Krystal Higgins(クリスタル・ヒギンス) Google シニアユーザーエクスペリエンスデザイナー Amazon Echo Lookの開発者であるプリンシパルデザイナー Cheryl Platz (シェリル・プラッツ) Ideaplatz, LLCプリンシパルデザイナー兼オーナー 元Amazon, Microsoft
ブサイクなUIデザインを劇的に改善するための10のチェックリスト｜Taiki IKEDA｜note
お久しぶりです、イケダです。UIデザインをする上で、これらを意識するだけでビジュアルの質が劇的に向上するというチェックリストを作ってみました。UIデザインの参考にしてください。 左右の余白は揃っているか 左右の余白をしっかり揃えることは最も初歩的で、カンタンに実践できるTipsです。あまりに初歩的すぎて悪い例を探すのに苦労しましたが、MoneyF●rwardさんが題材として非常に優秀でした。左右の余白は14~20ptの間で揃えるのが定石です(迷ったら16ptにしておこう)。どうしても左右の余白を持て余してしまうという場合は右の改善例のように中央揃えに逃げるのも手です。 フォントの大きさは正しいか fontサイズはまず、「読ませるテキストの大きさ」を決めてから、それを基準に組み立てていきます。読ませる文字、webでいう<p>タグは14~16ptに設定し、その文字とのバランスを見て<head>
もうこれでUI用のアイコンには困らない！商用でも完全無料で利用できる3,000種類のシンプルなアイコン素材
商用でも無料で利用できる1,000種類のアイコンが3つのスタイル、そしてPhotoshoop用・Adobe XD用・Sketch用・Figma用・inVision用、そしてSVGまで完備されたMaterial Icons Libraryを紹介します。 一度にすべてのアイテムがダウンロードできるので、備えておくと便利だと思います。 Material Icons Library ラインセスはApache License Version 2.0で、個人でも商用でも無料で利用できます。 アイコンはMaterial Designを踏襲しており、全部で1,000種類のアイテムが揃っています。スタイルは角丸・アウトライン、ツートーンの3種類。合計すると、3,000種類以上になります。 アイコンの特徴 フォーマットは、Photoshop, Adobe XD, Sketch, Figma, inVision
ソシオメディア | OOUI – オブジェクト指向ユーザーインターフェース コンサルティング
今、UIデザイナーや開発者の間で注目を集めている「オブジェクト指向UI」。その発信源である Sociomedia が、御社のシステム開発／アプリケーション開発／UIデザイン力向上をサポートします。 OOUI – オブジェクト指向ユーザーインターフェースとは、オブジェクトを起点として操作体系を設計することです。企画段階におけるコンセプトデザイン、設計段階における画面仕様検討、そして実装を経たデザインルールの組織的な管理段階に至るまで、開発工程全体を通じて適用される、シンプルで強力な基本原理となります。 書籍『オブジェクト指向UIデザイン』 OOUI についてのブログ記事 UIを設計する上でオブジェクトを起点とするという考えは、GUI（グラフィカルユーザーインターフェース）の初期からあり、オブジェクト指向プログラミングとの高い親和性を持って実践されてきました。しかしソフトウェア工学やデザイン手
Happo.io - Cross-browser screenshot testing
Trusted by the industryHappo is used by a multitude of tech companies, including Fortune 500 companies in San Francisco, web agencies in Brasil, Insurance Companies in Japan, and many more. Happo takes screenshots of your UI componentsFind bugs before your code is shipped to production. Visual regression testing with Happo lets you move faster and with more confidence. Use it with Storybook, Cypre
ドメイン駆動設計とOOUXで迎える2019年 - Qiita
概要 DDDが、デザイン界隈で注目されだした「OOUX」という設計手法を吸収合併すると皆んながハッピーになるはず、という主にはUI設計のお話です。 OOUXとは Object-Oriented User eXperience の略で、端的に言うと、UIを設計する際「（ユーザのアクションでなく）オブジェクト視点で設計するとより直観的なUIが作れるよ」という手法 1です。考え方自体はOOPが提唱された時代から（OOUIという呼び名で）あったようなのですが 2、UX界隈では2016年頃から話題にのぼるようになりました。 このアドベントを見ている方はほぼエンジニアだと思うので、UI設計者の進化についての、個人的な解釈・経験に基づく乱暴な説明（下記1〜３）から始め、それをDDDでさらに進化できる！という私の思いの丈（4）を語り、この場を借りてDDUXという言葉を提唱したいと思います 3。 UX以前の
UIデザインにおけるイラストの活用法とは | UX MILK
私たちの脳の大部分は視覚処理に使われています。人間が処理する情報の90%は視覚から来ていると述べる研究者もいます。 この記事では、視覚情報の１つであるイラストについて述べたいと思います。UIの他要素と同様、イラストも特定の目的のために使われます。イラストをUIで使おうと考えた場合、いつなんのために使う必要があるのかを明確に理解しておく必要があります。 以下ではイラストがユーザー体験にどう役立つのか、３つの典型的な例を紹介します。 １. UIをより具体的にする コンセプトの説明 言葉だけでは、コンセプトを伝えるのが難しいときがあります。特に、コンセプトが抽象的である場合がそうです。イラストはものごとを明確化する力を持ち、デザイナーはこの特性を使うことができます。たとえば、Basecampは現代ビジネスで起こる日々の問題を明示するためにイラストを使用しています。言葉だけのメッセージより抵抗なく
最近のUXデザインにおける、スマホアプリのインターフェイスに使用されているアイデアのまとめ
ここ数年の間に、スマホは単なる電話以上に多くの機能を持つようになりました。スマホはさまざまな目的のために使用され、わたし達の日常のアシスタントをこなしています。 そんな便利なスマホアプリのユーザーインターフェイスに注目し、最近のUXデザインにおけるクリエイティブなすごいコンセプトを紹介します。 15 Creative UX Design Concepts for Everyday Needs by Tubik Studio 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 植物の水やりを管理するアプリ 安眠アプリ ハンバーガーショップのアプリ TODOアプリ 料理のレシピアプリ ベジタリアン用のレシピアプリ アラームアプリ 家電操作アプリ 家計簿アプリ 名刺管理アプリ バランスアプリ ファイナンスアプリ フィットネスアプリ カレン
UIデザインパターンの参考になるサイト10選
同じようなデザインの手直しに人生の貴重な時間を費やしたいと思う人はいません。過去に別のアプリなどで解決されている問題があるのなら、その問題の解決策がテンプレートとして既に存在するはずです。それこそが、誰にでも使えるデザインパターンです。 ここでは、Web上でデザインパターンを見つけるのに最適なサイトをリストアップしました。執筆時現在、これらのリソースはすべて無料ですが、一部はプレミアム版などを支払うように求められる場合があります。なお、この記事は、これらのサイトのアフィリエイトではないことを最初に断っておきます。 UI Patterns UI Patternsでは、好みのパターンを簡単に検索でき、使えると思ったパターンをグループ化することができます。また、自分のデザインでのパターン活用に役立つ、UIデザインパターンに関する多くの興味深い記事があります。 WELIE Interaction
日本製UIデザインツール「STUDIO」は従来のツールと何が違うのか - 酔いどれデザイン日誌 - Drunken Design Diary -
先日、私の古巣である株式会社オハコからスピンオフしたオハコプロダクツ社から、UIデザインツール「 STUDIO」のクローズドβ版がリリースされました。 国産のUIデザインツールといえばグッドパッチ社が提供するProttなどが有名ですが、β版を触ってみた感想と合わせて STUDIOの何がすごいのか？従来のUIデザインツールとは何が違うのか？ということを紹介してみたいと思います。 目次 これはプロトタイピングツールではない 特筆すべきはシームレスな操作感 全員がMVPまで作れる時代 まとめ これはプロトタイピングツールではない まず、最初にSTUDIOを「UIプロトタイピングツール」ではなく「UIデザインツール」と記載したのには訳があります。近年はプロトタイピングの重要性が多方面で説かれているのに呼応するように、冒頭で紹介したProttをはじめ国内外からたくさんのプロトタイピングツールが登場し
サービス設計を依頼できるUXやUIデザインの制作会社 | UXデザイン会社Standardのブログ
新規事業の立ち上げやサービスの改善の際、社内の声だけでなく外部の専門的な意見を求めるために相談できるデザイン会社を探そうとしたことはありますか？ STANDARDでは、「新規事業のアイデアはあるけど具体性が見えない」「リリースしたサービスの数字が伸びない」のような悩みをお持ちの企業に対し、UXデザインやUIデザインのサービスをご提供しており、様々な業界の企業様からお話をいただくことが多いのですが、少人数の会社故、リソースの関係で辞退させていただくことが少なくありません。 そこで今回は、同様にサービスの受託制作を中心に活動されているデザイン会社の中で、個人的につながりのある信頼がおけるデザイン会社を11社ピックアップしてご紹介させていただきます。 1. 株式会社root http://ic-root.com/ 「デザインを通じて事業成長に貢献する」というミッションをもとに、グラフィックや造形
今さら聞けないUI（ユーザーインターフェース) の基本 デザイン会社 ビートラックス: ブログ
ユーザーインターフェース（UI）- どこかで聞いたことはあるしなんとなく想像は出来る。”このアプリのUIはイケテル”や、”UIデザイナー募集”など、最近ではテクノロジー系の記事や、デザインに関する話の中に頻繁に出てくるこの言葉。 しかしちゃんと言葉で説明してみてと言われると意外と難しい。 興味はあるけどはっきりとはわからない・わかっているつもりだけどもう一度復習したい・現状はわかっているからこれからのUIついて知りたい。 そんな人たちに向けて ユーザーインターフェースの歴史良いUIと悪いUIの違いUIのこれからという3つのセクションに分け、インターフェースの本質をまとめた。 1. ユーザーインターフェースの歴史そもそもインターフェースってなに？そもそもユーザーインターフェースの「インターフェース」とはどういう意味なのだろうか。「境界面・接触面」などと訳されるこの「インターフェース」という言
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
人にうれしいAIのためのUXデザインガイド（People + AI Guidebook）
F A N T A S Y
http://growiz.us/the-basic-process-of-product-growth-design/
