You can get notified by subscribing to our biweekly newsletter. No ads, no spam, just new content.
Detail · Where craft lives
You can get notified by subscribing to our biweekly newsletter. No ads, no spam, just new content.
MCP-UI
🌐 Standardized ProtocolMCP-UI is standardized into MCP Apps. The MCP-UI SDKs are fully compliant and ready to use. 🛠️ Client & Server SDKsProvides powerful utilities to create interactive UI resources in MCP servers (Typescript, Ruby, and Python), as well as robust components for simple host integration (React and Web Components).
Skyline アルゴリズムで実現するグリッドを超えた柔軟なレイアウト - Katashin .info
2025年6月23日Bin Packing,データ構造・アルゴリズムCSS Grid や Flexbox により、CSS だけで表現できるレイアウトの幅が広がりました。しかし、グリッドの枠を超える柔軟な UI は CSS のみでは実装が困難です。例えば、短いメモと画像を二次元に並べる以下の UI は CSS Grid や Flexbox だけでは表現できません。 CSS Grid も Flexbox も行や列を定義し、その中に要素を配置するため、行や列にとらわれない UI の実装は困難です。よく使用される Masonry レイアウトは Grid より自由度が高いものの、列か行の片方を厳密に並べるため柔軟性に欠けます。 本記事では Skyline アルゴリズムがこのような柔軟な配置を実現できることを示します。基本的なアルゴリズムを紹介した後、より多くの空きスペースを削減し、より美しいレイアウ
「iOS 26」正式発表 12年ぶりにデザイン刷新、“液体ガラス”のようなUIに
同社のAI「Apple Intelligence」を拡充。電話、メッセージ、FaceTimeに「ライブ翻訳」を実装、テキストと音声をリアルタイムで翻訳。メッセージを直接相手の言語に変換して送信することも可能だ。生成AIを使った絵文字「Genmoji」を合体させて新しい絵文字を作る「Mix emoji」も利用できる。 カメラや画像などを処理できるVisual Intelligence機能も強化。あらゆるアプリの画面上の内容を検索・操作できる他、店舗や運送業者からのメールから注文追跡情報を自動特定・要約する機能なども追加する。 電話アプリは統一レイアウトを採用。ライブ留守番電話がアップデートし、通話スクリーニング機能を搭載する。担当者が電話に出るとユーザーに通知する保留アシストも搭載する。メッセージアプリでは、不明な送信者からのメッセージを専用フォルダに表示してスクリーニングできる機能を追加す
日本と海外の情報設計の違い｜takumi
「情報設計（IA: Information Architecture）」は、ユーザーが目的の情報に迷わずたどり着くための基盤となる重要な考え方です。私は国内向けのサービスを運営している事業会社に所属しており、普段からいろんなサービスを触っているうちに、日本と欧米のサービスの情報設計に大きな違いがあることに気づきました。 この記事では、日本と海外における情報設計の思想の違いについて調べたことを紹介します。 情報量満載の日本、削ぎ落とす欧米たとえば、楽天市場の日本版は、文字・画像・リンクが密集し、ファーストビューだけで何十もの情報が目に入ります。一方、Rakuten USは白を基調とした余白のあるレイアウトで、ユーザーの視線を絞り込むように設計されています。 同じ傾向はスターバックスにも見られます。日本版はキャンペーンや新商品を賑やかにアピールし、画像も豊富。一方、アメリカ版は大きなビジュアル
ソシオメディア | OOUI – オブジェクトベースのUIモデリング
最近、OOUX という言葉を見聞きしました。これはオブジェクト指向の利用者体験（Object-Oriented User Experience）のことで、いくつかの記事を読んだところ、アプリケーション設計において画面とデータを対応づける際にオブジェクトを手掛かりにするという方法論のようです。つまり OOUX は「オブジェクトベースのUIモデリング」と言い換えることができそうです。そうすると実は以前からそのようなデザイン手法はあり、「OOUI（オブジェクト指向ユーザーインターフェース）」と呼ばれていたのです。最近になって OOUX という言葉が使われるのは、OOUI のことを知らなかったか、もしくは流行語である「UX」を用いた方がかっこいいと考えたからではないでしょうか。 「オブジェクトベースのUIモデリング」というデザイン手法は、GUI アプリケーションをデザインする際の基本的なテクニック
Figmaのプロトタイプ機能でアニメーションを再現しよう！【簡単3ステップで完成】｜東京のWEB制作会社・ホームページ制作会社｜株式会社GIG
こんにちは、GIGでデザインとアートディレクションを担当している向田嵩（TKC）です！ UIデザイナーの多くは、一度は以下のような経験をしたことがあるのではないでしょうか？ デザイナーからエンジニアにUIのアニメーションについて資料や口頭で伝えたが、実装されたものが想定と違った...実装後にお客様から「アニメーションの動きがイメージと違う」と修正依頼を受けた...いくら資料や口頭で説明しても、イメージを細部まで共有するのは難しいものです。 しかし、実際の動きをデザイン上でほぼ完全に表現できれば、このようなトラブルを防ぐことができます。今回は、GIGデザイナーが業務で使用している「Figma」というデザインツールで、実際にアニメーションを作成する方法を解説します！ 弊社GIGではFigmaを活用しサイト・システム制作を行っています。コンセプト設計等UXデザインの領域から包括的な支援が可能です
NHKのネット受信契約（案）が“ダークパターン”過ぎて見過ごせない件（前編） NHKの見解は？
NHK放送文化研究所が2021年に発表した「国民生活時間調査2020」によると、テレビを見る人（1日に15分以上テレビを見る人）は全体の8割を切り、16～19歳では5割を下回った。すでに日本国民の2割以上はテレビとあまり縁のない生活を送っていることになるが、NHKのネット受信契約が始まると、そんな人たちもスマホ操作を誤ると受信契約を求められそうだ。しかも誤りやすい状況ができようとしていた。 2025年10月から「同時配信」「見逃し配信」「番組関連情報の配信」を必須業務として展開するNHKは、ネットサービスの提供イメージについて、9月に一部メディアを集めて説明会を実施した。この時の資料と報道から、ネット上の受信契約手順（案）とその画面には、いわゆるダークパターン（ユーザーを騙し、人々の判断を誤らせるインタフェース、総務省の資料より）が含まれているように見受けられる。 「同意して利用する」クリ
スクリーンリーダーの操作にはTab以外のキーも必要です - Qiita
macOSのSafariでは、ボタンやリンクにTabキーでフォーカスを移動できないのがデフォルトの設定になっている Safariでは、「設定」画面の「詳細」パネル内にある「Tabキーを押したときにWebページ上の各項目を強調表示」のチェックを入れていないと、Tabキーを押したときにボタンやリンクにフォーカスが移動しません（Optionキーを押しながらTabキーを押すと移動できます）。デフォルトではチェックが入っていない状態になっています。 また、macOS版Firefoxでは、「設定（about:preferences）」内の「タブキーでフォームコントロールおよびリンク間のフォーカスを移動する」にチェックが入ってないと、Safariと同じくボタンやリンクにはTabキーでフォーカスが移動しないようになっています。これはSafariの挙動にあわせて追加されたようで、やはりデフォルトではチェック
【イカしたUIを見る】Vol.2 これは発明だ！と思ったUIパーツ10選｜Goodpatch Blog グッドパッチブログ
知れば知るほど面白くなるUIの世界を皆さんにもチラ見せしたい……ということで、連載の第2弾となる今回は「これは発明だ！」と私たちが感動したUIパーツについてご紹介します。 ミクロな視点でアプリを観察し、UIパーツ一つひとつに注目してみると、普段は気付けない面白い発見がたくさんありますよ。 ※各UIパーツの名称は、公式で発表されているものではなく、私たちが便宜的につけた呼称になります。 ▼ユーザー視点のUI/UX改善方法がよくわかるお役立ち資料（グッドパッチ） Apple Booksのセミモーダル Appleが提供する電子書籍アプリ「Apple Books」では、カルーセル状に並んだ本を押すと、そのままセミモーダルが立ち上がります。前の画面の一覧性を保ちながら、それぞれの本の詳細を見ることができるのが特徴的ですね。さらに下スクロールすることで、全モーダルへと滑らかに変化します。 このUIのポ
まぎらわしいサイトデザインでユーザーをだます「ダークパターン」いろいろまとめ
ユーザーをだまして判断を誤まるように誘導するような、悪意のあるウェブサイトのデザインを「ダークパターン」といいます。ダークパターンは、ユーザーのプライバシーを侵害したり、ユーザーにより多くのお金を使わせようとしたりするため、問題視されています。そんなダークパターンに該当するさまざまなケースをまとめたサイト「Dark Patterns Hall of Shame(HOS)」が公開されています。 Collection of Dark Patterns and Unethical Design https://hallofshame.design/collection/ ◆しつこい要求 「しつこい要求」は、アプリやウェブサイトで通知や連絡先へのアクセス許可をユーザーに何度も求めるという手口です。ユーザーは何度も拒否しますが、最終的には根負けして許可してしまうケースがよくあります。 HOSはTik
AmazonのUIがダークパターンすぎて酷すぎる
AmazonがEvilに染まっていく… 購入手続きのときに、急にこんな画面が挿入されてきたんだけど、 https://tadaup.jp/55aeed90d.gif こんな絵に書いたようなダークパターンある？？ 「お急ぎ便を無料で利用できます」と書いてあるけど、 小さく「会員は\600円/月で特典使い放題」と書いてある。 つまり、「600円払えば無料だよ」と言っている。つまり、無料ではない。 読解力を測るテストで間違えるような人は、もうこれ読み取れないだろ。 しかも、その下のボタンである。 一見すると、ボタンが2つ並んでいる。 YesとNoのボタンなのかと思いきや、なんと、これはYesとYesである。 「Yes か はい で答えてください」というジョークを素でやっているのが、今のAmazonなのである。 では、Noのボタンはどこにあるのかと、画面中をよく探したら、左側に、普通のテキストの見
Googleマップの新しい外観に元Googleマップデザイナーが苦言
Googleマップは2023年9月頃から新たな外観のテストを実施しており、すでに新たな外観のGoogleマップを使っている人も多いはず。そんなGoogleマップの新外観について、15年前にGoogleマップのデザインに携わったプロダクトデザイナーのエリザベス・ララキ氏が苦言を呈しています。 15 years ago, I helped design Google Maps. I still use it everyday. Last week, the team dramatically changed the map’s visual design. I don’t love it. It feels colder, less accurate and less human. But more importantly, they missed a key opportunity to…
値段の「¥マーク」を小さくしたら購入率が大きく改善された。機能は「体験」で成果が激変する。10周年の「メルカリ」に聞く新機能の開発の裏側。3つの成功施策。｜アプリマーケティング研究所
値段の「¥マーク」を小さくしたら購入率が大きく改善された。機能は「体験」で成果が激変する。10周年の「メルカリ」に聞く新機能の開発の裏側。3つの成功施策。 10周年を迎えた「メルカリ」さんを取材しました。 株式会社メルカリ Product Manager 塚本 佳実さん、UX Design Manager 宮本 麻子さん「メルカリ」について教えてください。塚本： 「メルカリ」は、国内最大手のフリマアプリです。2023年の7月にサービス開始からちょうど10周年を迎えました。 直近のアクティブユーザー（MAU）は2,200万人以上に、四半期のGMV（流通金額）は2,500億円以上に到達しています。 累計だと30億品以上が出品されていて、販売の速度でいうと「1秒間に7.9個の商品が売れている」というデータもあります。 この10年間でのトレンドの変化としては、取引されている「ブランド」にも変化が出
【CSS】CSSの値と単位が新しくなっていますが、ついていけてますか？ - Qiita
はじめに 最近のCSSのアップデートは目覚ましいものがありますが、 みなさんは、CSSの値と単位がここ1年くらいで大きく変わっていることはご存知ですか？ Dynamic viewport が追加されたり、math 関数が追加されたりなどの大きな変更は、ご存知かもしれないですが、calc()で ネイピア数 e や 円周率 πなどが使えるようになったり、 フォントに相対的な長さ単位が追加されていたりと細かい変更も多くあります。 そのため、この記事では、CSS Values and Units Module Level 3 から CSS Values and Units Module Level 4の変更点を中心に紹介しようと思います。 Viewport単位 CSS Values and Units Module Level 3 から CSS Values and Units Module Le
なぜ <div> に onClick がダメなのか？
■ はじめに <div>要素にonClickを渡すべきではない、ということ聞いたことはないでしょうか？ ただ、なぜ渡すべきでないのか？ 理解してなかったので今回調べてみました。 サンプルコード 今回動作確認に利用したサンプルリポジトリのコードはReactで書いています。 ■ 結論：<div>にonClickを定義するのがなぜダメなのか？ ユーザーにとって操作性の低いボタンになってしまうから、です！ 要するに UX が悪くなってしまうから！ その理由を解説していきます！ ■ 操作性の低いボタンになってしまう理由 大きく３つあると考えています。 div要素は focus を持たないから returnキー, spaceキーをonClickに変換しないから スクリーンリーダーが認識しない要素だから ◎ focus を持たないから <div>要素はfocusを持ちません。 なので、tabキーで要素に
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Appleのデザインリソース
Waldo | Fast track your mobile test automation
Magic UI
デスクトップアプリケーションのUIパターン - ウインドウ編（公開版） / UI Patterns of Desktop Applications - Window Layouts
