自分のWebサイトがブサイクなのは、自分で作ったから

 (goodinternetmagazine.com)
22 ポイント 投稿者 GN⁺ 2025-05-30 | 3件のコメント | WhatsAppで共有
  • 誰かが私のWebサイトをもっと格好よく作れたかもしれないが、そうしたらそれは私のものではなかったはず
  • Webサイトの個性は、作り手の好み、執着、直接の手つきから生まれる
  • シンプルさと親しみやすさを目指してCSSとJSを最小限にし、直接的なCSSの変形ルールを適用して、混沌や反復、古本屋のような感性を演出している
  • サイトはユーザーのインタラクションにCSSだけで反応するよう設計されており、飾らない質感と予想外の変化が特徴
  • Webサイトは変わり続け、持ち主とともに成長し変身し、それぞれの『ブサイクなもの』が生きて動くようになる

私が作ったWebサイト、そしてそのブサイクさの意味

  • もし母が冷蔵庫に素敵な絵を貼りたかったのなら、Vermeer、Lichtenstein、Wyethのような有名作家の絵を複製して貼ったはず
  • でも母が欲しかったのは、そういう芸術ではなく、私が描いた絵だった
  • センスのあるデザイナーが私のサイトを格好よくできたかもしれないが、そうなるともう私のものではなくなる
  • パンを焼くために、小麦を育て、塩を掘り、酵母を培養しようとする人もいるが、私はそうではない
  • 私の未熟な味覚は、Olive Gardenのブレッドスティックを大量に食べることで満足する
  • こうした好みは、個々の所有感から生まれる違いだ
  • 人はそれぞれ自分なりの理由で、自分だけのインターネット空間を飾っている

さまざまな個人Webの存在

  • これらすべての行為は、「自分でなければできない」という内的動機と欲求から生まれている
  • 私にはパンやサーバー、チップを作る動機はないが、その欲求はユーモア、システム、ソフトウェア、構造のような形で表れる
  • 感情が強くなりすぎると、フィクション、HTML/CSS、しょぼいロボット、悲しい歌などとして噴き出す
  • だから私のWebサイトは私のものなのだ

シンプルさと個性の共存

  • 昔はシンプルさと親しみやすさだけを求めていた
    • ノイズ除去
    • 明暗の強調
    • メニューの階層縮小
    • 退屈なHTML
    • CSS最小化
    • JS回避 など
  • 2023年の私のサイトはこんな感じだった（原文の画像参照）

混沌のデザイン、そしてCSSの話

  • ある時、もっと広い横幅の空間を使うことにして問題が始まった
  • 最初の計画は単純だった: ulにflex-wrapを適用すること
  • ところがテキストまで折り返されるので、各リンクの区切りがわかりにくくなった
  • inlineとして読む人もいれば、inline-blockのように感じる人もいた
  • 余白をもっと増やしたり、各リンクに枠線をつけたり、リンクの間にドットを入れたりも試したが、気に入らなかった

  • そこでリンクに変化をつける方法を選んだ

  • ホームページの混沌は、実は少数のシンプルなルールから生まれている

    li:nth-child(4n + 0) { transform: rotate(1deg); }  
li:nth-child(4n + 1) { transform: rotate(-0.6deg); }  
li:nth-child(4n + 2) { transform: rotate(0.5deg); }  
li:nth-child(4n + 3) { transform: rotate(-0.75deg); }  
li:nth-child(6n + 0) { font-family: Times; }  
li:nth-child(6n + 1) { font-family: Helvetica; }  
li:nth-child(6n + 2) { font-family: Georgia; }  
li:nth-child(6n + 3) { font-family: Times; }  
li:nth-child(6n + 4) { font-family: Arial; }  
li:nth-child(6n + 5) { font-family: "Trebuchet MS"; }

  • もともとはもっと多くの変化を出すために**互いに素な整数(coprime integer)** を使っていたが、繰り返しパターンの微妙さがかえって気に入った

  • 私はミニマリズムを愛しているが、冷たい感じは嫌いだ
  • 「古本屋」のような温かい感性を表現するために、いくつかのCSSの驚き要素を加えた 
    li:nth-child(5n + 2) { font-weight: 100; }  
li:nth-child(7n + 2) { letter-spacing: -1px; }  
li:nth-child(41n + 31) { transform: rotate(181deg); }
  • Webは今でもインタラクティブなメディアなので、JSなしでもカーソルの動きに反応してほしかった
  • 次のCSSによって「草に触れる感覚」を演出している 
    li:nth-child(2n + 0):hover { transform: rotate(-2deg); }  
li:nth-child(2n + 1):hover { transform: rotate(2deg); }
  • これによりカーソルの動きへのリアルタイム反応を実装した
  • そしてスクロールジャッキングなしでスクロールの感触を強調したくて、テクスチャ背景でページを「紙」のように見せた
  • css-doodleを使ってテクスチャを合成 
    svg {  
viewBox: .5 .5 10 10;  
fill: #000;  
circle*1000 {  
  cx, cy: @r(10), @r(10);  
  r: @r(.005, .01);  
  }  
}
  • ライトモードでは紙のほこり、ダークモードでは夜空の星のような感じを表現した
  • 2024年の私のサイトはこのように変わった（原文の画像参照）

変わっていく私、変わっていくWebサイト

  • 近いうちに私のWebサイトはまったく別の姿に変わる予定だ
  • なぜなら私が自分のWebサイトの持ち主であり、私自身も変わり続けているからだ
  • あなたも変わっていくだろう
  • あなたの情熱と価値観は別の何かへと広がっていくだろう
  • ブサイクに見えても、あなた自身の創作物は生きて動き続ける

筆者のTaylor Troeshは、taylor.townの市長であり、scrapscriptの作者で、しょぼいものを味わう人でもある

関連記事

3件のコメント

 
secret3056 2025-05-30

見てみたけど、本当に難解ですね...

https://taylor.town/
 
tsboard 2025-05-30

本文の内容に深く共感します。私もひどいデザインセンスを隠すために、デザイナーの方々が苦心して作ってくださったフレームワークを使いながら頑張っていますが、それでも愚直にここまで続けてきました。
毎回より良いデザインを考えながら、あれこれ直して作って運営していく楽しさがあります。
こうした活動のおかげで、より愛着も湧き、楽しさも感じているのだと思います。笑
 
GN⁺ 2025-05-30
Hacker Newsの意見
  • はは、その通りだと思う。自分の周りの開発者の友人たちのほとんどは、とっくの昔に Hugo や Jekyll のような既製テンプレートへ自分のサイトを移しているけれど、私は頑固に CSS もバックエンドも全部自作したシステムで自分のブログを維持している。私にとって本当の楽しさは「Webサイトを持つこと」ではなく、「Webサイトを作る過程」にある。面白い部分をどうして他人に任せなければならないのか分からない。クラシックカーを自分で整備するのに似ている。ただきれいで頑丈な車を買うこともできるけれど、それでは面白くない。目的地が重要なのではなく、私は楽しさを追求する人間だ。会社では一日中、自分の望むデザインや機能を好きなだけ決められないサイトを作っているのだから、自分の個人サイトだけは自分が完全にコントロールできる自由を絶対に手放せない
    • 私のWebサイトも全部自作で、それもこの10年間でほぼ10回は作り直している。毎年なにかしら改修する楽しみがある。トップにある matrix JS コード（https://oxal.org をクリックすると驚くかもしれない）、自作の Static Site Generator genox でビルドしていて、CSS テーマも自作の sakura を使っている。ブログ（https://oxal.org/blog/… chatgpt で作って、スプライトアニメーションは Piskel で自分で作業した）。VPS に手動デプロイしていて（make でビルド）、プライベートな場所にファイルをアップロードするシェルスクリプトもいくつも動かしている。favicon も大学生のときに作ったピクセルアートだ（リンク）。自分専用のフォントも作ろうとして諦め、Naruto にインスパイアされたフォントを適用した。view-page-source 機能でソースコードを見ると、また別の楽しさも感じられる。自分のサイトを見ると、自分のソフトウェアエンジニアとしての成長の軌跡が詰まっているように感じられて、このシンプルな作品がとても大切なんだ
    • 私のホームページ（https://pablo.rauzy.name/）も最初から最後まで全部自作だ… Bash スクリプトと Makefile しか使っておらず、完全に静的な構成になっている。JS は1行もない。CSS を研究しながらレスポンシブ対応やモバイルメニューなども自分で実装した。たぶん自分なりのルーブリックや方法論をいくつか生み出した気がするけれど、そういう試行錯誤こそ本当の楽しさにつながる
    • 私も同じ道のりだった。Hugo で始めたけれど、結局は自分で static site generator（Loulou）を作った。作っている間ずっと純粋に楽しかったし、自分で作ってみるとやはり価値ある体験だった。私のサイトは ここ
    • 「Webサイトを持つことではなく作ることが楽しい」というこの一文が核心だ。これはまるで「Journey Before Destination（目的地より旅路）」という Radiant 騎士団の信念にも通じている。さまざまな神話でも繰り返し語られる話だ。ヘラクレスも人間だった頃は素晴らしいことを成し遂げていたが、神になってからはそれをやめてしまった。苦労や人間らしさを奪われるな、というメッセージだ。もし気が滅入っているなら、鳥のさえずりの音楽（https://birdymusic.com）を聴くのがおすすめ。今日見たサイトの中で一番すごいか、一番変かもしれない/
    • それが目的なら良いことだと思う。でも、ある種のWebサイトは単に簡単に特定の目的だけ果たして終わればいいこともある。たとえば このサイト のように、特定の作業だけしてくれれば十分だ
  • （元記事に出てくる）醜いサイトの画像にはブログ記事がぎっしり並んでいるけれど、実際の記事は別のWebサイトに掲載されている。もしマーケティングクッキーやメンバーシップのポップアップがないなら、むしろその醜いサイトに直接行きたかった
    • スクリーンショットを見ると hello@taylor.town というメールアドレスが見える。私もまったく同じことが気になって taylor.town（https://taylor.town/）にアクセスしてみた。そしてこれ… Hacker News 効果（HN hug of death）が来たんだと思う
    • 私はこれを、よくある「enshittified web」（品質が劣化したWeb）への批判記事だと思っていた。このサイトはよくないと思うが、こういう点はまた笑える: (1) 紙の本の販売バナーがある (2) クッキー同意ポップアップがある (3) 「Good Internet」というヘッダーが、現代のひどいWebサイトを象徴するあれこれの中にちょこんと見える (4) 見出しがクッキーポップアップに隠れて読みにくい (5) クッキー同意バナーを消しても、今度は常時表示のクッキー設定アイコンと "+ Become a Member" ボタンがある。それに比べると taylor.town は本当に良いWebだ
    • たぶん醜いサイトの背景やフォント／色の選択がいまいちで読みづらいから、別サイトに記事を載せているんだと思う。例: taylor.town/wealth-000。私も個人サイトは自作したが、醜くはなかった。あの人のサイトは本人がわざと醜く作ったのだと思う。少し自己満足に浸っている感じだ
  • 「醜いけれど興味深い」事例と、「醜くて退屈」なサイトの事例は別にあると思う。このサイトは後者に近い。実際のところ、CMS が Markdown フォルダをぐるぐる回ってタイトルをリンクとしてばらまいているだけに見える。情報アーキテクチャがまったくなく、カテゴリー、アイコン、画像、日付もないので、すべてが同じ比重で見えてしまう。ただ「変わって」見えるように並べられているだけだ。たいていの開発者ブログは検索エンジンから流入するので、ホームページのデザインは重要ではないかもしれないが、もし読者が積極的に探検したくなるようなアーキテクチャを作りたかったのなら、試みも結果もやや惜しい。結局、標準の Ghost テンプレートを使ったブログと大差ない感じがする
    • その必要はない。重要なのは、著者が読者を満足させるためではなく自分を満足させるために作った結果だということだ。だから外部の意見はそれほど重要なポイントではない
    • 著者のメッセージの核心を見落としている気がする
  • フレームワークでWebサイトを作っても、他人と同じ見た目と雰囲気になるだけでまったく面白くない。ビジネス目的なら理解できるが、自分自身や自分の作品を見せたいのなら、個性のあるWebサイトのほうがより意味があると思う。SEO やリテンションには非効率でも、自分だけの個性を込めるほうがよさそうだ。最近のWebサイトビルダーはあまりにも構造的で画一的になっていて嫌いだ。昔の Geocities や Freewebs の時代、読みにくい背景画像、自動再生の音楽、マウスを追いかけるカーソル、炎の前で回転するドクロみたいなものが本当に懐かしく感じられる
  • この哲学がインターネット初期の雰囲気そのままでとても好きだ。Flash サイトに変なナビゲーションや問題点があって批判も多かった時代だけれど、そうした欠点とは別に、独特なサイトを作る創造性は尊重したい。今ではインターネットがあまりにも均質化されていて、今後は AI 生成コンテンツのせいでさらにひどくなると思う。規格化されていない片隅を見るのはうれしい
  • この哲学に完全に共感する。私のWebサイトは完全に「私」という人間を表現している。誰かに醜いとか、あまりにプロっぽくないとか言われても、自分としてはこういうスタイルに満足している。Webでも、そして世界でも、こうした非同調的な態度がもっと増えてほしい
  • とても良い文章だった。昔の "old web" がよかった理由は、はっきりした規格がなくて、人々がそれぞれ実験的に何かを作っていたからだ。少し混沌としてはいたけれど、本当にすごく個性的なサイトを偶然見つけたときの高揚感があった。今のWebはあまりにも構造的で、公式的な雰囲気があり、ほとんどが同じテンプレートとフレームワークで作られているので、予測可能な消費空間になってしまった。探検する楽しさが消えてしまった
  • 2023年のその人のWebサイトは醜くなく、ミニマリズムっぽい感じだった。今は本当に醜くなっている。最初は2023年版のことだと思って内容に同意していたけれど、実際に本当に醜い版を見たら、むしろメッセージ自体に否定的な気持ちになった
    • 「今は本当に醜いからメッセージが違って見える」というのがあまりよく分からない。この文章全体のメッセージは、他人の視線とは無関係に、自分自身が好きで楽しみながら、望む通りに作ることに意味があるということだ。多くの人が醜いと言っているその事実自体が、サイトとメッセージをむしろさらに魅力的にしていると思う。見た目だけにこだわって惜しいと感じた瞬間、本当のポイントを見失っている
    • 前のデザインはきれいでミニマルで……特別なものはなかった。今は意図的に散らかった混沌だ。醜いかどうかはともかく、強烈に記憶に残る。欠点もある（特定のリンクを後で探し直しにくい）けれど、それはその人にとって重要ではない。本当に欲しかったのは「不便さ」「不協和音」「好奇心」、そして何より「/自分だけのもの/」だったんだ
  • まだ個人サイトは持っていない。作るときは HTML+CSS+JS または JQ だけでちゃんとやってみるつもりだ。Apache や nginx のようなWebサーバーも考えている。AWS Free Tier か共有ホスティングに置くつもりだ。div をきっちり中央揃えする方法さえ身につけば、すぐにでも始められそう
    • AWS Free Tier で S3+cloudfront の組み合わせを使って1年間0円で運用中だ。たぶんこれが最高のコスパだ。私のサイトは HTML+CSS のシングルページで、ChatGPT がテンプレートを作ってくれたのでそのまま使った。モバイル／デスクトップの両方で動くように作る実力がないので、もうこれで満足している
    • 数分だけ使って Neocities ですぐ始める方法をおすすめする
    • div の中央揃えがどうしてミームになったのかよく分からない 
        width: 60%; // 好きなだけ幅を指定
  margin: 0 auto;
      これでブログを始めればいい
    • 私もまったく同じことをした : domi.work 私も醜く作った :)
    • 私も似たような感じで、ここに 11ty を載せて static build して netlify pages でデプロイしている
  • きれいなテンプレートで作ったサイトはどれも似ているけれど、自作サイトにはそれぞれこの世にひとつだけの「隅々まで行き届いた奇妙さ」がある。個人プロジェクトなら、Tailwind のランディングページではなく「わびさび HTML」を選びたい