アプリUI練習 #10自己採点 4.5/5
やましんHub コンテンツ運営モバイルアプリ
やましんがスマホからコンテンツ運営を一元管理するモバイルアプリUI。ホーム（ススム稼働状態・承認待ち・成果サマリー）、承認画面（記事・画像・デプロイの承認フロー）、分析画面（PV推移チャート・記事ランキング）の3画面構成。
HTML/CSSPlaywright
デザインの意図
やましんの実運用を想定したコンテンツ管理モバイルアプリ。前回アプリUI(#8 ポテイモ管理 terracotta+DM Sans)からcool slate+sage green+Outfitで完全差別化。ステータスカードのパルスアニメーション、有機的波線ディバイダー、SVG折れ線チャートで情報密度と視認性を両立。
制作の詳細
393x852px 3画面。Screen1: ステータスカード(dark slate)+承認待ちリスト+成果カード+アクティビティタイムライン。Screen2: フィルタータブ+3種カード型承認UI(記事/画像/デプロイ)。Screen3: 期間セレクタ+3統計+SVG折れ線PVチャート+記事ランキング。grain overlay(0.04, multiply)。
適用したデザインパターン
Cool slate+sage greenパレット(前作earth toneと差別化)Outfit+Noto Sans JP(前作DM Sans+Zen Kakuと差別化)letter-spacing -0.03em見出し文字詰めborder-radius多段(40/22/20/16/13/10/7px)grain overlay(opacity 0.04, multiply)有機的波線SVGディバイダーパルスアニメーション(稼働状態表示)
自己評価
強み
前作と完全差別化した配色・フォント。3画面の情報設計が実用的。承認フローのUXが具体的（公開OK/修正/却下の3アクション）
改善点
承認カードのプレビュー領域に実画像サンプルがあるとリアリティ向上。絵文字→SVGカスタムアイコンで統一感強化