ポートフォリオサイト新しくしました

4年ほどぶりにポートフォリオサイトを刷新しました。

前のサイトはデザインは自分でリサーチし、雛形はv0に書いてもらい、残りは手で書いていました。

今回はデザインアイディアも一旦Claudeにリサーチさせ、その中から自分が気に入ったものを選び、それをさらに磨きながら、形にしてもらった、もちろんコードは全く手では書いてないが、レビューをしながら直してもらいながらやった

昔から好きだった、グリッドシステムという本からインスパイヤを受けて、作りました。

実際これ通りにはならなかったのですが、かなりお気に入りのデザインができたと思います。

しかし友達に見せたところ、AI Slopぽくみえると言われたのはちょっとショックでした、多分グリッドシステムはとても堅牢であらゆるインターフェイスに適していて、人類歴史上で幅広く使われているので、AIが一番学習している可能性が高いのかもしれません。

僕は Profile にある通り、グラフィックアートを作るのがすきで、その中でも特にタイポグラフィが好きでした。今回一回Claudeに現在2026のデザイントレンドをリサーチさせました、その中でも面白いものがいくつかありましたが、僕のようにポートフォリオを自分の履歴としても、人間性を表現できるデザインが中々見つからなかったです。

そこでいろいろ考えた結果、昔自分が新人の頃に学んでいたグリッドシステムとタイポグラフィーの組み込みせることで、文書にも強く個性も出せると思い、2日ほどClaudeに文句いいながら進め、やっと納得の行くデザインができました。

今回も前回に引き続き astro.js を使って作っています、その理由は Astro.jsはSSGに特化していて、あらゆる部分でのオプトマイズが優れていて、軽量で読み込みの早いサイトを作るのに向いています。

それだけではなく、viteと一体化しており、モジュールシステムも強力です。

そして、今回一番大きのが、@cosense-toolbox/astro の導入です。

最近自分が@cosense-toolbox というcosense をより便利で拡張しやすくするために開発している、ライブラリキットで、そこには今回のようなケースのためにの@cosense-toolbox/astroが用意されています。

プライベートのCosenseプロジェクトから外部に出したい記事をビルド時に自動で抽出し、静的なHTMLとして出力してます。簡単に言ってしまうと、Cosense をCMSとして使う感じです。

僕の身の回りのナレッジはすべてCosenseに集約されており、そこから必要な情報を抽出して、外部に出したいものだけ出していくことが今回はもう一段階と簡単になりました、なので、実はこのページもCosenseから書いていて、そこで管理しています。