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

347日前原文(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をセンターにする方法を考えないと、そしたらビジネスに入れるね。

└

数分でhttps://neocities.org/から始められるよ！

└

divをセンターにするっていうミームは全然理解できない。width: 60%; // 幅を好きなように設定して、margin: 0 auto; さあ、ブログを始めよう！

└

AWSの無料枠。S3+cloudfrontは、去年の間に$0.00だったよ。これが偶然にも最高の価格。俺の（シングルページの）個人サイトは、ChatGPTが生成したテンプレートを基にしたHTML+CSS（JSなし）で、全然気にしてないからね。モバイルデバイスとデスクトップの両方で動くものを作るのは、俺の微弱なスキルを超えてる。これでうまくいったよ。

└

GitHubには無料ホスティングがあるよ。

└

私も同じことしたよ: https://domi.work/ でも、やっぱりダサい :)

└

私のサイトも似たような感じで、静的生成のために11tyをちょっと使って、あとはNetlify Pagesで公開してるよ。

フレームワークを使っても、他のサイトと同じように見えて感じるものを作る楽しみは感じないな。ビジネス的な観点からは理解できるけど、自分自身や作品を見せるだけなら、個性があった方がいいと思う。SEOやリテンションには最適じゃなくてもね。最近のウェブサイト作成サイトが、構造化された同じようなサイトに移行していくのが本当に嫌だ。GeocitiesやFreewebsの時代が恋しい。読めないテキストがごちゃごちゃした背景画像の上にあって、自動再生の音楽、後ろを追いかけるカーソル、クソみたいな炎の前で回るスケルトンたち。

今のサイトは結構いい感じだと思うけど、もちろん主観的な意見だよね :D ホームページの薄いラインはちょっと読みづらいけど、特定のページを探すための目次じゃなくて、探検するキャンバスとして考えれば（つまり、ランダムなものをクリックする）、楽しいし目的を果たしてるよ。ページの見出しフォントが気に入った、「Austin News」ってFirefoxによると。でも、将来使うために調べたら350ドルから始まるって言われて、ちょっと高いなぁ :D 以前はhttps://zaeem.dev/eye/をホームページにしてたけど、テキストは全くなかった。今年サイトを作り直すまでね。

醜いサイトの画像はブログ投稿でいっぱいのように見えるけど、なぜかこの投稿は別のサイトにあるんだよね。マーケティングクッキーや会員ポップアップがないなら、醜いサイトに送られた方が良かったな。

└

スクリーンキャプチャを見ると、hello@taylor.town宛のメールが見えるよね。最初の直感は君と同じだったから、https://taylor.town/を訪れるのもいいかも。追記: これを投稿した後、taylor.townのサイトがめっちゃ遅くなったから、またHNの「死の抱擁」が始まったのかも。

└

そうだね、あのダサいサイトは背景がひどくて、フォントや色の選び方も悪くて、読みづらいんだよね。例えば、https://taylor.town/wealth-000 自分のウェブサイトも作ったけど、あんなにダサくはないよ。この人のサイトがダサいのは、自己重要感から変な方向に行っちゃったからだと思う。

└

うん、これは「クソみたいなウェブ」の批評の一つだと思った。確かにこのサイトは悪いけど、面白いところもあるよね。(1) 印刷版についてのバナー (2) クッキー同意のポップアップ (3) 「良いインターネット」っていうヘッダーが、今やお馴染みの悪いインターネットの特徴の中から顔を出してるのが面白いし、(4) ヘッドラインの最初の4語がクッキーポップアップに隠れちゃってるのも笑えるし、(5) クッキーバナーを消すと、今度はクッキー設定ボタンと「+ メンバーになる」ボタンが常に表示されるようになってる。taylor.townは比較的良いインターネットのサイトだよ。

この哲学めっちゃ好きだわ。私のウェブサイトは私自身の表現で、他の誰でもない。誰かが「見た目がダサい」とか「プロっぽくない」って言ったら（両方言われたことあるけど、私のサイトはこれほど変じゃないし）、私は「私はこれが好きなんだ」と言える。こういう非コンフォーミティがもっと必要だよね、ネット上でも、一般的にも。

彼の2023年頃のウェブサイトはダサくなかったよ。ミニマリストだったし。今はダサいけどね。最初は彼のサイトが2023年のバージョンと同じだと思ってたから、同意してたんだけど、実際にダサいとわかってからは、彼のメッセージに対してネガティブな気持ちになっちゃった。

素晴らしい記事だね、OP。これが「古いウェブ」を素晴らしくしていた理由そのものだと思う。定義された基準がなかったから、人々は実験することを強いられていた。ちょっとカオスだったけど、ユニークなデザインのクールなウェブサイトに出会った時は、もっと満足感があった。現代のウェブは、逆にとても構造化されていて、同じテンプレートやフレームワークを使ったものが多い。探検する場所ではなく、予測可能な方法でコンテンツを消費する場所になっちゃった。

「それはかゆみのようなもので、本当に重要な何かがあって、それに対して何かをしなければならないという感覚。しかも、それをできるのは自分だけだと思うかもしれないけど、実際にはこの地球上で他の誰もやらないことがあると強く信じてる。」

メールを受け取った後にウェブサイトが変わっちゃったのはちょっと残念だな。元のCSSが回転して、非JSのスクロールジャッキングのウェブサイトを見たかったよ。

ハクソク