AIっぽくないサイトを作る
指示文と参考サイト集

参考サイトを探す3つの見本集

参考サイトは、Webデザインの見本を集めたサイトから探すと早く見つかります。いつも使っている3つを紹介します。どれも無料で見られます。

SANKOU!

日本のサイトが中心の見本集です。左のメニューから、サイトの種類と業種で絞り込めます。たとえば「採用サイト」「スクール・習い事・教材」「美容室・サロン・エステ・ヨガ」などです。

「シンプル」「高級感」「やさしい・ナチュラル」のように、雰囲気でも探せます。まずは自分と同じ業種で絞り、その中から好きな雰囲気のサイトを選ぶのがおすすめです。参考 [1]

81-web.com

日本のサイトを5,000件以上集めた見本集です。10月20日に見たときは5,485件でした。上の絞り込み欄で、種類・業種・色・フォントなどを選べます。

この見本集の便利なところは、サイトごとに使っているフォントの名前が書いてあることです。フォントは文字の形のことで、サイトの印象を大きく左右します。「この文字の感じが好き」と思ったら、フォント名を控えておきましょう。パソコンとスマホ、それぞれの見た目に切り替えて見ることもできます。参考 [2]

MUUUUU.ORG

業種・配色・サイトの種類・見せ方で探せる見本集です。海外のサイトも載っています。

この見本集は、動きで探せるのが特長です。「ローディング・オープニングアニメーション」は、サイトを開いたときの演出のことです。「パララックス・スクロールエフェクト」は、スクロールしたときに背景と文字が違う速さで動く見せ方です。動画で参考にしたウォンテッドリーのサイトも、ここに載っていました。参考 [3]

どこを真似するかを決める

参考サイトが決まったら、そのサイトのどこを真似したいのかを決めます。見るところは「動き」と「トンマナ」の2つです。

トンマナは、トーン＆マナーを縮めた言葉です。色、文字、写真、言葉の調子など、サイト全体の雰囲気のことを指します。

動画で作った採用サイトの場合

参考にしたウォンテッドリーのサイトから、次のところを真似しました。

• 動き：開くと白い画面にロゴが出て、斜めの帯が開くように写真へ切り替わる
• 動き：画面いっぱいの写真のパネルが3枚、続けて並んでいる
• 動き：スクロールすると、背景の写真だけがゆっくり動く
• トンマナ：写真の上に、大きな白い見出しを重ねる
• トンマナ：右下に英語の大きなリンク、角を丸くした枠

逆に、文章・写真・ロゴは真似していません。中身は、自分の会社のものに入れ替えています。

フォントは、有料のことがある

参考サイトのフォントを真似するときは、そのフォントが無料かどうかを確かめます。

ウォンテッドリーのサイトは、英字にITC Avant Garde Gothic、日本語にたづがね角ゴシックを使っていました。どちらも有料のフォントサービスから読み込まれていて、使うには契約が必要です。

そこで今回は、Claude Codeに近い形の無料フォントを選んでもらいました。英字はPoppins、日本語はZen Kaku Gothic Newです。どちらも、Googleが無料で配っているフォントです。参考 [5]

サイトの目的を伝える

次に、そのサイトで何をしたいのかをAIに伝えます。問い合わせを増やしたいのか、ブランドを伝えたいのか。目的によって、ページで見せる順番が変わるからです。

この「見せる順番」や画面の使いやすさを考えることを、UI・UXの設計と言います。UIは画面の見た目やボタンのこと、UXはサイトを見る人の体験のことです。目的を伝えれば、Claude Codeがこの設計から考えてくれます。

動画の採用サイトは、3つめの「人を採用したい」に当たります。最初に会社の想いを伝え、最後にエントリーの入力欄を置きました。

一番上に動画を入れる

ヒーローセクションは、サイトを開いて最初に見える部分です。ここで雰囲気が伝わらないと、そのまま閉じられてしまいます。だからこそ、動画や画像を入れて、ひと目で伝わるようにします。

動画の採用サイトでは、Higgsfieldという動画を作るAIのサービスで、素材を4本作りました。参考 [4]

1. ロゴが動く動画
   4秒ほど。サイトを開いたときに、最初に流します。
2. 人の場面の動画を3本
   それぞれ8秒ほど。画面いっぱいのパネル3枚に、1本ずつ流します。

素材を作るときのコツ

• 文字をのせる場所を空けておく。見出しは画面の左下に重ねます。そこが明るすぎると、白い文字が読みにくくなります。
• 動画は軽くしてから使う。今回の4本は合計で約28MBありました。Claude Codeに頼んで音を外し、約3.5MBまで軽くしています。重いままだと、表示に時間がかかります。
• 実在の人に似せない。AIで人物を作るときは、有名人や知り合いに似せないようにします。

コピーして使う指示文

Claude Codeにそのまま貼って使える指示文です。（　）の中を、自分のサイトに合わせて書きかえてください。

使う場所は、Claudeのデスクトップアプリの「Code」タブがおすすめです。Claude Codeが参考サイトをブラウザで開いて、動きやフォントまで確かめてくれます。Claude Codeを使うには、有料のプランが必要です。

このサイトを参考に、Webサイトを作ってください。
参考サイト：（参考サイトのURL）

# 作るサイト
- 誰の、何のサイトか：（例：個人でやっている料理教室の紹介サイト）
- サイトの目的：（例：体験レッスンの申し込みを増やしたい）
- 見てほしい人：（例：休日に新しいことを始めたい30代の会社員）
- 見たあとにしてほしいこと：（例：体験レッスンを予約する）

# 参考にするところ
- 動き：（例：開くとロゴが出てから写真に切り替わる。スクロールすると背景がゆっくり動く）
- トンマナ：（例：写真の上に大きな白い見出し。余白が多く、落ち着いた色）
- 文字：参考サイトのフォントに近いものを使ってください。有料のフォントなら、無料で使える近いフォントを提案してください
- このサイトを選んだ理由：（例：教室の空気が、文章を読む前に伝わるから）

# 参考にしないところ
- 文章・写真・ロゴ・イラストは、そのまま使わないでください。中身は上の内容でオリジナルにしてください

# 一番上に使う素材
- （例：ロゴの動画1本と、教室の様子の動画3本を添付します）

# 進め方
1. まず参考サイトをブラウザで開いて、「動き」と「トンマナ」の特徴を箇条書きでまとめてください
2. サイトの目的に合わせて、ページで見せる順番を考えて見せてください
3. 私が確認してから、作り始めてください
4. できあがったら、パソコンとスマホの幅で開いて見せてください

作ってもらったものが参考サイトと違うときは、次の指示文で直してもらいます。特に再現してほしいところを、1つ名指しするのがコツです。

参考サイトと見比べて、まだ違うところを3つ挙げてください。
特に（例：一番上の動画のパネルが3枚続けて並ぶところ）を、強く再現してください。
直したら、もう一度ブラウザで開いて、パソコンとスマホの幅で見せてください。

実演の採用サイトで書くと

動画の実演では、もっと短い指示文で頼みました。ここでは、実演で途中から伝えたことも最初から入れて、そのまま使える形に整えています。上の指示文の記入例として見てください。

1本目は、ロゴの動画と人の場面の動画、あわせて4本を添付して送ります。2本目は、パネルが3枚続けて並ぶところを、もっと近づけてもらうときに送ります。

この参考サイトをもとに、会社の採用サイトを作ってください。
参考サイト：https://wantedlyinc.com/

# 作るサイト
- 誰の、何のサイトか：AIBONNYの採用サイト。会社のブランディングも兼ねる
- サイトの目的：「この会社で働きたい」と思ってもらう
- 見てほしい人：AIを使って、人の心を動かす仕事がしたい人
- 見たあとにしてほしいこと：エントリーフォームから、カジュアル面談を申し込む

# 参考にするところ（一番上のヒーローセクションを中心に）
- 開いたとき：白い画面にロゴの動画が流れ、斜めの帯が開くように1枚目の映像へ切り替わる
- 一番上：画面いっぱいの角丸パネルを3枚、続けて並べる。1枚に1本ずつ動画を流す
- 各パネル：左下に小さな見出しと大きな白い見出し、右下に下線つきの英語のリンク
- スクロール：背景の動画だけを、ゆっくり動かす
- メニュー：上に浮かぶ黒い半透明の帯。下に進んだら、小さな「Menu」にまとめる
- 文字：参考サイトのフォントをなぞる。有料のフォントなら、無料で使える近いものに置き換えて、何に置き換えたかを教えて

# 参考にしないところ
- 参考サイトの文章・写真・ロゴは使わない。中身はすべてAIBONNYのものにする

# 素材（動画4本を添付）
- ロゴの動画1本：開いたときの最初に使う
- 人の場面の動画3本：3枚のパネルに1本ずつ使う
- 動画は音を外して軽くしてから使う。画面に見えている間だけ再生する

# ページの流れ
ミッション → 大事にしていること → 事業 → 働き方 → 募集職種 → 選考の流れ → よくある質問 → エントリー

# 進め方
1. まず参考サイトをブラウザで開き、オープニングとヒーローの動き、使っているフォントを調べて、箇条書きで見せて
2. 上のページの流れで、各章に何を書くかの案を見せて
3. 私が確認してから、作り始めて
4. できたら、パソコンとスマホの幅で開いて、参考サイトと見比べた結果を見せて

参考サイト：https://wantedlyinc.com/

参考サイトでは、一番上に動画のパネルが3枚、続けて並んでいます。ここを強く再現してください。
- パネル3枚を、すき間を細くして縦に続けて並べる
- 1枚目は「私たちのミッション」、2枚目は「大事にしていること」、3枚目は「事業」。それぞれに見出しと英語のリンクを置く
- スクロールしたとき、背景の動画だけがゆっくり動くようにする
- 見出しが変なところで折り返していないか、スマホの幅でも確かめる

直したら、参考サイトと見比べて、まだ違うところがあれば教えてください。

大事なのは、自分の言葉で説明すること

ここまでの4ステップは、誰でもできます。大事なのは、ここからです。

AIに頼む前に、次の3つの問いに、自分の言葉で答えてみてください。答えられないときは、まだ参考サイトの選び方が浅いかもしれません。

1. 参考サイトの、どこが良いのか？
   「なんとなくおしゃれ」ではなく、どの部分かを指さして言えるようにします。
2. それは、なぜ良いのか？
   見た人がどんな気持ちになるから良いのか、を考えます。
3. それは、今回のサイトの目的に合っているか？
   良いサイトでも、目的が違えば合わないことがあります。

動画の採用サイトで答えると

この3つの答えを、指示文の「参考にするところ」に書き足すと、AIにも狙いが伝わります。

真似していいところ、だめなところ

参考サイトから学んでいいのは、雰囲気や見せ方の考え方までです。中身をそのまま使うと、著作権などの問題になります。

今日やること

読み終わったら、次の5つを上から順に進めてください。