Streaming UIプラクティス
アプリケーションユーザーにとってパフォーマンスとは、特定の指標に基づいて判断される定量的なものだけでなく、アプリケーションの総合的な体験を通じて感じる定性的なものでもあります。そのため、ユーザーがアプリケーションを「遅い」と感じる要因は様々です。 Googleは以前より、ユーザー中心のパフォーマンスを提唱しています。Core Web Vitalsは、ユーザーが感じるパフォーマンスを定量的に計測するために作成された指標群で、現在最も重要なパフォーマンス指標の一つです。しかし、Core Web Vitalsだけではパフォーマンスに関するUXの全てを網羅できるわけではありません。Core Web Vitalsの改善は重要ですが、最終的にはUX全体を最適化することが必要です。 本稿では、ページ読み込み時に「遅い」という印象をユーザーに与えないために筆者がよく用いるStreaming UIとそのプラ
たった20秒でUIデザイン完成？Googleの新AIツール「Stitch」をさっそく使ってみた！ - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに Google I/O 2025が、5月20日（火）と21日（水）の2日間にわたって開催されましたが、皆さんはご覧になりましたか？ Googleは「Gemini 2.5 Pro」や「AIモード」など、多くの新機能や製品を発表し、大盛り上がりのイベントとなりました！ I/Oの基調講演の最後には、CEOのスンダー・ピチャイ氏が、講演中に「AI」や「Gemini」という言葉がどれだけ発言されたかを示す「AIカウンター」を披露するほど、今回のGoogle I/Oの主役は間違いなくAIでした。 この記事では、そんなGoogle I/Oで発
社内のデザインシステムをMCP化したので事例を紹介！ts-morphを使ったアプローチの実装・プロンプト例をまとめて解説
こんにちは！株式会社エス・エム・エスでエンジニアをしている @_kimuson です。 今回は、社内のプロダクト開発で利用しているデザインシステムを MCP 化して提供し、社内のデザインシステムを活用した自然言語によるコーディング環境を整備したので、事例を紹介します！ デザインシステムの MCP 化とは 先日 Ubie さんが、社内のデザインシステムを MCP 化することで、UI 実装を効率化した事例を紹介していました。 簡単に自分なりの解釈をまとめると Figma の情報を取れる MCP を利用することで Figma の再現はかなりしやすくなった しかし、デザインシステムとの統合が難しい。<button style="font-size: 20px"></button> ではなくデザインシステムのコンポーネントとトークンを使って <Button textStyle="regular"><
UIの状態設計、迷ったらこの整理法！｜koppi
こんにちは！株式会社Rabeeでデザイナーをしているkoppiです🐝 FigmaでUIを作っていると、「hover」「focus」「disabled」「error」「readonly」など、さまざまな「状態（state）」をどう扱うべきか、迷ったことはありませんか？ 今回は、Nathan CurtisさんのMedium記事「The Sorry State of States」を参考に、状態設計で起こりがちな混乱と、その整理方法について自分なりにまとめてみました。 状態（state）はひとつのプロパティで表せるのか？「状態」と一言でいっても、その種類は多く、それぞれ性質も異なります。 rest（通常） hover（カーソルが乗っている） active（押している最中） focus（キーボード操作対象） disabled（操作不可） readonly（編集不可） error / succes
User-Interface Elements: Glossary
2D-Matrix Input Control A specialized input control used primarily in complex applications to simultaneously modify multiple related parameters by drawing a complex curve. Interaction with this control typically occurs by clicking on a point on an existing curve, then dragging that point to a new location. 2D matrices are useful when there are two parameters that depend on each other (such as lumi
AI時代にデザイナーがどう事業コミットするか｜坪田 朋
最近、事業会社のデザインマネージャー達と「UIを作るだけでは評価されにくいフェーズが、ますます加速している」という話で盛り上がった。 これはUIデザイナーの価値が下がったわけではなく、アジャイル開発や仮説検証が体系化し、UIを作る“前”の上流工程の影響がより大きくなったからだ。 僕自身も、delyの開発で高速に仮説検証するプロダクトマネジメントを続けているが、何度も失敗を重ねる中で「まず少人数で早く評価しないと、結果として使われない機能を作り込むリスクが高い」と痛感してきた。 ここ数年で、サービスの価値検証手段に変化がおきて、Firebase Remote Config、Repro / KARTEやNoCodeツールを活用した検証プロセスを実行している現場と実現できていない現場で作り方が変わってきた感覚。 — 坪田 朋 / dely (@tsubotax) October 25, 2021
「UIも自動化も後回し」: AIエージェント開発の実践的アプローチ - Algomatic Tech Blog
こんにちは、ネオセールスカンパニーCTOの菊池(@_pochi)です。 1月にリリースした 「アポドリ 」 は、大変ありがたいことに多くの反響をいただいています。本記事では、その開発を通じて得た、「作らない」ことが成功につながる理由 についてお話しします。 apodori.ai 本記事では、アポドリの開発を通じて学んだ、「いかに作らないか」という反直感的なトピックについて書いていきたいと思います。 AIエージェント開発で後回しにすべきもの 業務A、業務B、業務Cという連続する3つの業務からなる一連のワークフローを実行するエージェントの例を考えます。 AIエージェントは、上図のように人間の実行指示を受け、思考を伴う複数業務を遂行し、アウトプットを返します。図に示した要素の中で、アポドリの開発においてギリギリまで実装しなかった要素があります。それは以下の2点です。 操作画面 : 処理の進捗表示
その「直感的なUI」、本当に直感的ですか？｜wentz
こんにちは。SmartHRのプロダクトデザイン本部でプレイヤー/マネージャーをしているうえんつ（@wentz_design）です。今回は何かと見かけることがある「直感的なUI」という表現について建設的な批判をしたいと思います。 まず、この記事は「直感的」という言葉自体を否定したり、その使用を禁止すべきだと主張するものではありません。「直感的」という概念には本質的な価値があり、ユーザー体験の重要な側面を表現しています。 私が問題提起したいのは、この言葉が具体性を欠いたまま無批判に使われている状況です。この記事を通じて、「直感的」という言葉の背後にある具体的な要素を言語化し、より効果的なコミュニケーションと測定可能なデザイン目標の設定を目指したいと思います。 「直感的なUI」という甘い誘惑新しい企画や開発プロジェクトが始まるたび、私たちは無意識にこの言葉を繰り返していないでしょうか？ 「このア
「shadcn/ui」って何が凄いの？実装知らないWebデザイナーが調べてみた｜akane
はじめにこんにちは！株式会社Rabeeのデザイナーのakaneです。 今回は、最近よく耳にする「shadcn/ui」について調べてみました。どうやらUIコンポーネントっぽいことは分かるけど、一体何を指すんだろう？いわゆる「UIライブラリ」との違いって何？といった疑問をデザイナー目線でお話しします。 どうぞ最後までお楽しみください🐰 「shadcn/ui」って最近よく聞きますよね「shadcn/ui」という単語、最近よく耳にしませんか？たとえば、最近話題になった10Xさんの記事。 なんだかよく分からないけど、UIコンポーネントの話をしているらしい。shadcn/uiはコンポーネントの集まりらしい。それを使うと、スピーディーなプロダクト開発ができるらしい…。 なんとなくは分かる気がするけれど、shadcn/uiって一体何なのでしょうか？UIコンポーネント集に見えるけど、既存のいわゆる「UIラ
文化庁の「公用文作成の考え方」をUIルールに取り入れた話｜のもち
ソーシャルPLUS のデザイナー、のもち(@nomo_017)です🙋♀️ 埼玉県から栃木県に引っ越しました！ラーメンいっぱい食べてます🍜 -- さて、本題に入ります🙋♀️ 最近、文化庁が公開している「公用文作成の考え方（建議）」という文章作成のルールについて、ソーシャルPLUSのデザインチームで読み合わせを行いました。 読み合わせしている様子今回は、実際のUIルールに取り入れたポイントや、気になったポイントをご紹介していこうと思います！ そもそも、「公用文作成の考え方」とは？「公用文作成の考え方」とは、文化庁が公開している文章作成のルールの1つです。 各府省庁等が作成する多様な文書それぞれの目的や種類に対応するよう、公用文に関する既存のルール、慣用及び実態に基づき、表記、用語、文章の在り方等に関して留意点をまとめたものである。 公用文作成の考え方（建議） | 前書きこの他にも、「
できるだけUIを作らない（新規作成画面編）｜toofu
貿易管理 SaaS を提供している Shippio でプロダクトデザインを担当している toofu です。 最近、機能開発・改善をするときに「なるべく UI つくりたくないなあ」と思うことがよくあるので、その考えを事例とともに共有させてください。 メインオブジェクトの作成機能を設計しました先日、Shippio のメインオブジェクトである「シップメント（貿易案件的なもの）」の作成機能をリリースしました。 メインオブジェクトの作成機能がなかったの…？と思われるかもしれませんが、Shippio にはシップメントを画面上で作成する機能がなく、外部データをインポートすることしかできませんでした。 「プロパティが多い貿易案件をすべて手入力していくよりも、ユーザーが普段の業務で管理している Excel 上の貿易データをそのままインポートしてもらうほうが、より業務効率化に近づくはず」というプロダクト開発初
HTML/CSSでできる、押したくなる最新Webボタンエフェクト集
この記事では、ウェブサイトを訪れたひとが思わず押したくなるボタンデザインをまとめてご紹介します。 どのボタンも基本、HTMLとCSS（JSもすこし）で作成されているので、手軽にコピペで利用でき、カスタマイズも自由自在。 ボタンをデザインするときに気をつけたいポイントをチェックしておけば、より効果的なボタンの使い方ができますよ。有名サイトのボタンをコピペできるサービスもおすすめです。 HTML/CSSやJSのコードをリアルタイムで編集、確認できるので、今後のデザイン制作に活用してみてはいかがでしょう。 こんなことできるの?!最新HTMLテクニック・スニペット きらりと輝くコール・トゥ・アクションボタン すべてのモダンブラウザでサポートされるようになった@propertyを利用した新しいCSSの使い方エフェクト。細部まで洗練されあt、注目を集めるCTAボタン。
【イカしたUIを見る】Vol.2 これは発明だ！と思ったUIパーツ10選｜Goodpatch Blog グッドパッチブログ
知れば知るほど面白くなるUIの世界を皆さんにもチラ見せしたい……ということで、連載の第2弾となる今回は「これは発明だ！」と私たちが感動したUIパーツについてご紹介します。 ミクロな視点でアプリを観察し、UIパーツ一つひとつに注目してみると、普段は気付けない面白い発見がたくさんありますよ。 ※各UIパーツの名称は、公式で発表されているものではなく、私たちが便宜的につけた呼称になります。 関連記事：UIデザインとは？ 大切な5つのポイントや取り組み事例を紹介 Apple Booksのセミモーダル Appleが提供する電子書籍アプリ「Apple Books」では、カルーセル状に並んだ本を押すと、そのままセミモーダルが立ち上がります。前の画面の一覧性を保ちながら、それぞれの本の詳細を見ることができるのが特徴的ですね。さらに下スクロールすることで、全モーダルへと滑らかに変化します。 このUIのポイン
失敗しない美しいUIにする配色の選びかた【実践編】
Refactoring UIで公開された「Building Your Color Palette」より許可をもらい、日本語抄訳しています。 これまでに以下のように鮮やかな色の配色ツールを使ったことはあるでしょうか？ ベースとなる色を選び、「補色」や「類似色」などいくつかの配色オプションを調整すると、ホームページを構築するために使用すべき５つの色見本が表示されるというものです。 完璧な配色を選ぶためのこの計算された科学的アプローチは、とても魅力的に見えますが、実はあまり役に立ちません。 自分のサイトをこんな風にしたのなら話は別ですが… 実際のホームページに必要な配色 ずばり、５つのHEXカラーコードだけでは何も作れません。 実際にホームページを制作するには、もっと包括的な色のセットが必要です。 インターフェースにはこれだけたくさんの色が使われている 良いとされる配色カラーパレットは、3つのカ
【新連載・イカしたUIを見る】vol.1 こんなの見たことない！と感動したUI｜Goodpatch Blog グッドパッチブログ
こんにちは！UIデザイナーのsugasoとharuです。UIデザインの面白さ（沼とも言う）にハマってしまった私たちは、定期的に「イカしたUIを見る会」（以下、イカ会）という課外活動を行っています。 イカ会では、最近触ったアプリや発見した魅力的なUIを共有し、普通なら見逃してしまうであろうデザインのこだわりや、ハートを揺さぶられるポイントについて語り合ったりしています。 知れば知るほど面白くなっていくUIの世界を皆さんにもチラ見せしたい……ということで、イカ会の様子を連載することにしました。第1弾となる今回は、「こんなの見たことない！」と私たちが感動したアプリをご紹介します。 関連記事：UIデザインとは？ 大切な5つのポイントや取り組み事例を紹介 Clear Lists 最初にご紹介するのは、ご存知の方も多いタスク管理アプリ「Clear Lists」。 Clear Listsの特徴はナビゲー
熟練が必要なUIについて、それがよくない理由と、UIの慣性について
久しぶりに記事を書く。最近マルス端末のUIについてツイートがあった。 この件に関して、UIについてやUXに対して日々やってきている人間は「ダメなUI」という認識の人が多いように思う。一方で、システムの開発者にとってはこれは、その認識でない人間が多いようだ。なので、この辺を私なりに意見を書いておこうと思う。 まぁ、これはいつもなのだが、書いていることが散らかってる。基本的に音声入力のメモなので、読みにくいかもしれないが読んでくれ参考になれば幸いだ。 熟練が必要なUIは基本的によくない まず、基本的に熟練が必要なUIはそもそも良くないって話をしていく。順番に話していこう、まず、熟練が必要なUIが支持される理由を考え、それに対して、批判していき、なぜ熟練が必要なUIはダメかを語ってみよう。 熟練が必要なUIが支持される理由 その前に、こういった熟練のUIが支持される理由についてかいておこう。それ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Stitch - Design with AI
Google、WebUIの自動生成ツール「Stitch」をベータ公開。自然言語で指示するとHTML/CSSを生成
Scope in GenAI Features
UI 開発における ヘッドレス UI ライブラリの重要性とデザインシステムへの取り入れ方
