サイトの見た目がどうにもパッとしなかったので、AI に3案出してもらって統合した話

問題：見た目がパッとしない

このサイト（yatmita.com）は Next.js + Tailwind CSS で作っています。コンテンツの構造やルーティングは Ralph Wiggum Loop（自動ビルドループ）でガンガン組み上げたんですが、デザインだけはどうにもならなかった。

Phase 1〜8 のビルドが終わった時点のトップページは、よくあるテンプレートそのままの見た目でした。ヒーロー画像のスライダーに黒オーバーレイ、その下に Tailwind デフォルトのカードグリッド。フォントはシステムフォント。機能的には揃っているけど、どこかで見たことがある。

動くけど、没個性。Bootstrap のテンプレートを少しいじったような、ありがちな雰囲気から抜け出せていませんでした。

Claude Code の /frontend-design スキル

Claude Code にはスキルという仕組みがあって、特定のタスクに特化した指示セットを呼び出せます。その中に /frontend-design という公式スキルがあります。

このスキルは「いかにも AI が作りました」という没個性なデザインを徹底的に避けるように設計されています。Inter や Roboto のようなありがちなフォント、紫グラデーションに白背景のような定番配色——そういう「見た瞬間に AI が作ったとわかる」デザインを明確に NG としています。

代わりに、大胆な美学的方向性を持つことを求めます。ブルータリスト、アールデコ、ボタニカル、レトロフューチャー——具体的なテイストを選んで、それを徹底的にやり切る。

このスキルに yatmita のトップページのデザインを3案出してもらいました。

案1：和紙（Washi）

フォントは Shippori Mincho（明朝体）+ Zen Kaku Gothic New（ゴシック）。色は墨色（#2c2417）と狐色（#b8956a）、紅色（#c45c48）のアクセント。

特徴的だったのは：

• 縦書きの装飾テキスト——右端に「知る・試す・続ける」が writing-mode: vertical-rl で浮かぶ
• 墨筆の横線アニメーション——scaleX(0) から伸びていくディバイダー
• 和紙のテクスチャ——SVG の feTurbulence フィルターで紙のザラつきを表現
• ステップ番号が漢数字（一・二・三）

全体的に静かで品のあるデザインでした。余白が広く、縦の線（height: 48px の細い棒）がセクション間をつなぐ。和風というよりは、和紙の質感を借りたミニマルデザインという印象です。

気になった点は、少しストイックすぎること。yatmita は「やってみた」なので、もう少し親しみやすさが欲しいと感じました。

案2：ボタニカル（Botanical）

フォントは Kaisei Decol + Zen Maru Gothic（丸ゴシック）。色はフォレストグリーン（#2a5a2e）にコーラル（#d4705a）のアクセント、クリーム色の背景。

特徴的だったのは：

• ぼかしブロブのアニメーション——背景に3つの巨大な円がゆっくり浮遊する（blobFloat 12秒ループ）
• 葉っぱの SVG ディバイダー——セクション間を曲線で区切る
• ロゴの葉っぱが揺れる——sway アニメーションで微かに左右に動く
• 角丸カード（border-radius: 20px）にカラーバーのアクセント

有機的で温かいデザインでした。スムージーのサイトなので「自然」のモチーフは合っている。丸ゴシック（Zen Maru Gothic）の柔らかさもいい。

ただ、全体的に可愛すぎる印象がありました。ブロブが浮遊する演出も目を引くけど、コンテンツの邪魔になりかねない。

案3：クラフト紙（Craft）

フォントは Klee One（手書き風）+ Zen Kaku Gothic Antique。色はクラフト紙（#f5ede0）にテラコッタ（#c4714a）、オリーブ（#6b7a3a）。

特徴的だったのは：

• スタンプ風のロゴ——テラコッタ色の角丸四角に「Y」の文字、微かに傾いている
• マスキングテープ風の装飾——カード右上に半透明のテープが貼ってある
• 破線ボーダー——セクションの区切りやカードの枠が dashed で手作り感
• 「やってみた」のスタンプアニメーション——押印するように scale(1.3) から縮んで着地
• ホバー時にカードが微かに傾く（rotate(-0.5deg)）

手作り感があって親しみやすいデザインでした。「やってみた」というサイト名との相性が一番良かった。Klee One の手書き風フォントも「実験ノート」の雰囲気に合う。

ただ、破線ボーダーとマスキングテープが多すぎてごちゃごちゃして見える箇所がありました。

いいとこ取り：統合デザイン

3案を並べて見比べて、各案から欲しい要素をピックアップしました。

和紙から取り入れたもの

• Shippori Mincho（明朝体）をコンセプト文に使用——キャッチコピーの重みと品を出す
• 縦線のセクションディバイダー——width: 1px; height: 56px の細い線。静かだけど構造を示す
• 余白の取り方——ステップ間を clamp(2rem, 5vw, 4rem) で広く

ボタニカルから取り入れたもの

• なし

意外かもしれませんが、ボタニカル案からは直接的に採用した要素はありませんでした。ブロブも曲線ディバイダーも葉っぱモチーフも、クラフト紙の世界観と合わなかった。ただ、「温かみのあるトーン」という方向性はボタニカル案を見て確信しました。

クラフト紙から取り入れたもの

• Klee One フォント——ヒーローやナビに使用。手書き感が「やってみた」に合う
• クラフト紙テクスチャ——SVG feTurbulence のノイズオーバーレイ（opacity: 0.025）
• テラコッタとオリーブの配色——メインの暖色系パレット
• スタンプ風ロゴ [Y]——ヘッダーのアイデンティティ
• マーカー線の強調——background: linear-gradient(transparent 65%, olive-pale 65%) で下線風に

取り除いたもの

• 破線ボーダー（dashed）→ ソリッドの細い線に
• マスキングテープ装飾 → 削除
• ホバー時の傾き → translateY(-2px) のみに抑制
• 漢数字ステップ → 残した（和紙案と同じ一・二・三）

結果として、「クラフト紙の温かみ + 和紙の余白と品」 という方向性になりました。

実装

統合モックが固まった後、実際の Next.js プロジェクトに適用しました。1コミットで 27 ファイル変更、417 行追加・320 行削除。ヘッダー、フッター、カード、CTA ボタン、テーブル——全コンポーネントにテーマを通しました。

その後のイテレーションで：

• ファビコンをスムージーグラスから [Y] スタンプに刷新
• 各記事カードに角丸のアクセント写真を追加（Pattern B）
• テラコッタとオリーブのコントラスト比をアクセシビリティ基準に合わせて調整

振り返り

AI にデザインを任せて良かったこと

選択肢が広がった。自分一人では「和紙」も「ボタニカル」も「クラフト紙」も思いつかなかった。特に Klee One というフォントの存在を知れたのは大きい。Google Fonts に入っている手書き風の日本語フォントで、クセが強すぎず使いやすい。

比較できた。3案並べて「これは好き、これは違う」と判断するのは、ゼロから考えるより圧倒的に楽です。人間はゼロから作るより、選ぶほうが得意です。

気をつけるべきこと

そのまま使うと AI っぽさが残る。/frontend-design スキルは「AI スロップを避ける」と謳っているけど、それでも 1 案をそのまま採用すると「よくできた AI 生成物」の域を出ない。複数案を出して人間が取捨選択するプロセスが重要でした。

装飾を盛りすぎる傾向がある。マスキングテープ、ブロブ、破線ボーダー——個々には良いアイデアだけど、全部入れると視覚ノイズになる。「何を削るか」は人間が判断する必要があります。

モックを見てみる

3案 + 統合版のモック HTML は、実はこのサイトに直接置いてあります。すべて単体で動く HTML ファイルなので、ブラウザで開くだけで確認できます。

• 元デザイン（Phase 8 時点）
• 案1：和紙
• 案2：ボタニカル
• 案3：クラフト紙
• 統合版：クラフト×余白

見比べてみると、最終デザインがどの案からどの要素を引き継いでいるかがわかると思います。元デザインと比べると、その差は歴然です。