最近、Figmaの新しいAI機能を実務で使う機会が増えてきました。たとえば「この画面に合うカードUIを作って」とプロンプトに入力すると、あっという間にレイアウトが自動的に組み上がっていきます。そのスピードと便利さに「すごい！」とワクワクする一方で、ふと手が止まる瞬間があります。。。

「もしこのAIが私の意図を読み違えて、今まで整理していたコンポーネントの構造やレイヤーを勝手に壊してしまったらどうしよう？」

画面の向こう側のシステムが自分で考えて動く。この「便利だけど少し怖い、まだ完全に任せきれない」という実感は、きっと私だけではないはずです。

今回は、ただの受動的なツールから「自律する相棒」へとシステムが変わる中で、2026年の最重要デザイントレンドとして注目を集める「Agentic UX（自律型UX）」の設計思想について考えてみます。

1. UIからAgentic UXへ。自律型AIがもたらす新しいUX/UIデザインの進化

これまでのデジタルプロダクトにおけるUIは、基本的に「人が操作して結果を待つ」受動的なものでした。
ユーザーがボタンをクリックし、システムが画面を返す。その繰り返しです。システムはあくまで便利な「道具」であり、使い方を決めて主導権を握っているのは常に人間でした。

しかし、Agentic UXでは、システムが自ら状況を判断し、計画を立てて、複数のステップを自律的に実行する「共同作業者」へと進化します。
これは単に「プロンプトに対してテキストを返す」だけのチャットボットとは異なります。
システムがユーザーの目的に合わせて、バックグラウンドで複数のアプリケーションやデータを横断しながら、自律的に作業をこなしてくれる状態です。

この移行にともない、デザインの考え方も従来のUXから「AX（Agentic Experience：エージェント体験）」へと拡張されつつあります。
人がツールをどう使うかではなく、「人の代わりに動くシステムと、どうやって安全な関係を築くか」が問われているのです。

AIエージェントは非常に強力ですが、もしユーザーの意図を誤解したまま重要なデータを削除してしまえば、システムに対する信頼は一瞬で崩れてしまいます。
だからこそ、効率化と安全性のバランスをとるインターフェース設計が必要になります。

会話型UI（CUI）の限界と、適切な情報開示の設計

「AIに何かを頼むなら、チャットUIがあれば十分ではないか」と思うかもしれません。
たしかに、簡単な検索や質問であればチャット形式で事足ります。しかし、複雑なデザインデータの編集や、いくつもの手順を踏む業務をテキストだけでやり取りするのは、かえってストレスになります。

たとえば「売上データをグラフにして」と頼んだのに、テキストで数字の羅列が返ってきたら使い物になりませんよね。
ここで重要になるのが、内部の複雑な処理プロセスと、ユーザーに見せるべき出力結果を明確に分ける（パススルー）という考え方です。

AIエージェントの内部では、非常に高度な推論やいくつもの処理が同時に行われています。
しかし、ユーザーはそのすべての処理過程を見たいわけではありません。

ユーザーが求めているのは、最終的な結果や、途中で確認が必要な重要なポイントだけです。
システムが裏側で何をしているかをすべて画面に表示すると情報量が多すぎて混乱を招きますし、かといって何も表示しないと「本当に正しく動いているのか？」と不安になります。

内部の複雑な動きは適切に隠しつつ、要所要所で「この内容で進めていいですか？」と必要なタイミングでだけ情報を渡すUI設計が、これからのAgentic UXには求められています。

信頼を少しずつ育てる。Agentic Interface Ladder（自律性の4段階）

いきなり「今日からこのAIにすべてを任せてください」と言われても、すぐに100%信頼できる人はいません。信頼関係は、人間の仕事のパートナーと同じように、小さな実績の積み重ねで少しずつ築かれます。

このプロセスを分かりやすく整理したのが、「Agentic Interface Ladder（自律性の4段階）」という考え方です。

1. 提案（Suggest）：AIが解決策を提示するが、最終的な決定と実行は人間が行う。この段階では「なぜその提案をしたのか」という根拠の透明性が重要です。
2. 検証・承認（Verify）：AIが行動計画や下書きを作成し、実行前に人間に確認を求める。結果のプレビューを見せ、人間が手直しできる余地を残します。
3. 委任（Delegate）：日常的で後戻り可能なタスクをAIが自動実行し、事後報告だけを行う。ここでは強固な取り消し機能が必要になります。
4. 自動化（Automate）：ワークフロー全体をAIが処理し、リスクが高い例外的な場合のみ人間に助けを求める。

最初は「提案」から始まり、少しずつAIが実力を証明していくことで、ユーザーは「この作業は任せても大丈夫だな」と判断し、次の段階へと進みます。
特に、システムが自分の権限を超えたり、判断に迷ったりした時に、勝手に進めず「人間の判断を仰ぐ（エスカレーションする）」仕組みをあらかじめ設計しておくことが、失敗できないタスクでは非常に大切です。

安心感を生み出す3つの実践的デザインパターン

では、こうした信頼を画面上でどう表現すればいいのでしょうか。実務で取り入れやすい3つの具体的なデザインパターンを紹介します。

Intent Preview（意図の事前確認）

AIが不可逆な（元に戻せない）行動を起こす前に、「これからこういう作業をします」と分かりやすい表現で宣言させる仕組みです。APIや専門用語の羅列ではなく、人間の言葉で「このプロジェクトのデータをアーカイブします」と伝えることで、ユーザーは予想外のトラブルを防ぐことができます。画面上で「変更前」と「変更後」のプレビューを視覚的に比較できると、さらに安心感が高まります。

Autonomy Dial（自律性のダイヤル）

ユーザー自身が、AIにどこまで自由に動いてもらうかをコントロールできる機能です。すべてを自動で進めるモードと、ステップごとに確認するモードをユーザーが選べるようにすることで、「AIに主導権を奪われた」という感覚を減らすことができます。たとえば設定画面で、タスクの重要度に合わせて「常に確認する」「事後報告のみ」といった権限レベルをユーザーがいつでも切り替えられるようにします。

Action Audit & Undo（監査と取り消し）

「いつでも元に戻せる」という機能は、最大の安心材料です。AIが自律的に実行した作業履歴を後からタイムラインで一覧確認でき、ワンクリックで取り消し（Undo）ができる強固な安全網を用意することで、ユーザーは心理的な余裕を持ってシステムを使うことができます。

また、こうした新しいデザインパターンを取り入れる際も、基本がおろそかになってはいけません。
「UI/UXデザインのこれからのスタンダードとは？」といった過去記事でも紹介しているように、「なぜそのデザインが使いやすいのか」という根本的なアクセシビリティや認知特性への配慮を土台にすることで、ユーザーは戸惑うことなくAIの恩恵を受け取ることができます。

undefined

まとめ：これからのデザイナーに求められる「信頼設計」という役割

AIエージェントが普及し、画面のレイアウトやコンポーネントの調整といった作業の多くが自動化されていく未来は、もうそこまで来ています。
しかし、だからといってデザイナーの仕事が不要になるわけではありません。

むしろ、「どこまでAIに任せて、どこから人間が判断するか」という境界線を引く作業は、データ処理だけでは解決できない人間固有の役割です。
ユーザーがシステムに対してどのような不安を抱き、どうすれば安心して共同作業ができるのか。そこには深い共感力と、倫理的な判断が求められます。

明日からの実務でも、ただ画面を綺麗に整えるだけでなく、「ユーザーがこのシステムをどうやって信頼するか」という新しい視点を意識してみてください。2026年以降のデザイントレンドにおいて、それこそが代わりのきかないデザイナーの強みになるはずです。

終わりに

最後までお読みいただき、ありがとうございます！

テクノロジーがどれほど進化し、AIがシステムを自律的に動かせるようになっても、デザインの根底にあるのは「使う人への思いやりと信頼関係」です。
明日以降、デジタルツールに触れたとき、その裏側にある配慮や「パススルー」の工夫に、少しだけ目を向けてみてもらえると嬉しいです。

The post 【2026年最新】Agentic UX（エージェンティックUX）とは？自律型AI時代のUI設計パターンと信頼の境界線 first appeared on デザペディア.

画面上のボタンやカードを眺めていて、どこか平坦すぎて押した時の手応えが物足りなく感じる場面は少なくありません。
近年、洗練されたフラットデザインが標準となった一方で、ユーザーが直感的に「触ってみたい」と感じる触感的なアフォーダンス（操作の手がかり）を取り戻す試みが広がっています。

その代表例として注目を集めたのが、まるで粘土（Clay）をこねて作ったかのような、柔らかくぷっくりとした立体感を持つ「クレイモーフィズム（Claymorphism）」です。
一過性の流行として語られることもありますが、適切に活用すれば、アクセシビリティを維持したまま画面に親しみやすさと視覚的な魅力を与える有力なアプローチになります。

1. クレイモーフィズム（Claymorphism）とは？ニューモフィズムの弱点を克服した進化形

クレイモーフィズムは、デザインエージェンシーHYPE4の創業者であるMichał Malewicz（ミハウ・マレヴィッチ）氏によって、2021年末から2022年にかけて提唱・命名されました。
粘土（Clay）やおもちゃのプラスチックのように、空気を含んで膨らんだような「Inflated 3D」の質感を、3Dモデリングツールを使わずにCSSやFigmaのシャドウ効果だけで再現できる点が大きな反響を呼びました。

このスタイルが登場した背景には、UIデザインにおける質感の歴史的な変遷があります。
物理世界のリアルなテクスチャを忠実に模倣したスキューモーフィズムから、余分な装飾を省いたフラットデザインへと移行した結果、画面の均質化が進みました。

その後、2020年頃に「ニューモフィズム（Neumorphism）」が大きな話題を集めました。
背景から要素が滑らかに押し出されたような美しいエンボス表現でしたが、実務現場ではほとんど定着しませんでした。

ニューモフィズムが定着しなかった決定的な理由は、「要素の色と背景色が完全に同一でなければ成立しない」という構造的制約にありました。
要素の輪郭を淡い光と影だけで表現するため、コントラスト比が極めて低く、視覚特性に関わらずボタンの境界すら判別しづらいというアクセシビリティ上の重大な欠陥を抱えていたのです。

一方のクレイモーフィズムは、この弱点を解消しました。
要素自体が背景から完全に独立した塗りの色を持ち、背景の上にふわりと浮遊している構造をとるため、背景がどんな色であっても要素の境界をはっきりと識別できます。

質感表現の進化の系譜

2. クレイモーフィズムを構成する「3つの視覚要素」

クレイモーフィズム特有の柔らかく愛らしい立体感は、特別な3Dグラフィックによるものではありません。
平面のベクターシェイプに対し、3つの視覚的なパラメータを精密に重ね合わせることで生み出されています。

要素1：親しみやすさを生む「大きめの角丸（Border Radius）」

1つ目の要素は、コンポーネントの外形を定義する大きめの角丸です。
一般的なUIコンポーネントでは角丸が8px〜12px程度に設定されることが多いですが、クレイモーフィズムでは24px〜40px、あるいは完全なカプセル型（ピル型）を採用します。

尖った角をなくし、有機的なカーブを持たせることで、粘土を手で丸めたような柔らかい手触りを想起させます。
この丸みが、後述する内側シャドウのグラデーションと滑らかに馴染む土台となります。

要素2：内側から膨らませる「2つのインナーシャドウ」

クレイモーフィズムの立体感の核心を担うのが、2つの異なる内側シャドウ（インナーシャドウ）の重ねがけです。
1つのシェイプに対し、「光源側の光（ハイライト）」と「影側の深み（シェード）」を同時に描画します。

左上から光が当たっている想定の場合、左上側のインナーシャドウには半透明のホワイトを配置し、風船の表面が光を受けて白く光っているようなハイライトを作ります。
同時に、右下側のインナーシャドウにはベースカラーの明度を落とした濃い色を配置し、内側へ落ち込む柔らかな陰影を落とします。

この「光と影の内側への挟み込み」によって、平面の板だった長方形が、空気を含んで外側へぷっくりと膨らんだような錯覚を人間の視覚に与えることができます。

要素3：背景から浮かせる「柔らかな外側ドロップシャドウ」

最後の要素が、要素全体を背景から持ち上げる外側のドロップシャドウです。
ここで硬く濃い影を落としてしまうと、レトロなネオブルータリズムのような無骨な印象になってしまいます。

クレイモーフィズムでは、Y軸のオフセットを適度に離し（12px〜16px程度）、ブラー（ぼかし）を広め（24px〜32px程度）に取った淡い影を使用します。
要素が机の上や画面の奥からふわりと数ミリ浮き上がっているような距離感を演出し、背景との境界をクリーンに分離します。

3. Figmaで作るクレイモーフィズムの手順｜立体シャドウの設定例

ここからは、実際にFigma上でクレイモーフィズムのボタンやカードを作成する具体的な手順を解説します。
Blenderなどの3Dソフトウェアを開く必要はなく、Figmaの「Effects」パネルだけで完結します。

STEP 1：ベースシェイプとベースカラーの選定

まずは長方形（Rectangle）またはフレームを配置し、角丸（Corner radius）を広めに設定します。
たとえば、幅240px・高さ80pxのボタンであれば、角丸を28px〜32px程度に設定するとバランスが取れます。

ベースカラー（Fill）には、完全な無彩色（白や黒）よりも、適度に彩度を含んだパステルカラーや明るいトーン（ペールブルー、ソフトミント、やさしいパープル等）を選ぶのがおすすめです。
無彩色よりも色味のあるサーフェスの方が、インナーシャドウの色の重なりが美しく反映されやすくなります。

STEP 2：内側シャドウ1（左上の光ハイライト）

Figmaの「Effects」パネルから「+」を押し、「Inner Shadow」を選択します。
左上からの光源を表現するため、X軸とY軸にマイナスの数値を設定し、色を純白にします。

• Effect Type: Inner Shadow
• X: -6px
• Y: -6px
• Blur: 16px
• Color: #FFFFFF（不透明度 50%〜60%）

これにより、左上のエッジに沿ってふわりとした白い光のリムが形成されます。

STEP 3：内側シャドウ2（右下の暗い陰影）

続いて、もう1つ「Inner Shadow」を追加します。
今度は右下に影を落とし、要素のボリューム感を強調します。

ここで黒（#000000）を使ってしまうと、影の部分が濁って汚く見えてしまいます。
ベースカラーの色相（Hue）を維持したまま、明度（Lightness）を下げて彩度を少し高めた同系色の濃色を指定するのが、美しい立体感を保つ重要なコツです。

• Effect Type: Inner Shadow
• X: 6px
• Y: 6px
• Blur: 16px
• Color: ベースカラーの同系濃色（不透明度 20%〜30%）

この2つのインナーシャドウが合わさった瞬間、平面だった矩形が急激に立体的なふくらみを持ち始めます。

STEP 4：外側ドロップシャドウ（ふんわりとした浮遊感）

仕上げに「Drop Shadow」を追加し、要素を背景から浮かび上がらせます。

• Effect Type: Drop Shadow
• X: 0px
• Y: 16px
• Blur: 28px
• Color: #0F172A等のダークトーン（不透明度 10%〜12%）

必要に応じて、近くに落ちる小さなシャドウ（Y: 4px, Blur: 8px, 不透明度 5%）を重ねて2重ドロップシャドウにすると、より自然な設置感が得られます。
完成した一連のエフェクトは、Figmaの「Effect Styles」として登録しておくと、チーム内や他コンポーネントへスムーズに適用できます。

CSSでの実装コード（box-shadow多重指定）

Web実装においても、CSSの box-shadow プロパティにカンマ区切りで複数のシャドウを記述するだけで、全く同じ質感を軽量に再現できます。

.clay-button {
  background-color: #7C98FD;
  border-radius: 28px;
  border: none;
  /* 左上ハイライト, 右下シャドウ, 外側浮遊シャドウ */
  box-shadow: 
    inset -6px -6px 16px rgba(255, 255, 255, 0.55),
    inset 6px 6px 16px rgba(43, 62, 145, 0.25),
    0 16px 28px rgba(15, 23, 42, 0.12);
  color: #FFFFFF;
  font-weight: 700;
  padding: 16px 36px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.clay-button:active {
  transform: translateY(2px);
  box-shadow: 
    inset -3px -3px 8px rgba(255, 255, 255, 0.55),
    inset 3px 3px 8px rgba(43, 62, 145, 0.25),
    0 8px 14px rgba(15, 23, 42, 0.10);
}

押し込み時（:active）にシャドウのオフセット量を半分に減らし、要素をわずかに下へ移動させることで、リアルな「ぷにっ」とした沈み込み感を演出できます。

4. クレイモーフィズムはもう古い？実務で失敗しない使いどころと3つの注意点

検索サジェストにも現れる通り、「クレイモーフィズムは一過性の流行で、もう古いのではないか？」という疑問を持つデザイナーは少なくありません。
この疑問に対する結論は、「画面全体をおもちゃのように埋め尽くす使い方は下火になったが、触覚アクセントとしての質感技法は定番として定着した」という点にあります。

2022年の流行初期には、画面のヘッダー、入力フィールド、すべてのカードやアイコンをクレイ風にしてしまう過剰なデザイン事例が散見されました。
自分自身も現場で試作した際、画面中のあらゆるコンポーネントにインナーシャドウを適用してしまい、全体が重苦しく、ユーザーがどのボタンを押すべきか視線が散らばってしまった経験があります。

実務でクレイモーフィズムを洗練されたUIとして機能させるためには、以下の3つの運用ルールが不可欠です。

ルール1：1画面に1〜2箇所に絞る「アクセント適用原則」

UIの基本骨格は、クリーンで視覚負荷の少ないフラットデザインやモダンなカードUIで構成します。
その上で、「ユーザーに最も押してほしいメインCTAボタン」や「達成を祝うバッジカード」など、視線を集中させたい最優先要素にだけ限定してクレイモーフィズムを適用します。

画面全体がフラットだからこそ、部分的な立体感が際立ち、洗練された印象と強いクリック誘引力を両立できます。

ルール2：実務で高い成果を生む「4つのユースケース」

クレイモーフィズムの柔らかい質感は、特定の文脈においてユーザー体験を大きく高めます。

1. オンボーディングとウェルカム画面：新規登録直後の緊張感をほぐし、親しみやすく温かい第一印象を与えます。
2. ゲーミフィケーションと達成フィードバック：学習アプリやフィットネスアプリのように、レッスン完了時の連続記録バッジやコイン獲得表示に立体感を与えることで、達成感と所有感を刺激します。
3. 子ども向け・教育・ヘルスケアサービス：無機質なデジタル画面に不安を感じやすい層に対し、安心感と親近感を提供できます。
4. トグルスイッチやフローティングアクションボタン（FAB）：触った時の反応が期待されるスイッチ類に弾力を持たせることで、直感的な操作アフォーダンスを補強できます。

ルール3：WCAGコントラスト比と文字可読性の厳守

立体的なカードの上に文字を載せる場合、インナーシャドウのグラデーションが文字の背景にかかることで、コントラスト比が局所的に低下するリスクがあります。
WCAG（Web Content Accessibility Guidelines）のコントラスト基準（通常テキストで4.5:1以上）を常に下回らないよう、テキストの配置エリアを十分に確保してください。

また、カードが立体感を持っている分、その上に乗せるタイポグラフィは装飾を抑えたシンプルなジオメトリック・サンセリフを選び、文字色には引き締まったダークネイビーやチャコールグレーを用いることで、子供っぽさを抑えた大人のモダンUIへ仕上げることができます。

5. 混同しやすい「3D押し出し」との違いと、本物のクレイモーフィズムが動く実在Webサイト事例

クレイモーフィズムを実務で検討する際、多くのデザイナーやネット記事で混同されがちなのが、Duolingoなどに代表される「立体的なボタン表現」との違いです。

「3D押し出し（ソリッドボタン）」と「クレイモーフィズム」の決定的な違い

語学学習アプリのDuolingoなどで使われている有名な「押したくなるボタン」は、一見すると親しみやすい立体感を持っていますが、技術的・構造的にはクレイモーフィズムではありません。

• Duolingo等の3D押し出し（ソリッド立体）：
  平面の矩形の底面に濃い色（border-bottom または box-shadow: 0 4px 0 ...）を敷き、物理的な厚み（押し出し段差）を表現する手法です。表面自体はフラットなベタ塗りであり、内側シャドウは一切使われていません。
• クレイモーフィズム（Inflated 3D）：
  要素の内側（inset）に光（ハイライト）と影（シェード）を落とし、まるで風船や粘土のように「空気を含んでふっくらと膨らんだ曲面」を表現する手法です。

Duolingoのような大規模サービスがクレイモーフィズムではなく3D押し出しを採用している理由は、情報密度の高さと描画負荷の低さ、そしてどのような画面サイズでもボタンの境界がシャープに保たれる実用性を重視しているためです。

本物のクレイモーフィズムが動く実在Webサイト事例

純粋なクレイモーフィズム（2重インナーシャドウ＋ドロップシャドウ）が、Webサイト上でどのように実装・レンダリングされているかを体感できる実在のサイトを2つ紹介します。

1. Claylo（クレイロ ライブデモ）

海外のデザインスタジオSetproductが開発した、サイト全体がクレイモーフィズムで構築されたランディングページのライブデモです。

• 見どころ:
  ヘッダーのピル型ナビゲーション、中央のCTAボタン、右側のダッシュボードカード、グラフバーに至るまで、すべての構成要素が純粋なHTML/CSSの多重シャドウ（box-shadow: inset ...）で組まれています。
• 実務での学び:
  ブラウザのデベロッパーツール（検証ツール）を開くことで、各パーツに指定されたインナーシャドウのぼかし量（Blur）や透明度、ホバー時の挙動をリアルタイムに確認できます。

2. clay.css 公式デモサイト

『Smashing Magazine』でクレイモーフィズムのCSS実装手法を体系化したAdrian Bece氏による、専用CSSライブラリの公式デモページです。

• 見どころ:
  赤いベースカードの上に白いテキストカードとぷっくり膨らんだボタンが重なり合う、ミニマルなクレイ表現の原点を体験できます。
• 実務での学び:
  CSS変数（Custom Properties）を用いてインナーシャドウの深さや色相を柔軟にコントロールする設計になっており、自社プロダクトのCSS設計にクレイ質感を取り入れる際の直接的な参考になります。

6. 次のステップ：あわせて深掘りしたい質感・立体感トレンド

UIデザインにおける質感表現は、クレイモーフィズムの登場以降も多様な広がりを見せています。
目指すプロダクトの世界観やターゲット層に合わせて、近接するトレンド表現もあわせてチェックしておくと、デザインの引き出しがさらに広がります。

物理的な弾力とアニメーション連動をさらに追求した手法として、近年注目を集めているのが「Squishy UI（ぷにぷにUI）」です。
ボタンの押し心地やハプティクス（振動）の連動に関心がある方は、ぜひこちらの詳細解説も参考にしてみてください。

Squishy UIとは？触って気持ちいいぷにぷにUIの特徴と作り方

画面上の要素にあえて物理的な質量と弾力を持たせるデザイン手法「Squishy UI」。心地よさを生む仕組みと実務への取り入れ方を解説します。

また、未来的なサイバー感や透明感、光のグラデーションを取り入れた「Y3Kデザイン」や、逆方向にソリッドな太枠と硬い影で個性を主張する「ネオブルータリズム」など、質感の振り幅を持っておくことで、クライアント提案の幅が広がります。

Y3Kデザインとは？Y2Kとの違い・質感の特徴とUIへの取り入れ方

未来的なサイバー感や透明感、有機的な質感を特徴とするY3Kデザイン。Y2Kとの違いやUIへの落とし込み方を解説します。

ネオブルータリズムとは？UIでダサく見せない配色・影の設計ルール5選

黒い太枠と硬いオフセットシャドウが特徴のネオブルータリズム。昭和の枠線のように野暮ったく見せないための配色・余白設計ルールを解説します。

終わりに

クレイモーフィズムは、単なる一時的な見た目の流行にとどまらず、「フラットすぎる画面にいかにして心地よい触感を宿らせるか」というUIデザイナーの探求から生まれた必然的なアプローチです。
3Dソフトを立ち上げなくても、Figmaのインナーシャドウとドロップシャドウを丁寧に重ねるだけで、直感的に触りたくなるコンポーネントを形にできます。

普段のフラットな画面設計に、ほんの少しの温かみと触覚フィードバックを添える手段として、日々のUI制作の中で活用してみてください。

参考リンク

• HYPE4 Academy：Michał Malewicz氏によるクレイモーフィズムの提唱・解説ポータル
• Smashing Magazine：Webデザインにおける質感・モーフィズム動向レポート
• Claylo Demo：純粋なCSSクレイモーフィズムで構築されたWebサイトのライブデモ
• clay.css (GitHub)：Adrian Bece氏によるクレイモーフィズムCSSマイクロユーティリティ

The post クレイモーフィズムとは？Figmaの立体シャドウ設定と実務での使いどころ first appeared on デザペディア.

整然としたミニマルデザインが定着した一方で、「どのWebサイトも同じように見えてしまう」という課題を感じる場面が増えています。
差別化を図るひとつのアプローチとして、太い枠線やビビッドな配色が目を引くネオブルータリズムを取り入れる事例を、個人的にも目にする機会が増えてきた印象です。

しかし、単にパーツの周りに黒い枠線を引いただけでは、昭和の古いWebページのような野暮ったい印象に陥りがちです。
ネオブルータリズムを洗練されたモダンUIに昇華させるには、計算された余白や影の角度、配色の規律が欠かせません。

1. ネオブルータリズム（Neo-Brutalism）とは？建築思想から現代UIへの進化

1-1. 本家ブルータリズムとネオブルータリズムの違い

ネオブルータリズムのルーツは、1950年代に生まれた建築様式「ブルータリズム（Brutalism）」にあります。
フランス語の「ベトン・ブリュット（生のコンクリート）」を語源とし、装飾を排除して素材のありのままの質感や構造をむき出しにする思想でした。

この思想は1990年代から2000年代にかけて、初期のインターネット空間において「Webブルータリズム」として現れました。
スタイルシートを適用しない生HTMLやプレーンテキスト、意図的な崩しなど、あえて使いやすさを無視した実験的な表現が多く見られました。

一方、現代の「ネオブルータリズム（Neo-Brutalism）」は、かつての荒削りな質感を受け継ぎながらも、現代の使いやすさ（UX）やアクセシビリティを損なわないよう洗練させた進化形です。
※一部では「ネオブュータリズム」と表記されるケースもありますが、デザイン用語としてはネオブルータリズムが正確な呼称です。

1-2. なぜ今、ネオブルータリズムが注目されているのか？

近年、ネオブルータリズムが大きな支持を集めている背景には、「過度に整いすぎたミニマリズムへの飽き」があります。
フラットデザインやグラスモーフィズムが普及した結果、清潔感はあるものの、どのプロダクトも似通った無難な印象を与えるようになりました。

そこに強烈なインパクトをもたらしたのが、デジタルコンテンツ販売プラットフォームGumroad（ガムロード）の大胆なリブランディングでした。
鮮明な太枠とビビッドな配色、ぼかしのない影を組み合わせた画面は、クリエイターエコノミーの熱量と見事に合致し、世界中のデザイナーに衝撃を与えました。

さらにデザインツール大手のFigmaも、キャンペーンサイトや各種コミュニティ施策においてネオブルータリズムの要素を積極的に採用しています。
情報の境界線をはっきりと示しつつ、どこか親しみやすいレトロフューチャーな質感を生み出せる点が、先進的なテック企業で選ばれる理由です。

2. 「単に黒い太枠をつけただけ」がダサくなる3つの原因

ネオブルータリズムの流行を見て、とりあえず黒い太枠や原色を取り入れたものの、「なぜか素人が作ったような野暮ったいデザインになってしまう」と悩むケースは少なくありません。
魅力的な作例とダサく見えてしまうUIの間には、決定的な構造上の違いが存在します。

2-1. 原因1：内側余白（Padding）の不足による窮屈さ

ネオブルータリズムを取り入れようとして最も多い失敗が、コンポーネントの内側余白が狭すぎることです。
太い黒枠は、通常の境界線（1pxの薄いグレー線）に比べてはるかに強い視覚的な重み（質量）を持っています。

通常のUIと同じ感覚で内側余白を設定してしまうと、文字やアイコンが太枠に押し込められたように見えてしまいます。
その結果、モダンな抜け感が消え去り、昭和時代の印刷物や古いHTMLテーブルのような窮屈さが強調されてしまいます。

2-2. 原因2：彩度100%の原色同士が画面内で衝突している

2つ目の原因は、画面全体に派手な原色を無秩序に散りばめてしまうことです。
ネオブルータリズムの作例で見かける蛍光イエローやシアン、ピンクを一度に画面へ配置すると、重大な視線誘導の崩壊を招きます。

有彩色の主張が強すぎると、ユーザーは何を最初に見ればよいのか判断できなくなり、視界全体がチカチカして強い疲労感を与えてしまいます。
すべてを強調しようとした画面は、結果として何も強調されていない画面と同じになり、本来押してほしいボタンが埋もれてしまいます。

2-3. 原因3：影（オフセットシャドウ）の向きと距離の不一致

3つ目の原因は、カードやボタンごとに落ちている影の向きや距離がバラバラになっていることです。
一般的なぼかしのある柔らかいドロップシャドウであれば、多少のズレがあっても自然な奥行きとして馴染みます。

しかし、ネオブルータリズムで用いる「ぼかしゼロの硬い影（Hard Shadow）」は、境界線がシャープなため光源の矛盾が瞬時に目立ちます。
あるカードは右下に影が落ち、別のボタンは真下に落ちているといった状態になると、画面全体の整合性が一瞬で損なわれます。

3. 洗練されたネオブルータリズムに仕上げる「5つの設計ルール」

ネオブルータリズムを現代のプロダクトとして成立させるためには、感覚的なデザインではなく「明確な数値基準」を設けることが不可欠です。
ここでは、破綻を防ぎながら洗練された質感を生み出すための5つの基本ルールを解説します。

3-1. ルール1：枠線の太さをプロダクト全体で統一し、角丸ポリシーを固定する

画面をスタイリッシュに引き締める第一の基準は、画面全体の枠線の太さをソリッドブラックで統一することです。
WebやUIの実務では、線が埋もれず主張しすぎない目安として2px〜3px程度が採用されるケースが多く見られます。太さが画面内でバラバラになると一気に雑然とした印象を与えるため、主要パーツの線幅は厳格に揃えます。

また、枠線と同じくらい重要なのが角丸（Corner Radius）のポリシーを1つに固定することです。
完全な直角にして硬派な建築美を強調するか、あえて小さな角丸をつけて親しみやすいポップさを出すか、プロダクト全体で統一します。

/* 直角スタイルのカード枠線 */
.brutal-card-sharp {
  border: 3px solid #000000;
  border-radius: 0px;
}

/* ポップスタイルのカード枠線 */
.brutal-card-rounded {
  border: 3px solid #000000;
  border-radius: 12px;
}

3-2. ルール2：ぼかしゼロのオフセットシャドウで光源を統一する

ネオブルータリズムの立体感を象徴するのが、ぼかし（Blur）を一切入れないオフセットシャドウです。
一般的な設定例としては、横方向・縦方向にそれぞれ4px程度オフセットさせ、ぼかしを0pxにするソリッドブラック指定がよく使われます。

すべてのコンポーネントで「左上から光が当たり、右下へ一定の距離だけずれた影が落ちる」という物理法則を揃えます。
これにより、切り絵をペタペタと貼り合わせたような心地よい立体感が画面全体に宿ります。

/* 基準となるネオブルータリズムのオフセットシャドウ */
.brutal-shadow {
  box-shadow: 4px 4px 0px #000000;
}

/* ホバー時にさらに浮き上がる強調シャドウ */
.brutal-shadow:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0px #000000;
}

3-3. ルール3：60-30-10の法則で組む「ペーパー地 × アクセント」配色

画面の散らかりを防ぐ鍵は、配色の面積比率を厳密にコントロールすることです。
背景に完全な純白（#FFFFFF）を使うと黒枠のコントラストが強すぎて目が痛くなるため、ベースには淡いクリーム系のペーパーカラーを採用します。

配色の黄金比率として知られる「60-30-10の法則」をネオブルータリズムに応用すると、以下のようなバランスになります。
アクセントカラーは複数の色を混ぜず、1〜2色に厳選して最も重要なCTAボタンやバッジだけにピンポイントで使用します。

• ベースカラー（60%）: 生成り色や淡いペーパーカラー（#FDFBF7、#F5F5ED など）
• サブカラー（30%）: カード背景の白（#FFFFFF）や枠線・文字の黒（#000000）
• アクセントカラー（10%）: 鮮やかなイエロー（#FFE600）やライム、パープルなどの高彩度色

UIにおける配色のバランスや有彩色・無彩色の使い分けについては、こちらの記事でも詳しく解説しています。

【60-30-10の法則】アクセントカラーの使いすぎを防ぐUI配色の黄金比率

UIデザインで「色が多すぎて散らかる」「どこを目立たせればいいか迷う」悩みを解消する60-30-10の配色黄金ルールを解説します。

3-4. ルール4：ジャンプ率を高めた幾何学的タイポグラフィ

ネオブルータリズムの太い枠線に負けないためには、フォントの太さとジャンプ率（見出しと本文のサイズ比率）を大胆に設定します。
見出しには骨太なジオメトリック・サンセリフ（InterのBlackやPlus Jakarta Sans、Dela Gothic Oneなど）を選定し、圧倒的な存在感を持たせます。

さらに、補足テキストやステータスラベルの一部に等幅フォント（Monospace）を組み合わせると、開発者ツールのような知的で無骨なスパイスが加わります。
本文のフォントサイズが16pxであれば、大見出しは40〜48px以上に設定し、一目で階層が分かるコントラストを作ります。

3-5. ルール5：太枠の圧迫感を逃がす「通常より一段広い余白」

太枠の圧迫感を解消する決定打が、通常UIの1.3〜1.5倍程度を目安に広げた贅沢な余白設計です。
自分自身、初めてネオブルータリズムでカードを組んだときは、文字が黒枠に触れそうなほど窮屈になって失敗しました。

通常のカードUIで内側パディングを設定している場合、ネオブルータリズムでは思い切って一段階広く余白を取る（例: 16pxなら24px程度へ拡大）ことが推奨されます。
周囲の余白を十分に確保することで、太い線が「邪魔な枠」から「要素を際立たせるフレーム」へと役割を変え、洗練された開放感が生まれます。

4. Figmaで組むネオブルータリズムUIの実践ステップ

4-1. Auto LayoutとStroke（線の位置）の初期設定

Figmaでネオブルータリズムのコンポーネントを作成する際は、Auto Layoutのプロパティ設定から始めます。
新しいフレームを作成し、Auto Layoutを適用した上で、以下の数値を割り当てます。

• Padding（内側余白）: 左右28px / 上下20px（ボタンなら左右24px / 上下14px）
• Gap（要素間余白）: 16px
• Stroke（線）: 太さ 3px、カラー #000000、位置は必ず Inside に指定

線の位置を Outside や Center にしてしまうと、Auto Layoutのバウンディングボックスの外側に線がはみ出し、隣り合う要素との位置合わせがずれる原因になります。
常に Inside を指定しておくことで、CSSの box-sizing: border-box; と一致した破綻のない実装連携が可能になります。

4-2. Drop Shadow効果のスタイル登録

次に、要素に硬い影を付加します。
Figmaの右側パネルにある「Effects」から「Drop Shadow」を追加し、設定アイコンをクリックしてぼかし（Blur）を0にします。

• X（水平方向）: 4
• Y（垂直方向）: 4
• Blur（ぼかし）: 0
• Spread（拡大）: 0
• Color: #000000、不透明度 100%

この設定をエフェクトスタイル（またはFigma Variables）に「Elevation/Hard-4px」として保存しておけば、チーム全体で統一した影を即座に呼び出せます。

4-3. ホバー・アクティブ時の押し込みインタラクション設計

ネオブルータリズムの真骨頂は、ボタンを押したときの「物理的な押し込み感（Click/Press）」です。
Figmaのコンポーネントバリアントを使って、3つの状態（Default, Hover, Active）を作成します。

ボタンを押した瞬間に「影が消え、影のオフセット量と同じ距離だけボタン本体が右下へ移動する」ように数値を設計します（影が4pxなら移動量も4px）。
これにより、まるで本物のプラスチック製スイッチを指先でカチッと押し込んだような、小気味よいフィードバックが完成します。

ボタンのサイズ基準やタップ領域のアクセシビリティについては、こちらのガイド記事もあわせて参考にしてください。

ボタンのUIデザイン設計ガイド｜Primary・Secondary優先度と44pt基準

UIボタンの優先度設計から44ptのタップ領域基準、ホバー・アクティブ等の状態管理までを体系的にまとめた実践ガイドです。

5. ネオブルータリズムの適正判断｜どこに使い、どこで避けるべきか？

5-1. 効果的なプロダクトと領域

ネオブルータリズムは強烈な個性を放つため、ブランドの世界観や差別化が成果に直結する領域で絶大な効果を発揮します。
以下のようなシーンでは、退屈な競合サービスを一歩リードする強力な武器になります。

• クリエイターエコノミー・クリエイティブ系SaaS: Gumroadのように、自由で実験的な空気感を好むユーザー層に強く刺さります。
• ポートフォリオサイト: デザイナー自身の個性や遊び心をアピールし、採用担当者の記憶に強く残せます。
• 開発者向けツール・テック系コミュニティ: 無骨な等幅フォントや構造むき出しのスタイルが、エンジニア文化と親和性を持ちます。
• イベントLP・キャンペーンサイト: タイムライン上でスクロールするユーザーの手を止め、高いクリック率を生み出します。

5-2. 避けるべきプロダクトと領域

一方で、ネオブルータリズムの強いコントラストやポップさは、「心理的な安心感」や「極端な情報密度」が最優先されるサービスには適していません。
デザインシステムによってはアクセント程度に導入されるケースもありますが、基本的には無彩色を中心とした落ち着いた設計が推奨されます。

• 金融・証券・保険サービス: ユーザーが自分のお金を預ける場面では、実験的な楽しさよりも「堅実さ」と「絶対的な信頼」が求められます。
• 医療・ヘルスケアアプリ: 不安を抱えた患者や高齢者が利用するため、強い黒枠や原色は刺激が強すぎて不快感を与えるリスクがあります。
• 高密度なBtoBデータテーブル・業務基幹システム: 1画面に数百行のデータを凝縮して表示する画面では、太い枠線と硬い影が視覚的ノイズになり、業務効率を低下させます。

プロダクトの目的やユーザー心理を冷静に見極め、「機能性を損なわない範囲でどこまで崩せるか」を判断することが大切です。

6. 優れた活用事例とインスピレーション

6-1. FigmaのプロモーションUIとコミュニティ

UIデザイナーにとって最も身近で見覚えがある代表例が、デザインツール大手のFigmaです。
Figmaは、年次カンファレンス「Config」の特設サイトや公式ブログ、コミュニティページなどのマーケティング領域において、ネオブルータリズムの要素を巧みに取り入れています。

ツール本体のキャンバスやエディタ画面は、作業の邪魔にならないよう極めてクリーンなミニマルUIを貫く一方で、イベントやプロモーションの場では太い黒枠や鮮やかなカラー、硬い影を大胆に活用してブランドの熱気と遊び心を伝えています。
このように、「作業ツール本体」と「マーケティング・コミュニティ領域」でトーンを意図的に切り分けるアプローチは、実務で自社プロダクトにネオブルータリズムを取り入れる際にも大いに参考になります。

6-2. Gumroad（ガムロード）

ネオブルータリズムを現代の代表的UIスタイルとして世界に定着させた原点とも言えるのが、クリエイター向け決済プラットフォームのGumroadです。
創業者のSahil Lavingia氏が公開した公式アナウンス「Introducing the new Gumroad」（2021年11月）を皮切りに、同社は従来の無難なSaaSデザインから、太い黒枠と硬い影、鮮やかなネオンカラーを前面に押し出した大胆なリブランディングを敢行しました。

現在稼働しているGumroad公式サイトでも、ボタンやカードの「ソリッドな黒枠」「ホバー時の押し込み移動（translate）と硬い影（shadow）」の実装を直接体験できます。
単なる奇抜さにとどまらず、購入フローやダッシュボードの数値確認は極めてスムーズに行えるよう情報設計が徹底されており、「個性的でありながら、決済時の迷いを生じさせない」という実用ネオブルータリズムの教科書的な成功事例です。

次のステップ：あわせて深掘りしたい知見

ネオブルータリズムのように、既存の枠組みに囚われない独自の世界観を設計する上では、他のデザイントレンドや設計理論の知見も役立ちます。
現代のWeb/UIトレンドを多角的に把握するために、以下の記事もぜひあわせてご覧ください。

設計図のような緻密な構造美を表現するブループリントデザインの設計手法については、こちらの記事で体系的にまとめています。

【2026年最新】ブループリントデザイン（Blueprint Design）とは？設計図風UIの特徴・作り方と活用事例

WebやUIで注目されるブループリントデザインの特徴、グリッド設計、配色パターン、実務での活用事例を徹底解説します。

2000年代初頭のポップカルチャーを現代のUIへと再解釈するY2Kデザインの作り方については、こちらで詳しく紹介しています。

Y3Kデザインとは？Y2Kとの違い・質感の特徴とUIへの取り入れ方

「Y3Kデザインって何？」「Y2Kと何が違うの？」と気になっていませんか？西暦3000年の近未来を表現するY3Kの特徴（リキッドメタル・ゼリー・ネオサイバー）から、Figmaでの作り方、UIデザインで破綻しない上品な取り入れ方まで現役デザイナーが解説します。

7. まとめ：秩序ある設計原則がネオブルータリズムの実用性を支える

ネオブルータリズムは、一見すると直感的でラフなスタイルに見えますが、その実態は「緻密な余白計算と徹底した配色のコントロール」によって支えられています。
単に奇抜さを狙うのではなく、統一された太枠、光源の揃った硬い影、そして十分な内側余白を確保することで、視覚的なインパクトと高い操作性を両立できます。

まずはプロトタイプやサイドプロジェクトのボタン1つから、ぼかしゼロの影とシンプルな黒枠を取り入れ、プロダクトの世界観に合わせた最適なバランスを検証してみてください。

The post ネオブルータリズムとは？UIでダサく見せない配色・影の設計ルール5選 first appeared on デザペディア.

最近、打鍵感にこだわって少し高めのメカニカルキーボードを新調しました。キーを「カチャッ」と押し込むときの、あの指に返ってくる反発と心地よい音。用もないのに、つい無駄にタイピングしてしまうほど気に入っています。

物理的なスイッチを押す気持ちよさって、理屈じゃなく本能的に惹かれるものがありますよね。

最近ではスマートフォンの画面でも、こうした「触る気持ちよさ」を持ったUIを見かけるようになりました。
たとえば、語学アプリの『Duolingo』を使ったことがある方は、ボタンを押したときに「ぷにっ」と沈み込むような独特の弾力を感じたことがあるかもしれません。

あの操作感は、画面の動きだけでなくスマートフォンの細かな振動機能（ハプティクス）とも連動していて、本当に柔らかい物理ボタンを押しているような錯覚を生み出していますよね。

本記事では、この新しいデザイン手法がなぜ私たちに心地よさを与えるのか、その仕組みや法則を解説していきます！

1. 2026年のデザイントレンド「Squishy UI」とは？ 効率化された画面に足された手触り

今のアプリやウェブサイトは、フラットデザインがすっかり定着し、無駄が削ぎ落とされて本当に使いやすくなりましたよね。

その洗練された使いやすさをベースにしつつ、さらに「触る楽しさ」をプラスしようとするのが、触覚的マキシマリズム（Tactile Maximalism）と呼ばれるアプローチです。
これは、画面の中の図形が、単なる平坦な色面ではなく、ゼリーや粘土のような「体積」を持っているかのように振る舞うデザインのことです。

• これまでのデザイン：効率的で整理されており使いやすい反面、物理的な手ざわりはない。
• 新しい潮流：ユーザーの操作に合わせて、画面上の要素が物理的にへこんだり、跳ね返ったりする「生きた」反応を返す。

あわせて読みたい
効率化されすぎた「完璧なUI」の反動から生まれている2026年のトレンドについては、以下の記事でも解説しています。

完璧なUIに疲れたら。Future Retroがもたらす人間味と不完全さの美学

効率化されすぎた「完璧なUI」の反動から生まれているデザイントレンドを解説します。

2. なぜSquishy UIは「触って気持ちいい」のか？ 感情を動かすUX/UIデザイン

Yunyの視点：Squishy UIのボタンを触っていると、子供の頃にお気に入りのおもちゃのボタンを何度もカチカチと押したときの、あの素朴な安心感に似ているなと感じます。

なぜ私たちは、画面がぷにぷにと動くことに心地よさを感じるのでしょうか。
そこには、はっきりとした心理学的な理由があります。

本能的な安心感

私たちがボタンを押したとき、それが物理的に「へこみ、跳ね返る」という反応を返してくれると、脳は「自分の操作が正しく受け付けられた」という強い確証を得ます。
これがデジタル特有のストレスを和らげ、安心感に繋がるのです。

親しみやすさを生む形状（数値の根拠）

Squishy UIでは、20px〜40pxという非常に大きな角丸（要素の角の丸み）がよく使われます。
このぽってりとした丸みが、どこかホッとする親しみやすさを生んでいるんです。

3. Squishy UIはどう作る？ 心地よさを生み出すアニメーションとCSSの法則

あのように柔らかく動くボタンも、実はCSSやアニメーション設定での数値計算によって作られています。
「なんとなく柔らかい」のではなく、そこには心地よさを生むための明確なルールが存在するのです。

体積を保存する法則

画面上のボタンが指で押し潰されるとき、「サイズのピクセル値と角丸のピクセル値の合計を一定に保つ」という計算が行われています。
これにより、ボタンがただ小さくなるのではなく、本物のゴムのように横に少し広がりながら押し潰される「リアルな物理法則の錯覚」が生まれます。

「完璧なバネ」のスイートスポット

アニメーションを設定する際、バネの強さを決める剛性（Stiffness）を400、揺れの収まり具合を決める減衰（Damping）を15といった数値に設定するのが、ひとつのスイートスポットとされています。
これにより、無駄に揺れすぎず、指に吸い付くような完璧な弾力感が表現できるのです。

あわせて読みたい
UIから「質量」や「手ざわり」を感じさせる実装アプローチに興味がある方は、こちらの記事も参考になります。

Apple HIG（ガイドライン）が教える心地よさの正体。44ptと文字設計

44ptのタップ領域や物理法則のアニメーションなど、HIGの心地よいUI設計思想を徹底解説します。

4. Squishy UIをデザインに取り入れる際の注意点・アクセシビリティ

触って楽しいSquishy UIですが、どんな場面にでも使っていいわけではありません。
適材適所の見極めが重要になってきます。

適している場面

毎日の習慣をサポートするウェルネスアプリや、学習ツールなどに最適です。
ユーザーの不安を取り除き、「もっと触りたい」という前向きな気持ちを引き出します。

避けるべき場面

逆に、金融機関のアプリや業務用システムなど、大量の情報を素早く処理する場面には不向きです。
UIがぽってりしすぎていると、「自分のデータが真剣に扱われていない」という不信感を与えてしまう危険があります。

また、柔らかさを表現するために淡い影などを多用するため、文字と背景のコントラスト比（推奨値は4.5:1）を満たしにくくなる点にも注意が必要です。
見た目の楽しさとアクセシビリティのバランスを取ることが、プロのデザイナーの腕の見せ所ですね！

まとめ：Squishy UIがもたらす次世代のデジタル体験

今回ご紹介した内容を振り返ると――

• Squishy UIは、単なる見た目の流行ではなく「触る楽しさ」の実用的なアプローチ
• 物理的な「へこみ」や「バネ感」が、ユーザーに本能的な安心感を与える
• 心地よさの裏には、CSSやアニメーションの緻密な数値ルールが存在する
• 美しさと同時に、情報を取り扱う信頼感やアクセシビリティへの配慮が必要

この4点に集約されます。

Squishy UIは、効率化が進んで単調になりがちなアプリに、確かな「手ざわり」を取り戻してくれます。

明日、スマートフォンを触るとき。
お気に入りのアプリのボタンが、どんな風に指を押し返してくるか、少しだけ意識してみてください。

普段使っているアプリの動きに少し注目してみるだけで、毎日のスマホ操作がちょっと楽しくなるかもしれませんね！

さらに深掘りしたい方へ（参考リンク）

実際にSquishy UIを採用しているサイトをご紹介します。ぜひ、お手元のスマートフォンなどで触って、その「心地よさ」を体験してみてくださいね！

• Duolingo（デュオリンゴ）
  学習アプリの代表格です。ボタンを押した際の立体的な沈み込みや、バネのような反発がSquishy UIの最も分かりやすい例と言えます。
• Family（ファミリー）
  暗号資産ウォレットのアプリです。前述の通り、金融関連など信頼性が求められるサービスには不向きとされがちですが、あえてSquishy UIを振り切って採用することで「親しみやすさ」を演出し、競合優位性を生み出している好例です。UI全体が非常に柔らかく、タップやスワイプに対する触覚的な反応（バウンスやスクイーズ）が徹底されており、触っているだけで楽しくなるデザインに仕上がっています。

終わりに

最後までお読みいただき、ありがとうございます！

UIデザインの世界は、見た目だけでなく「触り心地」まで工夫されるようになってきて、ますます面白くなっていますね。
今回の記事が、皆さんの日々のデザインワークのヒントになれば嬉しいです。

これからも、素敵なデザインを見つけたらどんどんシェアしていきますね。
それでは、また次回の記事でお会いしましょう！

The post Squishy UIとは？触って気持ちいいぷにぷにUIの特徴と作り方 first appeared on デザペディア.

「最近、Webサイトのメインビジュアルや特集バナーをデザインしていると、レイアウトや文字組みが綺麗に整えば整うほど、逆に『どこかで見たような、無難で味気ないグラフィック』になってしまうことに悩むことがありました。」
AIが画像を簡単に生成する2026年の今、私たちデザイナーだけでなくユーザー自身も「完璧さ」に対して、少しノイズのある「手触り」を求めるようになっているのを感じます。

最先端のWebデザインの世界でも、これと似た現象が起きています。
それが、2026年のUI/Webデザイントレンドとして海外を中心に注目を集めている「Future Medieval（未来の中世：フューチャー・メディエヴァル）」です。

本記事では、この少しダークで重厚なトレンドの魅力と、実務での取り入れ方を解説します。

1. 2026年のデザイントレンドに「Future Medieval」が浮上した理由

2026年現在、デザインの世界では極端なミニマリズムからの脱却が始まっています。
海外のデザインコミュニティやPinterestなどでも、「ヴィンテージ・マキシマリズム」や「中世コア」といった、古い時代の重厚感を求める声が急増しているのを感じます。

なぜ私たちは今、わざわざ中世の美学に惹かれるのでしょうか。

人間は、予測可能で均質なパターンよりも、少しのノイズや「時間の経過」を感じるものに無意識に安心感を覚えることがあります。

重厚で歴史的なデザインを見ると、なんだかホッとするのはそのためかもしれません。

2. Future Medieval（フューチャー・メディエヴァル）を形作る3つのデザイン要素

では、具体的にどのようなデザインが「未来の中世」を作っているのでしょうか。
大きく3つの要素に分解できます。

このトレンド特有の、赤黒のデュオトーンやクロームの甲冑、重厚なゴシック体が入り混じった実際のグラフィックは、こちらのPinterest画像を見るとイメージしやすいはずです。

出典：Pinterest

出典：Pinterest

出典：Pinterest

① 歴史と精度のハイブリッド（タイポグラフィの対比）

読みにくく重厚なゴシック体（ブラックレター）の見出しに、読みやすくて現代的なサンセリフ体の本文を意図的に組み合わせる手法です。
この「古さと新しさのギャップ」が、画面の目を引くアクセントになります。
実務の観点から言うと、本文までクセの強いフォントにしてしまうと可読性が落ちてUIとして機能しなくなるため、あくまで「大きな見出し」や「背景の装飾」に留めるのが、デザインを破綻させないリアルなコツです。

② アナログの質感と未来の輝き（テクスチャの重ね合わせ）

インクの滲み、羊皮紙の粗さ、あるいはリソグラフ印刷やハーフトーンといったアナログでざらついたノイズを強めに敷き詰め、その上にクローム（金属質の甲冑など）やネオンの光といった未来的なハイライトを重ね合わせます。

ピクセル単位で作られた完璧なデジタルデータに、あえて「古いポスターのような印刷の劣化」を加える。これによって、ガラスの画面越しにもザラッとした触覚や、パンクでアグレッシブな生々しさが生まれるのが面白いところです！

③ 整然としたレイアウトの骨格（シンメトリーな構造）

表面のテクスチャがどれほどカオスであっても、配置自体は左右対称（シンメトリー）で幾何学的に整えられています。
この厳格なルールがあるからこそ、情報の見やすさと荘厳な雰囲気が両立できているのです。

私自身、最近のプロジェクトで「UIは整っているけれど、少し冷たい印象を受ける」と感じたことがありました。
そこで、この「Future Medieval」の考え方をほんの少しだけ取り入れ、背景にわずかなノイズ（ざらつき）を加え、見出しのフォントに少しクラシックな要素を混ぜてみたのです。すると、それだけで画面が一気に垢抜け、親しみやすさが生まれました。
トレンドを丸ごと真似しなくても、こうした「ノイズ」のエッセンスを少し取り入れるだけで、デザインの質感が大きく変わります

3. UI/Webデザインへの応用：デジタル空間に「重厚感」を実装する

この「Future Medieval」の考え方は、実際のWebデザインやUIにおいて、トレンドをそのまま「丸ごと」真似するのではなく、ブランドの個性を際立たせるためのエッセンスとして活用されることが多くなっています。

• ゲームでの世界観を活かすための活用
  例えば、ダークファンタジー系ブロックチェーンゲーム『SERAPH: In the Darkness』の公式サイトでは、ベースとなるUI自体は非常に未来的でスッキリしていますが、そこに中世のアイテムや重厚なグラフィックを「アクセント」として自然に同居させています。UIの羅列に、こうした中世の「神秘的な意味」を部分的に乗せることで、ユーザーを引き込む独自の世界観を作っています。
• 日常的なプロダクトにおける「個性」としての活用
  ゲームの世界にとどまらず、ブランドの「強烈な個性」を出すための手法としても使われています。例えば、米国の飲料水ブランド『Liquid Death』は、ただの「日常的な水」でありながら、重厚なブラックレターフォントやダークな世界観をUIの一部に大胆に取り入れることで、他社にはない個性を放っています。また、ラグジュアリーブランド『Chrome Hearts』のサイトに見られるような、モダンなレイアウトの中に重厚なゴシック様式とクローム（銀色）の質感を部分的に融合させるデザイン手法は、ライフスタイルの領域でも確固たる支持を得ています。

4. まとめ：2026年のデザイントレンド「Future Medieval」を取り入れるヒント

AIで完璧なグラフィックが簡単に作れる今だからこそ、あえてデジタル画面に「あたたかみ」や「親しみやすさ」を持たせるアプローチが求められています。

すべてのデザインをこのトレンドに合わせる必要はありませんが、今回ご紹介した「アナログなノイズ」や「タイポグラフィの対比」といったエッセンスを少しだけ自分の引き出しに持っておくと、のっぺりとしたデザインから抜け出す良いスパイスになるはずです！

こちらの記事もおすすめです！
「綺麗すぎる画面」からの脱却についてもっと知りたい方は、こちらの記事もおすすめです！

undefined

undefined

ぜひ、日々のデザイン業務のヒントとして参考にしてみてくださいね！

これからも、心地よいデザイン作りを一緒に楽しんでいきましょう。
それでは、良いデザインライフを！

The post 【2026年 デザイントレンド】完璧なUIに疲れたら。「Future Medieval（未来の中世）」を取り入れた新しいWebデザイン first appeared on デザペディア.

最近、SNSでスキのないピカピカのグラフィックを見て「綺麗だけれど、なんだか息苦しい」と感じたことはありませんか？
AIが完璧な画像を瞬時に作れる今、私たちはツルッとしたデザインに少し見飽きて、「完璧すぎるビジュアルへの疲労感」を抱き始めているのかもしれません。

そんな中、2026年のデザイントレンドとして世界で静かに広がっているのが「Blueprint Design（ブループリント・デザイン）」です！

「理屈はわからないけれど、この飾り気のない感じ、なんかいいな」とホッとする感覚。
本記事では、あえてワイヤーフレームのような「途中経過」を隠さないこの新しいトレンドが、なぜ私たちの心を惹きつけるのか。
日常を少し豊かにするヒントとともに、一緒に探っていきましょう。

1. 「途中経過」だからこそ伝わる、作り手のストーリーとブランドの透明性

2026年のデザイントレンドにおいて、ブループリント・デザイン最大の魅力はなんでしょうか。
それは、未完成のような「プロセス」をあえて見せることで、デザインの背景にあるストーリーと企業としての誠実さ（透明性）を感じさせる点にあります。

ここ数年のWebデザイントレンドの主流だった極限のミニマリズム（Bento Gridなど）は、確かに美しく整理されていました。

Bentoグリッド（Bento UI）とは？ - デザペディア

「Bentoグリッドを取り入れたいけれど、どのサイトを参考にすべき？」「スマホで崩れない作り方は？」とお悩みの方へ。AppleやLinearなどの秀逸な参考事例、Figmaでの余白計算ルール、CSS Grid実装まで現役UIデザイナーが徹底解説します。

しかし、それは「綺麗に整った完成形」しか見えないブラックボックスでもあったのです。

対してブループリントは、UIデザインの設計図とも言えるグリッド線（骨格）や寸法（ルール）、さらには「分解図」を用いて、作っている最中の作業画面をそのまま見せるようなアプローチをとります。

【未完成に惹かれるデザインの「あるある」】
Figmaなどでワイヤーフレームを作っている最中、「色を塗る前の、この骨組みだけの状態のほうがなんかいいな」と思ったことはありませんか？

まるで、デザイナーの作業中のスケッチブックを覗き込んだときのような感覚。ツルツルに磨き上げられた完成品よりも、裏側にある作り手の息遣い（ストーリー）を感じることで、私たちは不思議な愛着と安心感を抱くのです。

私たちが心惹かれるのは、表面的な綺麗さだけではなく、その奥にある「人間が考えた痕跡」なのですね。

2. 心地よい「未完成」を成立させる、ブループリントデザインの3つの視覚ルール

ただ未完成なものをそのまま見せるだけでは、当然ながら雑然としてしまいます。
ブループリントの美しさは、無秩序ではなく「極限の抑制」によって作られています。

では、なぜあのデザインを見ると私たちは心地よく感じるのでしょうか。
その秘密は、以下の3つのグラフィックのルールに隠されています。

① 10〜20%の余白の線（露出したグリッドシステム）

1pxの極めて細い線を、わずかな不透明度（10〜20%）で配置する空間設計です。
主張しすぎないCSSグリッドが、画面全体に静かな秩序を与えます。

真っ白な背景よりも、薄いグリッド線が敷かれていることで「ここから何かが組み立てられていく」というプロセスへの期待感（ワクワク感）を与えてくれるのです。

② 等幅フォント（モノスペース）がもたらすリズム

すべての文字幅が均等な「等幅フォント」を使用します。
一般的なフォントとは違い、数値や注釈を整然と縦横に並べることができるため、エンジニアリングの現場のような、知的で機能的なリズムが生まれます。

③ 中身の構造を見せる「分解図」のイラスト表現

表面のきれいな外見だけを描くのではなく、中身のパーツがどう組み合わさっているのかを、あえてバラバラに分解して見せる表現です。

少し趣味丸出しで恐縮ですが、あえて内部のメカニカルな構造を透けて見せる「ガンプラのスケルトンモデル」なんかに興奮してしまう男子も多いのではないでしょうか？

あの「へえ、中はこうなっているんだ！」という知的なワクワク感。完成品をただ見せられるより、どう作られているのかという「成り立ち」を知るほうが、私たちはより深い興味を惹かれるのです。

3. 完璧ではない「揺らぎ」を愛する、日本独自のアイデンティティ進化

海外からやってきた2026年デザイントレンドですが、それをそのまま模倣するのではなく、私たちの感覚に馴染む「侘び寂び（Wabi-sabi）」との融合が、いま日本国内で起きています。

完全な機械的直線の背景に、和紙のような手触りのテクスチャや、ほんのわずかな墨の滲みを重ねる手法が、国内のコーポレートデザインやブランド・アイデンティティなどでも見られ始めました。

論理的で冷たいグリッドの上に、不完全で温かいアナログの質感を乗せる。
このバランスが絶妙な心地よさを生んでいます。

精密で無機質なデジタル構造の中に、あえて「人間の気配（アナログ感）」を少しだけ残す。

すべてを完璧に隠してしまうブラックボックスよりも、こうした「スキ」が見えるデザインのほうが、私たちの心はホッとするのかもしれませんね。

4. まとめ：飾らない「プロセス」を日常のデザインから学んでみる

2026年のデザイントレンドであるブループリント・デザインが私たちに教えてくれるのは、「完成された姿」だけが美しいわけではないということです。

試行錯誤のプロセスや、まだ発展途上である構造の裏側を見せることは、決して弱さの露呈ではありません。
むしろ、相手を自分の物語に引き込む「誠実さ」の証明になります。

明日、誰かに企画を提案するときや、自分の部屋を少し片付けるとき。
すべてを完璧に取り繕うのではなく、あえて少しだけ「過程」や「骨組み（ワイヤーフレーム）」を残してみてはいかがでしょうか！

あなたの日常という「途中経過」そのものが、きっと誰かを惹きつける美しいデザインになるはずです。
ぜひ、日々の視点を少し変えるヒントとして参考にしてみてくださいね。

The post 【2026年最新】ブループリントデザイン（Blueprint Design）とは？設計図風UIの特徴・作り方と活用事例 first appeared on デザペディア.

最近、X（旧Twitter）やPinterestなどの海外デザイナーの投稿をチェックしていると、2026年の新しいデザイントレンドとして、ある独特の質感を持ったUIデザインを頻繁に見かけるようになりました。

背景が透けているのは「グラスモフィズム」と同じなのですが、それだけでなく、奥にあるコンテンツがレンズを通したようにほんの少し「歪んで」見えるんです。
まるでスマートフォンの画面の中に、本当に分厚いガラスが1枚挟まっているように見えます。

「この美しい質感は、いったいどうやって作られているんだろう？」
「なぜ今、2026年の最新トレンドとして世界中で注目されているんだろう？」

気になって調べていくうちにたどり着いたのが、今回ご紹介する Dynamic Glass-Depth（DGD） という新しいUIデザインの潮流でした。

調べてみると、これは単なる「かっこいいエフェクト」ではなく、次世代の空間UI（Spatial UI）や、より直感的なUXデザイン（ユーザー体験）を構築するために、私たちUIデザイナーが知っておくべき理にかなった表現手法であることが分かってきたんです。

1. 「ただ透けて見える」だけじゃない。物理法則が宿る心地よさ

これまでのUIデザインでも、背景をすりガラスのようにぼかすグラスモーフィズム（Glassmorphism）という表現手法はよく使われてきました。

でも、DGDがこれまでの表現と決定的に違うのは、そこに動的な物理シミュレーションが組み込まれている点です。

要素が重なったとき、背後のオブジェクトがただボヤけるのではなく、ガラスのレンズを通したようにわずかに歪む。これをリアルタイム屈折シミュレーションと呼びます。

なぜこれが「心地よい」と感じるか。
それは、私たちの脳が現実世界で長年慣れ親しんできた「光の法則」に、デジタルの挙動が近づいたからです。

私たちは生まれてから毎日、ガラス越しの景色や、水面に映る光を見て過ごしてきました。
その積み重ねが、無意識なうちに体に刻まれているんです。

DGDの代表的な表現を整理すると、こんな感じです。

• 視線連動型パララックス： デバイスを傾けたり視線を動かしたりすると、ガラスの重なりが数ミリだけズレる
• 適応型ブラー： 注目している場所以外を、カメラのピントが外れるように自然にぼかす
• リアルタイム屈折： 手前の「ガラス層」を通して奥のコンテンツが、物理的なレンズのように歪んで見える

こうした技術によって、情報が多い画面の中でも「今、どこを見るべきか」が直感的に伝わるようになります。

DGDは単なる装飾ではなく、ユーザーを迷わせないための理にかなった表現手法なのです。

2. 実務の現場から見える、表現の裏側

UIの画面を設計するとき、私が最も神経を使うのが「要素の重なり方」です。どの情報が手前にあって、どれが奥にあるのか。その関係性を視覚的に正しく伝えることが、使いやすさの大部分を決めると思っています。

実は、Figmaなどのデザインツールを使ってDGDの質感をプロトタイプで初めて試したとき、私は大きな壁にぶつかりました。これまで通り「z-index」でレイヤーの重なり順だけを管理していたところ、どこか平面的で不自然な屈折になってしまったんです。

試行錯誤の結果、重なり順だけでなく、レイヤー間の「物理的な距離（Depth Token）」を数値として定義する必要があることに気づきました。

例えば、LPのメインビジュアルの制作で、文字をただ写真の上に置くのではなく、DGDの質感を持たせた仮想の「ガラスの層」に配置し、背景写真とガラス層の距離を試しに大きく離してみる。

すると、距離に応じて屈折の歪みが強くなり、文字が背景と切り離されつつも、画面全体にしっくりと馴染むようになったんです。

また、モーショングラフィックスの現場でも、この「歪み」が動画の質感を一気に引き上げてくれます。
背景の光が動くたびに、手前のガラス層に映る屈折がリアルタイムで変化する。その微細な動きが、のっぺりとしたデジタル画面に「体温」のような温もりを持たせてくれるんです。

3. 2026年のUI表現を拡張してくれる、新しいアプローチ

こうした複雑な表現をゼロから構築するのは、かつては本当に大変でした。

でも今は、AIツールや最新のライブラリが、私たちの想像力をしっかりバックアップしてくれます。

背景に敷く有機的なグラフィックを作る際、私はよく生成AIを活用しています。単に綺麗な絵を出力するだけでなく、「深度情報（奥行きのデータ）」を持たせたまま出力することで、DGDの屈折効果をよりリアルに反映させることができるからです。

実装の段階では、光の物理現象を再現するコード（シェーダー）の書き方をAIに相談することもあります。「水滴越しに文字を見たときの、わずかな歪みを再現したい」といった具体的なニュアンスを言葉で伝えると、専門的な数学知識がなくても、理想の質感をスピーディーに形にできるようになりました。

道具に使われるのではなく、AIを 「優秀なアシスタント」 として活用すること。
それによって私たちは、「どんな体験を作りたいか」という本質的な設計に、より多くの時間を割けるようになっています。

4. 心地よさの裏側にある、小さなハードル

もちろん、新しい表現には注意しなければならない点もあります。現在、実プロジェクトでの本格導入に向けてテストを重ねていますが、その中で「プロとして必ずクリアしなければならない課題」が明確に見えてきました。

テストで直面した課題と、私が準備している対策

1. デバイスへの負荷問題
   手元の数年前のスマートフォンでプロトタイプを動かしてみたところ、リアルタイムの光の計算が重く、スクロールが少しカクついてしまいました。
   【対策】 スペックの高い端末ではフル機能のDGDを表示し、それ以外の環境ではシンプルな半透明（従来のグラスモフィズム）に切り替える「賢いフォールバック（代替）設計」を実装の前提としています。
2. 読みやすさ（アクセシビリティ）の低下
   ガラスの屈折効果を強くしすぎた結果、背景の色と文字が混ざってしまい、社内レビューで「文字が読みにくい」と指摘されたことがありました。
   【対策】 テキストの背景には、必ずコントラストを確保するための薄い層（スクリム）を敷き、背景がどんなに動いても文字の可読性が担保されるルールをデザインシステムに組み込みました。

いざ実務に落とし込むとなると、見た目の新しさだけで押し通すわけにはいきません。美しさとアクセシビリティ、そして質の高いUXデザインのバランスをどう取るかが、現場での一番の悩みどころであり、UIデザイナーとしての面白い部分でもありますね。

まとめ：日常のちょっとした「気づき」が、デザインを深くする

今回ご紹介した内容を振り返ると――

• DGDは「ただのエフェクト」ではなく、ユーザーを迷わせないための機能的な表現
• リアルタイムの屈折・パララックスが、デジタルの冷たさに「体温」を与える
• AIをパートナーとして活用することで、複雑な質感の実装のハードルは大きく下がっている
• 美しさを追求しながら、アクセシビリティと処理負荷への配慮を忘れないこと

この4点に集約されます。

私がDGDと出会ったのは、コップの水越しに見えた木目の歪みを、スマートフォンの画面の中に感じた瞬間でした。
デザインのヒントは、意外と日常のあちこちに転がっているものですね。

明日、何かのアプリを開いたとき、あるいはWebサイトを訪れたとき。「このボタンの重なり、なんだか心地いいな」と感じることがあれば、そこにはきっとこうした緻密な奥行きの設計が隠れているはずです。

日常の景色を、少しだけ違う目で眺めてみてください。それだけで、デザインを見る解像度がぐっと上がるはずですよ！

5. さらに深掘りしたい方へ（参考リンク）

今回の記事でご紹介した「ガラスの質感」や「物理的な距離」といった概念は、世界的なデザインガイドラインでも重要なトピックとして扱われ始めています。実装や設計のヒントが詰まっているので、ぜひ目を通してみてくださいね！

• Apple Human Interface Guidelines: Materials
  Apple公式のガイドライン。visionOSなどを中心とした、空間における「ガラス（Material）」の役割や、背景の光をどう取り込み、コンテンツを際立たせるか（Vibrancy）の設計思想が体系的に学べます。
• Material Design 3: Elevation
  Googleの公式ガイドライン。z-indexのような単なる重なりではなく、画面上の要素が持つ「Z軸の高さ（物理的な距離）」をどのように定義し、コントロールしていくかを論理的に学べます。

終わりに

最後までお読みいただき、ありがとうございます！

これからも、心地よいデザインの探求を一緒に楽しんでいきましょう。
それでは、良いデザインライフを！

The post 【2026年デザイントレンド】次世代の空間UIを創る「Dynamic Glass-Depth」。画面に体温をもたらすUXデザイン first appeared on デザペディア.

NewJeansなどを契機にブームとなった「Y2K（2000年代のレトロポップ）」の次に訪れたのが、西暦3000年代の超未来を想像した「Y3K（Year 3000）デザイン」です。

この記事では、Y2Kとの決定的な違いや代表的な質感（リキッドメタル・ゼリーグロー）、そして実務のWeb/アプリUIで「悪目立ちさせずに上品に落とし込むコツ」まで、現場目線で分かりやすく解説します。

1. Y3Kデザインとは？ Y2Kとの決定的な違い

Y3K（Year 3000 Design）とは、AIやメタバースが日常化した時代における「西暦3000年代の超未来を想起させるSF的・有機的なビジュアルスタイル」のことです。

同じ未来志向でも、Y2KとY3Kでは目指す世界観が大きく異なります。

• Y2Kデザイン（過去のノスタルジー）
  2000年代初頭の「ガラケー」「粗削りなCG」「ローライズジーンズ」など、人類が初めてデジタルに触れたときのレトロポップな愛着がベースです。
• Y3Kデザイン（未知へのSF的想像力）
  生成AIやサイバネティクスが浸透した世界。液体金属（リキッドメタル）や半透明の光など、「現実には触れられないはずの超未来の質感」がベースです。

Y2Kが「少し懐かしいデジタルへの憧れ」なら、Y3Kは「まだ見ぬ未来のテクノロジーへの憧憬」と言えます。

2. Y3Kデザインを構成する5つのビジュアル特徴

実務の画面で「Y3Kっぽさ」を醸し出す要素は、主に以下の5つに集約されます。

• 1. リキッドメタル（液体金属 / クローム）
  水銀のように有機的にうねるシルバーやクロームのテクスチャ。冷たい金属なのに滑らかに流動する質感が特徴です。
• 2. ゼリーグロー（半透明のオーロラ光）
  グミやゼリーのようにプルンとした透明感と、背後から淡く滲み出る光。ダーク背景に差し込むと一気にSF感が増します。
• 3. ネオサイバーなフォント（有機的タイポグラフィ）
  角ばったSFフォントだけでなく、文字の端が液体のように伸びたり繋がったりする実験的なタイポグラフィが多用されます。
• 4. 寒色を中心としたハイコントラスト配色
  ディープブラックや宇宙を思わせるインディゴを背景に、シアン、ネオングリーン、クロームシルバーを差し色として配置します。
• 5. 3Dシェイプと浮遊感
  平坦な平面ではなく、無重力空間にフワフワと浮いているような3次元的な奥行きを持たせます。

【2026年最新】グラデーションがダサい原因とは？Figmaで濁らない配色ルールと垢抜けテクニック

Y3Kのゼリーグローやオーロラ背景に欠かせない、濁らない美しいグラデーションの作り方を解説します。

3. Figmaで実践！Y3K質感をサクッと再現する3つのプラグイン

「FigmaだけでY3Kの複雑な質感を作れるの？」と思われるかもしれませんが、無料のFigmaプラグインを組み合わせれば短時間で作成できます。

• Mesh Gradient（有機的なオーロラ背景）
  複数のポイントを歪ませて、水彩画のように複雑な色の混ざり合いを作れるプラグインです。Y3K特有の深海や星雲のような背景があっという間に完成します。
• Morph（プルンとしたゼリー立体感）
  ワンクリックでNeumorphismやGlassmorphism、ぷっくりとしたJelly質感をシェイプに適用できるツールです。
• Liquid Metal Generator（うねる液体金属）
  パスを引くだけで、リアルな金属光沢と反射光を持ったクロームシェイプを自動生成してくれます。ロゴやアクセントパーツに最適です。

自分自身、クライアントへのプロトタイプ作成で「未来的な先進感」を急ぎで表現したいときは、この3つのプラグインをベースにして微調整することが多いです。

4. 実務のWeb・アプリUIに「上品に」取り入れる3つのコツ

Y3Kは世界観が非常に強いため、画面全体に盛り込みすぎると「奇抜すぎて文字が読めない」「操作しづらい」というユーザビリティ崩壊を招いてしまいます。

実務のプロダクトデザインで破綻させないための鉄則は以下の3点です。

• 1. 画面全体の「5〜10%」のアクセントに留める
  メインのUIコンポーネント（ボタン、入力フォーム、テキスト）は極めてシンプルに保ち、キービジュアルやカードの背景にだけY3Kテクスチャを差し込みます。
• 2. インタラクション（動的変化）で体験させる
  静止画で固定するのではなく、ホバー時やスクロール時に微細な光が揺らめく程度に抑えることで、操作性を損なわずに「未来感」を演出できます。
• 3. コントラスト比（アクセシビリティ）を死守する
  半透明や光の強いテクスチャの上にテキストを載せると可読性が落ちます。テキストエリアの背後には必ず遮光レイヤー（黒の不透明度40%など）を敷き、視認性を担保します。

【2026年最新】Bentoグリッド（Bento UI）とは？参考サイト事例・レイアウトの基本と作り方

Y3Kのフューチャリスティックな世界観とも相性抜群な、洗練されたBentoグリッドの設計手法を解説します。

5. まとめ：Y3Kは「技術の進化を人間らしく楽しむ」視覚言語

Y3Kデザインは、単なる一過性の流行ではなく、「AIや新テクノロジーが日常になった時代に、私たちが無意識に求めているワクワク感」を形にしたスタイルです。

• 本質: ノスタルジー（Y2K）から、未知のテクノロジーへの憧憬（Y3K）へ。
• 質感: リキッドメタル、ゼリーグロー、流動的なオーロラ光。
• 実務での運用: 画面全体の5〜10%に抑え、機能性とアクセシビリティを最優先にする。

「少し先の未来」を感じさせるプロダクトやブランドをデザインする際は、ぜひY3Kのエッセンスをアクセントとして取り入れてみてください。

次のステップ：あわせて深掘りしたい知見

最先端のUIトレンドや、触感・質感のあるインターフェース設計をもっと深掘りしたい方は、以下の記事もぜひチェックしてみてください。

Bentoグリッド（Bento UI）とは？参考サイト事例とFigmaでの作り方

「Bentoグリッドを取り入れたいけれど、どのサイトを参考にすべき？」「スマホで崩れない作り方は？」とお悩みの方へ。AppleやLinearなどの秀逸な参考事例、Figmaでの余白計算ルール、CSS Grid実装まで現役UIデザイナーが徹底解説します。

The post Y3Kデザインとは？Y2Kとの違い・質感の特徴とUIへの取り入れ方 first appeared on デザペディア.

いま国内外のWebデザインやアプリUIで主流となっているのが、日本の弁当箱から着想を得た「Bentoグリッド（Bento UI / ベントーグリッド / 弁当UI）」です。

この記事では、デザインの引き出しになる秀逸な参考サイト事例から、Figmaで作る際の余白計算ルール、スマホで破綻させないレスポンシブ設計のコツまで、現場目線で分かりやすくお届けします。

1. Bentoグリッド（Bento UI）とは？ なぜ今選ばれるのか

Bentoグリッドの魅力は、「異なる種類の情報を、1つの画面で美しく共存させられること」です。

• 認知的チャンキング: 関連する情報をカード単位でひとまとめにすることで、ユーザーの脳の処理負荷を劇的に減らします。
• 視覚的ヒエラルキー（優先度）の明示: 大きなカードと小さなカードを組み合わせることで、「まずここを見てほしい」という主役が一目で伝わります。
• スマホでの組み替えやすさ: 複雑なレイアウトも、モバイル表示では縦1列にシンプルにスタックできるため、レスポンシブ対応と非常に相性が良いのが特徴です。

2. デザインの引き出しを広げる！秀逸なBento UI参考事例

Bentoグリッドを取り入れる際は、世界的なトッププロダクトの構成を研究するのが一番の近道です。

Apple：製品スペックを直感させる「視覚的メリハリ」

Bentoグリッドブームの火付け役とも言えるのがAppleのプロモーションページです。チップの処理速度、バッテリー持ち、カメラ性能といった無機質になりがちなスペック情報を、グラフ、立体的な3Dレンダリング、タイポグラフィを散りばめたカードで構成しています。「一番推したい機能」のカードだけを2倍のサイズにし、視線を自然に誘導する設計はまさに教科書と言えます。

Linear：ツールバーやキーボードショートカットの「機能美」

プロジェクト管理ツール「Linear」の公式サイトは、ダークモードを基調としたミニマルなBentoグリッドの最高峰です。カードの中に実際のUIパーツ（コンポーネント）やキーボードのキートップをそのまま配置し、機能の使い心地を直感的に想起させる工夫が施されています。

3. Figmaで美しく組むためのグリッド設計と余白ルール

Bentoグリッドを作るときに一番やってはいけないのが、「適当なサイズの四角形を目分量で並べること」です。カードの隙間や高さが1pxでもズレると、途端に散らかった印象になってしまいます。

Figmaで設計する際は、以下の「ベースユニット計算式」を必ず守りましょう。

• 8ptグリッドを基準にする
  カード間の余白（ガター）は 16px または 24px に統一します。
• カードのサイズ計算式
  複数列にまたがるカードの幅や高さは、必ず以下の式で算出します。
  幅 = (基本カード幅 × 列数) ＋ (ガター × (列数 - 1))
  このルールを守ることで、どんな組み合わせでも外側のラインがピタリと揃います。
• Auto Layoutの入れ子構造
  Figmaで組む際は、縦並びと横並びのAuto Layoutフレームを柔軟にネストし、各カードの幅指定を「Fill container」に設定しておくと、レスポンシブの検証が非常にスムーズになります。

4. CSS Gridを使ったレスポンシブ実装コード

フロントエンドへの引き継ぎや実装時は、CSSの display: grid を使用するのが最もスマートです。

/* PC表示：3列のBentoグリッド */
.bento-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* メインカード：2列分を結合 */
.bento-card--featured {
  grid-column: span 2;
}

/* スマホ表示：1列にスタック */
@media (max-width: 768px) {
  .bento-container {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .bento-card--featured {
    grid-column: span 1;
  }
}

スマホ表示時のポイントは、「HTMLのソースコード順で最も重要なカードを先頭に置いておくこと」です。画面幅が狭まって1列に並んだ際、一番伝えたい価値がファーストビューに自然と収まるようになります。

5. 実務で遭遇した失敗と「Grid Grazing（視線迷子）」の防ぎ方

魅力的なBentoグリッドですが、過去に自分がダッシュボードを設計した際、手痛い失敗をしたことがありました。

とにかく情報を四角い枠に敷き詰めたところ、ユーザーテストで「全部が目立っていて、どこから見ればいいのか分からない」という指摘を受けてしまったのです。

デザイン心理学では、カードの強弱がないために視線があちこち彷徨ってしまう現象を「Grid Grazing（グリッド放牧型スキャン）」と呼びます。

これを防ぐための対策は以下の2つです。

• 主役カードを「1枚だけ」決める
  全体の25〜40%程度の面積を1つのキラーカードに割り当て、視線の最初の着地点（アイキャッチ）を作ります。
• 背景色や塗りにメリハリをつける
  すべてのカードを同じ白やグレーにするのではなく、主役カードだけにアクセントカラーや淡いグラデーションを敷くことで、優先度を一瞬で直感させることができます。

グラデーションカラーがダサい原因は？Figmaで濁らない配色ルール【2026】

Bentoグリッドの主役カードを際立たせる「ソフトグロー」や、濁らない美しいグラデーションの作り方を解説します。

6. まとめ：Bentoグリッドを使いこなす

Bentoグリッドは、単なるトレンドの四角形ではなく、「複雑な情報をわかりやすく届けるための強力なレイアウト手法」です。

• 参考にする: AppleやLinearのように、強弱とマイクロインタラクションを観察する。
• 計算する: (ベースユニット × N) ＋ ガター の計算を守り、ラインのズレを防ぐ。
• 主役を作る: Grid Grazingを避けるため、全体の視線を誘導するメインカードを1つ決める。

「情報量が多くて画面が散らかりがち……」という場面に出会ったら、ぜひ今回のルールや事例を参考にBentoグリッドを取り入れてみてください。

情報を詰め込みすぎず、余白を活かしてすっきりと整理するレイアウトの基本を学びたい方は、以下の書籍も手元に置いておくと役立ちます。

次のステップ：あわせて深掘りしたい知見

Bentoグリッドの発展形や、UIの質感・触感表現をさらに学びたい方は、以下の記事もぜひ参考にしてみてください。

【2026年最新】ブループリントデザイン（Blueprint Design）とは？設計図風UIの特徴・作り方と活用事例

こんにちは！UIデザイナーのYunyです。 最近、SNSでスキのないピカピカのグラフィックを見て「綺麗だけれど、なんだか息苦しい」と感じたことはありませんか？AIが完璧な画像を瞬時に作れる今、私たちはツルッとしたデザイン …
続きを読む “【2026年最新】ブループリントデザイン（Blueprint Design）とは？設計図風UIの特徴・作り方と活用事例”

The post Bentoグリッド（Bento UI）とは？参考サイト事例とFigmaでの作り方 first appeared on デザペディア.