サイトについて

最近、2026 年 4 月ごろにまたサイトを書き直した。UI 案はかなり色々試したけれど、結局いまの版に落ち着いた。もともとはサイドバーを付けるつもりだったが、全体の見た目がいまひとつだったので、結局消した。はは。

Agent の使用

はっきり言っておくと、このサイトの内容は、文書もコードもモーションも、全部私が 1:1 で詰めたものだ。AI で作ったなんて言われるのは、侮辱だ。Instant Design の元ファイルだって今でも持っている。もちろん、私の小作文が少し機械っぽく見えることはある。でも、それは記事が AI で回っているという意味ではない。侮辱しないでほしい。

Agent の助けを借りて完成した機能は、もちろんある！ だが、私は Instructor だ。ヘッダーの Blur + Mask は、ブラウザで確認しながら TailwindCSS を手で組み込んだものだ。特に私の UI と CSS の腕前を侮辱しないでほしい。サイトのフォントだって、Google Fonts から一つずつ自分で選んだ。ましてや各機能は言うまでもない。

雑記

認めざるを得ないが、美意識は本当に人それぞれだ。とはいえ、これは自分のサイトなので、正直好きにやる。肝心なのは、他人のサイトと同じ顔にしないことだ。

だから…… かなり大胆に、ほんとうにかなり大胆に Menu をページ最下部へ移し、Header には読書進捗バーといくつかの操作ボタンだけを置き、Footer はサイトの LOGO と非核心ページへのリンク、外部リンク、そして备案番号だけにした。さらに Header と Menu には Blur Mask も入れて、スクロール時のテキストがなめらかに切り替わるようにしている。

もう一つは、今回は本文にセリフ体を使い、サンセリフ体はタイトル、ボタン、ヘッダー、フッターなど非核心の文字にだけ使うようにしたことだ。Source Han Serif も含めて、少しセリフ体を使いすぎている気はする。自分ではかなり綺麗だと思っているが、この組み合わせが苦手な人に怒鳴られたくはない。

セリフ体を使う発想の出どころを話すと、実は Claude を使っていたときに刺激を受けたのがきっかけだ。もっとも Anthropic は翌朝には私を封じたけど、はは。Anthropic のやたらとアカウントを封じる癖はひとまず置いておくとして、公平に見よう。Claude のデザインはかなり独自色が強い。丸みのあるサンセリフ、真面目なセリフ、冷たい黄色のテーマカラー、そして周囲にあるシンプルな線画。Claude の核となる特徴である、近寄りがたさ、抑制、成熟をとてもよく表している。

お隣の OpenAI のデザインもかなりミニマルで、強い立体感のある混色背景に抑えたサンセリフが乗っていて、これも良い UI 実践だと思う。だが Gemini はテキスト選択がしづらいし、Material Design のごちゃごちゃした色、影、角丸はどうにも好みじゃない。

だから、もしこのサイトのデザインスタイルを一言で言えと言われたら、最初に浮かぶのはたぶん 抑制 だ。Primary 色ですらただの差し色で、いちばん目立つのは相変わらず黒、グレー、白。要するに、余計なデザインはしない。Less is More.

ただ、もう少し説明しておく必要はある。私はデザイン出身ではないので、フロントエンドを書きながら長年いろいろなサイトを見てきた中で身についた「デザイン勘」だけを頼りにしている。しかも、もう一つ問題があった。プロトタイプを描くとき、あるカードの細部、影、フォント、レイアウト、さらには文字数まで具体化した瞬間に、何時間も悩んでしまって、時には何も思いつかない。だからこそ、自分はデザインに向いていないとよく分かる。理工系としても平凡だし、デザイン能力はそれ以上に低い。

そして、最近になってようやく、すべてのカードを HTML で 1:1 に手書きする必要はないと自分を納得させられた。以前の自己紹介カードの背景は 1:1 で手作業だった…… ひどく面倒で、ひどく気持ち悪かった。実際には、UI/UX ツールでちゃんと設計してから書き出した素材のほうがいちばん良い。フロントエンドは、そもそも専用のデザインツールではない。

自分

いい UI デザインの話はここまでとして、このサイトの主な内容は何か。そこが本題だ。── 私にも分からない。思いついたことをそのまま書いているだけだから。

それに、最近、2026 年 4 月ごろに急にサイトを更新した理由の一つは、大学に入ったばかりの頃に書いた、あまりにも中二病が漏れ出した文章を本当に見ていられなくなったからだ。昔の自分がこんなに神経質だったとは思わなかった。

自分の能力への認識がひどく甘いだけでなく、変な自己陶酔、説教臭さ、空想まで詰め込んでいた…… しかも、立てた Flag は妙に滑稽だった。目標を公開の場に書けば社会的コミットメントになるとでも思っていたが、結局はこっそり消して終わりだった。Freshmen と呼ばれるのも無理はない。Sophomore も大して変わらないけど。

幸い、あなたがこれを読んでいる頃には、あの痛々しい文章はもう消してある。

最後にもう一つだけ注意書き。ここは私が思い出したときだけ更新されるサイトで、厳密には 3 〜 4 か月に一度くらいだ。つまり、思い出さなければほとんど触らない。フォント CDN が吹き飛んでも、Google の CDN ならそうそう起きないはずだが、気づかないかもしれない。とはいえ、たいした問題でもない。

技術

リポジトリはこちら。このサイトは Nuxt で作っている。フォントは Google Fonts で自分が選んだものだ。

• Nuxt 3 + TypeScript
• Nuxt UI + TailwindCSS + Motion-V
• MiSans + Rubik / Source Han Serif + Literata
• GitHub Actions + Tencent Cloud EdgeOne