自分のドメインのリンクページを AI でつくる

次の人のリンクを見出しで分けてまとめた、リンクのページを 1 ページでつくってください。SNS のプロフィール欄に貼り、本人のドメインで公開するページです。

本人とリンク（見本のページの例。依頼の内容で置きかえる）:
早瀬りく。UI デザイナー・写真。東京でフリーランス。アプリと Web の画面をデザインしていて、週末は街の色を撮っている。いちばん見てほしいのはポートフォリオ（アプリと Web の画面デザイン 12 件）。仕事: お仕事の相談（hello@example.com、2 営業日以内に返事）、書いた記事（画面デザインのこと、月に 1 本）、登壇の資料（2026年のデザインの勉強会）。つくったもの: 週末の写真（街の色を集めた作品集）、文字の実験（試作中のかなの書体）。SNS: Instagram（写真）、X（デザインの話）、YouTube（作業の録画）

入れるもの（依頼に合わせて、足したり外したりしてかまいません）:
- いちばん上に、名前の頭文字のマーク（日本語の名前なら名前の 1〜2 文字。画像の URL が依頼にあれば、その画像）、名前、肩書き、1〜2 文の紹介、場所や働き方を短く
- いちばん見てほしいリンク（依頼に書かれていなければ、最初に書かれたリンク）を 1 つ、アクセントの色の大きなボタンにする
- 残りのリンクは、「仕事」「つくったもの」「SNS」のような見出しで分けた一覧。1 行に 1 つ、リンクの名前と、そこに何があるかを短く。メールのリンク（mailto:）は、メールアドレスが依頼にあるときだけ
- 最後に「このページのリンクをコピー」のボタンと、© と名前
- リンクは HTML に直接書く（スクリプトでつくらない）。JavaScript はリンクのコピーにだけ使う

事実の扱い:
- 名前・リンク先・メールアドレスは、依頼に書かれたものだけを使う。上の例（見本のページ）の名前・リンク・メールアドレスは、依頼の人のものではないので使わない。名前が書かれていなければ「なまえ」、リンク先が書かれていなければ "#" にする（仮のものはこの 2 つだけ）
- @ID、リンク先の URL、メールアドレスは、依頼に書かれたとおりに 1 文字ずつ写す。「_」「.」や数字も、そのあとに続く文字も ID やアドレスの一部なので、削ったり短くしたり、それらしく整えたりしない
- 依頼に何もない欄（肩書き・紹介・場所・見出しのまとまり）は、見出しごと入れない。「リンクの名前」「ここに書く」のような、書き方を指示する仮の文字は書かない。リンクが 3 つ以下なら、見出しで分けずに 1 つの一覧にする
- 雰囲気や色の指定（「黒い背景で」など）や「お店の予約と SNS をまとめて」のような希望は、見た目と並べ方だけを変える。依頼にないリンクや見出しを足さない
- 実績の数、料金、取引先の名前は、書かれていなければ載せない
- 個人の住所と電話番号は載せない（お店の住所と電話番号はよい）

デザイン（このページの DESIGN.md。毎回これに従う）:
- 見た目は依頼にいちばん近いものを 1 つ選ぶ。色の指定があれば、アクセントの色を差し替える
  - A 白と罫線（指定がないとき）: 背景 #FFFFFF、面 #F5F6F8、文字 #15171C、薄い文字 #5A606B、線 #E3E5E9、アクセント #1F5FD1（大きなボタンの面。上の文字は #FFFFFF）。角 12px、一覧は 1px の罫線で区切る。フォント IBM Plex Sans JP（400 と 600）
  - B インク: 背景 #101214、面 #1A1D21、文字 #F0F2F5、薄い文字 #A3AAB5、線 #2A2F36、アクセント #8AB4FF（大きなボタンの面。上の文字は #101214）。角 12px。フォント IBM Plex Sans JP（400 と 600）
  - C 生成りと一色（お店に）: 背景 #F6F1E8、面 #FFFDF8、文字 #2A251E、薄い文字 #6A6155、線 #E4DACB、アクセント #2F6B4F（大きなボタンの面。上の文字は #FFFFFF）。角 16px。見出し Zen Old Mincho（700）、本文 IBM Plex Sans JP（400 と 600）
- 色は CSS 変数（--bg、--surface、--ink、--muted、--accent、--line）にまとめる。差し替えた色でも、文字と背景のコントラストは 4.5:1 以上
- 文字: 名前 22px、リンクの名前 16px（大きなボタンは 17px）、説明 14px、見出し 13px で字間を少しあける。本文の行の高さ 1.7。日本語は word-break: auto-phrase
- 余白は 4px の倍数（4・8・12・16・20・24・32・40・64）。見出しのまとまりのあいだは 32px
- スマホでは 1 列で最大 560px。幅 960px 以上では、左に名前と大きなボタン（スクロールしても残る）、右にリンクの一覧の 2 列
- リンクが 3 つ以下の短いページは、名前とリンクのまとまりを、最初の画面（下の Convika のバナーの上）の縦の中央に置く（パソコンでも 1 列のまま）
- 動き: 表示されるときに 0.4 秒でふわっと出る、指やカーソルを乗せた一覧の行は面の色になる。prefers-reduced-motion のときは動かさない
- リンクとボタンは、どれも高さも幅も 44px 以上（min-height: 44px。Tailwind なら min-h-[44px]）、一覧の行は 56px 以上。リンクの文字は行き先がわかることばにする（「詳細」「こちら」にしない）。ボタンの文字は 1 行。横にスクロールしない
- 避けること: アイコンだけのリンク、SNS のロゴの画像、1 つの見出しに 7 つ以上のリンク、文字のグラデーション、画面の下に固定するもの（Free のページは、いちばん下に Convika のバナーが出る）
- 文章は短く。リンクの説明は 1 行で

HTML ファイル 1 つで、CSS と JavaScript もその中に書いてください。入力された内容はどこにも送らず、画像ファイルは使わないでください。スマホの縦画面でも使えるようにしてください。画面のいちばん下の右側はあけておいてください。応援ボタンが出ることがあります。

上の内容は見本です。しくみや画面の組み立て、雰囲気はそのままに、次の希望に合わせて中身を変えてください。
つくりたいもの：＿＿＿