アプリUI練習 #8自己採点 4.5/5

ポテイモブログ管理アプリUI

ポテイモブログの記事パフォーマンス管理アプリ。ダッシュボード(KPI・PVチャート・人気記事TOP3)とコンテンツカレンダー(投稿スケジュール管理)の2画面構成。テラコッタ×クラフトペーパーのウォームライトテーマ。

HTML/CSSPlaywright
ポテイモブログ管理アプリUI

デザインの意図

ポテイモブログの実用的な管理ツールを想定したアプリUI。前回のダークテーマ・ススムダッシュボードとの差別化のため、テラコッタ(#C2582A)をアクセントにしたウォームなアーストーンパレットを採用。DM Sans + Zen Kaku Gothic Newのフォントペアリングで、前回のInter + Noto Sans JPとも完全に異なる印象。リネンテクスチャ(multiply blend)で紙のような質感を加え、AIっぽさを排除。

制作の詳細

ダッシュボード画面: 横スクロールKPIカード4枚(月間PV・記事数・平均滞在時間・SEOスコア)、SVGによるPV推移チャート(7週分)、人気記事TOP3(ランクバッジ付き)。カレンダー画面: 月間カレンダーグリッド(公開済み・予約投稿・下書きをドット色で識別)、直近4件の予定リスト。実際のポテイモブログの記事タイトルを想定したリアルなコンテンツ。

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

ウォームアーストーン配色(テラコッタ×クラフトペーパー)リネンテクスチャ(multiply blend, baseFrequency 0.75)KPI数値のネガティブletter-spacing (-1.2px)用途別border-radius(44/16/14/13/10/9/6px)カラードシャドウ(accent由来のrgba影)