
サイトについて
2064 文字 / 9 分
2026 年 4 月ごろ、時間を取ってサイトを少し作り直した。前の内容はあまりにも散らかっていたし、自分の情報をそこまで露出する必要もないと感じた。とにかく UI 案はいろいろ試して、最終的に今の版に落ち着いた。最初はサイドバーも付けるつもりだったが、全体の見た目がいまひとつだったので消した。少し抑えたほうがいい。
内容の出どころ
このサイトにあるすべての内容、文章、コード、動きに至るまで、全部自分で少しずつ詰めたものだ。AI の助けを借りたとは言える。この時代に Agent を使わないほうがむしろ少数派だと思う。根拠はない、ただの私の勘だ。でも、だからといって全部 AIGC だと言われるのは違う。私の美意識や UI 力を侮辱しないでほしい。大したことはないかもしれないが、それでもだ。Instant Design の元ファイルだってちゃんと残っている。
私の文章は少し機械っぽいとか、何かそういう印象があるのかもしれない。でも少なくとも私はそうは感じていない。だから、AIGC で何をやったのかは自分で説明しておく。全体としての立場は Instructor だ。ヘッダーの Blur + Mask は、ブラウザで試しながら TailwindCSS で手で組んだ。フォントも Google Fonts を一つずつ見て自分で選んだし、まして各機能はなおさらだ。
デザインの考え方
まず認めておくべきなのは、美意識は本当に人それぞれだということだ。でもこれは自分のサイトなので、完全に自分の好みで作っている。核心の要求はただ一つで、他人のサイトと同じ顔にしたくないということだ。だから私はかなり大胆に、本当にかなり大胆に Menu をページ最下部へ移した。Header には読書進捗バーと少しの操作ボタンだけを置き、Footer はシンプルにサイト LOGO、非核心ページへのリンク、外部リンク、备案番号だけにした。さらに Header と Menu には Blur Mask も入れて、ページをスクロールするときテキストがなめらかに切り替わるようにしている。
もう一つは、今回本文にセリフ体を使ったことだ。逆にサンセリフ体は、タイトルやボタン、Header、Footer など、非核心テキストだけに使っている。少しセリフ体、つまり Source Han Serif を使いすぎている気はする。自分ではかなり美しいと思っているけれど、この組み合わせが苦手な人には怒られたくない。セリフ体を使う発想のきっかけは、実は Claude だった。もっとも Anthropic は翌朝には私を BAN したけれど。はは。
Anthropic がすぐ封号してくる件はひとまず置いて、公平に見れば Claude のデザインはかなり独特だ。丸みのあるサンセリフ、真面目なセリフ、冷たい黄色のテーマカラー、そして周囲の簡潔な線画。Claude の核心的な特徴、つまり近寄りがたさ、抑制、成熟を非常によく表している。お隣の OpenAI もかなりミニマルで、強い立体感を持つ混色背景に抑えたサンセリフを合わせていて、これも良い UI 実践だと思う。でも Gemini はテキスト選択がしづらいし、Material Design の雑然とした色、影、角丸はどうしても好みに合わない。
だから、このサイトのデザインスタイルは何かと聞かれたら、最初に思い浮かぶ言葉はたぶん 抑制 だ。Primary 色ですらただの差し色で、いちばん多いのはやはり黒、灰、白だ。要するに、余計なデザインはしない。Less is More.
ただ、もう少し説明は必要だと思う。私はデザイン畑の人間ではないので、長年いろいろなサイトを見てきて身についた「デザイン直感」だけを頼りにフロントエンドを書いている。そして自分にはもう一つ問題がある。プロトタイプを描くとき、あるカードの影、フォント、レイアウト、あるいは文字量まで具体的に考え始めると、かなり長く悩み込んでしまい、時には何も思いつかない。だからこそ、自分はデザインに向いていないとよく分かる。理工系の能力も普通だが、デザイン能力はそれよりさらに低い。
2026 年 6 月の追記。Anthropic はまた私を BAN した。What can I say?
主な内容
こんなに優れた UI デザインの話をしたあとで、ではこのサイトの主な内容は何なのか、と気になる人もいるかもしれない。その質問はもっともだ。なにしろ、私自身も分からない。思いついたことをそのまま書いているだけだから。
それでも、なぜ 2026 年 4 月ごろに急に自分のサイトを更新したのかは話しておきたい。最大の理由は、大学に入ったばかりの頃に書いた、中二病があふれ出した文章を本当に見ていられなくなったからだ。昔の自分があそこまで変だったとは思わなかった。自分の能力認識が大きくずれていただけでなく、変な自己陶酔、説教臭さ、妄想まで詰まっていた。そのうえ各種 Flag 立ても妙に滑稽だった。公開の場に目標を書けば、何かしら社会的コミットメントになると本気で思っていたのだろう。でも結果は、恥ずかしくなってこっそり消すだけだった。Freshmen と呼ばれるのも当然だ。とはいえ Sophomore も大してましではない。
幸い、あなたがここを読んでいる頃には、あの苦しい文章はもう消してある。ついでに最後にもう一つだけ免責を書くと、このサイトは私が思い出したときにしか更新しない。厳密に言えば三、四か月に一度、もっと厳密に言えばランダム更新だ。思い出さなければほとんど放置している。フォント CDN が落ちても、Google の CDN ならたぶんそんなことは起きないけれど、起きても私は気付かないかもしれない。とはいえ、大問題でもない。
もし私の文章が好きだったり、一瞬で「この人分かるかも」と感じたりしたなら、コメントを残したり、知り合いになったりしてくれていい。返事する時間がないこともあるけれど。Leave a trace, if you will.
技術スタック
リポジトリはこちら。このサイトは Nuxt ベースで、フォントは Google Fonts で自分で選んだ。
- Nuxt 4 + TypeScript
- Nuxt UI + TailwindCSS + Motion-V
- MiSans + Rubik / Source Han Serif + Literata
- GitHub Actions + Tencent Cloud EdgeOne
2026 年 6 月 29 日 1:50
2064 文字 / 9 分