SELF-INTRO SITE × 9 DESIGN PATTERNS
同じプロフィール情報のまま、デザインだけを9通りに変えられる、Claude Code用のプロンプト集です。 コピーして、【 】の中を自分の情報に差し替えるだけで使えます。
どのパターンでも最初に貼るブロックです。「事実を足さない」の一文が、AIの盛り防止に効きます。
以下のプロフィール情報を使って、1ページ完結の自己紹介サイトを作ってください。 ■ プロフィール情報（この内容だけを使い、ここにない事実や数字を足さないでください） ・名前：【名前（例：やきいも）】 ・英語表記：【ローマ字表記（例：yakiimo）】 ・キャッチコピー：【自分をひとことで（例：AIで「作る」を、週1から。）】 ・肩書き：【肩書きや経歴（例：AIクリエイター｜エンジニア歴15年）】 ・自己紹介：【2〜3文の自己紹介】 ・いまやっていること： 1.【活動その1と、ひとこと説明】 2.【活動その2と、ひとこと説明】 3.【活動その3と、ひとこと説明】 ・実績：【受賞歴・数字など。なければこの行ごと削除】 ・作ったもの（2〜4件）： 1.【作品名】｜【ひとこと説明】｜【カテゴリ】｜【URL】 2.【作品名】｜【ひとこと説明】｜【カテゴリ】｜【URL】 ・SNS・リンク： ・【サービス名（例：X）】：【URL】｜【ひとこと（例：日々の制作記録）】 ・【サービス名（例：note）】：【URL】｜【ひとこと】 ・お問い合わせ：【誘導先（例：XのDMか公式LINEへ）。メールアドレスは載せない】 ・アバター画像：【画像ファイルのパス。なければ「画像なしで構成してください」と書く】
スマホ対応・アクセシビリティ・「シグネチャー要素1つ」など、仕上がりの質を底上げする指定です。
■ 技術要件（必ず守ってください） ・HTML・CSS・最小限のJavaScriptを、1つのindex.htmlにすべて入れてください （外部ライブラリやCDNは使わず、フォントはGoogle Fontsのみ可） ・スマートフォン（幅360px）からPCまでレスポンシブ対応にしてください ・外部リンクには target="_blank" rel="noopener" を付けてください ・アニメーションは prefers-reduced-motion の設定で止まるようにしてください ・キーボード操作時のフォーカスが見えるようにしてください（:focus-visible） ・本文の行間は1.8前後にして、日本語が読みやすいフォントを選んでください ・絵文字を装飾として多用しないでください ・プロフィールにない情報・実績・数字を創作しないでください ・最後に「このページだけの記憶に残る小さな仕掛け」を1つだけ入れて、 それ以外の装飾は控えめに整えてください
■ デザイン指定 デザインテーマは「白×余白のミニマル」です。 白背景をベースに、黒〜濃いグレーの文字を使ってください。 アクセントカラーは、自分らしい色を1色だけ選び抜いて使ってください。 余白を広く取り、装飾を増やしすぎず、 タイポグラフィとレイアウトだけでオシャレに見せてください。 カードや枠線を使いすぎないでください。 ファーストビューでは、名前とキャッチコピーを大きく見せてください。 構成は、 ・Hero ・About ・What I Do ・Works ・Links ・Contact にしてください。 Apple製品ページやデザイン事務所のサイトのような、 情報が整理された静かな雰囲気を目指してください。
■ デザイン指定 デザインテーマは「黒背景のクリエイターサイト」です。 背景はほぼ黒にして、白文字を中心にしてください。 アクセントカラーは1色だけ。よくあるネオングリーンは避けて、 自分の世界観に合う色を選んでください。 ファーストビューでは、名前またはキャッチコピーを 画面いっぱいに近いサイズで配置してください。 小さな文字を並べるより、大きなタイポグラフィと大胆な余白で見せてください。 構成は、 ・Hero ・Profile ・Selected Works ・Activity ・Social Links ・Contact にしてください。 スクロール時に少し動きを感じる演出は入れてもいいですが、 過剰なアニメーションは避けてください。 デザイナーや映像制作者のポートフォリオのような、少し尖った印象にしてください。
■ デザイン指定 デザインテーマは「雑誌・エディトリアル」です。 WebサービスっぽいカードUIではなく、 雑誌やカルチャー誌の誌面のようなレイアウトにしてください。 「個人のWebマガジン」の雰囲気です。 大きな見出し、小さなキャプション、細い罫線、ページ番号や号数の表現、 余白を組み合わせてください。 見出しは明朝体などで大胆に、本文は読みやすさを優先してください。 紙の質感を感じる背景色＋特色1色の「二色刷り」のような配色もおすすめです。 構成は、 ・Cover / Hero ・Short Bio ・Story ・Current Projects ・Selected Works ・Links にしてください。 縦に同じ幅のセクションを積むだけでなく、 左右にずらしたレイアウトや2カラムも取り入れてください。 スマートフォンでは1カラムに整理してください。
■ デザイン指定 デザインテーマは「作品が主役のポートフォリオ」です。 ファーストビューは、名前・短い肩書き・1〜2行の自己紹介だけにして、 その下からすぐWorksセクションに入ってください。 作品は大きなカードまたはグリッドで見せて、 それぞれにタイトル・短い説明・カテゴリ・リンクを表示してください。 美術館で額装された作品を見るように、 背景はニュートラルにして作品画像を引き立ててください。 構成は、 ・Hero ・Selected Works ・About ・What I Do ・Social Links ・Contact にしてください。 自己紹介文を長くするより、 作品を見れば「何をする人なのか」が伝わる設計にしてください。 余白を広めにして、作品カードを大きく見せてください。
■ デザイン指定 デザインテーマは「カラフルで遊び心のある個人サイト」です。 明るい背景色と、2〜3色のアクセントカラーを使ってください。 丸みのあるカード、ラベル、ステッカーやシール帳のようなUIを取り入れて、 少し遊び心を感じるデザインにしてください。 ただし子ども向けにはせず、大人のクリエイターが使えるオシャレさを残してください。 構成は、 ・Hello / Hero ・About Me ・What I'm Making ・Things I Like ・Works ・Find Me Online にしてください。 SNSリンクは普通のボタンを並べるだけでなく、 カードやタグのように楽しく見せてください。 軽いホバー演出は入れて構いません。
■ デザイン指定 デザインテーマは「ブルータリズム風の大胆なタイポグラフィ」です。 太い黒線、大きな見出し、強いコントラストを使ってください。 きれいなSaaSサイトのように整えすぎず、 少し無骨で実験的なWebデザインにしてください。 背景は白または明るい単色を基本にして、 アクセントに強い色を1色使ってください。 影を付けるならボカさない「ハードシャドウ」にしてください。 構成は、 ・NAME / Hero ・WHO AM I ・WHAT I DO ・PROJECTS ・LINKS ・CONTACT にしてください（見出しは英語の大文字、本文は日本語でOKです）。 各セクションを太い罫線で区切り、 文字そのものをグラフィックのように見せてください。 読みにくくなりすぎない範囲で、少しクセのあるレイアウト （傾き・はみ出し・流れる帯など）を1つ入れてください。
■ デザイン指定 デザインテーマは「ターミナル・コードエディタ風」です。 ダーク背景に等幅フォントを使った、技術者らしいデザインにしてください。 ただし本物のターミナルの完全再現ではなく、 一般の人にも読みやすいポートフォリオサイトにしてください。 ファーストビューでは、 > whoami のようなコマンド表現のあとに、名前・肩書き・短い自己紹介を表示してください。 構成はセクション名をコマンド風にして、 ・whoami ・about ・current_projects ・works ・links ・contact にしてください。 配色は「黒＋緑1色」のよくあるターミナル風ではなく、 コードエディタのカラーテーマのように、 落ち着いた複数色のシンタックスカラーで設計してください。 行番号・タブバー・ステータスバーなど、エディタらしい意匠を少し入れてください。 実際に操作できる複雑なターミナル機能は不要です。
■ デザイン指定 デザインテーマは「未来的なAI・テック系」です。 ダークまたは明るいニュートラルな背景に、 青・紫・シアン系のグラデーションをアクセントとして使ってください。 光の表現は全体にちりばめず、ヒーローなど1〜2箇所に絞って上質に使ってください。 ファーストビューでは、名前とキャッチコピーを大きく表示して、 背景に控えめなグラデーション表現を入れてください。 構成は、 ・Hero ・About ・Now ・Projects ・Experiments ・Links ・Contact にしてください。 半透明のガラス風カードを大量に並べるのは避けて、 余白を使って高級感を残してください。 未来感は出しつつ、派手すぎないようにしてください。
■ デザイン指定 デザインテーマは「個人のノート・日記のような温かいWebサイト」です。 真っ白ではなく少し温かみのある背景色を使い、 文字は黒ではなく濃いブラウンやチャコール系にしてください。 紙のノートや小さな出版社のサイトのように、 落ち着いて文章を読めるデザインにしてください。 構成は、 ・こんにちは / Hero ・自己紹介 ・いまやっていること ・作ったもの ・書いたもの ・SNS・リンク にしてください（セクション名も日本語のままで）。 装飾は控えめにして、手書き風の小さなメモ、マーカーの線、 破線の罫線などのアクセントを少しだけ使ってください。 文章が主役になるように、本文の読みやすさと行間を大切にしてください。
9パターン全部作ったら、一覧ページでまとめると見比べやすくなります。
作成した9パターンの自己紹介サイトを見比べられる、一覧ギャラリーページを作ってください。 ・トップページに9枚のカードを並べて、各パターンのページへ移動できるようにしてください ・各カードは、そのパターンの配色・書体を使った「小さな見本」にしてください （同じ名前が9通りのデザインで並ぶと、違いがひと目で伝わります） ・各パターンのページには、ギャラリーへ戻る小さなリンクを付けてください ・スマートフォン表示にも対応してください
9案から1案に絞り込むときは、好きな要素を組み合わせて仕上げます。
9パターンを見比べた結果、ベースは【パターン番号】にします。 ただし、 ・【要素（例：見出しの見せ方）】は【パターン番号】 ・【要素（例：Worksのレイアウト）】は【パターン番号】 の要素を取り入れてください。 全体の統一感が崩れないように調整して、 最終版の自己紹介サイトとして仕上げてください。 スマートフォン表示も確認してください。