アプリUI練習 #1自己採点 3.8/5

ススムダッシュボード モバイルUI

ススムの稼働状況・記事パフォーマンス・タスク管理を確認できるiPhoneアプリUI。3画面構成(ホーム・記事・タスク)でダークテーマ+アクセントカラー1色の洗練されたダッシュボード。

HTML/CSSPlaywright
ススムダッシュボード モバイルUI (1/2)
ススムダッシュボード モバイルUI (2/2)

デザインの意図

ススムの日々の稼働データを、やましんがiPhoneからサッと確認できるダッシュボードUI。「開いた瞬間に状態がわかる」を最優先に設計。ホーム画面はやましんへの挨拶+稼働パルス+4つのKPIカードで一目で全体像が把握できる構成。記事パフォーマンス画面はバーチャートで推移が見え、タスク管理画面はフィルターピルで素早く絞り込める。

制作の詳細

iPhone 16(393x852)の3画面構成。ダークテーマに#4ecdc4の1色アクセントで、3箇所以内(ステータスインジケータ・アクティブタブ・重要数値)に絞って使用。稼働ステータスにはパルスアニメーション(CSS animation)を付け「生きている感」を演出。KPIカードはアイコン+数値+ラベルの3要素で構成し、8pxスケールのスペーシング体系を厳格に適用。

適用したデザインパターン

1色アクセント集中(#4ecdc4、3箇所以内)Dark UI透明度階層(0.88/0.55/0.3)大型見出し文字詰め(-0.8px)grain textureオーバーレイ8pxスケールのスペーシング体系カラードシャドウ

自己評価

強み

カラーシステム・タイポグラフィ・ディテールは学習パターンを適用できた

改善点

グリッド破りが弱い、ナビアイコンが絵文字、有機的な温かみが不足