コードもデザインも文章もAIに任せて、納得できるポートフォリオを作った工夫
自分の情報はLLM Wikiから、文章の書き方は大量の実例から。仮想読者の感想をもとに修正を繰り返し、手作業の負担を減らしたポートフォリオ制作の話です。
目次
自分のポートフォリオサイトを、コードもデザインも文章もAIに任せて作りました。出来上がりにはかなり満足しています。暗い背景に細い罫線で、作品ごとの画像やカードの動きもある、欲しかった雰囲気のサイトになりました。
ただ、一度お願いしただけでこの状態になったわけではありません。参考資料を集めてスキルにしたり、AIに仮想読者を演じてもらったりと、いくつか工夫しています。特に効いたと感じたのは、文章を読んだ感想をAIに返してもらい、修正のラウンドを回したことでした。
以前は不自然なところを何十個も自分で直していました。それを1回の指示で、AI側にレビューと修正を繰り返してもらえるようになったのが良かったです。今回は、特に文章と見た目を納得できる状態にするために試したことを書きます。
実装にはAstroとTailwind CSSを使い、Cloudflare Workersで配信しています。フレームワークは最初にAIと壁打ちして決めました。何も言わないとHTML/CSSの直書きで済ませようとすることがあったので、目的に合う技術を選ぶところは一緒に考え、その後のコードはAIに任せています。
自分の情報を、プロンプトに書き直さなくてよかった
最初の依頼は、これです。
自分のポートフォリオサイトを作ってくれませんか? ドメインは shu-pf.com にしてください。それから、リニアっぽいデザインにしてくれると嬉しいです
経歴や作品の説明は、このプロンプトに一切入れていません。自分の情報を個人開発アプリの「LLM Wiki」で管理していて、AIがそこを参照できる状態だったからです。
AIに掲載候補を集めてもらい、その中から作品を選びました。職歴や音楽の制作実績も載せ、英語と日本語の両方を用意しています。自分のことを一から説明する準備が要らなかったのは、良かった部分です。
LLM Wikiを用意しなくても、経歴や制作物をまとめた既存の資料をAIに読ませる形で始められます。今回も、AIが自分のことを知らない状態から紹介文を考えたわけではありません。
良い文章の実例を集めて、書くためのスキルを作った
最初の文章は、かなりClaudeっぽく感じました。独特な決め台詞や、見出しの組み立て方、書いてあること自体に違和感がありました。
そこで、ポートフォリオの文章を書く専用スキルを作ってもらいました。スキルは、AIが作業するときに読む手順と参考資料です。英語・日本語の個人サイトを集め、自己紹介や作品説明、締め方の特徴を分析して、書くときの参考にしました。制作時の記録では、本文を取得できたのは英語55件、日本語23件の計78サイトです。こうして分析用に集めた文章群を、ここではコーパスと呼んでいます。
この方法は、先にブログ記事用のスキルを作ったときに試したものです。そのときは、文章を人間らしく直すためのツールだけでは、AIっぽさが抜けませんでした。言葉遣いだけでなく、中身がAIっぽいのだと思い、大量の人気記事を読ませて特徴を蒸留することにしました。最初のスキルは薄くてあまりうまくいかず、「10倍くらい分量を増やして」と頼んでから、手応えが出始めました。
増えたのは、単なる説明の長さではありません。実例や引用と一緒に、「こういうパターンがある」「こういうときはこう書く」「こういう章構成にする」という分析が増えていました。
ポートフォリオ用にも同じやり方を使いました。成果物は一枚の長い指示書ではなく、作業手順と、必要なときに読む実例集に分かれています。実際のファイル名から一部を抜き出すと、こういう構成です。
SKILL.md 書く・直す・レビューする手順
references/
openings.md 名乗りと自己紹介の実例
work-and-closings.md 作品説明と締め方の実例
japanese-patterns.md 日本語サイトの実例
human-texture.md 人間らしい文章の実例
ai-smell.md AIらしい文章の特徴と直し方そこから、たとえば次の指示を取り入れました。
本人が本当に語りたい作品を 1〜2 つ選び、そこだけ長く書く。他は 1〜2 文で済ませる
サイトではHearthの説明を長めに、ほかの作品は短くしています。全作品を同じ分量で紹介する形から、書く量に差を付けました。
連絡先の文章も、実際にこう変えています。
修正前：連絡はメールが一番早いです。返信は遅いこともありますが、全部読んでいます。
修正後：連絡はメールが一番早いです。
「全部読んでいます」は、こちらが伝えていない内容でした。「毎日使う」「一番よく開く」といった記述も同様です。親しみやすく聞こえる文でも、自分の体験として渡していないものは削っています。
「これを読んでどう思うか」を、仮想読者に聞いた
コーパスを使うと、構成はだいぶマシになりました。でも、それだけでは残る不自然さがありました。
たとえば、「このプロダクトは自分専用です」という趣旨を、何度も繰り返すことです。一度なら、そういうものなのだと分かります。でも何度も言われると、「なぜそんなに自分専用だと強調するんだろう」と深読みしてしまう。大して重要でもないことに注意を使うので、読んでいて疲れます。
人間が文章を書くときは、何度も見返して、リズムが悪くないか、読みにくくないかを気にすると思います。AIに書かせた文章では、情報を一通り説明できていても、この読んだときの感覚が抜けているように感じました。
それなら、AIに読む人を演じてもらい、「これを読んでどう思うか」を考えてもらったらどうだろう。Gauntlet Loopから着想を得ました。取り入れたのは、作る役とは別に評価する役を置き、評価を受けて修正する反復です。これを文章に応用して、読者役の感想を受けて修正し、また読んでもらうラウンドを試しました。
ポートフォリオの読者は、日本と海外のエンジニアに絞っています。
- A：サンフランシスコのスタートアップで採用にも関わるシニアエンジニア。同僚からリンクをもらい、スマホで英語版を2分読む。日本の会社名や同人音楽は知らない。
- B：Qiitaの記事から来た日本のエンジニア。採用目的ではなく、参考になる実践や今後も読みたい発信を探している。
文章を書くClaude Codeとは別に、Codexにこの読者役を頼みました。サイトの文言を渡して読んでもらうと、こんな反応が返ってきました。
元の文章：Most of these I made for myself.
読者役の反応：それはさっき聞いた。誰のためかより、何ができるのかを見たい。
自分が感じていた違和感を、言い当ててくれた感覚でした。プロフィールですでに自分用の道具を作っていると説明し、作品紹介でもまた同じ話をしていたんです。実際の修正では、この作品欄の前置きを削っています。
別の例では「エージェントの記憶は Markdown の vault です」を「エージェントの記憶は Markdown のノート群です」に直しました。前者は自分とAIの間では通じても、初めて来る読者には伝わりにくい表現でした。反復を消すだけでなく、読者が知らない言葉を見つける役にもなっています。
「自然な文章にして」だけだと、言葉の置き換えで終わることもあります。「この人が読んだらどう思うか」と考えてもらうと、文として成立していても、そこで言う必要がないことを拾ってくれました。
当時の指示の要点は、次のようなものです。上の読者設定と、読ませる文言を一緒に渡します。
各読者になりきって、素材を上から読んでください。
「なぜ私にそれを言うのか」「自信の表明や言い訳に見える」
「意味が取れない」「事実として疑わしい」と感じた文を、
原文引用と一言の反応で返してください。
読後に持ち帰る印象も、読者ごとに書いてください。
書き換え案は書かず、ファイルも編集しないでください。返ってきた指摘をClaude Codeが直し、Codexが同じ読者設定で再読します。読者役は感想を返すところまでで、修正は書き手が担当する分担です。
サイト文言は4ラウンドで指摘がなくなりました。自分が一つずつ何十個も指摘する代わりに、この反復をまとめて頼めるのが良かったです。「1回の指示で済んだ」というのは、AIの修正が1回だけだったという意味ではありません。
デザインにも、参考にするものと見る人を用意した
デザインはLinearを参考にしました。暗い背景や細い罫線、抑えた色使いを取り入れています。ただ、初版はSaaSの紹介サイトに寄りすぎていたので、「ポートフォリオとしてやり直し」と伝えました。
作品用の線画は、実際のWebページやアプリの紹介画像へ変更。冒頭の文章も、肩書きだけを置く形から、名前を名乗って何を作っているかを伝える形に直しました。見た目の雰囲気を参考にしつつ、紹介するものは自分の作品に合わせています。
さらに、仮想ペルソナに画面を見せ、「これを見たときにフロントエンド力を感じられるか」という観点で感想をもらいました。スクロールで要素が現れる動きや、カードにカーソルを載せたときの変化も加えたうえで、余白や画像の扱いなどの指摘を受けて修正しました。
デザインのレビューは11ラウンド続けました。AIからの指摘がすべてなくなったわけではありません。最後は自分で見て「それでいいと思う、公開して」と判断し、その際に気になった「作ったもの」という言葉の重複を削っています。
今のサイトは、よくある「AIで作りました」という感じが出ず、いい雰囲気になったと思っています。参考にする既製品を示し、見る人の反応を聞きながら直していくやり方が、見た目にも効いたと感じています。
一つずつ違和感を指摘する負担が減った
自分で何十個も修正点を挙げていたときは、「ここも変」「ここも繰り返している」と、一つずつ伝える必要がありました。仮想読者に「それはさっき聞いた」と返してもらえたとき、自分が感じていた違和感をAI側でも拾えるのだと分かりました。
同じように文章を直す負担を感じているなら、上の読者設定を自分の文章の読み手に置き換えて、感想を聞いてみてほしいです。自分には言い当ててくれた、と感じられる反応がありました。