じぶんの世界観をClaudeでテンプレート化する（お試しDLファイル付き）

この記事は全3回シリーズの第2回目です。

1回目「ClaudeでWebサイトをつくる」はこちらから▽

少し前に、自分のポートフォリオサイトをClaudeと一緒につくってみました。できたものはかなり（！）想定していたイメージに近くって、余白がたっぷりあって、写真が主役で。言葉がそこに寄り添う感じのデザインに仕上がりました。

もちろんプロから見たらめちゃくちゃ拙いサイトだと思うけれど、素人からするとかなり満足度が高くてホクホク！
「これこれ〜！これがやりたかったんだよ〜」と素直に思える、何度も覗きたくなるお気に入りのサイトが完成。

ただ正直に言うと、ここにたどり着くまでにはけっこうな時間がかかった…。はじめてClaude Codeを触ったとき、最初に出てきたサイトは「うわ〜すっごいAIっぽいな」が第一印象。
この「AIっぽい」を言語化するのはどうにも難しいのだけれど、広告であれ画像であれ、AIの香りがとにかくぷんぷんするサイトが出てきた。隙がないというのか、温度感がないというのか。でもこの「AIっぽい」は、多分万人が感覚でキャッチできるものだと思う。（そしてテンションも下がった 笑）

そこから「もっと余白をあけて」とか「文字はもっと細くして」「この色はいらないからこっちにして」と何度も何度も根気よく指示を出し、ようやく今の雰囲気が出来上がった。

多くの人にとって「サイト作り」はあくまで入り口である、ということ

ずっと欲しかったサイトが完成してもちろんとっても嬉しかったし、満足したけれど、正直サイト作りはあくまで「入り口」であって、多くの人が時間を使いたいのは、その先のほうだと思う。なのでサイト作りに毎回ものすごいエネルギーを取られるのは、できれば避けたい。

だったら1度こうやってたどり着いた「わたしの理想」を、毎回Claudeに説明し直すんじゃなくて、最初から「これでよろしく」と渡せる形にしておけば良いのだ。そう考えて「Skills」を作ることにした。

以下、Skillsの作り方や実際の指示、Before Afterの結果や途中経過のものだけどSkillsのDLして実際使えるファイルも置いています。よければ一緒に勉強しましょう！