Oil UI

5 · デザイン事例

金融・会計UIのデザイン：銀行、経費精算、請求ワークスペース

デジタルバンキング、個人家計簿、レシート照合、サブスクリプション収益、API請求の事例を比較します。金額の階層、取引の根拠、例外への対応、エクスポートフローが、それぞれの金融タスクでどう設計されているかを確認できます。

このタイプを参考にするときのポイント

ユーザーが残高を確認するのか、取引を追跡するのか、例外を処理するのかをまず区別します。金額や状態から明細までたどれるか、影響の大きい操作に結果の説明があるか、フィルターやエクスポートの際に文脈が保たれるかを確かめます。

インストール・使用ガイド →

関連ガイド

場面別プレイブック · 管理画面・デスクトップワークスペース

管理画面・デスクトップワークスペース実践ガイド

「上部にKPIカード4枚、下部に折れ線グラフ3つ」というAI管理画面の定型から抜け出す方法を、運用監視、API請求、ラボのサンプル管理などの実例から解説します。

場面別プレイブック · モバイルアプリデザイン

モバイルアプリ複数画面デザイン実践ガイド

モバイルアプリを「幅を狭めたデスクトップWebページ」にしない方法を解説します。390×844の実ビューポートと複数画面ページscreens.htmlを使い、サーフ予報、配車、デジタルバンキング、瞑想などのモバイルUIを設計します。

デザイン手法 · 実際のスクリーンショットとブラインドレビュー

実ビューポートのスクリーンショットとサブエージェントのブラインドレビュー

JSXとCSSを見るだけでは、文字の切り詰め、くすんだコントラスト、レイアウトの重心の偏りを見つけられません。Oil UIが1440px / 390pxの実ブラウザースクリーンショット、200%の部分拡大、色面構造図、コンテキストなしのサブエージェントレビューで品質を確認する方法を解説します。