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

- 媒体: 知能圏（CHINOUKEN）
- 公開日: 2026-09-05
- カテゴリー: エージェント・ソフトウェア
- タグ: Refero Styles、DESIGN.md、Webデザイン、AI活用
- 想定読了時間: 約10分
- 調査基準日: 2026年9月5日
- 出典: 8件（末尾の「参照リンク」に番号順で記載）
- ページ: https://www.chinouken.com/articles/refero-styles-design-md
- このMarkdown: https://www.chinouken.com/articles/refero-styles-design-md.md
- 利用条件: 引用する場合は出典として「知能圏（chinouken.com）」と該当ページのURLを明記してください。本文の再配布は行わず、要約や引用の範囲で使ってください。

AIにWebページを作ってもらうとき、気に入ったサイトの見た目を文章と数値にまとめた「指示書」を添えると、色だけでなく文字の大きさや情報の並べ方まで具体的に頼めます。知能圏では、その指示書を配布しているRefero Stylesから二つの見本を取り出し、同じ勉強会の案内を明るいページと黒いページに作り分けました。実際の画面を見ながら、見本に任せられた部分と、スマホで確認して直した部分を紹介します。

![Refero Stylesの指示書で制作した明るい勉強会案内と黒い勉強会案内を並べた画像](https://www.chinouken.com/images/articles/refero-styles-design-md/hero.png)

*同じ日本語の案内ページに、二つの見た目の指示書を適用しました。*

## 「いい感じにして」をどう伝えるか

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

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

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

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

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

![言葉だけで頼み直す流れと、Refero Stylesの指示書を添えて頼む流れを上下に並べた図](https://www.chinouken.com/images/articles/refero-styles-design-md/figure-request-flow.png)

*上は「いい感じにして」と頼み直しを繰り返す流れ、下は見本の指示書と開催情報を一緒に渡し、人はスマホ幅の確認に回る流れです。*

## 同じ案内が明るいページと黒いページに変わった

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

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

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

| 見比べた点 | 最初の標準案 | Notionの指示を適用 | Linearの指示を適用 |
| --- | --- | --- | --- |
| 背景と主なボタン | 白地に青 | 少し温かみのある白地に青 | ほぼ黒の地に黄緑 |
| 大きな見出し | 左寄せの二行 | 中央寄せで一部を色付きの面で囲む | 左寄せで文字を大きく |
| 開催概要 | 見出しの右側 | 見出しの下へ横長に配置 | 見出しの右側 |
| 当日の内容 | 同じ色の三つの枠 | 黄・淡い青・白の三つの枠 | 横線で区切った縦の一覧 |

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

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

![同じ勉強会の案内へNotionの指示を適用した明るい画面とLinearの指示を適用した黒い画面](https://www.chinouken.com/images/articles/refero-styles-design-md/figure-comparison.png)

*知能圏が作った比較用ページの実画面です。掲載サイトのスクリーンショットではありません。文章と開催情報を共通にし、配置と見た目を変えています。*

## 指示書には色の使い道まで書いてあった

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

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

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

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

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

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

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

![Notionの指示書にある文字、色と使い道、余白と角、配置の四項目と、案内ページの見出し、ボタン、開催概要、説明欄を線で対応させた図](https://www.chinouken.com/images/articles/refero-styles-design-md/figure-design-md-anatomy.png)

*左がNotionの指示書の主な項目、右が今回の案内ページの模式図です。色の値には、どの部品へ使うかが一緒に書かれています。*

## スマホで見ると直したい場所が見つかった

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

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

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

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

| 確認した場所 | 適用直後 | 修正後 |
| --- | --- | --- |
| 申し込みボタンの高さ | 33px | 48px |
| 補助リンクのコントラスト比 | 約4.05対1 | 約4.93対1 |
| 注意書きのコントラスト比 | 約4.23対1 | 約5.99対1 |
| 幅390pxでの日付と曜日 | 途中で折り返す | 同じ行に収まる |

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

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

![Notion案の調整前後。33pxだったボタンを48pxに広げ、開催概要を縦へ積んだ実画面](https://www.chinouken.com/images/articles/refero-styles-design-md/figure-mobile-adjustment.png)

*同じ幅390pxでの実画面です。右の修正版はボタンを広げ、日付と曜日を一緒に読める配置へ変えました。*

## 詳細ページから指示書を取り出す

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

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

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

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

| 項目 | 今回行ったこと |
| --- | --- |
| 作ったもの | 架空の社内勉強会の案内ページ。標準案と二つの適用案、Notion案の修正版 |
| 制作環境 | macOS上のCodex。HTMLとCSSをローカル保存 |
| 確認した表示 | Chromeで幅1440pxと390px。修正版は320pxと768pxも確認 |
| 動作確認 | 申し込みボタンを押して、ページ内の確認文が変わることを確認 |
| 外部へ渡した内容 | 公開スタイルのページURLへのアクセス。試作の申し込み情報を送る処理は作成していない |

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

![Refero Stylesの一覧から詳細ページを開き、Copyの案内を閉じて本文を保存し、開催情報と一緒にAIへ渡すまでの五段階の図](https://www.chinouken.com/images/articles/refero-styles-design-md/figure-design-md-retrieval.png)

*2026年9月5日に知能圏が行った取り出しの手順です。Refero MCPへの接続は使わず、詳細ページの本文をそのまま保存しました。*

## 最初は一ページと一つの見本で試す

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

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

| 見本の指示書が決めたこと | 人が確認して直したこと |
| --- | --- |
| 背景と文字の色、主な操作と補助の操作の色分け | 補助リンクと注意書きの文字の濃さ |
| 見出しの大きさと字間、中央寄せか左寄せか | 押す部分の高さ |
| 枠の角の丸み、余白、影の有無 | スマホ幅での日付と曜日の折り返し |
| 当日の内容を三つの枠で並べるか縦の一覧にするか | 案内の文章と申し込み先が正しいか |

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

> 社内勉強会の案内ページを作ってください。読む人はAIを初めて使う社員です。日時、会場、当日の内容を読んで、参加を申し込めるページにします。
>
> 添付したDESIGN.mdを読んで、配色、文字の大きさ、余白、ボタンの見た目に反映してください。開催情報と説明文は別に渡す内容を使ってください。
>
> 日本語が読みやすい字体を使い、スマホ幅でも日時を読めて、ボタンを押しやすい形にしてください。見本から変えた部分と、その理由も教えてください。

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

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

## 参照リンク

1. [Refero: Refero Styles](https://styles.refero.design/)
2. [Refero: Notion — Style Reference](https://styles.refero.design/style/2bf4c61f-de10-4614-ba1b-20c0453bd2a9)
3. [Refero: Linear — Style Reference](https://styles.refero.design/style/90ce5883-bb24-4466-93f7-801cd617b0d1)
4. [Refero: DESIGN.md Specification for AI Design Systems](https://styles.refero.design/design-md/design-md-specification)
5. [Refero: Design Resources for AI Agents](https://styles.refero.design/ai-agents/design-resources)
6. [Impeccable: AI向けのデザイン作業スキル](https://impeccable.style/)
7. [デジタル庁: デザインシステム カラーのアクセシビリティ](https://design.digital.go.jp/dads/foundations/color/accessibility/)
8. [デジタル庁: デザインシステム タイポグラフィ](https://design.digital.go.jp/dads/foundations/typography/)

2026年9月5日時点の公式資料を確認しています。仕様は更新される可能性があります。

---

© 知能圏 https://www.chinouken.com/articles/refero-styles-design-md