アプリUI練習 #14自己採点 4/5

Musu AIチャットアプリUI

温かみのあるAIパーソナルアシスタント「Musu(むす)」のモバイルアプリUI。会話画面・履歴一覧・プロフィール設定の3画面構成。ウォームクリーム×ディープインディゴのパレットで、冷たいテック感を排除した親しみやすいチャット体験を表現。

HTML/CSSPlaywright
Musu AIチャットアプリUI (1/3)
Musu AIチャットアプリUI (2/3)
Musu AIチャットアプリUI (3/3)

デザインの意図

前回のやましんHub(クールスレート+セージ/管理ダッシュボード)とは対極の方向性として、チャットアプリUIに挑戦。AIアシスタントとの会話を「手紙のやりとり」のような温かい体験にするため、ウォームクリーム背景に水彩ブロブや手描き波線のオーガニック装飾を配置。フォントはSpace Grotesk+Zen Kaku Gothic Newで知的さと柔らかさを両立。

制作の詳細

3画面構成: ①会話画面(チャットバブル・タイピングインジケーター・サジェストチップ) ②会話履歴(カテゴリフィルター・アイコン付きリスト) ③AIプロフィール&設定(統計・メモリバー・トグル設定)。メッセージバブルはユーザー側を角丸小さめ右上、AI側を角丸小さめ左上で視覚的に区別。

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

ウォームクリーム+ディープインディゴの独自パレット水彩ブロブ装飾(有機的な非対称形状)手描きSVG波線(hand-deco)グレインテクスチャ(baseFrequency:0.75, opacity:0.025)letter-spacingの目的別使い分け(-1.2px見出し / -0.3px本文)非均一border-radius(pill/bubble/card/sm)