frontend-design を実際の制作に使ってみた ― ui-memo での体験談

このスキルは何か

frontend-design は、コードを生成する前の“設計の考え方”を与えるスキル。デザインリードの視点で、テンプレ的でない独自の見た目を作るための原則集（配色・タイポ・レイアウト・抑制・コピー）。手順やライブラリではなく、判断の軸を提供するのが特徴。実体は指針テキストのみで、付属コードはない。

どこで使ったか

題材は2つ。①UI Memo 本体（Next.js / Tailwind の参照サイト）、②その Streamlit プレイグラウンド（Pythonで動く実機デモ）。どちらも「AIコーディング層が読む・触る」ことが単一の目的で、見た目の説得力が信頼に直結する。だからこそ“汎用的に見えない”ことが効く題材だった。

効いたこと

AIデフォルトの“型”を避けられた

frontend-design は、AI生成デザインが陥りがちな定番ルックを名指しで警告する（クリーム地＋セリフ＋差し色／黒地＋アシッド差し色／新聞風ヘアライン）。最初、Streamlit プレイグラウンドを淡いパステル＋汎用的な構成で組んだら、まさに“どこかで見た感じ”になった。そこで、サイトが既に持つ実トークンに寄せ直した。スキルは「ブリーフ（指定）が方向を決めているなら、それに従え」とも言う。ui-memo の配色（赤アクセント・クリーム・Arial・5px角丸）はブランドの所与だったので、自由枠ではなくそこに合わせるのが正解だった。

※正直な補足：ui-memo のクリームは、警告される「クリーム地」の型と表面的には似て見える。だが、これは思いつきの汎用デフォルトではなく、サイトのブランドトークンとして先に決まっていたもの。スキル自身が「指定がある軸は指定に従う」と述べており、ここは型の踏襲ではなく所与のブリーフの尊重だと整理できる。

先にトークンを決めてから作れた

「色4〜6・タイポ2役・レイアウト・signature を先に決め、そこから全部を導く」という二段構え。プレイグラウンドのテーマ（primaryColor・背景・フォント・角丸）を先に1か所に固定してから各ページを組んだので、画面ごとのブレが出なかった。色やフォントを“後から場当たりで足す”のと、最初にトークンを決めるのとで、仕上がりの一貫性がはっきり違った。

signature を1点に絞れた

スキルは「大胆さは1か所に使い、signature 要素以外は静かに保て」と言う。プレイグラウンドではTierバッジ（各UIの導入バージョンを明記）＋バージョンスタンプを“このサイトならでは”の一点に据えた。古いバージョンに固定された現場でも使えるか判断できる、という題材の核を、見た目の主役にできた。汎用の装飾を増やすより、主題そのものを signature にする方が記憶に残る。

「アクセサリーを1つ外す」抑制

当初トップに置いた“リアルタイムに反応するショーケース”は、見栄えはするが主題とズレていた（中身はダミーデータ）。スキルの抑制原則（出かける前に鏡を見て1つ外す）に従って削り、トップを「最新バージョンの新機能＋デモ導線」に整理した。引き算で主題がはっきりした。

言わずに満たす“品質の床”

レスポンシブ（ワイドディスプレイ対応）・キーボードフォーカス・prefers-reduced-motion といった土台を、宣伝せず満たす、という指針。ワイド表示で窮屈にならないよう可変幅にした調整は、まさにこの“床”の部分だった。

ハマった・注意したこと

• CSSの相殺：スキルも警告するが、型ベースのセレクタ（.section）と要素ベース（.cta）で padding/margin が打ち消し合う事故は実際に起きやすい。トークンを一元化し、セクション間の余白ルールを決めておくと安全。
• “独自”と“ブランド遵守”の線引き：独自性を追うあまり、所与のブランドトークンを崩しては本末転倒。frontend-design は「指定がある軸は守る／自由な軸でだけ冒険する」と言う。ここを取り違えないこと。
• コードのないスキルの扱い：frontend-design は判断軸を与えるだけなので、“何かを自動生成してくれる”類ではない。制作の前段（方針決め）と、作った後の自己批評で効く。

どんな人・場面に効くか

• サイトやプロダクトの第一印象を底上げしたいとき（量産ではなく“型を作る”局面）
• AI生成にありがちな汎用ルックから抜け出したいとき
• ブランドトークンが既にある／これから決める、その設計を整理したいとき

逆に、テンプレに沿って中身を量産するフェーズでは出番は小さい（そこはコンテンツと実装の勝負）。

まとめ

frontend-design は「作る前に方針を決め、作った後に自分で批評する」習慣を与えてくれる指針スキルだった。ui-memo の制作では、AIデフォルトの回避・トークン先決め・signature の一点集中・引き算が、そのまま効いた。コードを吐くスキルではないぶん、判断の質を上げる種類の道具だと感じた。

よくある質問