「Claude Code」という協力者と、丸１日でポートフォリオサイトを創ってみた【参考記事あり】

ずっとずっと、欲しいと思っていたものがある。自分のこれまでの仕事や自己紹介、ＳＮＳなんかをひとまとめにできて、世界観を反映したポータルサイト。いわゆる「ポートフォリオサイト」だ。

インターネットを拠点に仕事をしていると、書いてきた記事、関わった書籍、担当したＳＮＳアカウントなど、仕事の実績があちこちに散らばっていて、まとめて見られる場所がない。

クライアントさんから「実績がまとまっているものってなにかありますか？」と尋ねていただくたび、むずかしい顔をしていた。

一応、それでも５年前に、自分の仕事を紹介できるような記事を一本創ったが、担当した仕事を羅列するばかりであまり面白みがない。かつ、メディアがクローズされたり、記事のＵＲＬが変わってしまったりなどもあり、逐一のメンテナンスが丁寧にはできていないのも課題だった。

なおかつ、自分の冠している「渧土（ていと）」という屋号への想いもあまり綴れていないし、ｎｏｔｅという媒体の特性柄、デザイン的に自分らしさを表現しにくかったり……などなど、いろいろと課題を抱えていた。

かれこれ３〜４年前から「ポートフォリオサイト創りたいなあ」とは口に出していたのだが、ひとつのサイトを創るというのは、それだけであまりに重労働なのである。クライアントさんと協業する仕事をしながら、片手間で自分のプロジェクトを動かすだけの元気は、ここ数年のわたしにはなかった。

なかったのだが、そんなときに、見つけてしまったのだ。この記事を。

フリーランスとして独立した当時から、いつも我々が歩む道を描き続けてくれている大先輩・のちさんの記事である。読んで絶句。というか、没頭。最近、焚き付けられる機会に見舞われていなかった自分の多動性に、スイッチが入ったような感覚があった。

ということで、一昨日の１９時半から作業を開始して、丸１日。自分のポートフォリオサイトである「渧土」を公開した。

最初の最初につくったものからは、幾度となく修正を重ねているが、思っているよりもずっと自分の願う世界観に近づいたものが創れたような気がしてとっても感動。

嬉しすぎたわたしは、完成したものをすぐさまパートナーに「ねえ！！！！！ 見て！！！！！！！」と見せびらかしたが、「え、すご」と淡白な反応をいただいて、「この感動が伝わりきらんのか！！！！！！」と憤慨して、どうか伝われといわんばかりにこの記事をしたためている。（異業種ゆえ、意図が伝わりきらないのは仕方がないのである）

さて、具体的な作り方やプロンプト（指示）の話は、上記でご紹介している のちさんの記事 で余すことなくご紹介いただいているので、そちらをご覧ください。わかりやすいことこの上ない、というか、その通りに進めば、完成まではたどり着くので。

わたしのほうからは、アレンジしたポイントや自分なりの世界観の作り方について記録を残しておこうと思っている。

サイトマップ、構成についての思案

最初に決めたのは、サイトの骨格。いわゆる「サイトマップ」と呼ばれるものだ。あれこれ作ってしまいたい気持ちは存分にあるのだけれど、最初にこのサイトを開く人は、きっと「この人はどんな人なんだろう？」を知るために訪ねてくれる。

だからこそ、まずは「読んでもらえるもの」をつくれるようにと、詰め込まないことを意識していた。たとえば、「おしらせ」とか「略歴」とか、そういうものはトップに入れない方向性。あったらリッチになる気はするけれど、最後まで読んでもらうために、外している。

今回は、最低限入れたい５つの項目に絞って構成した。

このあたりは、ウェブサイトを調べるなり、メディアを見るなり、そういうインプットが効いてくると思う。もちろん、制作したあとに減らすことも増やすこともできるけれど、最初はミニマムにスタートするほうが、完成までの手間も短く、はるかに気が楽になるはず。

ちなみにこのメニュー、日本語で書くか、英語で書くか、という問題にも直面する。要するに「PROFILE」「ABOUT」「WORKS」……みたいな具合だ。最初はわたしも雰囲気重視で英語を想定したのだが、途中でやめている。

このあとにも記すが、デザインのベースになる屋号が日本語だったから、というのが大きい理由。文筆業という泥臭い仕事に従事している身としても、スマートに整えすぎたくないな〜と思ってのことだった。

こんなふうに、ある程度のサイトマップを先に自分の頭の中で整理しておくと、Claude Codeとのやりとりもぐっとスムーズになる気がした。最初の会話でこれを共有できると、方向がぶれにくいのだ。骨格が決まったら、あとは自分の意思をどこまで持ち込むか、という話になる。そして、そちらのほうが、ずっと大変で、大事なことだった。

サイトの世界観やトンマナの考え方

では、その “意思” はどこから来るのか。
わたしの場合は、「渧土」という屋号そのものだった。

渧土は、一渧の水が土にしたたるかのように、静かに確実にエッセンスを届けていくために名付けた、自分だけの屋号だ。派手さではなく、じわりと染み渡るような言葉を紡ぎたい。その意思をベースに、デザインを考えてもらっている。

渧土のロゴデザインモチーフとして意識してくださっているのは、万年筆で文字を書いたときのような、独特なインク溜まり。日頃から万年筆で文字を書く人間なので、その質感を取り入れてもらっている。乾いた土に、一渧の水がしたたり落ちて、じわじわと広がっていく。そんなイメージだ。

この名刺デザインがあるからこそ、自分のサイトには余白感を入れようだとか、日本語をベースに考えようだとか、明朝体やセリフ体を基本としようだとか、そういう方向性が決まってくる。

また、サイトの背景色にも、名刺の裏面で取り入れていた生成を採用している。表面のミッドナイトブルー（万年筆のインク色）でも綺麗なのだが、サイトの背景色に置くには少々重たかったので今回は見合わせ。いずれ、ワンポイントとしてサイトのどこかに登場させたい。

また、結果的にはだいぶ別物になってしまっているが、もともと活用していたＰＤＦ版のポートフォリオもデザイン例としてClaude Codeに読み込んでもらった。渧土に込めた意思とか意図などのテキスト群は、ここで創ったものを採用している。

要するに、デザインの世界観や意思統一は、一朝一夕だと進まない。というか、わたしの場合はそうだった。日頃から考えたり、インプットしたり、そういう作業や思考を通して、自分の考えごとが「デザイン」という言葉で表現される。そういうことなのだと思っている。

具体的に実装してみたアイデア

のちさんの記事のほうでも、後半に参考にしたサイトの話題が出てくるのだが、わたしにもそれがあって、「milieu」というオピニオンメディアだった。（今はもう更新されていないメディアなのだが、ご存じの方はいるだろうか……きっとその人は同志……）

今は『視点』というメンバーシップで記事を更新されている方で、『ここじゃない世界に行きたかった』『小さな声の向こうに』など、わたしにとってのある種のバイブルを刊行されている。

我々のような１０年前頃から文章を書き始めた人間にとって、道なき道を作ってきてくれたという点で、のちさん同様、昔からこの上ない尊敬の念を抱いている。とまあ、こういうことを書くと、世代というか時代がバレるのでこのへんで……。

このメディア、ローンチ当初から大切に読んできているのだが、とても好きだった点のひとつに「背景色がスクロールに合わせてだんだんと移り変わるデザイン」というのがある。文章で伝わるだろうか、ぜひ、見てみてほしい。

そういう情緒や温度を感じられるような場所にしたくて、似た手法を取り入れることができないかと思案した。

「milieu」では、同様の彩度で構成された、薄付きの青・緑・黄・桃・紫……のような色合いがグラデーションで展開されている。

渧土は、良くも悪くもあまり色そのものに意味づけをしていない。なので、先ほども書いたような、生成ベースで組み立てることにした。渧「土」というぐらいなので、土感を感じられるよう、生成〜黄土色あたりの色を探し、Claude Codeと壁打ちすること１０回ほど。

カラーコードでいうと、#F5F1EA という黄みがかったオフホワイトにはじまり、 #ECE7DF → #E4DDD3 → #DBD3C8 と、少し暗めのグレージュで締まるような移り変わりを設定している。

そもそもサイト自体がそこまで長いものではないので、色も４色に絞り、スクロール量に合わせて変化するような組み方をしてもらった。比較すれば一目瞭然だが、とはいえ、結構ささやかなので、気づく人が気づけば……くらいである。

こういう「〇〇がやりたい！ けど方法がわからない！」みたいなとき、Claude Codeはこの上ない力を発揮してくれるのだな〜と感心した。

かの昔、時間経過で劣化するサイトが話題になったことがあるが、こういうテクノロジーでワクワクできる体験っていいよね。いつになっても、ウェブの面白さをこういう側面で享受している気がする。

それと、ささやかな隠し部屋として、これまでのふわっとした経歴や登壇・取材歴なんかを載せた下層ページも用意してみた。これは、単なる遊び心として。

よく暮らしの発信をしているＳＮＳの投稿の一部を切り出してみたり、ｎｏｔｅの最新記事を読み込めるようにしたのも、ひとつの工夫。このあたりも、ポートフォリオサイトとして人間らしさを感じてもらうために入れたかった要素だ。

今後、アップデートしたい内容について

そんなこんなで書いてみたけれど、これが一日で概ね完成して公開されていると思ったら、文明の利器ってすごいとしか言いようがない。細々した修正を重ねたって、たったの二日。実作業時間だけでいえば、１０〜１５時間程度だろう。

もちろん、現時点では「人に見せられるくらいのものを一旦公開した」くらいの段階で、これから修正をしていきたい点は、いくつかある。

まずひとつは、「渧土」という屋号に込めた考えとか、前述したような名刺デザインの話を改めてしっかりと記載すること。下層ページを作ったり、別記事としてｎｏｔｅを公開したいと思っているので、次の一手として頑張りたいところ。

それと、今あるお仕事一覧のページに対して、より詳細な情報を掲載できるようなページも作りたい。タグを付けて検索性を高められるようにだとか、どういう役割でその仕事に関わっていて、どんなこだわりを持って携わっているのか、などを記載できる場がほしいのだ。

どんなサイトやサービスでもそうだろうけれど、公開しただけでは役割を担えておらず、育てて届けてはじめて成立するもの。だから、そのアップデートや成長に対して、しっかりと向き合っていきたいな〜が今の思案である。

さて、最後に。
こんな話をしてしまうと「今までのはなんだったんだよ！」ってツッコまれてしまうかもしれないけれど、わたしは、ＡＩってものにそこそこ助けられている割にネガティブな視点を持っている。

「なんだかズルしているんじゃないか」とか、「アウトプットがそれっぽいだけで本質的ではないんじゃないか」とか、そういう種のジレンマに陥るのだ。書く仕事はとても地味だからか、その地味さを手放してしまっているのではないか、という罪悪感に駆られることもある。

けれども同時に、多大なる恩恵を受けている。たとえば、インタビューの文字起こしをするとき、昔は音声ファイルを聴いて巻き戻したりしながら手作業でタイピングしていたものだが、今はＡＩに音声データを読み込んでもらってある程度の自動化ができている。

記事構成に悩んだときに壁打ちをしてもらったり、情緒的な表現を考えたいときに相談したり、そのパートナー感に助けられたことは数知れない。

「書くこと」を生業としているけれど、それは同時に「届けること」への責務でもあるので、自分はいったいなにを大切にしながら働いたらいいのか、という問いへの回答を探していたのだ。

そういう思案を重ねていたとき、ふと、自分とＡＩとの付き合い方を考える機会に出会った。それも、のちさんの記事だった。

この記事を書くきっかけになったのちさんが、ポートフォリオサイトを作る前からこんなことを書いていて、目に留まったのだ。

それならばせめて、少なくとも「すごい」と思っている自分の感覚には嘘をつかず、作れそうなものを試しに作ってみよう。使いながら、自分なりの付き合い方に関するこたえを探してみよう。そういう感覚になったのだった。

そうして、夜中も早朝も関係なくClaude Codeと付き合ってみて、見えた自分なりの解は、「結局、意思なき世界を凌駕するのが人間」ということ。

Claude Codeに丸投げしたって、それなりのものはできるかもしれない。それっぽくはなるかもしれない。けれども、人の解釈や意思があって、その手段として彼らをパートナーに据えられるほうが、心地良い。

ノーコードでデザインが完成するから知識はなくてもできるけれど、色やフォント、マージンや余白、それらの知識や活かし方を知っているほうが、よっぽどパートナーとして伴走してくれる。そんな気がした。

この記事の表題を “「Claude Code」という協力者” としたのは、それが理由だ。わたしのような、やりたいことがいっぱいあるけど、時間も足りない、脳にアイデアが溢れて止まらない、そんな人間にとっては、うまく付き合えばちゃんと救世主になってくれる。

自分が培ってきた知識、考え方、意思、そういうものを失うことなく、置き去りにすることなく、仲良く朗らかにClaude Codeと向き合うことができれば、この先の人生はすごく楽しそうだな〜と、そんなことを感じている、この頃なのであった。

感傷的になりそうなので、本日はここまで！

サイトをつくるにあたり学ばせてもらったのちさんの記事、再掲します。多くの方の助けになるといいな〜。