
Figma Make:Sketch以来最大のUX/UIの転換
React、Tailwind CSS v4、ShadCNを使用し、インポートしたライブラリに合わせてShadCNトークンを自動調整します。AndroidとiOSにインストール可能なPWA出力もサポートされています。ただし、開発者がこの変化を完全に受け入れるかどうかはまだ不透明であり、それが著者の挙げる主要な留保点です。UI component architecture, design tokens, and semantic theming Compiled for immediate developer deployment.

React、Tailwind CSS v4、ShadCNを使用し、インポートしたライブラリに合わせてShadCNトークンを自動調整します。AndroidとiOSにインストール可能なPWA出力もサポートされています。ただし、開発者がこの変化を完全に受け入れるかどうかはまだ不透明であり、それが著者の挙げる主要な留保点です。

buttonで包み、専用クラスで最小幅・高さを48px、paddingを12pxに設定することで、視覚的なアイコンを小さく保ちながらインタラクティブなヒット領域が基準を満たします。核心的な設計上の示唆は、タッチターゲットの適切なサイズは特定の障害者のみの問題ではなく、デバイスの種類や状況に関わらずすべてのユーザーに影響する普遍的な設計基準だということです。

Ramp(企業支出管理会社)のプロダクトデザイナーGeorgeは、プロジェクトライフサイクルの約70%においてMagic Patternsを主要AIプロトタイピングツールとして使う方法を実演しています。v0やReplitよりMagic Patternsを好む理由は、フロントエンドのReact出力に特化しておりエラーが大幅に少ないためです。Figmaを先に開く代わりに、長いプロンプトを音声入力してブラウザベースのインタラクティブプロトタイプを作成し、Chrome拡張機能でFigmaコンポーネントをキャプチャして、ShadCNでRampのアトミックデザインシステムに近似したMagic Patternsコンポーネントに変換します。具体的な例として、リアルタイム決済(上限1,000万ドル)を超えると自動でワイヤー送金に切り替えるスマート送金フォームを約1時間で実装するプロセスを示しています。また、LogRocketのセッションリプレイとNotion AIを使った顧客の声分析ツールで課題を自律的に発見し、ブラウザ内のRamp Inspectで保留残高表示の修正をプロトタイプ化してCursorなしでGitHub PRを生成する流れも実演しています。現時点の課題として、Magic Patternsにはキャンバス内コメント機能がなく、フィードバックループがSlack経由になる点が挙げられています。
著者のAlbertmauriは、2025年5月にローンチし同年7月末にベータを終了したFigma Makeが、2010年のSketch登場に匹敵する世代的な転換点だと主張します。技術的に最初だからではなく、デザイナーがすでにFigma内で作業しているため導入障壁がほぼゼロになっているからです。4,000回以上の個人反復を経て、著者は二つの具体的なワークフローを紹介しています。一つはChatGPTでPRDをFigma Makeプロンプトに変換するアイデア出しパイプライン、もう一つは既存のFigmaフレーム(最大3枚)をMakeに貼り付けてピクセル精度のレイアウトを自動コーディングするハンドオフループです。技術スタックはデフォルトでReact、Tailwind CSS v4、ShadCNを使用し、インポートしたライブラリに合わせてShadCNトークンを自動調整します。AndroidとiOSにインストール可能なPWA出力もサポートされています。ただし、開発者がこの変化を完全に受け入れるかどうかはまだ不透明であり、それが著者の挙げる主要な留保点です。

Ramp(企業支出管理会社)のプロダクトデザイナーGeorgeは、プロジェクトライフサイクルの約70%においてMagic Patternsを主要AIプロトタイピングツールとして使う方法を実演しています。v0やReplitよりMagic Patternsを好む理由は、フロントエンドのReact出力に特化しておりエラーが大幅に少ないためです。Figmaを先に開く代わりに、長いプロンプトを音声入力してブラウザベースのインタラクティブプロトタイプを作成し、Chrome拡張機能でFigmaコンポーネントをキャプチャして、ShadCNでRampのアトミックデザインシステムに近似したMagic Patternsコンポーネントに変換します。具体的な例として、リアルタイム決済(上限1,000万ドル)を超えると自動でワイヤー送金に切り替えるスマート送金フォームを約1時間で実装するプロセスを示しています。また、LogRocketのセッションリプレイとNotion AIを使った顧客の声分析ツールで課題を自律的に発見し、ブラウザ内のRamp Inspectで保留残高表示の修正をプロトタイプ化してCursorなしでGitHub PRを生成する流れも実演しています。現時点の課題として、Magic Patternsにはキャンバス内コメント機能がなく、フィードバックループがSlack経由になる点が挙げられています。
Vitaly FriedmanがSmashing Magazineに寄稿したこの記事は、聴覚障害に関する一般的なデザイン上の誤解を体系的に解消しています。まずデシベル(dB)のスペクトラムを基準として示します。軽度の難聴は16dBから始まり(3フィート以上の距離で最大10%の発話を聞き取れない)、50dBの中等度難聴では発話の最大80%を聞き逃す可能性があり、91dB以上で重度の難聴となります。重要な事実として、米国のろう者のうち手話を使えるのは約1%のみで、世界には約300種類の独立した手話が存在し、読唇術でわかるのは発話の30%にとどまります。ろう者の中には話し言葉ベースの文字言語のリテラシーが低い場合もあり、テキスト中心のアプローチも万能ではありません。この記事ではDeaf(大文字D、生まれつきのろう者で手話が第一言語の文化的ろう者)とdeaf(小文字d、後天性難聴)、難聴(HoH)を区別し、ラベルを一方的に使わず本人に確認するよう促しています。実践的なUXガイドラインとして、すべての音声アラートへのテキスト代替提供、モバイルの触覚フィードバック、話者識別付きの字幕、電話のみの問い合わせ窓口の廃止などが挙げられています。著者の核心的な原則は、排除を経験した当事者とともにデザインすることです。
READ_FULL_LOGarrow_forwardIlknur ErenがSitePointに寄稿したこの入門記事は、タッチターゲットサイズに関するWCAG基準を示し、基準を満たさない場合に最も影響を受けるユーザー層を解説しています。WCAG Level AAはタッチターゲットを最低24×24 CSSピクセル以上、または隣接ターゲット間に24ピクセル以上の間隔を要求します。Level AAAではこの基準が44×44 CSSピクセルに引き上げられ、より快適なインタラクションを実現します。最も影響を受けるユーザーとして、パーキンソン病・脳性麻痺・関節炎などの運動障害を持つ人、ボタンの境界を識別しにくい低視力のユーザー、手袋着用時や振動の激しいバス移動など状況的な障害下にあるユーザーが挙げられています。記事では具体的なHTML/CSS実装パターンも示されています。SVGアイコンのような小さな要素をbuttonで包み、専用クラスで最小幅・高さを48px、paddingを12pxに設定することで、視覚的なアイコンを小さく保ちながらインタラクティブなヒット領域が基準を満たします。核心的な設計上の示唆は、タッチターゲットの適切なサイズは特定の障害者のみの問題ではなく、デバイスの種類や状況に関わらずすべてのユーザーに影響する普遍的な設計基準だということです。
SAPの最高デザイン責任者(CDO)であるArin Bhowmickは、エンタープライズデザインチームとの協業とカンファレンスでの観察をもとに、2026年のUXにおける10の具体的な変化を提示しています。説明可能なAI市場は2032年までに332億ドルに達すると予測されており、ビジネスリーダーの88%がエージェント型AIの予算増加を計画していることから、デザイナーはエージェント間のハンドオフを管理し人間の介入タイミングを定義するオーケストレーションインターフェースの構築が求められています。Gemini 3 ProはすでにリアルタイムでインタラクティブUIを生成でき、人間の専門家によるデザインと44%の一致率を示しており、デザイナーの役割は固定画面の設計から制約条件と安全ガイドラインの作成へと移行しています。米国の音声アシスタント利用者数は2026年末までに1億5,710万人に達すると予測されています。構造的な変化として、FIDO2・パスキーベースのパスワードレス認証がすでにサイバーセキュリティリーダーの約3分の1が導入を開始したデフォルト選択肢となっており、マイクロインタラクションも装飾的な要素からインターフェースの主要なコミュニケーションチャネルへと昇格しています。パーソナライゼーションにおける核心的な緊張感として、Netflixスタイルのトラッキングはユーザーが同意したサービスなので受け入れられるが、同じ技術を使ったクロスサイト広告追跡は侵害と感じられるという点を指摘し、2026年の課題は暗黙的な監視なしにパーソナライゼーションの価値を提供することだと強調しています。
READ_FULL_LOGarrow_forward2026年のデザイン界隈は一つの問いに支配されています。AIはこの仕事をどう変えるのか。今週の代表的な記事は、Figma MakeがSketch以来最大のUX/UIツールの転換点だと論じます。ローンチ以降4,000回を超える試行の末に書かれたこの記事は、誇大広告というより、プロトタイプ起点のAI支援デザインがデザイナーの職務をどう変えるかについての現場レポートです。Rampのデザインプロセス公開動画も同じ空気を共有しています。ワイヤーフレームではなくプロトタイプが出発点になりました。
アクセシビリティの軸も充実しています。Vitaly Friedmanのガイドは補聴器という固定観念を解体し、聴覚のスペクトラム全体に向けた具体的なパターンを提示します。SitePointのタッチターゲット入門は、インターフェースの使いやすさを静かに左右する最小サイズと間隔を扱います。説明可能なAIを中心に据えたArin Bhowmickの「2026年に無視できないUXの変化10選」が、AIの波と日々のデザイン実務をつなぎます。