Glossary

border

UI Stack

UI Stack(ユーアイスタック)とは

UI Stackとは、ユーザーインターフェース(UI)を「状態(State)」の変化として捉え、あらゆる利用状況を前提に設計する考え方です。

UIは、常に完成された状態で使われるわけではありません。
初回利用時、データが存在しない場合、通信中、入力エラーなど、ユーザーはさまざまな状態を行き来します。

UI Stackは、こうした状態ごとに適切なUIを設計することで、
どの状況でも迷わず使える体験を実現するためのフレームワークです。


UI Stackの主な5つの状態

UI Stackでは、主に以下の5つの状態を考慮して設計を行います。

・Ideal State(理想状態)
 必要な情報やコンテンツが揃っている、通常の利用状態

・Empty State(空の状態)
 初回利用時や検索結果0件など、データが存在しない状態

・Error State(エラー状態)
 入力ミスや通信エラーなど、想定外の問題が発生した状態

・Partial State(不完全な状態)
 一部のデータのみ存在する、または入力途中の状態

・Loading State(読み込み中の状態)
 データ取得中など、結果がまだ表示されていない状態


なぜUI Stackが重要なのか

多くのUIは「理想状態」を前提に設計されがちですが、
実際のユーザー体験の多くはそれ以外の状態で発生します。

例えば、

・読み込み中に何も表示されず不安になる
・エラー時に何をすればよいかわからない
・データがない状態で次の行動がわからない

といった体験は、UI Stackが考慮されていないことで起こります。

UI Stackを意識することで、
どの状態でもユーザーが迷わず行動できるUIを設計することができます。


医療・ヘルスケア領域におけるUI Stack

医療・ヘルスケアのサービスでは、

・デジタルに不慣れなユーザー(特に高齢者)
・不安や緊張を伴う利用シーン
・電波状況が悪くて通信エラーが起こりやすい環境

といった特性があります。
特にPHR(Personal Health Record)アプリのような患者さんが利用するアプリにおいては、
デジタルな不慣れなユーザーが利用する可能性が高いことから、この考慮が大切になります。

そのため、

👉 理想状態ではない場面(Empty/Error/Loadingなど)の設計が極めて重要です。

例えば、

・記録がまだない場合に、次の行動をやさしく案内する
・エラー時に原因と対処をわかりやすく伝える
・読み込み中でも状況が伝わるようにする

といった配慮が、安心して使える体験につながります。


UI StackとやさしいUX

UI Stackを考慮した設計は、単に使いやすさを高めるだけでなく、

👉 「迷わない」「不安にならない」体験をつくること

につながります。

これは特に、

・デジタルに不慣れな高齢者
・はじめてサービスを使うユーザー

にとって重要です。

UI Stackに基づいたUI設計は、
誰にとってもやさしいデジタル体験の実現に寄与する考え方といえます。


関連コンテンツ

マイクロインタラクションを含むUI/UXデザイン全体については、以下のページで詳しく解説しています。
またマイクロインタラクションを含めたUI/UXの見直しや、新規サービスの体験設計については、コンサルティングとしてのご支援も行っています。

UI/UXデザイン
  UX/UIデザインの進め方を体系的に解説しています。

UI/UXデザインコンサルティング
  構想段階からのUX設計、UI設計、プロトタイピングまで一貫して支援します。

Recruit

一緒に働きませんか?

メディエイドでは、
医療ヘルスケア社会基盤を一緒に創出していく仲間を探しています。
医療ヘルスケア・プラットフォームを、
そして様々なサービスを一緒に創っていきましょう!

人材採用について

Hi, Nyansuke!

CHECK OUR PROFILE