AIにWebページの見た目を伝えるRefero Stylesの指示書を使ってみた

社内の勉強会を知らせるWebページを作る場面を考えてみましょう。AIの入力欄へ「この日時と説明文で、参加案内のページを作って」と頼むと、見出しと申し込みボタンのあるページが返ってきます。ここで使うのは、チャットで受けた指示に従って、Webページそのものを作ったり直したりするAIです。

困るのは、できたページを見て「少しかたい」「もっと親しみやすくしたい」と感じたときです。何をどう変えれば親しみやすくなるのかを言葉にできないので、「いい感じにして」と頼み直すしかありません。すると、ボタンだけ色が変わったり、頼んでいない装飾が増えたりして、次に何を直せばよいかがかえって分からなくなります。

気に入ったサイトを見せて「この雰囲気で」と頼めれば早いのですが、AIは画面の印象をそのまま受け取れません。代わりに「背景はこの色」「見出しはこの大きさ」「枠に影を付けない」と、数値と言葉で渡せばAIは変更の手掛かりを得られます。デザイン参考サービスのReferoが提供する「Refero Styles」は、実在するWebサイトの見た目をこうした文章と数値に整理し、AIへ渡せる形で配布しています。

渡すファイルの名前は「DESIGN.md」です。末尾の「.md」は、見出しや箇条書きを書ける文章形式を表します。プログラムを動かすファイルだと考える必要はなく、中身は人がそのまま読める見た目の指示書です。

知能圏では、この指示書を二種類読み、同じ勉強会の案内ページへ適用しました。下の図は、言葉だけで頼み直す流れと、指示書を添えて頼む流れの違いです。指示書を添えると、AIが見た目の方向を決め、人はスマホでの見え方など細部の確認に集中できます。

試作で変わったのは、背景の色、見出しの見せ方、当日の内容を並べる形でした。明るい案では見出しを中央へ大きく置き、黒い案では左へ寄せて内容を行ごとに並べています。

題材は「はじめての仕事とAI」という架空の勉強会です。最初に白地と青いボタンの標準案を作り、Refero Stylesで見つけた「Notion」と「Linear」の指示書をそれぞれ適用しました。二つの名前はReferoに載っている参考スタイルの掲載名で、NotionやLinearのサービス本体を使ってページを作ったわけではありません。

実装したのはOpenAIのコーディングAI「Codex」です。文章とページの構造は三案で共通にし、色や文字の大きさ、配置をブラウザへ伝えるCSSだけを書き分けました。

Notion案は、説明のまとまりを色で見分けられるページになりました。Linear案は装飾が少なく、時刻と項目を順に追うページです。どちらが勉強会に合うかは好みも含みますが、「明るくする」「黒くする」以上の違いが画面に出ました。

ただし、これは一つの題材を同じAIとの会話の中で作り分けた制作体験です。指示書を使わないAIと使うAIを別々に何度も試した比較ではないため、品質が何割上がる、作業時間が何分減るとは言えません。標準案を含むどの案でも、文章を読み、模擬の申し込みボタンを押せました。

使ってみて役立ったのは、色の値と一緒に「どこへ使うか」が書かれていたことです。色見本だけを渡すと、どの色をどこへ塗るかの判断がAIに残ります。指示書はその判断を先に済ませています。

たとえばNotionの指示書では、青を主な操作のボタンに使い、それ以外の操作には淡い青の背景や文字だけの表示を使うよう説明されていました。そこで「参加を申し込む」を青く塗り、「当日の内容を見る」は淡い青にしました。同じ青系でも、先に押してほしい操作が一目で分かれます。

内容を囲む枠についても、角の丸みや内側の余白に加えて「影を付けない」という指定がありました。Linearの指示書には、三列のカードを並べず、一画面に置く情報のまとまりを絞るという配置の説明があります。黒い案で当日の内容を縦の一覧に変えたのは、その説明を読んで適用した結果です。

見本を今回のページへ当てはめる

指示書を受け取ったAIは、文章を読み、今回の内容へ当てはめてコードを書きます。勉強会に不要な製品画面や顧客ロゴまでは持ち込まず、日本語の字体には全案で同じ端末のフォントを使いました。参考サイトそっくりの複製を目指す作業とは条件が違います。

また、見た目の指示書と「スキル」は役割が違います。スキルはAIに作業の進め方や確認の観点を渡す手順書です。今回はReferoのDESIGN.mdで見た目の方向を決め、その後にデザイン点検用のImpeccableというスキルで、文字の読みやすさやスマホ幅の表示を確認しました。

指示書は文字、色、余白、配置の順に項目が並び、それぞれがページの決まった部分を受け持ちます。下の図は、Notionの指示書の項目が、今回の案内ページのどこを決めていたかを対応させたものです。

画面を狭くすると、Notion案には押す部分の小ささと日時の折り返しが残っていました。見た目の方向が決まった後にも、案内を読む人に合わせた調整が要ります。

パソコン向けの幅1440pxに加え、スマホ相当の幅390pxで三つのページを表示しました。横へのはみ出しはなく、どの案でも申し込みボタンを押すと確認文が表示されます。ただ、Notion案のボタンは高さ33pxで、日時を二列の枠へ収めたため、日付の途中や曜日の前で改行されていました。

そこでImpeccableの点検とスマホ向け調整の手順を使い、Notion案の修正版を作りました。申し込みボタンを高さ48pxに広げ、開催概要は項目を縦へ積んで、日付と曜日が一緒に読める幅を確保しています。記事の比較用に、修正前の案も残しました。

文字と背景の明るさの差も確認しました。この差を数値にしたものが「コントラスト比」で、小さな文字を読み取れるかの目安になります。補助リンクの青い文字と淡い青の背景は約4.05対1で、通常の文字に用いる4.5対1の基準を下回っていました。リンクの文字を少し濃い青へ変え、注意書きの灰色も濃くしました。

ボタンの大きさには、今回使ったスキルが示す44px以上という目安を採用しています。33pxなら必ず規格違反になる、という意味ではありません。確認はパソコンのブラウザで幅を変えて行い、実物のスマホを指で操作する試験までは行っていません。

この結果から、参考スタイルを丸ごと信じるより、できたページを実際の文章と画面幅で確認する方がよいと判断しました。見本の雰囲気を残したまま、押す部分の大きさや文字の濃さを変える余地はあります。

Refero Stylesを試す入口は、気に入ったスタイルの詳細ページを開くことでした。私たちが2026年9月5日に確認した画面では、「DESIGN.md」欄に指示書の文章が表示され、「Compact」と「Extended」で表示する量を選べました。今回はCompactの本文を読み、制作に使っています。

「Copy」を押すと、コピー完了の表示と一緒に、AIからReferoのライブラリを検索する「Refero MCP」への案内が開きました。案内を閉じると指示書へ戻れます。今回のブラウザ操作環境ではクリップボードから文字を取得できなかったため、画面に表示されている本文を読み取ってファイルへ保存しました。

MCPは、AIと外部の情報や操作機能をつなぐ仕組みです。今回行ったのは、詳細ページの文章を取得してAIへ渡す方法で、Refero MCPへの接続は試していません。初回から接続設定まで行わなくても、指示書を使った制作には進めました。

実行条件は次の通りです。途中の調査や執筆が混ざるため、制作時間の短縮効果は測っていません。

一覧を開いてからAIへ渡すまでの取り出しの手順は、下の図の五段階です。Copyを押した後に案内が開く箇所だけ、閉じて先へ進む操作が入ります。

私たちの見立てでは、Refero Stylesは「AIにどう見た目を頼めばよいか分からない」段階で役立ちます。好みを専門用語へ翻訳する前に、見本を選ぶところから始められるためです。

今回の制作で、見本に任せられた部分と人の確認が要った部分は次のように分かれました。

試すときは、作りたいページの内容を先に用意し、好みに近い指示書を一つだけ渡してみてください。AIへの依頼文は、たとえば次の形です。今回の制作と調整を踏まえてまとめた、読者向けの依頼例です。

社内勉強会の案内ページを作ってください。読む人はAIを初めて使う社員です。日時、会場、当日の内容を読んで、参加を申し込めるページにします。

添付したDESIGN.mdを読んで、配色、文字の大きさ、余白、ボタンの見た目に反映してください。開催情報と説明文は別に渡す内容を使ってください。

日本語が読みやすい字体を使い、スマホ幅でも日時を読めて、ボタンを押しやすい形にしてください。見本から変えた部分と、その理由も教えてください。

完成したら、まず「何のページか」「いつ開催されるか」「どこを押すか」が迷わず分かるかを見ます。文章の内容や申し込み先を確認してから色や余白の好みを調整すると、直す目的を保ちやすくなります。

今回なら、親しみやすい勉強会の案内には、明るいNotion案を出発点にしてスマホ向けの修正を加える選び方ができました。これは私たちの編集上の選択です。見本を受け取ったことで、「なんとなく気に入らない」から「この雰囲気を残して、この部分を直す」へ依頼を進められたことが、今回の制作で得た収穫でした。