#UI/UXデザイン

顧客の声（テスティモニアル）を並べたヒーローセクションは、多くのサイトで見かける定番の構成だ。しかし静的に並べるだけでは印象に残りにくい。CodropsのJonas Arlethが、GSAPのタイムラインとCMSデータを組み合わせ、動きと手作りの質感を両立させたテスティモニアル・ヒーローの構築手法を解説している。WebflowのDesignerを土台に、カウンター、コラージュのグリッド、アニメーションの3つを段階的に作り込む内容だ。 まず目を引くのが、スロットマシン風の数字カ

多くのWebサイトが備えるダークモードの切り替えUIは、「ライト」「ダーク」「システム」という3つの選択肢を並べるのが定番になっている。しかしCSSの専門家Lea Verouは、この3択は過剰であり、2状態で十分だと主張する。CSSTricksのGeoff Grahamがその議論を紹介している。要点はシンプルだ。同じ目的を、より少ないUIで達成できるなら、そのほうが良い。 Verouの提案の核心は、常にすべての選択肢を見せる必要はない、という点にある。ユーザーの環境設定（OS

「みんなが使っているから」という理由でAIツールを導入する。そんな空気に流されがちな現場に向けて、Nielsen Norman GroupのCaleb Sponheimが「PROVE」という軽量な評価フレームワークを提案している。ひとつのツールを、ひとつのタスクに対して検証し、後から自分で説明できる暫定的な判断を下す、という考え方だ。導入圧力そのものは、そのツールが役立つ証拠にはならない、というのが論の出発点である。 PROVEは五つの観点の頭文字からなる。まず「Proble

かつてはJavaScriptライブラリに頼るのが当たり前だったモーダルUIが、いまやHTML標準の要素だけで実装できるようになった。CSSTricksのGeoff Grahamが、この一見小さな要素に潜む数々の細やかな挙動を整理している。デザイナーとフロントエンド実装者の双方にとって、押さえておきたい実践知が詰まった内容である。 要素はデフォルトで閉じており、open属性を付けるかJavaScriptのメソッドを呼ぶことで表示される。開き方には二種類あり、show()は背景の

Nielsen Norman Group（NN/g）のエヴァン・サンウォールが、メンターシップを「若手だけのもの」とする思い込みを退け、キャリアを通じて効く成長の仕組みとして捉え直している。研究によれば、メンティー（教えを受ける側）は昇進が増え、キャリア満足度や報酬が高まり、燃え尽きが減る。メンター制度を持つ組織では、周縁化されがちな層の昇進・定着率が最大24％向上したというデータも紹介される。 メンターシップには二つの機能があるとされる。ひとつはコーチングや保護、機会の提供

CSSTricksに、テマニ・アフィフによる新しいCSSプロパティ「bordershape」の解説記事が掲載された。要素を自由な形に象りながら、ボーダーやドロップシャドウ、アウトラインといった装飾をその輪郭に沿わせられる——従来のclippathにはできなかった振る舞いを実現するプロパティである。 肝心なのはclippathとの違いだ。clippathは装飾ごと切り抜いてしまうため、せっかくのボーダーや影が消えてしまう。一方のbordershapeは要素を「切り抜く」のではな

「UX」という呼び名はもう古いのではないか——そんな議論が絶えないなか、Nielsen Norman Group（NN/g）のレイチェル・バナワが、この問いに調査で答えを出している。結論は明快だ。UXに取って代わる新しい呼称は、いまのところ現れていない。 調査は2026年4月、世界の技術・デザイン職604人を対象に行われた。工夫されているのは質問の仕方だ。「UX」という言葉を出さずに仕事の定義だけを提示し、その領域を自由に名づけてもらう間接的な手法をとった。先入観を排し、人々

デザインエンジニアのカール・コッホが、インターフェースの「瞬間移動」を扱った実践的な論考を公開した。リストから項目を削除すると下の要素が一気に上へ詰まり、行を挿入すれば既存のコンテンツが飛び退く。パネルを開けば隣接する要素が即座に再配置される。DOM上は正しくても、状態の変化と動いた対象とのつながりが一瞬で断たれ、読み手は文脈を見失う。この断絶に目に見える経路を与えるのが「レイアウトの振り付け（layout choreography）」だという。 問題の本質は、技術的な誤りで

しばしば曖昧に語られる「プロダクトセンス」を、Nielsen Norman Group（NN/g）のタナー・コーラーが明快に定義し直している。共感力やクリエイティビティといった抽象的な言葉で片づけるのではなく、測定可能な意思決定の技術として捉えるのが特徴だ。 筆者による定義はこうだ。「プロダクトセンスとは、いま直面している課題が過去の成功や失敗と一致することを見抜き、似た解決策が望む成果にどう影響するかを確実に見積もる能力である」。センスの正体は、生まれ持った才能ではなく、経

Nielsen Norman Group（NN/g）のトニー・アリセアが、AIがインターフェースを生成する時代のUXの役割を「UX文脈デザイン（UXContext Design）」という言葉で捉え直している。人間に読ませるための成果物をつくる仕事から、AIの生成を導く文脈を整える仕事へ——デザイナーの立ち位置そのものが移り変わりつつあるという指摘だ。 筆者はこれを「組織が何を知り、何を望んでいるかを発見し、AIツールが生成するすべてを導く文脈へとキュレーションする実践」と定義

Web Designer Depotに掲載されたルイーズ・ノースの論考が、Facebookのデザインをめぐる不都合な事実を突きつけている。かつて最も明快だったソーシャル体験は、時間をかけて良くなったのではなく、むしろ劣化した——それも、エンゲージメント指標への最適化を積み重ねた結果として、というのが筆者の見立てだ。「Facebookは一夜にして悪くなったのではない。最適化の果てに、自ら混乱へと陥ったのだ」。 象徴的なのが「予測可能性の喪失」である。時系列フィードからアルゴリズ

Smashing Magazineに寄稿されたヴィタリー・フリードマンの論考が、多くの企業が抱く前提に冷や水を浴びせている。「誰もが新しいAI機能を渇望している」という思い込みは正しいのか。現実には、大半の人はそこまでAIを求めていない——少なくとも、AI推進派が思い描く形では、というのが筆者の主張である。 根拠として引かれるのは、いくつかの調査だ。IBMの2026年の調査では、AIの導入率と定着率がともに低い水準にとどまる。生産性に関する研究では、メールに費やす時間が104

Nielsen Norman Group（NN/g）が、特定のサイトに組み込まれるAIチャットボットが備えるべき五つの品質を整理した。汎用チャットではなく、企業サイトやサービス内で顧客に応対するボットを対象に、ユーザーの信頼を得る設計要件を具体的に示している点が実務的だ。 第一の要件は「引き継ぎへの前向きさ」である。ユーザーはAIを人間のサポートと同等とは見なさない。だからこそ、有人対応を求められた際に取り次ぎを渋ってはならないと筆者は釘を刺す。「ユーザーが明示的に人間との接

デザイン系チュートリアルサイトのCodropsに、印象的なWebGL作品「The Sleepers」の制作手法を解説した記事が掲載された。作者はティボー・フサール。Bruno SimonによるThree.jsチャレンジへの応募作で、「最も複雑な技術ではなく、最もシンプルな解法で最大の視覚的インパクトを狙う」という思想が全体を貫いている。 まず紹介されるのは、画面全体を彩る「渦を巻くようなトランジション」だ。白黒のテクスチャをポストプロセスシェーダーの入力値として使い、グレース

Nielsen Norman Group（NN/g）のフエイシン・ワンが、デザインシステムの成熟度を評価するための新しい枠組みを提示した。従来のように「初期段階から成熟段階へ一直線に進む」という見方を退け、複数の軸から多面的に捉え直す点に特徴がある。実際のデザインシステム運用は、もっと入り組んでいるというのがその主張だ。 筆者が挙げるのは六つの評価軸である。ひとつめは「組織的な整合性」。経営層の後押しや予算の安定、戦略上の位置づけ、部門横断的な合意が、組織変更を越えてシステム

Smashing Magazineに寄稿されたブランドデザイナー、アナスタシア・シチェバの論考が、優れたブランドアイデンティティが生まれる場所は「Figmaの中ではない」と説く。強い視覚コンセプトは、デザインツールを開く前の準備段階、すなわち戦略を言語化する「コンセプト前」の作業にこそ宿るという主張である。 筆者はまず、ブランディングの失敗の多くが戦略フェーズで起きると指摘する。「モダン」「信頼できる」といった言葉が定義されないまま共有された結果、依頼主が思い描く印象とデザイ

Goodpatchが運営するデザイナー特化型のキャリア支援サービスReDesignerが、AI時代のデザイナーのキャリアと機会に向き合う新プロジェクト「The Designers' Turn 2026」を始動した。生成AIの急速な進化がデザイン業界の前提を塗り替えるなか、変化を不安ではなく転機として捉え直すことを狙いに据えた取り組みである。 背景にあるのは、制作現場の急激な変容だ。Figma MakeやClaude Designといったツールの登場により、自然言語による指示だ

矢印は、2本の斜めの線が角度をなして「動き」や「方向」を生み出す、きわめて単純な記号である。しかしPangram Pangramの記事は、その単純さこそが書体に組み込む際の難しさだと説く。 最大の難関は、方向ごとに一貫した印象を保つことにある。あるデザイナーは「異なる方向でストロークの太さを揃えることが最も難しい」と語る。とりわけ90度で線が交わる部分は、コントラストの低い書体では巧妙な調整を要する。単純に回転させただけでは、太さや重心の印象が方向によってばらついてしまうのだ

生成AIの機能を、なぜか何でもチャット画面に詰め込んでしまう——Smashing Magazineの記事は、こうした「会話への視野狭窄（conversational tunnel vision）」に警鐘を鳴らす。大規模言語モデルが対話データで学習されているからといって、あらゆる機能をチャットにする必然性はない。 チャットUIには固有の負担がある。入力面では、ユーザーは曖昧な考えを正確な言葉に翻訳しなければならない。作りたい画像をうまく言語化できないデザイナーを思い浮かべればよ

旅行予約アプリ「Hopper」が、米連邦取引委員会（FTC）に3,500万ドルを支払うことで和解した。ユーザーを不本意な課金へと誘導する「ダークパターン」を用いていたとされる問題での決着である。2026年7月2日に発表された。 FTCが問題視したのは、インターフェースの設計そのものだ。「チップ」やVIPサポートといった有料オプションがあらかじめ選択された状態になっており、画面をスクロールしないと気づけないようになっていた。ユーザーは、同意した覚えのないサービスに課金されていた

アクセシビリティは、完成時に一度確認すれば済む「機能」ではなく、継続的に維持すべき「運用能力」である——Smashing Magazineに寄稿された記事は、こうした視点の転換を促している。 筆者のProsmitskiy氏は「コンプライアンスは到達する状態ではなく、維持する状態であり、複雑さは常にそれに抗う」と指摘する。プロジェクト終了時の監査だけでアクセシビリティを担保しようとする方法は、変化し続けるプロダクトには通用しないという主張だ。 この課題は、AIによるコード生成の

デザインシステムの整備は、長らくプロダクトロードマップの優先度争いで静かに敗北し続けてきた。コンポーネントの負債は蓄積され、トークンの不整合は放置され、それでもプロダクトは出荷されていた。問題を肌で感じていたのは、デザインシステムを維持する少数のメンバーだけであった。 Config 2026でFigmaが発表した一連の新機能が、その構図を根本から変えようとしている。とりわけ注目すべきは「Check designs」機能である。これはファイル全体をデザインシステムと照合し、ハー

デザインの世界では新たなトレンドが次々と登場するが、見た目の美しさやモダンさがそのままユーザー体験の向上につながるとは限らない。UX Collectiveの記事は、人気のあるデザイントレンドの中に、実はコンバージョン率を著しく低下させるものが存在することを指摘している。 特に問題視されているのが、極端なミニマリズムの適用である。余白を大胆に取り、テキスト量を最小限に抑えたレイアウトは視覚的にはエレガントだが、ユーザーが意思決定に必要な情報を得られなくなるケースが多い。結果とし

Creative Boomが882名のクリエイティブ専門家を対象に実施した大規模調査「The State of the Creative Industry 2026」の結果が公開された。報酬、燃え尽き症候群、AIの活用状況など、業界全体が抱える構造的な課題が浮き彫りとなっている。 調査によると、過去1年間で燃え尽き症候群を経験したクリエイターは69%に達した。特にキャリア中期の専門家では77%、キャリア初期でも74%と高い割合を示している。一方、創業者やスタジオリーダーは59