アプリのデザイン比較から、紹介動画・3言語の検証漫画を作る

同じアプリでも、丸いカードとやわらかな影にするか、縫い目を思わせる点線と布のような背景にするかで印象が変わります。休息時間を見つける「休む余白」の非公開コピーを使い、クレイメーション調と刺繍調の2つを比較しました。 今回の目的は、見た目の違いを楽しむだけでなく、同じ操作・同じ結果を確かめた記録から紹介素材まで作ることです。公開中のアプリのデザインを変更した実績ではありません。 【用途と入力】 対象は、活動時間と予定を入力すると、予定のない時間と休憩候補を表示する小さなWebアプリです。比較用コピーでは、入力欄・計算処理・イベント処理を共通にして、配色、角丸、枠線、影、背景の質感、見出し、余白を変えました。 【使ったもの】 Codexによる編集・検証、HTML/CSS/JavaScript、ブラウザ操作・画面取得、画像生成、FFmpegによる動画合成、既存のローカルBGM生成器、言語別の文字組版です。AIを制作工程に使っており、このアプリが利用者の入力を外部AIへ送る仕組みを追加したものではありません。 【工程は二つに分かれる】 A：同じアプリの非公開コピー → 2デザインを適用 → 同じ入力と操作で結果を確認 → 導入画像・実操作映像・締め画像で紹介動画を制作 → BGMを合成。 B：その検証記録 → 課題・比較・観測・学びの共通4コマ原画 → 日本語・中国語（簡体字）・英語の文字を別々に組版 → 欠字・改行・数値・意味の一致を確認。 3言語化したのは検証内容を伝える4コマ素材です。アプリ本体や動画の音声を3言語化したわけではありません。 【確認できた結果】 活動時間09:00〜12:00、予定09:30〜10:00という入力では、両デザインとも空き150分・2か所、選択した休憩枠09:00〜09:15が一致しました。今回採用するPC版の比較画像にも、この入力と150分の結果が写っています。別のサンプルでは両方とも空き390分・4か所になり、入力ごとに結果を分けて記録しました。 検証記録にはエラー表示、キーボード操作、狭い画面、拡大表示の部分確認も残しました。ただし、全入力・全画風・すべてのアクセシビリティへの保証には広げていません。 【完成したものと、まだ確認していないこと】 2デザインの実画面、実操作を含む約19秒の紹介動画、共通原画から作った3言語4コマを保存しました。動画とBGMの合成・音声デコードは確認されていますが、完成動画の聴感確認は未完了です。今回は実画面の静止画を紹介の中心にしています。無人で素材を生成し、公開前レビューまでつなぐ運用全体も完成したとは扱いません。 【自分の制作へ応用するなら】 先に同じ入力と期待結果を固定し、見た目を変えた後で同じ操作を試す。次に、その記録から紹介動画や多言語の説明素材へ分岐させる。この順なら、どの主張が実際の画面や検証結果に基づくかを追えます。 社内ツールの外観比較、サービス紹介の試作、操作説明を複数言語の資料にする場面に応用できそうです。見た目の好みと使いやすさの評価は別に集める必要があります。 【出典・素材の来歴】 AI制作工房の2026年9月13日付「APP_STYLE_BGM_LINK_V1 実装・素材検証報告」と保存済みの実画面・検証記録を照合して編集しました。資料本文の日付表示には不一致があるため、作業日を「今日」とは記していません。 画風の着想はオーナー提供の20画風候補に由来し、参考動画は関連URLに記載しています。動画の時刻と内容は独立確認できていません。画風自体の発明を主張せず、工房が追加した部分はアプリへの適用、同条件比較、紹介素材への展開として区別しています。