ハクソク

世界を動かす技術を、日本語で。

私のウェブサイトは私が作ったので醜いです

2025年5月28日原文(goodinternetmagazine.com)

概要

  • 自分だけの作品やウェブサイト を作ることの意味を考察
  • 個性やこだわり が表現されたデザイン手法の紹介
  • ミニマリズムと温かみ のバランスへの工夫
  • CSSによる独自表現 やインタラクションの実装例
  • ウェブサイトは常に変化し続ける という自己表現の姿勢

「自分だけのもの」を作る意味

  • 母親が 冷蔵庫に飾りたいのは有名画家の複製ではなく自分の子供の絵 という事実
  • 自分のウェブサイトも同じく、他人の美的センスではなく自分の個性 で作りたい思い
  • パン作りに必要な素材を一から揃えるこだわりを持つ人もいれば、 Olive Gardenのパンに満足する自分 もいる
  • 「 あなたの“自分だけのもの”は、私のそれとは違う」という多様性の肯定
  • さまざまな発信方法 （自家発電サーバー、Substack、YouTube、Gwernの独自活動）を例示

創作への衝動と自己表現

  • 「自分にしかできない」と感じる強い衝動
  • パンやサーバー構築、チップ設計には興味がなくても、 自分なりの情熱が湧き上がる分野 がある
  • その情熱が フィクション、HTML/CSS、ロボット、音楽など多様な形で噴出

ウェブサイトデザインの変遷と工夫

  • シンプルさと親しみやすさ を追求した初期デザイン
    • ノイズ除去、コントラスト強調、浅い階層構造、シンプルなHTML/CSS、JS回避
  • 横幅を最大限活用しようとした際の問題点
    • flex-wrap適用でテキストが分かりにくくなり、リンクの区切りが不明瞭に
    • 余白や枠線、区切り記号も不採用

カオス感を演出するCSSルール

  • リンクごとに 回転角度やフォントファミリーを変化 させるCSS
    • li:nth-child(4n + 0) { transform: rotate(1deg); } など
    • li:nth-child(6n + 0) { font-family: Times; } など
  • 微妙な繰り返しパターン による自然な変化

ミニマリズムと温かみの共存

  • 無機質さを避けるためのサプライズ要素
    • フォントウェイト変更、文字間隔調整、特定リンクの大きな回転
  • 「古本屋」的な雰囲気 を意識

インタラクションとテクスチャ

  • JavaScriptなしでカーソルに反応するCSS
    • hover時に左右へわずかに回転
  • css-doodleによる背景テクスチャ生成
    • ライトモードでは紙の埃、ダークモードでは星空のような演出
    • svg { viewBox: .5 .5 10 10; fill: #000; ... }

変化し続けるウェブサイトと自己表現

  • 現在のtaylor.townの姿と、今後の変化への予告
  • 自分も常に変化し続ける存在 であることの自覚
  • 読者にも「自分だけのもの」を持ち続けてほしい というメッセージ

著者紹介

  • Taylor Troesh ：taylor.townの管理人、scrapscriptの作者、ユニークな創作活動家

Hackerたちの意見

はは、そうだね！ほとんどの開発者の友達が、個人サイトのために既製のHugoやJekyllのテンプレートに移行しちゃったけど、俺は頑固に完全オリジナルのCSSと、親しか愛せないようなバックエンドでブログを維持してるんだ。俺にとっての楽しみは、ウェブサイトを持つことじゃなくて、ウェブサイトを作ることなんだよね。なんで楽しい部分を手放さなきゃいけないの？クラシックカーを維持するのに似てるよ。見た目が良くて信頼できる車を買うことはできるけど、それは楽しくない。もし目的がどこかに行くことだけなら、確かにそうだけど、俺の目的は楽しむことだから。デザインや機能に対して言いたいことがどんどん少なくなっていくサイトで一日中働いてるのに、自分のサイトで完全にコントロールできないのはなんでだろう？

└

違いは、ウェブサイトを調整するのに時間をかけすぎて、書く時間がなかったことだと思う。Jekyllに戻ったのは、もっとその時間を執筆に使いたかったから。だけど、他の面で制限があるのもわかってる（例えば、ブログの一部に投稿して、BlueskyやMastodonに連携したいと思ってるけど、それを作る必要がある）。だから、最終的にはJekyllから移行するつもり。

└

まさにこれだね。私のウェブサイトは全部手作りで、1回だけじゃなくて、過去10年でほぼ10回近く作り直してる。楽しいし、毎年何かをリニューアルしちゃう。全部手作りだよ: - ホームページのマトリックスJSコード。 https://oxal.org でマトリックスをクリックするとサプライズが！ - 自作の静的サイトジェネレーターを使って作った: https://github.com/oxalorg/genox - 私のウェブサイトはCSSテーマも使ってる、これも手作り: https://github.com/oxalorg/sakura/ - https://oxal.org/blog/ に行くと、小さなサイボーグがついてくるよ（最初はChatGPTで生成したベース画像から始めて、手動でPiskelスプライトエディタで編集・アニメーションを追加した） - VPSに手動でデプロイしてる、ただmakeを実行するだけ（手書きのC HTTPサーバーで提供する実験もしたけど、このおもちゃプロジェクトはまだ完成してない） - プライベートな場所にウェブサイトにアップロードするためのシェルスクリプトもいくつかあるよ（Gistやクイックシェア動画、スクリーンショットなどを考えてみて）。 - faviconもピクセルアートで、大学時代に作ったもの！ https://oxal.org/favicon-32x32.png - 自分でファンキーなフォントをデザインしようとしたけど、諦めてナルトにインスパイアされたフォントを使った - そしてボーナスとして、ホームページでview-page-sourceを試してみて。自分のウェブサイトを見て、ソフトウェアエンジニアとしての旅にすごく誇りを感じてるし、このシンプルなことを大切にしてる！

└

「私にとって、ウェブサイトを持つことの喜びではなく、ウェブサイトを作ることの喜びなんだ。」確かにそれはいい目的だね。でも、いくつかのウェブサイトは特定の仕事を終わらせたくて作られてるだけなんだよね。例えば、https://tellconanobrienyourfavoritepizzatoppings.com/

└

その気持ちすごくわかる。でも、実際に記事を書くよりもサイトを作ったり修正したりする方が楽しいから、デプロイの数は実際のブログ投稿の5倍くらいになっちゃってる。コンピュータに興味を持ったのは、コーディングが好きだからだし。AIがプロのコーダーの主要なクリエイターになった後も、私はここにいて、自分の楽しみのためにくだらないことを書き続けるよ。

└

自分のジェネレーターをBabashkaで作るのに、サイトに実際のコンテンツを載せるよりもずっと時間をかけちゃった。完成した時はちょっとがっかりしたくらい。TSやElmみたいなコンパイルはサポートしてないけど、私のサイトにあるJSは、サイト全体に他のJSがないっていうconsole.logだけだよ。

└

AsciiDoc(tor)を使っていろんなことを実現する方法を考えるのに、思ったより時間をかけちゃってる。Jekyllを続けてもいいけど、なんでわざわざそうする必要があるの？

└

「私にとって、ウェブサイトを持つことの喜びではなく、ウェブサイトを作ることの喜びなんだ。」その楽しい部分を他の人に任せる理由はないよね。サーバーがあって、ウェブサイトがあって、サーバーに何かさせるためにそれがあるんだから。

└

こんにちは！完全に自分で作った個人ウェブサイトを開発している者です！僕もHugoやJekyll、Pelicanは使ってないんだ。確かに良いツールだけど、多くの人には役立ってるけど、僕のニーズには合わなかったんだよね。大きくて複雑なフレームワークに縛られるより、自分で小さくてシンプルなものを作った方がいいと思ってる。いくつかのことを自動化するために、小さなCommon Lispのプログラムを書いたんだ。例えば、すべてのページに一貫したレイアウトを適用したり、RSSフィードを生成したり、タグリストページを作ったりね。でも、サイトのコンテンツはHTMLやCSSも含めて100%手作りなんだ。唯一の例外はKaTeXかな。LaTeXのサブセット用のパーサーとレンダラーを手作りするのは、ウェブサイトを維持するためにやりたくない問題だから。今のところ、そのCommon Lispのプログラムはかなり安定してるし、実際、最近はあまりいじってないよ。[1] もし興味があれば、ちょっとしたコロフォンページを作ったから見てみてね。[2] https://github.com/susam/susam.net/commits/main/site.lisp [2] https://susam.net/colophon.html

└

ハハ、このコメントが盛り上がったね！興味があれば僕のコロフォンも見てみて https://donatstudios.com/colophon

└

あなたのウェブサイト、すごく好きだよ！スタックが気になるんだけど、セットアップについてのブログ記事はある？

まだ個人サイトは持ってないけど、持つことになったらHTML+CSS+JS/JQだけで作るつもりだよ。ウェブサーバーはApacheかnginxを使って、共有のやつかAWSの無料枠でホストするつもり。とりあえずdivをセンターにする方法を考えないと、そしたらビジネスに入れるね。

Hacker Newsで議論の続きを見る