「UI が質素」から 12 種類のデザインへ｜Claude Code への要望の出し方と、スクショで確かめる進め方
Lyric Machine 開発記（4本目） 公開日 2026年10月12日
自分専用の作詞アプリ「Lyric Machine」の見た目は、最初はとても地味でした。それが今では、右上の丸をワンクリックするだけで 12 種類のデザインを切り替えられ、そのうち 8 種類には世界観の背景イラストまで付いています。この記事では、見た目をどう育てていったかを、Claude Code（文章で頼むとプログラムを書いてくれる AI）への要望の出し方を中心に書きます。
何を作りたかったか
最初の依頼では、見た目より「最速のスピードと最高のスペック」を優先していました。でも、実際に使い始めると気持ちが変わるんですよね。毎日開く道具なので、開くたびにやる気が出る見た目にしたくなりました。
やったこと
1. 「UI が質素」と伝える
最初の要望は、ほぼ感想そのままでした。
私あと根本的な話で、UIが質素なので、スペックやスピードが落ちない程度にUIかっこよくして欲しいね。モチベーション上がりそうな。
黒背景の方が俺好きかも。DAWっぽい感じとか、サイバーパンク的な感じとか、任せるけどそんな感じのデザインがいいね
Claude Codeアプリ全体を黒基調の「DAW × サイバーパンク」風にしました。重さや反応の速さは今までと変わりません。
見た目の最初の要望（やりとりを再現したもの）
返ってきたのは、黒を基調にした「DAW × サイバーパンク」風のデザインです。DAW は、音楽を作るソフトのことです。画像は使わず CSS（見た目を決める指定）だけで作り、重くならないようにしてくれました。
2. 「フォントが弱っちい」と伝える
次は、フォントのことを伝えました。
私フォントとか画像感を変えると重くなるのかな？フォントが弱っちいのが気になっているのと、テンションが上がるメカニカルな画像感になると嬉しい
Claude Code重くなりません。追加したフォントは英数字用だけで、ネットから取らずアプリに入れているので、読み込みは一瞬です。重くなるのは、大きな写真を背景に敷いたり、動き続けるアニメーションを多用したりする場合です。
フォントが気になったとき（やりとりを再現したもの）
英数字用のフォントが 3 種類（合計約 56KB）アプリに入り、日本語は太めの文字になりました。あわせて、歌詞欄を【1A】【1B】【1C】のブロックに分けるエディタもできました。
3. 切り替えられるようにする
続いて、スタイルを 3 種類（MECHA / ORGANIC / CINEMA）から選べるようになり、文字サイズと英語表示も付きました。
私作ってくれたメカめかしい感じはすごくいいので、他のパターンも作って都度切り替えられるのがいいな。とりあえずオーガニックな感じと、間接照明感のあるシネマティックな感じも作ってみて。結構大袈裟でok。
私あと、全部の表示を英語に切り替えられるようにもしたい。その方がスマートでいい歌詞が書けそうな時もある。「言い換え」とか、日本語だとダサいじゃん。仕方ないんだけども
Claude Code見た目のスタイル、文字の大きさ、英語表示を、メイン画面から切り替えられるようにしました。どちらも「大袈裟で OK」とのことだったので、かなり振り切りました。やりすぎな部分があれば抑えます。
ほかのスタイルと英語表示を頼んだとき（やりとりを再現したもの）
4. 12 種類を右上から切り替える
しばらく使ったあと、こう頼みました。
私UIのデザインは右上からワンクリックで変えたいね。フォントサイズとか言語は今の形で選べればいいけど、デザインは右上にアイコンが並んでてワンクリックで変えたい。後もっと種類増やして。10種類くらい
Claude Code右上に並んだ丸をワンクリックするだけで、デザインが変わるようにしました。デザインは 12 種類です。選んだデザインは保存されるので、次に開いたときもそのままです。
デザインを増やしたくなったとき（やりとりを再現したもの）
ヘッダーの右にデザインの丸が並び、押すとすぐ変わるようになりました。CYBERPUNK、ROCK、METAL、J-POP MELLOW、J-POP FRESH、PAPER が加わり、全部で 12 種類です。
5. スクショで確かめてから反映する
さらに、こう頼みました。
私デザインもうちょい凝りたく。オーガニック系なら草が入るとか、見にくくない程度で要素を盛り込んでみて。スクショまずください
Claude Code試作の飾りはまだアプリに反映していません。スクショを見て、デザインごとに「これでいい」「控えめに」「別の飾りに」など教えてください。
私背景にそれぞれの世界観があるイラストとかが欲しいのかもね
Claude Code8 つのデザインそれぞれに、世界観を表す背景イラストを描いた試作のスクショを送りました。パネルを少し透ける「すりガラス」にすると、後ろの景色がうっすら見えるようになります。
まずスクショで見せてもらったとき（やりとりを再現したもの）
ここからは、次の流れで進みました。
- Claude Code が試作し、スクショを送ってくれる
- 見て感想を返す
- 直した版のスクショがまた届く
- OK なら反映してもらう
Claude Codeパネルを少し透けるすりガラスにして、スクショを撮り直しました。歌詞欄や入力欄はほぼ不透明のままなので、文字はくっきり読めます。まだアプリには入れていません。
Claude Codev0.41.0 のビルドが成功しました。アプリの「アップデート」から更新すると、背景イラストとすりガラスのパネルになります。
透け具合を決めて反映したとき（やりとりを再現したもの）
最終的に、8 つのデザインに背景イラスト（森と丘、赤い幕と客席、雨のネオン街、水墨画の山と松など）が付きました。パネルは少し透けるすりガラスになっています。
ORGANIC：森と丘
CYBERPUNK：雨のネオン街
PAPER：水墨画
詰まった所と解決
- フォントで括弧が変に見えました。角ばった英字フォントが「明日(あした)」の丸括弧を角括弧のように描いていました。歌詞の本文は日本語フォントに戻しました。
- 英語表示にすると「English」ボタン自体が隠れました。
- 一部のデザインで、右上の丸が四角くなりました。デザインごとのボタンの形の指定が上書きしていました。
- 古い Mac で崩れるおそれがありました。CSS の新しい書き方は新しい Safari でしか動かないため、その書き方を使わない形に直しました。
- 試作の飾りが邪魔をしました。ちょうちょがタブに重なったり、テープがカードの見出しを隠したりしたので、1 つずつ調整しました。
使ってみた感想
要望は、上手に言葉にしなくても意外と通じました。「質素」「弱っちい」「メカニカル」「見にくくない程度で」のような感覚的な言葉で十分です。
特に良かったのは、反映する前にスクショで見せてもらえたことです。イメージどおりか先に確認できて、本当に安心でした。見てから「ちょっと透かして」と言えるので、打ち合わせみたいな感覚で進められました。
同じことをやりたい人へ
見た目の要望は、使い始めてから出せば大丈夫です。最初はとにかく機能を優先し、毎日開くようになってから見た目に手を入れても遅くありません。
まとめ
- 要望は感想のままでいい（「質素」「弱っちい」で通じた）
- 重くしたくないなら、画像を使わない作り方を頼める
- 見た目の変更は「スクショを先に見せて」と頼むと、失敗が少ない
次の記事では、日本語で入力する人なら誰でもつまずく「確定の Enter で送信されてしまう」問題を取り上げます。