なぜ宣言的 UI は壊れにくいのか / Why declarative UI is less fragile
Zli × サイバーエージェント 合同LT 2024/07/14 https://zli.connpass.com/event/319572/ ReactやSwiftUIのような宣言的UIの「原理」を、10分のLTになんとか詰め込んでみました。 Reactフックは名詞起点 = オブジェクト指向…
武田 紘樹 @tomatoha831 事前予約してたのに勝手に荷物置かれてて、揺れる車両内を駆け回って警備員に報告したけど、何のお咎めもなしで別の家族連れに返却されて、悪びれる様子もなく荷棚に積み上げて終わって、予約した側が不快になる画期的なシステム
GAMEUI是一个游戏UI/UX设计师交流平台，专为热爱游戏UI设计的你倾力打造。
いきなりですが、個人開発の良さとはなんでしょうか? 私は「技術的チャレンジをしやすい」という点に魅力を感じています。 業務上の開発ではアウトプットを最優先にする必要があるため、コスパ良く実現することを求められます。 しかし、個人開発に締切ありませんし、開発の優先順位も自分で決められます。 この記事に書いてあること Hover,Pressedを考慮したボタン アクセシビリティを考慮したボタン デスクトップアプリを考慮したボタン そんなボタンを作る方法を考えていきます。 Buttonをイチから作る。 Flutterで提供されているButton系のWidgetを使えば、簡単にボタンを実装できますがどうしてもマテリアルデザインよりの見た目になってしまいます。 もちろんカスタマイズもできるのですが、個人開発ということでイチからButtonを作ってみようと思います。 イチからButtonを作るときに考
気持ちよいUIができたら後は放置。傑作Flash『艦砲射撃・マテスナ』作者の素敵な“悪癖”【フォーカス】 レバテックラボ（レバテックLAB）
GitHub - onlook-dev/studio: The open source, local-first Webflow alternative. Design directly in your live React site and publish your changes to code.
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
【追記】この記事をきっかけに、名著「ノンデザイナーズ・デザインブック」の20周年記念特典eBookの制作に協力させていただきました。詳しくはこちらを御覧ください。 ノンデザイナーズ・デザインブック20周年記念の特典に寄稿しました デザイナーである・なしに関わらず、仕事の中で伝えたいことを「図」で説明する機会は多々あります。提案書で事業内容を説明することもあるでしょうし、具体的な数値をグラフで説明することもあるでしょう。そんな中でこんな指摘を受けたことはありませんか？ ・最終的に何を言いたいのか結論が見えないよ。 ・関係性が複雑すぎて理解しずらいんだけど。 ・要素が多すぎて全てを把握するのが大変。 ・何をどこから見れば良いの？ ・結局一番言いたいことはなんなの？ ・文字サイズがたくさんありすぎてまとまりがないね。 ・安っぽいチラシみたいでダサイなぁ。 ・全体的にバランスが偏ってて不安定。 ・
16年ぶりの日本語版登場に刮目せよ！ 『ABOUT FACE インタラクションデザインの本質』監訳者まえがきを先行公開！ | Web Designing
8月19日、奇しくも『Web Designing』10月号と同日にマイナビ出版から発売される『ABOUT FACE インタラクションデザインの本質』（Alan Cooper、Robert Reimann、David Cronin、Christopher Noessel ・著）。2008年に発売された第3版日本語版は長らく品切れで、ネット書店で非常な高値で中古品が販売される状況となっていた。それから16年、ついに第4版の完全日本語訳が発売となる。上野学・監訳、ソシオメディア株式会社・訳という最強の布陣でお送りする本書の、「監訳者まえがき」を特別に先行公開。監訳者である上野さんの熱いメッセージと本書についての思いの詰まったまえがきを、ぜひ読んでいただきたい。 Amazonで予約する 執筆者プロフィール 上野 学さん デザインコンサルタント／デザイナー。各種ソフトウェアのヒューマンインターフェー
macOSのメニューバーにたくさんのアイコンが表示されて邪魔！ という人に便利な無料アプリを紹介します。 アイコンは常に表示するアイコン、基本非表示でクリックやホバーで表示するアイコンにすることができ、簡単に言うとBartenderのようなことができます。私はBartenderを長く使用していましたが、この記事で紹介するIceに変更しました。 「…」の右が常に表示、左が非表示でクリック・ホバーで表示されます。 Ice -Menu Bar Manager Ice -GitHub Iceの特徴 Iceのダウンロードとインストール Iceの使い方 Iceの特徴 Iceは、macOSのメニューバーを管理するオープンソースの無料アプリです。主な機能は、メニューバーに表示されているアイコンの表示・非表示ですが、ほかにも便利な機能が備わっています。 対応OSは、macOS 14（Sonoma）です。ライ
昨今のフロントエンド向けUIライブラリでは、コンポーネントの設計が重要です。この記事では、コンポーネントのスタイリング、その中でもとくにコンポーネントの大きさに関わるコンポーネント設計について考えます。 私の考える結論は、むやみに大きさを指定できるpropを生やさずに、CSSで外から大きさを制御できるようにしたほうがいいです。 コンポーネントの大きさを制御したい UIの一部分を再利用可能なコンポーネントとする場合、同じコンポーネントがさまざまな場面で使えるのが望ましいでしょう。コンポーネントが提供する機能にもよりますが、場面に応じてさまざまな大きさでコンポーネントを使用できたほうがよいこともあります。 具体例として、このようなコンポーネントを考えてみましょう。例はReactで示しますが、この記事の内容はReactとは関係ありません。 const Card: React.FC<React.P
Figmaは、文章からUIレイアウトを生成できるAI機能「Figma AI」のベータ版を2024年6月26日にリリースしました。しかし、Figma AIを使ったユーザーから「Apple製アプリとそっくりなUIが生成される」という指摘が寄せられ、ベータ版の提供を中止する事態に発展しています。 (1) As we shared at Config last week - as well as on our blog, our website, and many other touchpoints - the Make Design feature is not trained on Figma content, community files or app designs. In other words, the accusations around data training in this
無料で使えるSVGアイコンはたくさんありますが、使い勝手がよいシンプルなデザインで、バリエーションも豊富となるとなかなか見つかりません。 WebサイトやスマホアプリのUIでよく使うアイコンが1,470種類、カラー・サイズ・ストロークの変更もサポートしているSVGアイコン素材を紹介します。 Lucide Lucide -GitHub LucideはFeather IconsのForkで、Featherに対する不満が高まったことによりコミュニティ運営で始まったプロジェクトです。FeatherにはたくさんのIssuesやPRが未解決で放置されており、これらの対応はされていません。 Lucideのアイコンは、元のシンプルなデザイン言語に忠実なまま、可能な限りアイコンセットを拡張しています。ライセンスはISC Licenseで、個人でも商用プロジェクトでも無料で利用できます。
昨今のフロントエンド向けUIライブラリでは、コンポーネントの設計が重要です。この記事では、コンポーネントのスタイリング、その中でもとくにコンポーネントの大きさに関わるコンポーネント設計について考えます。 私の考える結論は、むやみに大きさを指定できるpropを生やさずに、CSSで外から大きさを制御できるようにしたほうがいいです。 コンポーネントの大きさを制御したい UIの一部分を再利用可能なコンポーネントとする場合、同じコンポーネントがさまざまな場面で使えるのが望ましいでしょう。コンポーネントが提供する機能にもよりますが、場面に応じてさまざまな大きさでコンポーネントを使用できたほうがよいこともあります。 具体例として、このようなコンポーネントを考えてみましょう。例はReactで示しますが、この記事の内容はReactとは関係ありません。 const Card: React.FC<React.P
昨今のフロントエンド向けUIライブラリでは、コンポーネントの設計が重要です。この記事では、コンポーネントのスタイリング、その中でもとくにコンポーネントの大きさに関わるコンポーネント設計について考えます。 私の考える結論は、むやみに大きさを指定できるpropを生やさずに、CSSで外から大きさを制御できるようにしたほうがいいです。 コンポーネントの大きさを制御したい UIの一部分を再利用可能なコンポーネントとする場合、同じコンポーネントがさまざまな場面で使えるのが望ましいでしょう。コンポーネントが提供する機能にもよりますが、場面に応じてさまざまな大きさでコンポーネントを使用できたほうがよいこともあります。 具体例として、このようなコンポーネントを考えてみましょう。例はReactで示しますが、この記事の内容はReactとは関係ありません。 const Card: React.FC<React.P
本セミナーでは、デザインやITの知識を持たない方でも直感的で使いやすいUIの検討（アプリケーションの画面設計等）を行える方法論をご紹介します。 DXに取り組む企業の増加、ノーコード開発ツールの発展などの背景から、最近、デザインやITの知識をほとんど持たない方が業務用アプリ等の画面をつくる機会が増え…
理想のUIをめざして！Webでハーフモーダルを作って磨き上げた話 - Tabelog Tech Blog
こんにちは！飲食店システム開発部オーダーチームの開発エンジニアを担当している堀口です。 食べログオーダーは、レストランでの飲食体験をより快適にするためのモバイルオーダーシステムです。飲食店に来店したお客様が自身のスマートフォンを使用してQRコードを読み取り、Web上でメニューをカートに追加し注文することができます。メニュー選択や注文操作はWebでありながら、ハーフモーダルを使用したネイティブアプリのような注文体験ができます。 この記事では、モバイルオーダーシステムのUI改善に焦点を当てます。ハーフモーダルの採用がどのようにして決定されたのか、その開発プロセス、そして実際に達成された改善点について詳しく掘り下げていきます。Reactを使用したフロントエンド開発で遭遇した課題と、それらをどのように解決したかの具体例を紹介します。 目次 なぜ「ハーフモーダル」を採用したか ハーフモーダルの導入と
AIにより生み出された余剰で、次に君は何デザイナーになるのか？｜TSUYOSHI KANEKO / GOGEN株式会社CXO
Figmaの大型アップデートが発表されましたね。 AIによる作業効率化、汎用性の高いUIキット、スライド作成機能、Devモードなど、クリエイティブのハードルを下げ他職種との共創を支援する機能が目白押しでした。 これらの新機能は、間違いなく 既存のデザイナーの仕事を圧倒的に楽にする 他の職種がデザイナーの仕事を気軽に実行しやすくなる ことを示しています。 これらによって自分たちの仕事はより効率化される一方で、効率化されて浮いた時間やリソースをどこに投下するか？をまだ決めていないデザイナーが多いのではないでしょうか？ これらの輝かしい新機能を啓蒙する旗手になることで短期的に注目を浴びることができる一方で、中長期では誰でもできる仕事が増え、多職種とのコラボレーションが進み、「何者でもない」デザイナーを量産してしまう毒にもなり得るのではないかと危惧しています。 AIによって得た余剰時間を使ってあな
同一機能でXbox風とPS風のバリエーションを用意したゲームパッドがホリから。Steam公式ライセンス取得のBluetoothゲームパッドも
同一機能でXbox風とPS風のバリエーションを用意したゲームパッドがホリから。Steam公式ライセンス取得のBluetoothゲームパッドも 編集部：小西利明 2024年6月26日，ホリは，PC用のワイヤードゲームパッド「HORIPAD for Windows PC スティッククロスタイプ」を2024年7月に，と「HORIPAD for Windows PC スティックストレートタイプ」を2024年9月に発売すると発表した。税込のメーカー想定売価は4980円である。 両製品とも基本的な仕様は同じであるが，アナログスティックとD-Padの配置が異なっており，スティッククロスタイプはXboxレイアウト，スティックストレートタイプはPlayStationレイアウトであるのがポイントだ。 HORIPAD for Windows PC スティッククロスタイプ HORIPAD for Windows
Googleフォームの設定ミスによる情報漏えいが多発～あなたのフォームは大丈夫？ 原因となる設定について解説～ - ラック・セキュリティごった煮ブログ
デジタルペンテスト部の山崎です。 4月から「セキュリティ診断」の部署が「ペネトレーションテスト（ペンテスト）」の部署に吸収合併されまして、ペンテストのペの字も知らない私も晴れてペンテスターと名乗れる日がやってまいりました！（そんな日は来ていない😇） そんなわけで、新しい部署が開設しているブログのネタを探す日々を送っていたのですが、最近、Googleフォームの設定ミスによる情報漏えい事故が増えてきているようです。 どのような設定が問題となっているのでしょうか？ 同じような事故を起こさないよう、設定項目について見ていきたいと思います。 情報漏えいの原因となりうるGoogleフォームの設定について Googleフォームから情報漏えいとなっている事例を見てみると、大きく分けて以下の２パターンのいずれかが原因となっているようです。 １．表示設定で「結果の概要を表示する」が有効に設定されている ある
Appleの空間コンピュータ「Apple Vision Pro」が6月28日に日本でも発売される。注目度の高い製品がいよいよ日本に上陸するが、何せ「59万9800円（税込み）」と高額だけにためらっている人も多いだろう。 筆者は2024年2月2日の米国発売時に、ハワイに行って購入した。4カ月ほど使い続けている中で「60万円の価値があるか」を改めて考えてみたい。 Vision Proを装着する際の注意点 かぶったまま歩いても問題なし Apple Vision Proは世間的にはVRやXRのデバイスという位置付けで見られているが、Appleとしては「空間コンピュータ」というコンセプトを貫いている。実際、単にバーチャル空間に入ってコミュニケーションやゲームを楽しむというよりも、さまざまなアプリケーションによって幅広い用途が期待できるデバイスだ。単機能ではなく、「次世代のMac」と言った方がしっくり
【新連載・イカしたUIを見る】vol.1 こんなの見たことない！と感動したUI｜Goodpatch Blog グッドパッチブログ
2024年4月23日に配信されたWindowsアップデートによって、Windows 11のスタートメニューには広告が表示されるようになりました。この広告を非表示するする方法をまとめておきます。 2024 年 4 月 23 日 — KB5036980 (OS ビルド 22621.3527 および 22631.3527) プレビュー - Microsoft サポート https://support.microsoft.com/ja-jp/topic/5a0d6c49-e42e-4eb4-8541-33a7139281ed Microsoftは「スタートメニューに広告を表示する機能」を含むWindowsアップデート「KB5036980」を2024年4月23日にリリースしました。これにより、一部のPCでスタートメニューの「おすすめ」欄にMicrosoft Storeで配信されているアプリの広告が表
みなさま、こんにちは🐰 株式会社Rabeeでデザイナーをしているkoppiです🐝 2023年6月頃に登場したFigmaのvariables(バリアブル)、なんだか難しそうで尻込みしていましたが、挑戦してみました。 今回はColorについて、手探りながら分かったことをここにまとめます。 variablesって聞いたことあるけど、何ができるの？ Figmaでどうやって設定するの？ という疑問をお持ちの、まだvariablesに触れたことのない方向けの内容になっています。 variables(変数)ってなに？ある値(カラーコードやサイズなど)を箱に入れて、名前をつけたものです。 これを使うと、何度も同じ色やサイズを使うときに、簡単に一度に変更できるようになります。 variableのイメージvariablesで管理できる4つのタイプ今回はColorについて取り上げますが、variablesで
![[Figma]variablesの使い方-Color-｜koppi](https://cdn-ak-scissors.b.st-hatena.com/image/square/7887fa501c1209f95d6058efd1f820703510eb36/height=288;version=1;width=512/https%3A%2F%2Fassets.st-note.com%2Fproduction%2Fuploads%2Fimages%2F145053186%2Frectangle_large_type_2_8bbc091e3094ad5d252e85b08b41fd52.png%3Ffit%3Dbounds%26quality%3D85%26width%3D1280)
おたろう @otarou01 セルフレジであたふたしてる年配者を見るに、あの手の人々の特徴として「文字を読まない」というのがあると思う。 ディスプレイの中にも外にも文字で色々と使い方が記されてるけど、基本それらを読まずに直感でボタン押してるだけの様子。 説明書読まない系、結論として文字情報は彼らには無力。 2024-06-23 10:17:20 おたろう @otarou01 よくセルフレジで困ってる年配の人を手助けするけど、動きから文字を読んでないのが分かる。 自分は説明書は最初にきちんと読むタイプだが、説明書を読まない人達は文字から何かしらの情報を得て事に当たるという習慣が無いから、困ったらまず目の前の文字を読むという事をしない。 2024-06-23 10:21:54 おたろう @otarou01 そういう意味では高齢者が使うインターフェースの開発には日本語が読めない外国人をシュミレー
NLUX with ReactGenerative UI With Next.jsChatGPT-Inspired UI import { AiChat, useAsStreamAdapter } from '@nlux/react'; import '@nlux/themes/nova.css'; import { send } from './send'; import { user, assistantAvatar } from './personas'; export default () => { const adapter = useAsStreamAdapter(send, []); return ( <AiChat adapter={ adapter } personaOptions={{ assistant: { name: "EinAssistant", tagline
話題のClaude「Artifacts」は対話型AIにおける「UX革命」である｜梶谷健人 / 新著「生成AI時代を勝ち抜く事業・組織のつくり方」
ProductZine Day＆オンラインセミナーは、プロダクト開発にフォーカスし、最新情報をお届けしているWebメディア「ProductZine（プロダクトジン）」が主催する読者向けイベントです。現場の最前線で活躍されているゲストの方をお招きし、日々のプロダクト開発のヒントとなるような内容を、講演とディスカッションを通してお伝えしていきます。
じゃあなんすか、Noto Sans JP使うんならボタンにアイコン入れるなって事すか｜chot Inc. デザイナーユニット
こんにちは、ちょっと株式会社デザイナーのモです。 挨拶から間髪入れずで申し訳ないのですが、まずはこちらをご覧ください。 何の変哲もないテキストとアイコンで構成されたボタンです。 今回はこちらのボタンに物申したく筆を執らせていただきました。思うところがあるんだよ今の私には。 ずれている、Noto Sans JPという訳で早速本題に入りますが、単刀直入に言ってこのボタンずれてるんですよね。「暑いね」って言ったら「水飲めば？」って言ってくる人くらいずれてる。私怨はさておき具体的に表すとテキストとアイコンが上下にガクンとずれているって訳です。 論に拍車をかけるためにボタンに分割線を引いてみました。 アイコンは上下真っ二つだがテキストはどうも下に寄っていますぞなぜずれる、Noto Sans JPこれが目の錯覚…なら良かったんですが（良くない）実際にずれていて、ではなぜそんなことになっちゃっているのか
ランサムウェアの侵入経路は今はVPN機器とかRDPの脆弱性だった。「怪しいメールの添付ファイル開かなきゃ大丈夫」は時代遅れなのか？→有識者の声が続々
ういにゃん|フリーランスUnityエンジニアDJ Youtuber @ui_nyan 2008年よりツイッター活動を開始。東京を拠点に活動を続け、秋葉原、渋谷、新宿の多数のパーティーに出没している。その幅広いジャンルを吸収したクロスオーバーなプレイスタイルは、国内海外各地の業界人や多数のクラウドから根強い人気を誇る。今、日本で最も注目される２次元アイコンの一人である。icon:@tougehiro uinyan.com ういにゃん|フリーランスUnityエンジニアDJ Youtuber @ui_nyan ランサムウェアの侵入経路、いまはほとんどがVPN機器とかRDPの脆弱性なのね... 「怪しいメールの添付ファイル開かなきゃ大丈夫」は時代遅れなのか.... pic.twitter.com/ulYojHuWdG 2024-06-14 15:44:12
日本デザインスクールでは年間1500名ほどの受講生を、未経験からWEBデザイナーに育ててきました。受講生を指導する中でよくあがってくるのが「参考がなかなか見つからない」というお悩み。 私も受講生にお伝えすべく、これまで100サイト近くの「参考になりそうなギャラリーサイト」を見てきました。 そこで今回は、これまで見てきたギャラリーサイトの中で、みなさんのデザイン制作のお役に立ちそうなサイトを全部で61個ご紹介していきます。 全てのサイトを おすすめ度 サイト内検索の可否 いいね/保存機能の有無 ランキング機能の有無 掲載サイト数 を基準にランクづけし、おすすめできるサイト順に載せているので忙しいという方は、とりあえず上から順にチェックしていただければ大丈夫です！みなさんのデザイン制作に活かしていただけると嬉しいです。 【全サイト徹底比較】超参考になるおすすめギャラリーサイトTOP38 ちょう
これでもうロゴのSVGを探さないで済む！ SNSやブラウザ、ライブラリ、ソフトウェアなどのロゴをSVGで簡単に利用できる -svgl
ソーシャルメディアをはじめ、各種ブラウザ、フレームワーク、ライブラリ、言語、ソフトウェア、AI関連などのロゴをSVGで簡単に利用できるsvglを紹介します。 SVGはコードをコピペで利用したり、SVGファイルをダウンロー...記事の続きを読む
CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。
macOS 15 Sequoiaでスタンドアローン化されるAppleの「パスワード」アプリでは、メニューバーからアカウント名やパスワード、認証コードを素早く取得することが可能に。
macOS 15 Sequoiaでスタンドアローン化されるAppleの「パスワード」アプリでは、メニューバーからアカウント名やパスワード、認証コードを取得することが可能になるそうです。詳細は以下から。 Appleは現地時間2024年06月10日に世界開発者会議(WWDC24)の基調講演を行い、その中で、今年の秋もリリースを予定している「macOS 15 Sequoia」では、現在システム設定に実装されているパスワード管理機能が、「パスワード (Passwords.app)」アプリとしてスタンドアローン化され、iOSやiPadOS, visionOSにも提供されると発表しましたが、 Appleが公開したWWDC24のセッション10125「Streamline sign-in with passkey upgrades and credential managers」によると、macOSのパス
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
:has()を使ってCSSだけで同意チェックボタンを実装する方法｜BLACKFLAG
最近のUXデザイナー志望者の傾向とWebディレクター不要論について｜おり
新幹線の特大荷物スペースを予約してたのに知らん人が勝手に置いてた話→予約してた側が一方的に不快になる
GAMEUI(GameUI.net)-游戏UI/UX学习、交流、分享平台
より良いユーザー体験を求めて "ボタン" を深掘りする
誰も教えてくれない「分かりやすく美しい図の作り方」超具体的な20のテクニック
エクスプローラーのリボンUI化が可能になった「Winaero Tweaker」v1.63／無料のOS・アプリのカスタマイズツール、OS/Edgeのおせっかい抑止機能も拡充
Bartenderの代替に！ macOSのメニューバーのアイコンを常に表示・非表示にできるオープンソースのアプリ -Ice
「Google Chrome」にずっとテキストカーソルが表示される！ 何かと不便な状況の解決法／［Home］［End］キーが使えない、Webページ上のUIが上手く動作しないなど困った状況に【やじうまの杜】
UIコンポーネントの大きさは外から制御しよう - Qiita
FigmaのAI機能でApple製アプリにそっくりなUIが生成されて機能が一時無効化
UIデザインに最適！ シンプルなデザインで使いやすく、商用でも無料で利用できるSVGのアイコン素材 -Lucide
UIコンポーネントの大きさは外から制御しよう - Qiita
UIコンポーネントの大きさは外から制御しよう - Qiita
ノンデザイナーでもできる。直感的で使いやすいUIの設計方法
「Apple Vision Pro」に約60万円の価値はあるのか？ 約4カ月間使って“後悔しなかった”理由
JavaScriptを忘れて、CSSだけでモーダルを創造する - Qiita
Windows 11でスタートメニューに表示される広告をオフにする方法
[Figma]variablesの使い方-Color-｜koppi
セルフレジであたふたしてる年配者を見るにあの手の人々は「文字を読まない」ので文字情報は彼らには無力
The Powerful Conversational AI JavaScript Library | NLUX
チーム再編からデザインシステムの構築まで──チームでデザインを生み出すサイボウズのFigma活用
ペン型マウスが、外出時の「マウスがかさばる」＆「狭い場所で使えない」不満をまとめて解消してくれました！ 【テレワークグッズ・ミニレビュー 第100回】
iOSアプリによく使用されているナビゲーションの最新パターンとそれぞれの特徴
私がWEBデザイン制作の参考になりそうだと思うサイトを61個挙げてみた。
「自分はわかるからOK」というオレオレ表記が開発を遅らせ、プロダクトの評価まで下げてしまう