見た目を作るところには独特の言葉がある。中心にあるのがCSS。HTMLが「中身」を担当するのに対して、CSSは色・サイズ・余白・配置を決める言語。AIに見た目を頼む時、ここの語彙が分かると話が早くなる。

CSSを「HTMLの中に短い記号で書く」流派がTailwind CSS。「class="p-4 text-blue-500"」のように書くだけで見た目が決まる。Next.jsでもよく使われていて、SYNAPSEもTailwindで作っている。

今のWebは画面サイズが千差万別なので、レスポンシブが前提。スマホでは1列、PCでは3列、のように同じページが画面サイズで姿を変える。さらに今はモバイルファースト——まずスマホで読めるか、を起点に考える。アクセスの大半がスマホだからだ。

同じ画面を毎回ゼロから組むのではなく、ボタン・カード・ヘッダーといった部品単位でまとめておくのがコンポーネント。一度「ボタン」を整えればサイト全体で同じ見た目になり、修正も一箇所で済む。Reactの「Buttonコンポーネント」もこれ。

文字まわりの語彙も大事。フォントは文字の形そのもの。タイポグラフィはフォントに加えて行間・字間・サイズ・揃え方を含めた組み方の総称。読みやすいブログかどうかはここで決まる。

色にはカラーパレットを最初に決めておく。メインの色、補助色、文字色、背景色、強調色——5〜6色で統一すると、それだけで素人っぽさが消える。背景を黒にするダークモードもカラーパレットの選び方の一つ。SYNAPSEは夜空をモチーフにダークモードで作っている。

そして余白。良いデザインは余白で決まると言われるくらい大事な要素。詰まれば窮屈、空きすぎればスカスカ。Tailwindでは margin（外側）と padding（内側）を細かく指定できる。

これら全部を含む大枠の言葉がUIとUX。UIはユーザーが触れる「画面」そのもの。UXは使った時の「体験」まで含む。UIが綺麗でもUXが悪い（迷う・遅い・気持ち悪い）ということがある。

地図を整える。CSSのおしゃれ実装がTailwind。画面サイズにはレスポンシブ＋モバイルファースト。部品はコンポーネント。文字はフォント＋タイポグラフィ。色はカラーパレットとダークモード。間隔は余白。これらが集まってUIとUXになる。AIに「綺麗にして」と頼む時、これらの語彙で具体化できると、欲しいものが返ってきやすい。

デザインの言葉