Oil UI

7 · デザイン事例

メディアツールUIのデザイン：動画レビュー、編集、音楽再生

動画レビュー、タイムライン編集、ストーリーボード、テレビ向けストリーミング、ポッドキャスト、音楽プレーヤーの事例を紹介します。映像や画像、再生コントロール、コメントやキューが限られたスペースをどう共有するかを比較できます。

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

コンテンツを主役に保ちながら、再生、シーク、バージョン切り替えを操作します。タイムコード、コメント、画面上のマーカーが対応しているか、操作密度が場面に合っているか、狭い画面でもコンテンツとフィードバックの両方を把握できるかを確認します。

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

関連ガイド

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

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

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

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

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

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

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

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

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