言葉でスタイリング:美しく仕上げよう
言葉でスタイリング:美しく仕上げよう
誰も教えてくれない秘密をひとつ。vibe coding では、コードでスタイリングするのではなく、形容詞でスタイリングします。
CSS のプロパティを暗記する必要はありません。デザイナーに依頼するときのように、感覚・形容詞・参考イメージで欲しい見た目を説明するのです。「ダークで、ガラスっぽくて、高級感がある — 音楽アプリみたいに」。AI がその雰囲気をクラスに翻訳してくれます。
実際の例をひとつ見てみましょう。
あなたが言うこと:
「プロフィールカードをダークでガラスっぽくして、角はやわらかく丸めて、高級感を出して — Spotify の再生画面みたいに。」
AI が生成するもの:
<body class="bg-gradient-to-br from-slate-950 to-indigo-950 text-white">
<div class="bg-white/10 backdrop-blur-md border border-white/20 rounded-2xl p-8">
それぞれの形容詞がクラスになりました:
- ダーク →
bg-gradient-to-br from-slate-950 to-indigo-950 - ガラスっぽい →
bg-white/10 backdrop-blur-md border border-white/20 - 高級感、やわらかい角 →
rounded-2xl p-8
トリックはこれだけです。形容詞を入れると、クラスが出てくる。参考イメージが良いほど(「音楽アプリみたいに」「銀行のランディングページみたいに」「ネオンのゲームセンターみたいに」)、結果も良くなります。
下にあるのは、前回のレッスンで作ったプロフィールカード — ただしスタイルをすべて取り除いたものです。真っ白な背景、デフォルトの文字、雰囲気ゼロ。あなたのミッションは、言葉で表現した見た目をひとつずつ加えて、このカードをよみがえらせることです。
手順
<body> にダークなグラデーション背景をつけましょう — まず雰囲気を自分の言葉にしてみてください:ダーク、深い、高級感。それからクラスを追加します
ヒント： 試してみましょう: `<body class="bg-gradient-to-br from-slate-950 to-indigo-950 text-white min-h-screen flex items-center justify-center p-8">`
カードのコンテナをスタイリングしましょう:すりガラス、やわらかく丸めた角、たっぷりの余白 — あの「ガラスっぽくて高級感のある」見た目です
CTA リンクをグラデーションボタンに変えましょう — 大胆で、カラフルで、絶対に見逃せないボタンに
マウスが触れたときにボタンが反応する hover 効果を追加しましょう — 小さなディテールが「生きている」感じを生み出します
あなたのコード
このステップで作りたいものを伝えてください。コードを書きます。あとは「適用」をクリックすればエディタに反映されます。 このステップ：<body> にダークなグラデーション背景をつけましょう — まず雰囲気を自分の言葉にしてみてください:ダーク、深い、高級感。それからクラスを追加します