もくる（Mokuru）— 音声ジャーナルアプリ
やましんが日常の散歩中・移動中に音声で『気づき』を録音し、AIが文字起こし＋タグ付け＋記事ネタDB登録までこなすモバイルアプリのUIコンセプト。3画面構成（ホーム・録音中・文字起こし結果）。朝の散歩トーンを意識した『ペーパー地×フォレストグリーン×テラコッタ×テープ色』の4色設計で、紙束のような不揃いな質感とゼロぼかしハードシャドウで人間味を出した。
デザインの意図
前作（5/11 SNS・ドーパミンカラー / 5/7 Web・ティール+ハニー / 5/2 アプリ・ポテイモpicks）から完全に体温を変えるため、朝の散歩・紙ノート・録音テープという3つの触覚モチーフから配色とフォントを逆算した。日本人エンジニアが朝の散歩で気づきを残すという具体シナリオを想定し、Granolaの『AIっぽくないクラフト感』とBearの『書く体験への執着』を統合。Codex独立リサーチが提案した『画面ごとに役割の違う角丸・余白・波形密度』『紙・録音テープ・手書きメモのような控えめな質感』を全面採用。AIパターン回避として紫青グラデ・ガラスモーフィズム・抽象3Dを意図的に排除し、Noto Serif JPの和文セリフを主役に据えることで『書き手のアプリ』であることを伝える。
制作の詳細
393×852pxの3画面横並びレイアウト。①ホーム: 上部に和文セリフ大型挨拶『おはよう、やましんさん』+12日連続ストリークチップ、中央に4枚の『気づきカード』（各カード -0.4deg/0.2deg/-0.15degの微小回転で紙束感、padding/marginを微調整して不揃い）、下部に円形フォレストFAB（3層ハロー）+4タブナビ。②録音中: 56pxのDM Mono大型タイムカウンタ、76本の有機的波形バー（前56本フォレスト/後20本グレー・faintで沈黙表現）、リアルタイム文字起こしプレビュー（pending部分は灰色グラデで未確定感）、テラコッタ角丸stopボタン（box-shadow 3層ハロー）+左右PAUSE/MARKボタン。③結果: タイトルにグリーンマーカー風underline（linear-gradient 35%）、文字起こしカード上部にテープ装飾（rotate(-3deg)+tape色)、ハイライト箇所はテラコッタmark、AI提案ブロックは破線ボーダー+forest tint背景、CTA『記事ネタDBに送る』+『あとで』の二段ボタン構成。テクスチャはSVG noise 2層（背景baseFrequency=0.92/端末内=1.15）で紙質感、ゼロぼかし紙束影 box-shadow:0 2px 0 #D9CFB8 をカードとボタンに適用してネオブルータリズム的厚み感を出す。
適用したデザインパターン
自己評価
強み
Codex独立リサーチが指摘した『画面ごとに役割の違う角丸・余白・波形密度』を全画面に反映できた。3画面それぞれが情報密度・カード形状・余白配分で異なる役割を持ち、テンプレ流用感がない。和文セリフを主役に据えることで『書き手のためのアプリ』という性格が一発で伝わる。テープ装飾・紙束影・グレイン2層の組み合わせは、量産系AIアプリUIから明確に離れている。AI排除チェック8項目すべてパス。
改善点
波形は静止画だと若干単調に見える（実機なら録音中のbarがpulseしないと『録音中』感が薄れる）。次回の音声系UIではCSS animationでbarを脈動させる。録音画面のtransparent状態（録音前）も用意するとフロー全体が完成度高くなる。ホーム画面のFABがリストの最下段カードに被るのは意図したが、操作性視点ではもう少しpadding-bottomで逃がしてもよかった。