FigmaでUIを組む際、オートレイアウトは欠かせない機能です。
ボタンの余白調整から複雑なカードレイアウトまで、整然としたデザインを素早く構築できます。

しかし、通知バッジや閉じるボタンのように「要素の上に少し重ねたい」場面で手が止まったことはないでしょうか。
オートレイアウトの中にそのまま要素を追加すると、横のテキストや画像が押し出されて全体のレイアウトが崩れてしまいます。

そこで活躍するのが、Figmaの絶対配置（Absolute position）です。
本記事では、絶対配置の基本的な設定場所から、親フレームの伸縮に追従させる制約（Constraints）のルール、実務で頻出する3大パターンの作り方まで分かりやすく解説します。

なぜオートレイアウトで「重ねる」と崩れてしまうのか？

オートレイアウトは、Web標準のFlexbox（フレキシブルボックス）と同じ考え方で設計されています。
フレーム内の子要素に対して「横並び（水平）」または「縦並び（垂直）」の方向性を与え、一定の余白（Gap）を保って順番に並べるのが基本動作です。

この仕組み上、フレーム内にあるすべての要素はレイアウトの専有面積を持ちます。
そのため、アバターの右上に通知用の小さな赤丸を置こうとすると、オートレイアウトはその赤丸を「並列に並ぶ1つの要素」として認識し、隣のユーザー名テキストを横へ押し出してしまうのです。

絶対配置機能が実装される以前は、この課題を回避するために無理な工夫が必要でした。
バッジを配置するためだけに余計なフレームを何重にもネストしたり、マイナスマージンを使って強引に位置を戻したりしていた方も多いのではないでしょうか。

自分自身も過去の実務で、複雑にネストされたフレームを組んでしまい、後からの修正でデータ構造が破綻して手戻りになった経験があります。
絶対配置を活用すれば、不要なフレームのネストを排除し、極めてシンプルな構造で重ね合わせを実現できます。

Figmaの「絶対配置（Absolute position）」はどこにある？基本操作と有効化手順

絶対配置を使いこなす第一歩は、設定アイコンの正確な位置を把握することです。
機能自体は非常にシンプルですが、アイコンの場所が少し控えめなため、初見では見落としやすい位置にあります。

設定ボタンは、オートレイアウトフレーム内の子要素を選択した際、右サイドバーの「Frame」または「Position」プロパティの右上に表示されます。
四角形の上に十字のクロスヘアが重なったようなアイコンが目印です。

1. 重ねたい子要素を選択する: オートレイアウトフレーム内にあるバッジやアイコンを選択します。
2. 位置・サイズ指定欄を確認する: 右サイドバー最上部のプロパティ（X, Y, W, H）を見ます。
3. 「絶対配置」アイコンをクリックする: 欄の右上にある「四角と十字のアイコン（Absolute position）」をクリックします。

アイコンをクリックすると、その要素の枠線表示が通常の水色から青い点線（または制約ライン付きの枠）に変化します。
左サイドバーのレイヤーパネルでも、通常のレイヤーアイコンから「十字マーク付きのアイコン」に切り替わり、絶対配置が有効になったことが確認できます。

絶対配置をオンにした瞬間、その要素は親フレームの整列計算から完全に切り離されます。
キャンバス上でドラッグして好きな位置に動かしても、周囲のテキストやボタンが押し出されることは一切ありません。

また、位置の微調整は矢印キー（カーソルキー）で行えます。
Shift + 矢印キー で10px単位、矢印キー単体で1px単位で移動できるため、アバターのフチにぴったり重なる位置へ正確に配置できます。

レスポンシブでずらさない！「制約（Constraints）」の連動ルール

絶対配置を使った直後に最も多くの人が直面するトラブルが、「親フレームの横幅を変えたら、バッジが変な位置に取り残される」という問題です。
せっかくカードの右上にバッジを置いたのに、カード幅を広げるとバッジだけが左側に固定されたまま動かない現象が起きます。

このズレを防ぐ鍵となるのが、制約（Constraints）の設定です。
絶対配置を有効にした要素は、通常のオートレイアウト設定（FillやHug）ではなく、親フレームのどの端を基準に固定するかという「制約」によって位置が決まります。

右サイドバーの「Constraints」セクションを開くと、上下左右の固定位置を指定するボックスが表示されます。
意図した挙動を実現するために、配置したい場所に合わせて以下の基準を設定してください。

例えばカード右上に閉じるボタンを配置する場合、制約を「Top」かつ「Right」に設定します。
こうすることで、親フレームの横幅をどれだけ伸縮させても、常にカードの「右上端からの距離」が一定に保たれ、美しいレスポンシブ動作が維持されます。

また、親フレーム自体の設定が「Hug contents（中身に合わせる）」か「Fill container（親に合わせる）」かも確認しておきましょう。
親フレームが適切に伸縮する設定になっていれば、絶対配置された要素も意図した基準点に完璧に追従します。

実務で即効！絶対配置を使う3大定番パターン

ここからは、実務のUIデザインで絶対配置を日常的に活用する3つの定番パターンと、具体的な作成手順を紹介します。
いずれもコンポーネント化して汎用的に使い回せる設計です。

1. アバター・ベルアイコンの通知バッジ（右上固定）

ユーザーのプロフィールアイコンやヘッダーの通知ベルに、未読を知らせる赤いドットや数字バッジを重ねるパターンです。
ベースとなるアイコン自体をオートレイアウト化しておくと、最小限の手順で構築できます。

1. アバター画像を用意する: 40×40pxのアバター画像を配置し、フレーム化しておきます。
2. 通知ドットを作成する: 10×10pxの赤い円形シェイプを作り、白で2pxの枠線をつけておきます。
3. アバターのフレーム内に入れる: 作成したドットをアバターのフレーム内へドラッグします。
4. 「Absolute position」をオンにする: ドットを選択し、右サイドバーで絶対配置ボタンをクリックします。
5. 制約を「Top & Right」にする: Constraints（制約）で右上固定を指定します。
6. 右上の角へ配置する: アバターの右上端に少し重なる位置へ移動させます。

ドットの外側に親フレームの背景色と同じ色（白など）で2px程度の枠線（Stroke）をつけておくと、重なった境界がくっきりと見やすくなり、視認性が大幅に向上します。
アバターの画像が変更されても、バッジの重ね位置は常に右上に固定されます。

2. カード右上のフローティングアクション（お気に入り・閉じる）

プロダクト一覧カードの右上にお気に入り（ハート）ボタンを置いたり、モーダルカードの右上に閉じる（×）ボタンを配置する構成です。
カード全体を1つのオートレイアウトフレームで組みながら、ボタンだけを独立して浮かせる手法をとります。

1. カードの土台を組む: カード全体のオートレイアウトフレーム（縦並び・Padding 16px等）を用意します。
2. アクションボタンを作る: 32×32pxの丸型ボタン（ハートアイコン等）を作成します。
3. カードフレーム内に入れる: ボタンをカードのオートレイアウト内へドラッグして配置します。
4. 「Absolute position」をオンにする: ボタンを選択し、右サイドバーで絶対配置ボタンを有効化します。
5. 制約を「Top & Right」にする: Constraintsで右上固定を指定します。
6. 右上の定位置に合わせる: カードの右上端から12pxや16pxの内側余白を開けた位置へ配置します。

この設計の大きなメリットは、カード内のテキスト本文が何行に増減しても、右上のボタン位置がコンテンツ量に影響を受けない点にあります。
タイトルが2行から3行に伸びても、お気に入りボタンは常にカード右上の定位置に留まり続けます。

3. ステータスタグ・リボンの重ね配置（左上はみ出し）

ECサイトの商品カードや記事カードでよく見られる、「NEW」「おすすめ」「SALE」といったラベルをカードのフチに重ねるパターンです。
カードの内側余白を無視して、少し外側へはみ出させるようなリッチな表現も簡単に作れます。

1. ステータスラベルを作る: テキスト・背景色・角丸を組み合わせた「NEW」などのラベルコンポーネントを作成します。
2. 対象カード内へ配置する: ラベルを商品カードや記事カードのフレーム内へ入れます。
3. 「Absolute position」をオンにする: ラベルを選択し、右サイドバーで絶対配置を有効化します。
4. 制約を「Top & Left」にする: Constraintsで左上固定を指定します。
5. カード角にはみ出して配置する: カードの左上角に合わせ、少し外側へはみ出るよう座標を調整します。

少し左上にはみ出させる場合は、X座標やY座標に負の数値（マイナス値）を指定するか、カードの左上角（X: 0, Y: 0）にぴったり揃えます。
絶対配置であれば、カード本体のパディング（内側余白）に干渉されることなく、狙った位置へ自由にレイアウトできます。

重なり順（Z-index）とレイヤー管理のポイント

絶対配置を使う際、もう1つ知っておくべき仕様が「重なり順（スタッキング順序）」のコントロールです。
配置したバッジが画像やテキストの下に隠れてしまい、表面に出てこないトラブルを防ぐ知識を押さえておきましょう。

レイヤーパネルの並び順と表示の優先度

Figmaでは、左サイドバーのレイヤーパネルにおいて「上にあるレイヤーほど画面の手前（前面）」に表示されるのが基本原則です。
絶対配置した要素が他のコンテンツの背面に隠れてしまう場合は、レイヤーパネルでその要素をフレーム内の最上位にドラッグして移動させてください。

また、オートレイアウトフレーム全体の設定としてCanvas stacking（キャンバスの重なり順）が存在します。
オートレイアウトの詳細設定（「…」アイコン）内にある「Canvas stacking」で、以下のいずれかが選択可能です。

• Last on top（デフォルト）: 後から並んだ要素（レイヤーパネルで下にある要素）が手前に重なる
• First on top: 先に並んだ要素（レイヤーパネルで上にある要素）が手前に重なる

通常はデフォルトのままで問題ありませんが、アバターの重ね合わせ表示などと併用する際は、この設定が意図した表示順になっているか確認してください。

エンジニア連携を見据えたレイヤー命名

デザインデータを開発チームへ引き渡す際、絶対配置を使った要素のレイヤー名が整っていると、実装が非常にスムーズになります。
Figmaの絶対配置は、CSSにおける position: absolute; と1対1で対応しています。

レイヤー名を単なる「Frame 12」や「Ellipse 4」のまま放置せず、badge-unread や btn-close のように役割が一目で分かる名前に整えておきましょう。
Dev Mode（開発モード）を参照するエンジニアも、親フレームに対する相対配置関係を迷わずコードへ落とし込めるようになります。

次のステップ：あわせて深掘りしたいFigma設計術

オートレイアウトの絶対配置を習得した後は、オートレイアウト全体の構造設計や、カードUIにおける情報設計をあわせて学ぶことで、コンポーネント設計の完成度が一段と高まります。

オートレイアウトの基本原則やネストの破綻を防ぐルールについては、以下の記事で体系的にまとめています。

Figmaオートレイアウト完全ガイド！崩れないネストと余白設計

オートレイアウトの基礎からネスト構造、余白設計までを体系的に解説した完全ガイド。

また、絶対配置を活用する代表格である「カードUI」の枠線・影・余白のバランス設計については、こちらの解説もぜひ参考にしてください。

カード型UIの設計ルール｜枠線・影・余白の使い分けと情報整理術

カードUIの枠線・影・余白の使い分けと、破綻しない情報設計のルールを徹底解説。

終わりに

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

Figmaのオートレイアウトは、並列の配置だけでなく「絶対配置」と「制約」を組み合わせることで、真の柔軟性を発揮します。
通知バッジや閉じるボタンを無理なフレーム分割で作っていた方は、ぜひ今日から絶対配置を取り入れてみてください。

データの構造が非常にシンプルになり、日々のレイアウト調整や修正作業がスムーズになるはずです。

The post Figmaオートレイアウトの絶対配置｜バッジを崩さず重ねる実務設定 first appeared on デザペディア.

最近、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 デザペディア.

そもそも、アプリデザインとWebデザインって考え方が違うのでしょうか？
同じFigmaを使って同じようにボタンやテキストを並べているのに、出来上がった画面を実機で触ると操作しづらかったり、エンジニアとの会話が噛み合わなかったりした経験のある方は少なくないと思います。

結論からいうと、両者は思考の前提から異なります。
今回は、WebとアプリのUIを両方担当してきた自分の実務経験をもとに、考え方が大きく切り替わる4つのポイントを整理して解説します。

なぜ同じUIデザイナーでも、アプリとWebで設計判断が分かれるのか

画面をデザインするツールとしてFigmaが定着した現代では、Webもアプリも同じキャンバス上で作業が進みます。
そのため、作業の表面だけを見ていると「どちらも画面を作る仕事だから大差ない」と思われがちです。

しかし、実際にユーザーが画面を前にしたとき、置かれている状況や心理的な距離感は全く異なります。
Webは検索エンジンやSNSリンクから訪れる「一過性の訪問」が多く、数分で目的の情報を得て離脱していくのが日常的な姿です。

一方で、スマートフォンにインストールされたアプリは、ホーム画面から直接起動される「日常の道具」です。
ユーザーは毎日何度もそのアプリを開き、同じ操作を繰り返して特定のタスクを効率よく片付けようとします。

このように、一過性の情報探索を支えるのか、反復的なタスク遂行を支えるのかによって、デザインの優先順位は大きく変わります。
Webでは「初見でのわかりやすさや回遊性」が重視されますが、アプリでは「無駄な手数の少なさや指に馴染む軽快さ」が最重要視されます。

実務で意識しておきたい主な前提の違いを、まずは一覧で整理してみましょう。

どちらが優れているという話ではなく、向き合っているプラットフォームの文脈が異なるということです。
この文脈の差が、日々のUI設計において具体的にどのような思考の違いを生むのか、4つのポイントに分けて掘り下げていきます。

考え方が変わる4つの設計ポイント

1. 操作の最小単位が違う｜マウスの1pxと親指の44pt

最も身体的でダイレクトな違いは、ユーザーが画面に触れる「操作の解像度」です。
Webの基本操作であるマウスクリックは、画面上のわずか1pxを正確に指定できる精密な針のような操作です。

そのため、PC向けのWebデザインでは12px程度の小さなテキストリンクであっても、ユーザーは迷わずクリックできます。
さらに、カーソルを乗せた瞬間に色が変わるホバー（:hover）によって、「ここは押せる場所だ」と事前に確認できる利点があります。

対して、スマートフォンのアプリ操作は太い親指の腹で行われます。
人間の指先の接触面は直径およそ10〜15mm（押し込む力によって変動）あり、マウスの精度とは比較にならない広い面積で画面に触れることになります。

ここでアプリデザイナーが常に警戒しなければならないのが、「オクルージョン（視覚遮蔽）」と呼ばれる現象です。
指で画面を押した瞬間、そのターゲットや下部にあるラベルは、自分自身の指によって物理的に隠れて見えなくなってしまいます。

そのため、アプリでは「押した瞬間に指の隙間からフィードバックが見えること」や、「触れた瞬間に即座に反応するアクティブ状態」の設計が欠かせません。
また、見た目のデザインが小さなアイコンであっても、透明なタップ領域を上下左右に広げて44pt四方を確保する配慮が必須となります。

ボタンの具体的なタップ領域や優先度設計については、以下の記事で実務数値を交えて詳しく解説しています。
スマホ向けUIを組む際の基礎知識として、あわせて参考にしてみてください。

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

Primary・Secondaryなどの優先度設計から、Apple HIGやMaterial Designが定める44pt/48pxのタップ領域基準まで、ボタンUIの必須ルールを網羅して解説します。

2. ナビゲーション構造が違う｜URL回遊と画面スタック

2つ目の大きな違いは、画面と画面がどのように繋がっているかという「情報構造（IA）」の捉え方です。
Webサイトの画面遷移は、ページ同士がハイパーリンクで自由に行き来できるメッシュ型のネットワーク構造をしています。

すべての画面には固有のURLが割り振られており、検索結果やSNSから下層ページへ直接着地することが当たり前に起こります。
また、ブラウザ自身が「戻る」「進む」ボタンを備えているため、デザイナーが画面内に戻るボタンを自作しなくても過去の履歴を遡れます。

一方、ネイティブアプリの世界にはブラウザの戻るボタンが存在しません。
アプリ内の画面遷移は、画面の上に新しい画面を重ねていく「スタック構造（Push / Pop）」で管理されます。

一覧画面から詳細画面へ進むと、詳細画面が右からスライドして上に重なり（Push）、左上の戻るボタンや画面端のスワイプ操作で剥がれて元の画面に戻ります（Pop）。
この「自分が今どの深さにいて、どう戻ればいいか」を、画面内のUIパーツだけで完全に自己完結させなければなりません。

さらに、アプリの移動拠点として最も重要なのが画面下部の「ボトムタブバー」です。
主要な3〜5個の機能を行き来するタブバーがあることで、ユーザーは親指一本でアプリ全体の現在地を把握できます。

また、設定変更やデータ入力のような一時的なタスクでは、下から覆い被さる「モーダル」や「ボトムシート」を活用して文脈を保持します。
画面遷移を安易に増やさず、今の文脈を切り離さないための使い分けルールは以下の記事にまとめています。

モーダル・ボトムシートの使い分け基準｜スマホで失敗しないUI選定ルール

モーダル、ボトムシート、ドロワーの特性と使い分け基準を整理。スマホ画面で操作性を損なわないためのUI選定ルールを解説します。

3. 状態（State）の管理粒度が違う｜一時的な表示と永続的な同期

3つ目の違いは、ユーザーが入力したデータや画面の状態（State）に対する考え方です。
従来のWebページでは、ユーザーがブラウザをリロードしたり別タブを閉じたりすると、入力中の状態は一旦リセットされるのが基本でした。

もちろん現代のWebアプリケーションではセッション保持が進んでいますが、それでも「URLの文字列が画面状態を表している」という前提が根底にあります。
特定の検索条件やページ番号はURLのパラメータに含まれるため、リンクを共有すれば同じ状態を他者と共有できます。

これに対して、アプリの状態管理ははるかに永続的で複雑です。
ユーザーは電車を降りるときにアプリを突然バックグラウンドに落とし、数時間後や数日後に何事もなかったかのように作業を再開します。

そのため、アプリデザイナーは「画面が中断されても直前のスクロール位置や入力途中のテキストが保持されているか」を常に意識します。
さらに、通信が不安定な地下鉄や機内モードでの利用を想定した「オフライン状態のUI」も設計対象に含まれます。

正常に動いているときの画面だけでなく、電波が切れた瞬間や端末のカメラ権限が拒否された瞬間など、無数のエッジケースが存在します。
こうした状態の変化を漏れなく洗い出し、エンジニアと共通言語を持って仕様を詰められるかどうかが、アプリUIの堅牢さを左右します。

4. 制約の捉え方が違う｜レスポンシブの柔軟性とOSガイドラインの適合

4つ目の違いは、デザインルールをどこに準拠させるかという「制約の捉え方」です。
Webデザイナーの主戦場は、あらゆるディスプレイサイズに適応する「レスポンシブ設計」にあります。

スマートフォンの横幅375pxから、大画面モニターの1920px以上まで、単一のHTML/CSSで柔軟にレイアウトを伸縮させなければなりません。
その代わり、サイト内のボタンの形やメニューの開き方、タイポグラフィの組み方には制約がなく、ブランド独自の世界観を自由に表現できます。

一方、アプリデザイナーが最も尊重すべき規範は、AppleのHIG（Human Interface Guidelines）やGoogleのMaterial Design 3です。
iOSやAndroidには、それぞれユーザーが長年身体で覚えた「OS特有の作法」が存在します。

例えば、iOSでは画面左端からのスワイプで前の画面へ戻れることや、画面上部をタップすると最上部まで瞬時にスクロールすることが暗黙の了解です。
ここでデザイナーが独自性を出そうとして、左端スワイプに全く別の機能を割り当ててしまうと、ユーザーは強烈なストレスを感じます。

iOSにおけるボタンの最小サイズやタイポグラフィ階層など、現場で参照すべき基準は以下の記事で整理しています。
OSの思想を味方につけて設計を進めるための足がかりとして活用してください。

Apple HIG実務ガイド｜タップ領域44pt・文字11pt基準とiOSの基本原則【2026】

AppleのHuman Interface Guidelines（HIG）を実務に落とし込むための重要スペックと3大原則を整理。タップ領域44ptや文字11pt基準の根拠を解説します。

Webからアプリへ領域を広げる際につまずきやすい3つの落とし穴

Webデザインの経験が豊富な方ほど、その成功体験ゆえにアプリ設計で引っかかりやすい落とし穴がいくつか存在します。
過去の自分自身も実際に直面して手戻りを経験した、代表的な3つのポイントを紹介します。

1. 1画面に情報を詰め込みすぎてしまう

Webのランディングページやメディア記事では、縦に長くスクロールさせて大量の情報を一度に読ませる構成が好まれます。
しかし、これをそのままアプリに持ち込むと、ユーザーは「今この画面で何をすればいいのか」を見失ってしまいます。

アプリはタスクを処理するための道具であるため、1画面につき1つの主要アクション（Primary CTA）に絞り込むのが鉄則です。
補足的な情報や詳細設定は、アコーディオンや別画面、シートを使って段階的に開示していく引き算の思考が求められます。

2. 「とりあえず標準に乗る」か「独自UIを作る」かで判断を誤る

Webの世界では、ハンバーガーメニューや独自のドロップダウンなど、ブランドの個性を示す独自ナビゲーションが歓迎されます。
一方アプリでは、OSが定める標準部品（タブバー、ナビゲーションバー、アクションシートなど）にまず乗るのが基本です。

ただし、「標準に従わなければいけない」とも限りません。
アプリの特性上、毎日使い込むリピーターが前提となるため、ユーザーがUIの作法を習熟するにつれて独自の操作体系を自然に受け入れていくことがあります。
TikTokの縦スワイプによる動画切り替えや、Instagramのフィード・リール・DM間をスワイプで切り替える横スワイプナビゲーションは、OSの標準タブバーとは異なる独自実装ですが、広く定着しています。

問題は「独自UIを作るかどうか」ではなく、「その独自UIに必然性があるかどうか」です。
機能的な理由や体験上の強い優位性がなく、ただ「Webと同じにしたい」「デザイン的に面白くしたい」だけで標準から外すと、初回ユーザーの離脱を招きます。
逆に言えば、必然性を突き詰めたうえで独自UIを選ぶのは、アプリデザインならではの醍醐味の一つです。

3. キーボード表示とサムゾーンの考慮を忘れてしまう

Webでは、テキスト入力欄をタップしてもレイアウト自体が激変することはほとんどありません。
しかしアプリでは、ソフトウェアキーボードが画面下半分を覆うため、入力前と入力中でユーザーが見える画面が大きく変わります。

「送信ボタンがキーボードの裏に隠れて押せない」「入力欄が見えなくなってスクロールできない」といった問題はアプリ実機テストで頻出します。
フォーム設計の段階からキーボード表示時のレイアウトを想定しておく必要があります。

あわせて、親指が自然に届く範囲（サムゾーン）の考慮も見落としがちです。
画面上部に主要なボタンを置くと、片手操作では親指が届かず操作しづらくなります。
Webでは画面上部にナビゲーションを置くのが一般的ですが、アプリでは重要なアクションほど画面下部に配置するのが基本です。

アプリとWebを両方設計するデザイナーが心がけたい視点

ここまでWebとアプリの違いを対比してきましたが、両者は決して相容れない対立関係にあるわけではありません。
現代の多くのサービスでは、Webサイトで新規ユーザーを集客し、アプリへ誘導して継続利用してもらうという連携が一般的です。

Webを設計するときは「初見のユーザーがいかに迷わず、安心してブランドの価値を受け取れるか」に集中します。
そしてアプリを設計するときは「毎日使うユーザーの手足を煩わせず、いかにノイズのない快適な道具になれるか」に集中します。

同じデザイナーであっても、対象とする画面が「どの利用文脈に置かれているのか」を意識的に切り替えることが大切です。
それぞれのプラットフォームが持つ特性と強みを理解することで、どちらの現場でも説得力のあるUIを提案できるようになります。

終わりに

WebとアプリのUIデザインは、使うツールこそ共通化されてきましたが、画面の裏側にある設計思想は今も大きく異なります。
それぞれのプラットフォームの文脈を理解したうえで設計に臨むことが、手戻りの少ない開発連携と使い手にとってのストレスのない体験につながります。

The post Webデザイナーがアプリ設計で詰まる4つのポイント｜タップ44pt・画面スタック・サムゾーン first appeared on デザペディア.

フォームの完了率を大きく左右するのは、機能要件ではなく細かいUI設計です。
自分がデザインレビューをする中でも、「ラベルがない」「エラーのタイミングがおかしい」という指摘はフォーム設計でとくに多いと感じます。
この記事では、現場ですぐに使えるフォームUXの基本ルールを4つの切り口で整理しました。

プレースホルダーをラベル代わりに使ってはいけない理由

フォーム設計でよく見るミスのひとつが、入力欄の外にラベルを置かず、プレースホルダー（入力欄内の薄いテキスト）だけで項目名を伝えようとするパターンです。
見た目がすっきりするように見えますが、UXの観点では複数の問題が生じます。

NN/g（Nielsen Norman Group）の調査でも、ラベルを入力欄の上部に常時表示する「top-aligned label」が、完了時間の短縮とエラー率の低下において最も効果的だと報告されています。

プレースホルダーのみにした場合の問題点は3つあります。

まず、入力を始めるとプレースホルダーが消えてしまうため、「今何を入力しているのか」が分からなくなります。
特に「姓」「名」が並ぶ項目や、複数欄が縦に並ぶ長いフォームでは、入力途中に項目名を確認したくなった際にカーソルを抜かなければなりません。

次に、「空欄」と「入力例が表示されている状態」の区別がつきにくくなります。
薄いグレーのテキストを「まだ何も入力されていないフィールド」と「例が書かれているフィールド」として即座に判断するのは、ユーザーに余分な認知コストがかかります。

最後に、エラーが発生した際の修正が難しくなります。
「半角英数字で入力してください」などのヒントがプレースホルダーに書いてあると、文字を打った瞬間にそのヒントが消えてしまい、どう直せばいいかが分からなくなります。

正しい設計は、ラベルを入力欄の上部に独立して配置し、常に表示し続けることです。
プレースホルダーはあくまで補助として、「YYYY/MM/DD」や「例：yamada@email.com」のようなフォーマットヒントに限定して使いましょう。

バリデーションのタイミング設計

バリデーション（入力値の検証）をいつ行うかは、フォームUXの体験を大きく変えます。
主に3つのパターンがあり、それぞれ適切な使い場面が異なります。

基本はフォーカスアウト（blur）時の検証を選ぶのがおすすめです。
ユーザーがその項目への入力を「終えた」というタイミングでのみエラーを表示するため、入力の途中で急かされる感覚がありません。

「送信時のみ」を選ぶと、全項目を入力し終えて初めて複数のエラーが一斉に表示されます。
どこを直せばよいかを一から探し直す必要があり、完了までの手間が大幅に増えます。

「入力中リアルタイム」は、使い方を誤るとユーザーが入力し終える前にエラーが出てしまい、必要以上にストレスを与えます。
例外として、一度エラーが出たフィールドは、修正中のリアルタイム判定に切り替えるのが適切です。
ユーザーが修正の途中で「今どこまで直せたか」を確認しながら入力できるようになり、正しく入力できた瞬間にエラーが解除されます。

パスワードの強度メーターも、入力中のリアルタイム判定が正当なユースケースです。
セキュリティ要件への気づきをサポートする目的であり、エラーではなくフィードバックとして機能しています。

エラーメッセージの書き方と配置ルール

エラーが発生した際の表示方法は、修正のしやすさに直結します。

配置の鉄則は「エラーが発生したフィールドの直下」です。
フォームの上部や下部にまとめて表示するパターンを見ることがありますが、ユーザーは「どのフィールドがエラーなのか」を探しながらスクロールしなければならず、修正の手間が増えます。
フィールドとエラーメッセージが視覚的に近いほど、ユーザーの目の動きが減り修正しやすくなります。

文言は「何が間違いか」ではなく「どうすれば直るか」を伝えます。

よくあるNGとOKの対比を整理しました。

色だけに頼らない設計も重要です。
赤いボーダーや赤いテキストはエラーの視覚的なサインとして機能しますが、色覚多様性のあるユーザーには色の区別が難しい場合があります。
赤いボーダー＋エラーアイコン（!マーク）＋テキストメッセージの3点をセットで使うことで、色に頼らない設計が実現できます。

また、エラーが出ても入力済みの内容は保持するのは基本ルールです（※セキュリティ上再入力を求めるパスワード項目などを除く）。
せっかく入力した一般項目がリセットされてしまうフォームは、ユーザーの大きな離脱要因となります。

アクセシビリティの観点では、aria-invalid="true" をエラー状態のフィールドに付与し、エラー文言要素に role="alert" や aria-describedby を紐付けることで、スクリーンリーダーへの対応ができます。
フォーム設計の際には実装チームとともに確認しておきたいポイントです。

モバイルで使い勝手を上げるキーボード指定

スマートフォンでフォームを入力する際、適切なキーボードが自動で起動するかどうかで入力体験が大きく変わります。
HTMLの type 属性や inputmode 属性を正しく設定することで、ユーザーに必要なキーボードを自動的に表示できます。

type="number" を安易に使うのは避けましょう。
数値入力欄だからといって type="number" を使うと、ブラウザが数値の増減ボタン（スピナー）を表示したり、指数表記の「e」が入力できてしまったりします。
郵便番号や電話番号、カード番号など「数字しか入力させたくない」フィールドには、type="text" に inputmode="numeric" を組み合わせるのが適切です。

実際の現場でも、type 属性の指定を忘れたまま実装が進んでiOSで全角数字が入力されてしまうトラブルを経験したことがあります。
設計の段階でFigmaの注釈（Annotation）やSpec資料にキーボードタイプを明記しておくと、実装時のミスを防ぎやすくなります。

デザイン側でできることとして、Figmaコンポーネントのプロパティや説明欄に「inputmode="numeric"」のように属性を記載しておくと、開発チームへの引き渡し時に漏れが出にくくなります。

フォームUXの5つのチェックリスト

設計が終わったタイミングで、以下の5点を確認しておきましょう。

• ラベルは常時表示されているか（プレースホルダーのみでラベルを代替していないか）
• バリデーションはフォーカスアウト時に動作するか（送信時のみ・入力中リアルタイムの乱用はないか）
• エラーはフィールドの直下に表示されているか（フォームの上部・下部にまとめて表示していないか）
• エラーメッセージは「どう直せばよいか」まで書かれているか（「エラーです」で終わっていないか）
• モバイルで適切なキーボードが起動するか（type / inputmode の指定漏れはないか）

フォームは一見シンプルな画面に見えますが、ユーザーが実際に情報を入力して送信するという「最も重要なインタラクション」が発生するUIです。
この5点を押さえるだけで、完了率が変わる実感があります。

フォームを通過するユーザーのバリデーション設計については、マイクロインタラクションの考え方とも密接に関係しています。
フィードバックの設計に興味がある方は、あわせてこちらも参考になります。

マイクロインタラクション設計入門｜4つの構成要素と200msルール

トリガー・ルール・フィードバック・ループの4要素と200msルールを中心に、UIフィードバック設計の基本をまとめました。

また、フォームのエラー状態や送信完了状態など、コンポーネントの「状態（States）」を設計段階で考慮しておくことも重要です。

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

ボタンの優先度設計・44ptのタップ領域基準・Disabled状態の扱い方まで、フォームと合わせて確認したいボタンUIの基本設計ルール。

まとめ：フォームUXは細部の仕様定義で決まる

フォームのUI設計は見た目以上に「状態変化」と「仕様の詰め」が体験を左右します。
ラベルの常時表示、フォーカスアウト時のバリデーション、解決策を示すエラーメッセージ、モバイルのキーボード指定など、どれも設計段階でFigmaや仕様書に一言添えるだけで実装の手戻りを大きく防げます。

まずは次回のフォーム設計やデザインレビューで、今回のチェックリストを活用してみてください。

The post 入力フォームUI設計の4原則｜離脱を防ぐラベル・エラーUX first appeared on デザペディア.

UIデザインの配色は、ボタンやアクセントカラーばかりに目が向きがちです。
しかし、実際の画面を見渡すと、面積の60%以上を占めているのは背景やカード、枠線、テキストといったグレー（無彩色）の要素です。

過去の自分も、画面内のグレーをカラーピッカーでその場しのぎに選んでいました。
その結果、画面内に20種類以上のグレーが乱立し、カードの境界が背景に埋もれたり、文字の視認性が落ちて開発現場への引き渡しで大きな手戻りを経験しました。

今回は、画面を濁らせずに美しく整理するためのUIグレー設計の原則と4層の明度ステップを解説します。
感覚的な色選びから脱却し、誰が見ても破綻しない配色ロジックを身につけていきましょう。

1. なぜUIのグレー選びは失敗しやすいのか？画面が散らかる2つの原因

UIデザインにおいて、グレーは最も使用頻度が高いにもかかわらず、最も破綻しやすい要素です。
画面の統一感が損なわれる背景には、設計段階における明確な2つの原因が存在します。

原因①：感覚的なカラーピッカー選択によるグレーの増殖

1つ目の原因は、新しいコンポーネントを作るたびにカラーピッカーで感覚的にグレーを拾ってしまうことです。
「この枠線は少し薄くしたい」「この文字は少し濃くしたい」と場当たり的に数値を調整すると、プロジェクト全体で無数のグレーが乱立します。

自分自身の失敗談としても、エンジニアから「この枠線とあの枠線で微妙にカラーコードが違うが、どちらが正しい仕様なのか」と指摘された経験があります。
ルールがないまま選ばれたグレーは、デザインシステムの保守性を著しく低下させ、実装現場の手戻りを生む要因になります。

原因②：彩度0%の「無機質なグレー」による画面のくすみ

2つ目の原因は、完全な無彩色（RGBの値がすべて等しい彩度0%のグレー）を使ってしまうことです。
白背景の上に彩度0%の純粋なグレーを置くと、人間の目には冷たく不自然に映り、画面全体がくすんで見える現象が起きます。

自然界や日常の印刷物において、純粋な無彩色はほとんど存在せず、周囲の光や環境の色を微細に反射しています。
デジタル画面上でも、周囲のブランドカラーと全く関係を持たない無彩色は反発し合い、洗練された印象を損ねてしまうのです。

2. 洗練されたUIを作る「グレー設計の3原則」

画面のくすみを防ぎ、破綻しない配色を作るためには、感覚ではなく論理に基づいたルールが必要です。
実務で即座に活用できるグレー設計の3原則を押さえておきましょう。

原則①：ブランドカラーの「色味（Tint）」をわずかに加える

グレーを設計する際は、完全な無彩色を避け、ブランドカラーの彩度を2%〜5%程度混ぜた色味のあるグレー（Tinted Gray）を採用します。
ブルー系のサービスであれば青みを帯びたスレートグレー、温かみのあるサービスであれば暖色を含んだストーン系を選ぶのが基本です。

わずかな色味を含めることで、主要ボタンやブランドアイコンと背景・枠線が自然に馴染みます。
画面全体に上質な一体感と奥行きが生まれ、プロダクト固有のトーン＆マナーを無彩色エリアからも表現できます。

原則②：「真っ黒（#000000）」を避け、濃紺・チャコールで止める

テキストの最も濃い色として、背景の白（#FFFFFF）に対して真っ黒（#000000）を配置することは推奨されません。
コントラスト差が極端すぎると、文字のエッジがチカチカとして視覚的な疲労を引き起こし、長時間の閲覧に適さないUIになってしまいます。

実務では、最も濃いテキストであっても、明度10%〜15%前後の濃紺やチャコールグレーを上限にします。
十分な可読性を維持しながら、画面全体のコントラストを柔らかく整え、目への刺激を抑えた読みやすいレイアウトを実現できます。

原則③：1画面で同時に使うグレーの役割を制限する

画面内で同時に使用するグレーは、無制限に増やさず、あらかじめ役割ごとにステップ数を固定します。
背景、カード面、境界線、テキストの各役割に対して、明確な明度差を確保して運用します。

隣接する要素同士で明度が近すぎると、境界線がぼやけて要素の分離が難しくなります。
役割ごとに階層を厳格に割り振ることで、誰が画面を見ても直感的に情報の境界を判別できる状態を作ることができます。

3. 破綻しない「4層の明度ステップ」と役割分担

UIの無彩色は、画面の奥行きと情報の優先度に応じて4つの階層に分類できます。
この4層の明度ステップを明確に分けることで、迷いのないUI構造を構築できます。

第1層：Background（背景色 / 最明ステップ）

第1層は、画面全体の下地となるキャンバスの背景色です。
真っ白ではなく、わずかに色づいた淡いペールトーン（ペールブルーや淡いスレートグレーなど）を配置します。

この淡い背景色を用意することで、その上に乗る白いカード領域が際立ちます。
画面全体に落ち着いたトーンを敷くことが、次層のカードを浮き立たせるための土台になります。

第2層：Surface（面・カード / ピュアホワイト）

第2層は、情報コンテンツを乗せるカードやコンテナの面領域です。
背景色の上に配置するサーフェスには、基本的にピュアホワイト（#FFFFFF）を採用します。

淡い背景色と白い面の明度差によって、枠線に頼らなくても直感的なグルーピングが成立します。
ユーザーの視線が自然とコンテンツ面に集まり、情報のまとまりを一瞬で把握できる視覚階層が完成します。

第3層：Border & Divider（枠線・境界線 / 中明度ステップ）

第3層は、カードの外枠やテーブルの行を分ける仕切り線の領域です。
枠線はコンテンツの邪魔をしてはならないため、主張しすぎない中明度のグレーを選定します。

実務での目安として、隣接する面に対してコントラスト比1.2〜1.5:1程度の薄い線（線幅1px程度）を推奨します。
背景と同化して消えてしまわない視認性を保ちつつ、画面のノイズにならない端正な輪郭を定義します。

第4層：Text & Icon（文字・記号 / コントラスト確保ステップ）

第4層は、情報をユーザーへ正確に伝えるテキストとアイコンの領域です。
文字情報の中核を担うため、アクセシビリティ基準を満たす十分なコントラスト比を確保します。

実務では、以下の3段階に分類して明度をコントロールします。

• Primary（主要見出し・本文）: 濃紺チャコールで最も濃く設計し、WCAG 4.5:1以上の高コントラストを確保
• Secondary（補足テキスト・メタ情報）: 中明度グレーで優先度を一段落とし、3:1〜4.5:1程度で設計
• Disabled（非活性・プレースホルダー）: 意図的にコントラストを下げ、操作不能な状態を直感的に伝達

4. Figma Variablesで組むニュートラルトークン実践手順

整理した4層のグレーをプロダクト全体で一貫して運用するには、デザインシステムとしてのトークン化が不可欠です。
FigmaのVariables（変数）を活用した2層トークン構造の実践手順を解説します。

手順①：Primitive Tokens（基本値）のスケール定義

まずは、純粋な色の物差しとなるPrimitive Tokens（プリミティブトークン）を定義します。
Gray-50からGray-900まで、明度ステップを段階的に9〜10段階で並べたパレットを作成します。

この段階では「ボタン用」「テキスト用」といった用途は考えず、均等な明度のグラデーションを客観的に並べます。
ブランドカラーの青みを数パーセント混ぜた独自のカラースケールを固定することで、デザインの基礎パレットが確立します。

手順②：Semantic Tokens（役割）へのマッピング

次に、実際のコンポーネントへ適用するSemantic Tokens（セマンティックトークン）を作成します。
Primitive Tokensで定義した数値を、画面上の「役割（意味）」に紐付けてマッピングします。

実務で基本となる代表的なマッピング例は以下の通りです。

• bg/canvas: 背景色として「Gray-50」を指定
• surface/card: コンテンツ面として「#FFFFFF」を指定
• border/default: 標準の枠線として「Gray-200」を指定
• text/primary: 主要テキストとして「Gray-900」を指定
• text/secondary: 補足情報として「Gray-600」を指定
• text/disabled: 操作不能テキストとして「Gray-400」を指定

直接カラーコードを入力せず、Semantic変数を介してスタイルを当てる設計を徹底します。
将来的にダークモードへ対応する場合や、ブランドリニューアルの際にも、トークンの参照先を変更するだけで画面全体を一括更新できる柔軟性が得られます。

実践例：デザペディアの配色構造から学ぶ背景とボックスの関係

自社メディア「デザペディア」の実際のUI構造でも、この明度ステップの考え方を厳格に適用しています。
デザペディアでは、記事本文エリアを含むページ全体の背景色に淡いブルー（#F5F7FF）を採用しています。

そのため、記事内で要約や補足情報をグルーピングするボックス（サーフェス）を配置する際は、背景と同化しないよう真っ白（#FFFFFF）を敷き、自然なドロップシャドウやごく薄いボーダーを添えて階層を分離しています。
淡い下地と白いボックスの明度差を論理的に設計することで、画面のノイズを抑えながら、読者の視線を重要コンテンツへスムーズに誘導できる視覚階層を担保しています。

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

UIのグレー設計を確立した後は、カラーパレット全体の比率や、カードコンポーネントへの落とし込み、アクセシビリティ基準の検証へとステップを進めましょう。
実務で直結する以下の関連記事もあわせて確認してみてください。

UI全体のカラーバランスを見直し、無彩色のベースカラーとアクセントカラーの調和を保ちたい方へ。

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

UIデザインでアクセントカラーを使いすぎて画面が散らかる原因と解決策を解説。「60-30-10の法則」をUI構造に落とし込み、破綻しない配色設計を網羅します。

今回設計したグレーの背景・面・枠線を活用し、美しいカードコンポーネントを組むレイアウト術を知りたい方へ。

カード型UIの設計ルール｜枠線・影・余白の使い分けと情報整理術

カード型UIの設計ルールと情報整理のコツを現役デザイナーが解説。枠線・影・背景色・余白の境界線4パターンの使い分けから、詰め込みすぎを防ぐ視覚階層まで具体的に整理します。

テキストやアイコンのグレーがWCAG基準を満たしているか、視認性と美しさを両立させる判定基準を深掘りしたい方へ。

UIアクセシビリティ基礎｜コントラスト比4.5:1とデザイン性の両立ルール

コントラスト比4.5:1を守りながら洗練されたUIを作るための実践ルール。WCAG 2.2基準と美しい色設計を両立させる具体的な手法を解説します。

終わりに

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

UIデザインにおいて、グレーは単なる「色味のない隙間埋め」ではありません。
情報の優先順位を整理し、ユーザーを迷わせずに導くための最も重要な骨格です。

感覚的なカラーピッカーの指定をやめ、4層の明度ステップとわずかな色味（Tint）を味方につけるだけで、画面の洗練度は格段に向上します。
まずは手元のプロジェクトで、散らばっているグレーを整理し、整然としたニュートラルトークンを構築してみてください。

The post UIのためのグレー配色ルール｜背景・枠線・文字の破綻しない明度設計 first appeared on デザペディア.

プロダクトの機能を充実させようとするほど、画面上の入力項目やボタンの数は増えていきます。
しかし、親切心のつもりですべての選択肢を1画面に並べてしまうと、かえってユーザーを混乱させてしまいます。

自分自身も以前、業務管理画面のUI設計で大きな失敗をした経験があります。
「設定項目をすべて見せておけば迷わないだろう」と考え、1画面に20項目以上の入力欄や注釈テキストを詰め込んで提案したところ、クライアントから「どこから手を付ければいいか分からない」「威圧感があって使うのが怖い」と指摘され、全面的なレイアウト見直しになりました。

この「多機能にしたいが、画面はシンプルに保ちたい」という矛盾を解決する原則が、プログレッシブディスクロージャー（Progressive Disclosure：段階的開示）です。
今回は、情報過多を防ぐ基本概念から、実務で使える4大展開パターン、隠しすぎて失敗しないための境界線ルールまで具体的に整理します。

1. プログレッシブディスクロージャーとは？情報過多を防ぐ基本概念

プログレッシブディスクロージャーは、ユーザビリティの第一人者であるヤコブ・ニールセン（Jakob Nielsen）が体系化したインタラクション設計の標準原則です。
画面の初期状態では「80%のユーザーが日常的に使う基本的な情報・操作」だけをクリーンに表示し、残りの「20%のユーザーだけが求める高度な設定や二次的情報」は、ユーザーが能動的にクリックやタップを行ったときに初めて表示します。

この設計が極めて有効な理由は、UIデザインが常に抱えている「使いやすさと多機能性のジレンマ」を論理的に解消できる点にあります。
初心者にとっては画面がシンプルで操作を学習しやすく（Learnability）、上級者にとっては必要なときに高度な機能へ素早くアクセスできる効率性（Efficiency of use）を両立できます。

なぜ「全部並べるUI」は破綻するのか？

画面上に選択肢を無秩序に並べると、人間の脳は強い認知負荷（Cognitive Load）を感じて処理落ちを起こします。
心理学における「ヒックの法則」が示す通り、人間が選択肢の中から1つを選び出すまでの時間は、画面上の選択肢の数が増えるほど対数的に増加します。

さらに、人間のワーキングメモリ（作業記憶）が一度に保持できる情報数は、一般に「4±1個」程度と限られています。
最初から20個の設定項目を視界に突きつけられると、ユーザーは何が重要なのかを判断できず、操作を諦めて画面を閉じてしまいます。

そのため、優れたUIデザイナーは「画面に何を置くか」よりも「初期表示から何を隠し、どのタイミングで見せるか」に細心の注意を払って設計します。
必要な情報が必要な瞬間にだけ目の前に現れる状態を作ることが、プログレッシブディスクロージャーの本質です。

2. 段階的に開示する4大UIパターンと使い分け基準

プログレッシブディスクロージャーを実際の画面に落とし込む際、情報の性質や作業コンテキストに応じて適切なUIパターンを選択する必要があります。
実務で頻繁に使われる代表的な開示パターンは、以下の4つのアプローチに分類されます。

① インライン展開（アコーディオン / 詳細トグル）

同一画面のレイアウトを保ったまま、ボタンの押下によってその場（インライン）で領域が広がるパターンです。
「高度な設定を表示」「FAQの回答を見る」のように、前後の文脈を保ったまま少しの追加情報を取り出したい場面に最も適しています。

コンポーネントを設計する際は、アコーディオンの開閉状態（展開前 / 展開後）を縦並びのレイアウトで構築します。
開閉トリガーには回転するChevronアイコン（下向き・上向き）を添え、クリックで領域が展開することを視覚的に示します。
ただし、展開時にページ全体の高さが変わり、後続の要素が下へ押し出されるため、頻繁に開閉する項目を縦に何十個も連続して並べる構成は避ける必要があります。

② レイヤード展開（モーダル / ボトムシート / ドロワー）

現在の画面の上に半透明のオーバーレイを敷き、別のサーフェス（階層）を重ねて詳細情報を表示するパターンです。
複雑な絞り込みフィルターや、項目の詳細編集、確認ダイアログなど、元の画面から一時的に集中を切り替えて行う作業に適しています。

レイヤード展開を採用する場合、PCでは画面中央に浮遊するモーダル、スマートフォンでは親指で操作しやすいボトムシート（ハーフモーダル）を活用するのが実務の標準です。
作業が完了したら「保存」または「閉じる」操作で迷わず元の画面へ復帰できるため、ユーザーが現在地を見失うリスクを最小限に抑えられます。

③ ステップ式展開（マルチステップフォーム / ウィザード）

アカウント登録や購入手続き、初期設定などの長い入力プロセスを、論理的な手順（ステップ1、ステップ2、ステップ3）に分割して順番に開示するパターンです。
全30項目の入力欄が1画面に連なる巨大なフォームを、1画面あたり3〜5項目ずつに分解して提示することで、ユーザーの心理的抵抗を大幅に軽減できます。

ステップ式展開を機能させるためには、全体のステップ数と現在の進捗を示す「ステッププログレスバー」の併設が必須です。
「あとどれくらいで完了するのか」という全体像が見えているからこそ、ユーザーは途中で挫折せずに次のステップへと進むことができます。

④ オンデマンド展開（ツールチップ / ヘルプアイコン / ポップオーバー）

画面上のテキストに添えられた「？」アイコンやリンクに対して、ホバーまたはタップしたときだけ小さな吹き出しを表示するパターンです。
専門用語の解説や、パスワードの文字数条件、入力例の補足など、「知りたい人だけが読めばよい補助情報」をスマートに配置できます。

ツールチップの最大のメリットは、主要なUIのレイアウトや文字量を一切圧迫しない点にあります。
ただし、スマートフォンのようなタッチデバイスではホバー操作が存在しないため、タップで表示・枠外タップで非表示となるインタラクションを正しく設計することが重要です。

段階的開示の4大UIパターン比較まとめ

3. 隠しすぎて失敗しないための「3つの境界線ルール」

プログレッシブディスクロージャーは強力な設計原則ですが、使い方を誤ると「必要な機能が見つからない不親切なUI」に転落します。
画面をシンプルにしたい一心で重要な情報まで奥深くに隠してしまう設計ミスを防ぐため、以下の3つの境界線ルールを実務の基準として設定してください。

ルール①：80%のユーザーが必要とするPrimary情報は絶対に隠さない

プログレッシブディスクロージャーの基本は、「主要タスク（Primary）は露出させ、例外タスク（Secondary）を段階化する」ことです。
大多数のユーザーが利用する検索窓、主要アクションボタン、基本的な入力項目をアコーディオンやモーダルの奥に隠してはなりません。

自分自身も過去のレビューで、「画面をスッキリさせたい」という理由から、配送先住所の入力フォーム全体をアコーディオンの中に隠してしまったことがあります。
その結果、ユーザーテストで「どこに入力すればいいのか分からない」と全員が迷ってしまい、Primary情報の不可視化がどれほど致命的かを実感しました。
隠してよいのは、あくまで「知らなくても目的を達成できる高度なオプション」だけに限定します。

ルール②：開示トリガーのラベルは具体的に記述する

ボタンやリンクのテキストが「詳細」「その他」「設定」のように抽象的すぎると、ユーザーはその中に何があるのかを推測できません。
中身が分からないボタンをわざわざクリックしてくれるユーザーはごく少数です。

開示トリガーのラベルには、展開されるコンテンツの内容を具体的に予告する文言を用います。
たとえば、「詳細」ではなく「詳細な通知タイミングを設定する」、「その他」ではなく「配送日時の指定オプションを開く」のように記述します。
何が表示されるのかが事前に予測できるからこそ、ユーザーは目的を持って安心してクリックできます。

ルール③：展開状態から迷わず戻れる「閉じる導線」をセットにする

情報を開示するトリガーを設置したら、それと対になる「折りたたむ」「閉じる」ための導線を必ずセットで設計します。
一度展開したアコーディオンが二度と閉じられなかったり、開いたモーダルの閉じるボタンが見当たらなかったりすると、ユーザーは画面を元に戻せずストレスを抱えます。

アコーディオンであれば再度のクリックで元のコンパクトな状態に戻り、モーダルであれば右上「×」ボタンだけでなく背景オーバーレイのタップやESCキーでも閉じられる可逆性を担保します。
「いつでも初期のクリーンな状態に戻れる」という安心感があるからこそ、ユーザーは自由に画面を探索できます。

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

プログレッシブディスクロージャーをさらに深く実務に応用するためには、関連する認知心理学の基礎理論や、パーツ設計のルールをあわせて押さえておくことが効果的です。
以下の記事でも、画面設計の根拠となる基準を詳しく解説しています。

人間が選択肢に直面したときの意思決定負荷や、情報のチャンキング原則を理論的に学びたい方は、こちらの記事も参考にしてみてください。

UIデザインに効く認知心理学の法則5選｜ヒック・フィッツ・ヤコブの実務応用

UIデザインの意思決定を感覚論から論理的な設計へ変える認知心理学の法則5選（ヒック、フィッツ、ヤコブ、ミラー、フォン・レストルフ）を解説。現場のFigma実務ですぐに使える設計基準を網羅します。

段階的開示をカードコンポーネントの中で展開する際の枠線やシャドウ、余白のバランス感覚を掴みたい方は、以下の記事で具体的な整理基準を確認できます。

カード型UIの設計ルール｜枠線・影・余白の使い分けと情報整理術

カード型UIの設計ルールと情報整理のコツを現役デザイナーが解説。枠線・影・背景色・余白の境界線4パターンの使い分けから、詰め込みすぎを防ぐ視覚階層、クリック領域のアクセシビリティまで具体的に整理します。

レイヤード展開（モーダルやボトムシート）をスマートフォン実務で破綻なく実装したい場合は、以下の使い分けマトリクスが役立ちます。

モーダル・ボトムシートの使い分け基準｜スマホで失敗しないUI選定ルール

スマホUIでモーダル、ボトムシート（ハーフモーダル）、ドロワー、画面遷移のどれを使うべきか迷っていませんか？操作の不可逆性と情報量の2軸で整理したUI選定マトリクスを現役デザイナーが詳しく解説します。

まとめ：段階的な情報開示が使いやすさと多機能性を両立させる

UIデザインにおける「親切さ」とは、持っている情報をすべて一度に差し出すことではありません。
初期表示ではユーザーの目的達成に必要な主要タスクを明快に整え、詳細な設定や補助情報を求めるユーザーにだけ適切なタイミングで次の選択肢を提供する設計が大切です。

画面が情報過多で整理がつかなくなったときは、ぜひ「どの情報を初期に表示し、何を段階的に開示できるか」という視点でレイアウトを見直してみてください。

The post 段階的開示（プログレッシブディスクロージャー）入門｜情報過多を防ぐUI設計 first appeared on デザペディア.

Webサイトやアプリの画面を作っていると、必ずと言っていいほど登場するのがカード型UIです。
複数の情報を1つのブロックにまとめられるため、非常に便利で扱いやすいコンポーネントですよね。

しかし、いざ作ってみると「なぜか画面全体が重苦しい」「要素を詰め込みすぎて何を見ていいか分からない」と悩むことも少なくありません。
自分自身もデザインを始めた当初は、見やすさを求めて枠線と影を両方重ねてしまい、画面を野暮ったくしてしまった経験がありました。

今回は、実務で迷いがちなカード型UIの設計ルールと、情報の詰め込みすぎを防ぐレイアウトの基本を整理してお伝えします。

そもそもカード型UIの役割とは？（リストUIとの違いと認知の区切り）

UIデザインにおけるカードとは、現実世界の「名刺」や「トランプ」のように、それ単体で意味が完結する情報のまとまりを指します。
ユーザーは画面を一目見ただけで「ここからここまでが1つの情報だ」と直感的に把握できるため、認知の負荷を大幅に軽減できるのが大きな特徴です。

カードUIが適している3つの場面

カードUIを採用すべき代表的なシチュエーションは、以下の3点です。

• 画像とテキストをセットで見せたい場合（ECサイトの商品一覧、ブログ記事一覧、ポートフォリオなど）
• カードごとに完結したアクションがある場合（予約カードの「確定する」、タスクカードの「完了」など）
• 異なるデバイス幅に柔軟に対応させたい場合（PCでは3カラム、スマホでは1カラムに並び替えるグリッド設計）

カードUI vs リストUIの使い分け

一方で、すべての情報をカードにすれば良いわけではありません。
カードUIは1つの情報あたりの専有面積が大きくなるため、一覧性や比較のしやすさという点ではシンプルなリストUIに劣る場合があります。

両者の視覚的な特徴と使い分けの基準を整理したのが、以下の図解です。

例えば、受信トレイやファイル一覧のような「目的の項目を素早く探したい画面」に大きなカードを並べてしまうと、スクロールの手間が増えてユーザーにストレスを与えてしまいます。
「ビジュアルで引きつけて選ばせたいならカード、素早く見比べて探させたいならリスト」という使い分けが、最初の判断基準になります。

枠線・影・背景色・余白｜カードの境界線を作る4つのアプローチ

カードUIを設計する際、最もデザイナーを悩ませるのが「境界線をどう表現するか」という点です。
境界線の作り方には大きく分けて4つのアプローチがあり、それぞれ視覚的な重みや適したシーンが異なります。

各アプローチの見た目と推奨ユースケースをまとめた全体像がこちらです。

1. 枠線（ボーダー）：境界を最も厳格に区切る

枠線は、カードの輪郭をはっきりと定義する最も直接的なアプローチです。
フォームの入力欄やダッシュボードの数値パネルなど、情報の境界線を厳格に区切りたい場面に適しています。

枠線を使う際の実務的なポイントは、線の太さと濃さを最小限に抑えることです。
濃いグレーや太い線を引いてしまうと、線自体の主張が強くなりすぎて中のコンテンツ（テキストや画像）を邪魔してしまいます。
背景色に対してわずかにコントラストがつく無彩色（実務の目安として1pxの薄いグレー）を選び、控えめに佇ませるのが上品に仕上げるコツです。

2. 影（ドロップシャドウ）：階層とクリック可能性を示す

ドロップシャドウは、カードを背景からふわりと浮き上がらせることで、画面内の「Z軸（奥行き・階層）」を表現する手法です。
人間は浮いている要素に対して「触れる」「押せる」というアフォーダンス（操作の手がかり）を感じるため、クリッカブルなカードに最適です。

影を設計する際は、真っ黒で硬い影を落とすのではなく、拡散（Blur）を広めにとった透明度の低い影を重ねるのが現在のモダンUIの標準です。
また、ホバー時に影の広がりやY軸オフセットをわずかに変化させることで、心地よいフィードバックを生み出すことができます。

3. サーフェス背景色（面のコントラスト）：軽快でモダンな境界

枠線も影も使わず、背景色との面差だけで境界を作る手法です。
例えば、ページ全体の背景色を淡いペールブルーやライトグレーにし、カード自体の背景を真っ白（#ffffff）に設定することで、自然な浮き上がりを作ります。

このアプローチは装飾線や影のノイズが一切ないため、画面全体を非常にすっきりとクリーンに見せられるのが最大のメリットです。
情報量の多いダッシュボードや、現代的なWebサービスのUIで広く採用されています。

4. 余白のみ（近接のグルーピング）：引き算の美学

ゲシュタルト心理学の「近接の法則」を利用し、線も影も使わずに適切なホワイトスペース（余白）だけでコンテンツの塊を認識させる徹底した引き算のアプローチです。
カード同士の間隔をしっかり空けることで、装飾に頼らずとも情報のグループが自然と視界に入ってきます。

ミニマルで洗練された印象を与えられますが、余白のバランス設計が甘いと「バラバラのテキストが散らばっているだけ」に見えてしまうため、後述する余白比率の厳格な管理が必要です。

境界線アプローチの使い分け早見表

実務でよくある失敗が、「枠線と濃い影の両方を適用してしまう」パターンです。
線と影が喧嘩して画面がごちゃつく原因になるため、基本は「枠線主体」「影主体」「面差主体」のいずれか1つを主役に選び、引き算で設計することを心がけてみてください。

情報の詰め込みすぎを防ぐ！カード内レイアウトの視覚階層ルール

カードUIがダサく見えたり使いづらくなったりする最大の原因は、1枚のカードの中に情報を詰め込みすぎることです。
日付、カテゴリタグ、著者アイコン、お気に入りボタン、要約文、シェアボタン……と要素を足していくと、カード自体が「小さなWebサイト」のように複雑化してしまいます。

カード内の視覚階層と余白のバランスをまとめた基本モデルがこちらです。

カード内のレイアウトを美しく保つためには、以下の3つの原則を意識します。

原則1：1カード1メッセージに絞る

カードの主目的は「詳細画面への導線」や「1つの明確な意思決定」です。
カード単体で完結させようとせず、ユーザーが次に進むために本当に必要な情報だけを厳選する必要があります。

例えばブログカードであれば、「魅力的なアイキャッチ」「クリックしたくなる見出し」「カテゴリ」の3つがあれば十分です。
長文の要約や複数のSNSシェアボタンは、詳細ページに入ってから見せれば問題ありません。

原則2：上から下へ流れる視覚階層（Visual Hierarchy）

カード内の要素は、ユーザーの視線が上から下へ自然に流れるように配置します。

• ① アイキャッチ画像: 最上部で視線をキャッチし、コンテキストを一瞬で伝えます。
• ② カテゴリタグ: 情報のジャンルを素早く定義します。
• ③ タイトル / 見出し: 最も太く濃い文字で主メッセージを伝えます。
• ④ 補助テキスト / 抜粋: 必要最小限の補足情報を2〜3行でスマートにまとめます。
• ⑤ フッターアクション: 日付やPrimaryボタンなど、意思決定のアクションを促します。

視線の流れがジグザグに行ったり来たりしないよう、「見る ➔ 読む ➔ 判断する」という自然な認知プロセスに沿って縦方向に整列させることが大切です。

原則3：外側余白 ≧ 内側余白 ＞ 要素間余白の距離感ルール

カードUIの洗練度を決定づけるのが、余白（Spacing）の相対的な比率です。
美しいカードコンポーネントを観察すると、必ず以下の不等式が成り立っています。

外側の余白（カード同士の間隔） ≧ 内側の余白（Padding） ＞ 要素間の余白（Gap）

• カード同士の間隔（Margin / Grid Gap）: 最も広く取り、カード同士が独立した塊であることを示します（目安: 24px〜32px）。
• カードの内側余白（Card Padding）: コンテンツが枠線にぶつからないよう、十分な呼吸空間を確保します（目安: 16px〜24px）。
• 内部の要素間隔（Internal Gap）: タイトルと本文の間など、関連する要素同士はキュッと近づけて近接感を保ちます（目安: 8px〜12px）。

この距離感のメリハリが崩れ、内部の要素間隔とカード外側の間隔が同じになってしまうと、どこからどこまでが1つのグループなのかが脳内で即座に判別できなくなります。
「関連するものは近づけ、別グループは離す」というゲシュタルトの近接を意識するだけで、ぐっと整った印象に仕上がります。

全体クリック vs 個別リンク｜アクセシビリティを損なわない実装パターン

カードUIの実装において、デザイナーとエンジニアの間で最も議論になりやすいのが「クリッカブル領域（タップ範囲）の設計」です。

ユーザー視点では「カードのどこを押しても詳細ページへ飛べる」のが最も操作しやすく、スマホでの操作性（Fittsの法則）にも優れています。
しかし、単純にカード全体を <a> タグで囲んでしまうと、アクセシビリティやHTML仕様の面で重大な問題が発生します。

カード全体をaタグで囲む2つの落とし穴

• スクリーンリーダーでの全文章読み上げ問題:
  カード全体がリンクになっていると、画像Altから本文まですべてが1つの長大なリンクテキストとして読み上げられます。
  音声読み上げを利用するユーザーにとって、何のリンクかを判断する大きな負担になります。
• インタラクティブ要素のネスト（リンク内リンク）の禁止:
  カード内に「お気に入りボタン」や「タグ」が含まれる場合、<a> タグの中に別の <a> や <button> を入れることはHTMLの仕様違反です。
  スマートフォン等でタップした際に意図しないリンクが発火し、誤タップの原因になります。

解決策：擬似要素（Stretch Link）を活用した設計

この問題を美しく解決する実務的なベストプラクティスが、CSSの擬似要素を使った「Stretch Link（ストレッチリンク）」パターンです。

Bootstrap等でも標準化されているこの手法では、カード内で最も重要な要素である「タイトルのリンク（<h3><a href="...">タイトル</a></h3>）」の ::after 擬似要素を position: absolute; inset: 0; でカード全体に広げます。

/* カード本体を相対配置 */
.ui-card {
  position: relative;
}

/* タイトルリンクの擬似要素をカード全面に拡張 */
.ui-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* カード内の個別ボタンやタグは前面に配置して独立操作を保証 */
.ui-card__favorite-btn,
.ui-card__tag {
  position: relative;
  z-index: 2;
}

この設計にすることで、以下のメリットが同時に得られます。

• セマンティクスとアクセシビリティの保持: スクリーンリーダーはタイトルのみを簡潔なリンクとして読み上げます。
• カード全面のクリック性: ユーザーはカードのどこをタップしても詳細ページへ遷移できます。
• 個別アクションの共存: お気に入りボタンやタグは z-index: 2 で前面に出ているため、カード全体の遷移を発火させずに単独でクリックできます。

デザイナー側でもこの構造を理解しておき、「カード全体をクリック可能にしつつ、お気に入りボタンは独立して押せる仕様にする」といったエンジニアとの共通言語を持っておくことが、手戻りのないスムーズな実装につながります。

Figmaオートレイアウトでのカードコンポーネント設計手順

最後に、Figmaで実際にカードコンポーネントを組む際の手順と、破綻しないオートレイアウト（Auto Layout）の組み方を整理します。

1. 3層のネスト構造で組む

カードコンポーネントは、1つのフレームに全要素を平坦に並べるのではなく、意味のある3つの階層に分けてネストします。

• 最外枠コンテナ（Card Root）: 縦方向のオートレイアウト。角丸（目安: 12px〜16px）、クリップコンテンツ、背景色、枠線または影を設定。Paddingは上下左右均等。
  – 画像フレーム（Image Container）: 幅 Fill、高さ Fixed（アスペクト比16:9等）。画像をFillで配置。
  – コンテンツフレーム（Body Container）: 縦方向のオートレイアウト。幅 Fill、高さ Hug。タイトル、タグ、本文をまとめる。
  – フッターフレーム（Footer Container）: 横方向のオートレイアウト。幅 Fill、高さ Hug。日付やアクションボタンを両端揃え（Space Between）で配置。

2. リサイズ挙動は「幅 Fill / 高さ Hug」が基本

カードをレスポンシブに伸ばしたりグリッドで並べたりする際、最も重要なのがリサイズ挙動の設定です。

• 横方向（Width）: カード内部のすべてのテキストやコンテナを Fill container に設定します。これにより、親のグリッド幅が変化してもテキストが自動で折り返され、枠外にはみ出しません。
• 縦方向（Height）: 最外枠およびコンテンツコンテナを Hug contents に設定します。テキストが2行や3行に増えた場合でも、カード全体の高さがコンテンツ量に応じて自然に伸び縮みします。

3. テキストの行数制限（Truncate）のルールを決めておく

実務の運用でよくあるのが、「タイトルが長すぎてカードの高さがバラバラになり、グリッドの並びがガタつく」という問題です。

デザインシステムの段階で、「タイトルは最大2行まで表示し、超える場合は3点リーダー（...）で省略する」「抜粋文はPCで3行、スマホで非表示」といったテキストの行数制限ルールをチームで決めておきましょう。
Figmaのテキストプロパティで Truncate text（省略表示）と最大行数を設定しておくと、モックアップ作成時にも実データに近い自然な検証が行えます。

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

カード型UIのレイアウトやコンポーネント設計をさらに極めたい方は、以下の関連記事もぜひ参考にしてみてください。

カード型レイアウトの発展形として、昨今のWebで広く活用されているのがBento UIです。
四角形のカードを美しく敷き詰めるグリッド設計の基本を整理していますので、ぜひあわせてご覧ください。

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

AppleやMicrosoftが採用して話題のBentoグリッド（Bento UI）。カードを美しく敷き詰めるグリッド設計の基本とFigmaでの作成手順を整理して解説します。

カード内の余白崩れを防ぎ、コンテンツ量に応じて自動伸縮させるにはAuto Layoutの理解が欠かせません。
PaddingやGapの具体的な数値設定から崩れないネスト手順まで詳しく解説しています。

Figmaオートレイアウト完全ガイド！崩れないネストと余白設計

Figmaオートレイアウトの基本と崩れないネスト設計を解説。Padding・Gapの設定からHug・Fillの使い分けまで、実務でのコンポーネント構築手順を網羅。

カード内に配置するPrimaryボタンや補助アクションの優先度設計に迷った際は、こちらの記事が役立ちます。
Apple HIG準拠の44ptタップ領域の確保や、ユーザーが迷わない視覚的ヒエラルキーの作り方を整理しています。

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

ボタンの視覚的優先度（Primary / Secondary / Tertiary）の決め方と、Apple HIG準拠の44ptタップ領域の設計基準を解説。

まとめ：境界線の引き算と適切な視覚階層が使いやすいカードUIを作る

カード型UIは、一見するとシンプルな四角形の組み合わせに見えますが、枠線や影の選び方、情報の引き算、そしてクリック領域のアクセシビリティなど、細部への配慮によって使い心地が大きく変わるコンポーネントです。

「情報を詰め込む箱」ではなく「ユーザーの思考を助ける認知の区切り」としてカードを捉え直すことで、画面全体の秩序と一覧性が高まります。
実務の画面設計において、境界線の足し算を見直し、目的に合った適切なアプローチを選定してみてください。

The post カード型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 デザペディア.

Figmaで画面を設計するとき、ダミーデータが綺麗に入った「理想的な画面」ばかりを作り込んでしまうことはありませんか？
自分も以前は、整ったカードやリストが並ぶ完成状態ばかりを熱心に作っていました。

しかし実際のプロダクトでは、ユーザーが最初に目にするのはデータが1件も入っていない初期画面です。
ここでユーザーが迷ってしまうと、操作を諦めてそのまま離脱してしまう大きな要因になります。

1. なぜ「何もない画面」でユーザーは離脱してしまうのか？

1-1. 理想状態（Ideal State）ばかりを作り込む落とし穴

UIデザインの実務では、どうしても情報が満たされた「理想状態（Ideal State）」から作業を進めがちです。
魅力的なサムネイル画像や整ったテキストを配置したアートボードは、見栄えも良く完成度が高く見えます。

しかし、ユーザーが新しくアプリを使い始めた瞬間は、登録したタスクもブックマークも何ひとつ存在しない状態です。
画面上に何も表示されない初期状態を考慮していないと、開発フェーズで画面が真っ白なままリリースされてしまいます。

自分も以前、ステージング環境の実機を触って初めて「最初は何もない状態だった」と気づき、慌てて追加設計した経験があります。
デザインツール上の見た目だけでなく、データが存在しない初期段階の体験まで設計することが大切です。

1-2. 「データがありません」が引き起こす3つの不安

エンプティステートで最も避けるべきなのは、画面中央に「データがありません」とだけ書かれたテキストを置くことです。
このような素っ気ない表示は、ユーザーにいくつかの心理的負担を与えてしまいます。

第一に、システムの通信障害や不具合が起きたのではないかという誤解を招きます。
第二に、自分が直前の操作を間違えてしまったのではないかという操作への不安を与えてしまいます。
そして第三に、次に何をすれば画面が進むのかが分からず、操作を諦めて離脱してしまいます。

何もない画面は、単なる空白ではなく「ユーザーが次に取るべき操作へ誘導する画面」として設計する必要があります。
画面の状態を体系的に捉える考え方については、こちらの記事でも詳しく整理しています。

モーダル・ボトムシートの使い分け基準｜スマホで失敗しないUI選定ルール

スマホUIでモーダル、ボトムシート（ハーフモーダル）、ドロワー、画面遷移のどれを使うべきか迷っていませんか？操作の不可逆性と情報量の2軸で整理したUI選定マトリクスや、親指操作・キーボード干渉を防ぐ実装の黄金律を現役デザイナーが詳しく解説します。

2. 押さえておきたいエンプティステートの3大パターン

エンプティステートが発生する状況は、大きく3つの基本パターンに分類できます。
それぞれの文脈によってユーザーの心理や求める情報が異なるため、適切なアプローチを選ぶことが重要です。

2-1. パターン1：初回利用時（First Use / Onboarding）

アカウントを作成した直後や、特定の機能を初めて開いたときに表示される初期登録前の状態です。
プロジェクト一覧、作成したドキュメント、お気に入りリストなどが該当します。

このパターンの主な目的は、機能の価値を端的に伝え、ユーザーに「最初の一歩」を踏み出してもらうことです。
単に「項目がありません」と伝えるのではなく、作成すると何ができるのかを説明し、明確な作成ボタンを配置します。

NotionやSlackなどの優れたプロダクトでは、初回画面にテンプレートの選択肢や作成ガイドを表示しています。
何もない初期画面を前にユーザーが迷ってしまわないよう、最初のアクションを後押しする設計が有効です。

2-2. パターン2：タスク完了・消去後（User Cleared / Inbox Zero）

ユーザーがすべての未処理タスクを片付けたときや、通知をすべて確認したときに表示される処理完了の状態です。
メールアプリの「受信トレイ（Inbox Zero）」や、タスク管理ツールの「今日のタスク」などが典型例です。

この状態におけるユーザーの心理は、初回利用時とは異なり「やりきった達成感」や「安堵感」があります。
そのため、エラーや未登録のような表現ではなく、前向きな達成感を伝える演出が適しています。

「すべてのタスクが完了しました」といった前向きな完了メッセージを表示します。
必要に応じて、新しいタスクの追加や、過去の履歴を確認できる控えめな導線を添えておくと親切です。

2-3. パターン3：検索・フィルター結果ゼロ（No Results）

ユーザーがキーワード検索を実行したり、絞り込みフィルターを適用したりした結果、一致するデータが0件（検索結果0件）だった状態です。
ECサイトの商品一覧や、管理画面のデータ検索などで頻繁に発生します。

検索結果ゼロの画面で最も重要なのは、ユーザーを「行き止まり（Dead End）」に追い込まないことです。
「一致する商品はありません」で終わらせてしまうと、ユーザーはその場で探索を終了してしまいます。

検索条件をワンタップで解除できる「フィルターをクリアする」ボタンを用意することが基本です。
さらに、入力キーワードの表記揺れへの対策や、人気の検索キーワード、おすすめ商品を提示すると、離脱を防ぎやすくなります。

2-4. 【重要】混同しやすい「Error State（エラー状態）」との境界線

UI設計の実務において、エンプティステートと最も混同されやすいのが通信障害や権限不足などのエラー状態（Error State）です。
一部の解説ではエラーをエンプティの一種として扱うこともありますが、UI Stackの設計体系において両者は全く異なる状態として明確に区別されます。

エンプティステートは「画面に表示すべきデータが未登録、または合致しない状態」であり、システム自体は正常に動作しています。
一方でエラー状態は「通信の切断や権限不足によって、データの取得・処理そのものが中断された障害」です。

ユーザーの心理も「最初の一歩を踏み出したい」「探索をやり直したい」という能動的な感情から、「何が起きたのか分からない」「不具合ではないか」という不安や戸惑いへと大きく変化します。
そのため、案内すべき画面要素も全く異なります。

エラー画面では前向きな新規作成CTAではなく、客観的な原因の案内と、再読み込み（リトライ）や権限申請などの復旧導線を最優先で配置する必要があります。
「データが存在しないこと」と「データの取得に失敗したこと」を混同せず、別の画面ステートとして切り分けて設計することが重要です。

3. 離脱を防ぐエンプティステート「3つの基本構成要素」

エンプティステートを機能的な画面にするためには、視覚的な階層と情報の整理が必要です。
優れたエンプティ画面は、基本的に以下の3つの要素で構成されています。

3-1. ① 状況を伝える視覚要素（グラフィック・アイコン）

画面の中央上部に配置するイラストやアイコンは、画面の状況を直感的に把握させる役割を持ちます。
ユーザーがパッと見た瞬間に「ここは検索結果の画面だな」「タスクの一覧だな」と文脈を認識させます。

注意したいのは、複雑すぎるグラフィックや過剰に大げさな表現を避けることです。
悲しげな表情のキャラクターや警告を連想させる赤いマークは、ユーザーに失敗感を与えてしまいます。

プロダクトのトンマナに合った、シンプルで清潔感のある2Dグラフィックや淡いトーンのアイコンを採用します。
主役はあくまでユーザーのアクションであるため、視覚要素が主張しすぎないバランスを意識します。

3-2. ② 前向きで明快なテキスト（見出し＋説明文）

視覚要素のすぐ下には、何が起きているかを端的に伝える「見出し（タイトル）」と詳細を補足する「説明文」を配置します。
文字情報を2層に分けることで、ユーザーは素早く要点を理解できます。

見出しは短く、事実を前向きに表現することがポイントです（例:「最初のプロジェクトを作成しましょう」）。
説明文では、なぜその状態なのか、どうすれば解決するのかを1〜2文で具体的に案内します。

「右上のボタン、または下のボタンから追加できます」のように、物理的な操作位置を補足するのも効果的です。
ユーザーが次に取るべき行動を迷わずイメージできるよう、平易な言葉で記述します。

3-3. ③ 次のアクションへ導くCTAボタン（Primary & Secondary導線）

エンプティステートで最も重要な要素が、次の行動へ直接案内するCTAボタンです。
説明文を読んだユーザーが、その場で迷わず操作を実行できるように配置します。

初回利用画面であれば「新規作成」、検索結果ゼロであれば「フィルターをリセット」が主要アクションになります。
ボタンの文言も「OK」や「送信」のような曖昧なものではなく、「最初のタスクを作成」のように具体的に書きます。

必要に応じて、補助的なアクション（例:「テンプレートを見る」）を控えめなSecondaryボタンとして配置します。
操作の優先度を保つためのボタン設計については、こちらのガイドでも詳しく解説しています。

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

画面内の視線誘導と主要アクションを迷わせないボタンの優先度設計（Primary/Secondary）や、タップしやすい44pt基準の具体的なルールを解説します。

4. 実務で失敗しないための設計ルールと注意点

エンプティステートを実装するにあたって、現場で起こりがちな落とし穴と対策をまとめます。
画面設計の初期段階からこれらを考慮しておくことで、手戻りのない画面を作ることができます。

4-1. イラストが巨大すぎてCTAが画面外に押し出される問題

PC画面向けにデザインしたエンプティ画面をそのままスマートフォン画面に移植した際、レイアウト崩れが発生しやすいです。
イラストを大きく配置しすぎた結果、肝心のCTAボタンがファーストビューから見切れてしまいます。

スマートフォンなどの縦長画面では、イラストの縦幅をコンパクトに抑えることが必須です。
画面全体の高さに対して、イラスト・見出し・説明文・CTAボタンが1画面に収まるよう余白を計算します。

場合によっては、モバイル端末ではイラストを非表示にし、アイコンとテキスト主体の構成に切り替える判断も有効です。
画面サイズに依存せず、常に最も重要なCTAボタンがユーザーの視界に入る状態を維持します。

4-2. ユーザーを責めるような文言を避ける

テキストを作成する際は、ユーザー側に落ち度があるかのような否定的な言葉遣いを徹底して排除します。
「入力が間違っています」「検索条件が無効です」といった表現は、ユーザーに不快感を与えてしまいます。

常にシステム側の客観的な視点と、前向きな案内を意識することが大切です。
「入力内容をご確認ください」「キーワードのスペルを変えてお試しください」のように、次の操作への助言に言い換えます。

丁寧すぎる堅苦しい敬語よりも、直感的に意味を理解できる簡潔なトーンを心がけます。
表現を少し見直すだけでも、ユーザーの操作ストレスを大幅に軽減できます。

4-3. 迷ったときのエンプティステート設計判定フロー

新しい画面を設計する際、どのエンプティパターンを適用すべきか迷ったときは、以下の手順で整理します。

1. データが空である原因は何か？
   – ユーザーがまだ何も作っていない → パターン1（初回利用）：作成ボタンと価値説明を配置。
   – ユーザー自身がすべて処理し終えた → パターン2（タスク完了）：達成メッセージと次の一手を提示。
   – 絞り込み条件に一致しなかった → パターン3（検索ゼロ）：フィルター解除と検索補助を配置。
   – 通信や権限の問題である → 【対象外】Error State（エラー状態）：データ空画面ではなくエラー画面として再試行導線を配置。

ワイヤーフレーム作成の段階からこれらの状態を仕様として盛り込んでおくことで、エンジニア連携もスムーズになります。
ワイヤーフレームの組み立て手順については、こちらの記事もあわせて参考にしてみてください。

初心者向け！ワイヤーフレームの作り方完全ガイド｜要件整理からFigma手順まで

要件定義から情報設計、Figmaでの具体的なコンポーネント配置まで、手戻りを防ぐワイヤーフレームの制作フローを実践的に整理します。

5. まとめ：初期状態の考慮がプロダクトの離脱を防ぐ

エンプティステートは、単なる「データがないときの予備画面」ではありません。
ユーザーが新しくプロダクトに触れ、次に何をすべきかを迷わず判断するための重要な画面仕様です。

1. 初回利用時：機能の価値を伝え、最初の一歩を踏み出す作成CTAを用意する
2. タスク完了後：達成感を肯定し、次の行動を任意で選べる控えめな導線を添える
3. 検索結果ゼロ：条件クリアボタンや代替キーワードを提示し、行き止まりを回避する

これら3大パターンと「イラスト・テキスト・CTAボタン」の3大要素を押さえ、さらに通信障害などのエラー状態（Error State）と明確に切り分けておくことで、実装時の手戻りを防ぎ、ユーザーのスムーズな継続利用を支援できます。

終わりに

何もない初期状態の設計は、ダミーデータが揃った理想画面のデザインに比べて見落とされがちです。
しかし、仕様策定やワイヤーフレームの段階からエンプティステートを組み込んでおくことで、開発連携が格段にスムーズになり、リリース後の離脱も防ぐことができます。

今回整理した判定フローや画面構成のポイントを、日々のUI設計の実務にぜひ役立ててみてください。

参考リンク

• Nielsen Norman Group: Empty State Interface Design
• Material Design: Empty states guidelines

The post エンプティステートUI設計ガイド｜離脱を防ぐ3パターンと3つの構成要素 first appeared on デザペディア.