デザインする

デザインの90%は『一貫性』です。色を数個、フォントを1〜2個、余白のルールを決めるだけでぐっとプロらしくなります。Claude はこのルールを立て、コードですぐ使える形にします。

このトラックでは 色とフォントの体系 → ロゴ → 画面モックアップ → 画像 の順に、一つの統一ブランドを話して作ります。

最速は claude.ai にログインして直接話すこと。結果をコードに反映までするなら VS Code の Claude Code 拡張を使います。

どちらも Pro 以上で十分です。

何を、誰のために、どんな雰囲気で作るかを一段落で書きます。Claude に「瞑想アプリ『SOOM』のデザイン方向を立てて。雰囲気は落ち着いてミニマル、対象は20〜40代の社会人、信頼と安らぎが感じられるように」と頼みます。

Claude が雰囲気キーワード、おすすめ色の方向、フォントの雰囲気を整理します。これが今後の基準になります。

「『SOOM』のカラーパレットを作って。メイン、サブ、背景、文字色を HEX で、各色をいつ使うかも書いて。合う無料フォントも見出し用・本文用に薦めて」と頼みます。

受け取った HEX とフォント名がデザインの骨格です。気に入らない色は「メインをもっと落ち着いた青緑に」とすぐ変えます。

「『SOOM』のテキストロゴを SVG で作って。柔らかい曲線で、上で決めたメイン色を使い、横に吸う/吐くを象徴する簡単なシンボルも」と頼みます。

受け取った SVG コードを空のテキストファイルに貼り logo.svg として保存し、ブラウザで開くとロゴが見えます。「シンボルをもっと単純に」「字間を広く」と直します。

「『SOOM』アプリのホーム画面モックを HTML 一枚で作って。上で決めた色・フォント・ロゴを使い、中央に『今日の呼吸を始める』の大きいボタン、下におすすめ瞑想3つのカードを。スマホ比率で」と頼みます。

受け取ったコードを design.html として保存しブラウザで開くと、実際の画面のように見えます。本物のアプリを作る前に見た目を確定する段階です。

写真のような画像が要るなら、画像生成 AI に入れる英語プロンプトを Claude にもらいます。「『SOOM』のメインに使う、霧のかかった夜明けの湖の落ち着いた画像の英語プロンプトを、ブランド色(青緑・生成り)に合わせて」のように。

写真でなくてよければ、Claude に図形・グラデの抽象背景を SVG/CSS で直接作ってもらっても OK。文字のない抽象グラフィックはこの方が正確です。

作った色コード、フォント、ロゴ(SVG)、画像ファイルを一つのフォルダ(assets)にまとめます。これでこのデザインをサイト・アプリ・動画のトラックでそのまま使います。

コードにすぐ入れたいなら VS Code の Claude に「この色・フォント・ロゴを私の Next.js プロジェクトに適用して」と頼めば連携までやってくれます。

おめでとうございます。色・フォント・ロゴ・画面・画像が一つに調和したブランド一式ができました。

このデザインをサイト・アプリ・ゲームのトラックと合わせれば、見た目もプロらしい本物の成果物になります。作ったデザインはコミュニティで共有してフィードバックをもらいましょう。