About the Making of This Website

Every Subpixel Mattersの活動は、何かひとつの成果物に向かって一直線に進むというよりも、手を動かしながら考え、会話を重ねながら少しずつ輪郭を見つけていくことが多い。その過程で生まれる試作や観察、メモや実験のなかには、作品にはならなくても興味深いものが数多く存在する。それら含めて、記録を残すためにウェブサイトの制作を始めた。

今まで何度か定例会議でその話は出たが、2025年夏頃にそろそろ、という形で始まった。2026年6月末現時点で、すでに1年弱経過している。仕事として進める活動ではないため、明確な締切は設けず、毎週いつものようにZoomで集まりながら少しずつ形にしていったが、振り返ると制作時間の大半は、デザインや実装ではなく、コンテンツの編集に費やされていたように思う。色々思うがまま試した痕跡をいかに、まずは思い出し、振り返り、ファイルを探り、伝える形にするか、メモでもよいとは言え、これほど大変だとは始めるまで想像もしなかった。

ログとタグ

ウェブサイトにはタグは必須だと思いつつ、どのように名付け、扱うかを考えた結果、このサイトではWork(s)やProjectsではなく、Logという名前を使うことにした。展示作品も、一日だけの試行も、私たちにとっては同じ連続した活動の中から生まれたものであり、その違いを強く区別する必要はないように思えたからである。Logという形式を選んだことで、作品だけでなく、その周辺に存在する観察や実験、制作途中の断片も同じ場所に並べられるようになった。要するに少し気楽に1エントリを扱える様になった。

また、サイト内に設けたTagも似たような考え方から生まれている。これらのタグは、Every Subpixel Mattersの活動の中で自然に立ち上がってきた関心やテーマの断片であり、分類のためのラベルというよりも、思考や試行の痕跡をゆるやかに束ねるための仕組みとして用いている。作品を整理するためのサイトというよりも、活動の中で残った痕跡を辿るための場所というイメージだ。

レイアウト

実験的な途中のlogでも掲載できるような設計だとすると、トップページにサムネイルも作り途中の画像や、スクリーンショット、など必ずしも完成物でないことが分かっていた。という背景もあり、比率違いのサムネイルがランダムに並ぶようにした。

また、上記logの特性上、綺麗な画像が大きく並ぶよりは、雑多な画像とメモ的な文章も増えることから、PCでは、logの本文は行長を抑えたカラムにし、右に関連リンクのカラムを担保するという、やや古風な作りにあえてした。それ以外は、ビジュアルとしての装飾はできるだけ持たせず、できるだけシンプルにした形だ。

マウスホバー

このサイトの画像のマウスホバーは、細かくて一見分からないが、「#」の文字で構成された網のようなレイヤーが現れる。この表現には二つの意味を込めていて、ひとつは、前述した痕跡としてのハッシュタグである。各logに複数のtagが付与されていることを象徴している。

もうひとつは、印刷物の網点を連想させるためのメタファーである。もちろんディスプレイは紙ではない。しかしEvery Subpixel Mattersでは、オンスクリーンと印刷の双方に存在する解像度や見え方の違いに関心を持ちながら活動しているので、画面上のUIでありながら、どこか印刷物の気配を感じさせる表現を入れることがしっくりきた。

ヘッダーの罫線

ヘッダーに使われているドット状の罫線にも、小さなこだわりがある。スクロール時にヘッダーは固定されるが、その際に残るのは白いピクセルドットの部分だけであり、ドット同士のあいだは意図的に埋めていない。

もし隙間を埋めてしまえば単なる白いラインになる。しかしドットの間に空白を残すことで、ミシン目や切り取り線のような物理的な印象が生まれる。デジタルな表現でありながら、その見え方のどこかに紙や加工の気配が残る。その感覚を少し含ませたかった。

猫アイコン

画面右下にいる猫のアイコンは、「A–Z House」の制作中に発見したドアストッパーがモチーフになっている。それはメンバーの実家に長年置かれていたもので、家の中を調査する過程で偶然見つけたものだった。実物を撮影し、3D化し、さらにピクセル描画へ変換したものを連番画像として使用している。

もともとは家の歴史の中に存在していたオブジェクトだが、そこからさらに手を動かし、新しい形へ変換されたことで、このサイトにおける別の痕跡となった。スクロール量に応じて回転し、クリックするとページの先頭へ戻る。あと、一応左右にドラッグで動かすこともできる。

Subpixel/Ditherモード

サイト全体の演出はできるだけ控えめにしたが、やや不安定でもあっても実装したかった機能がウェブサイト全体のサブピクセル(あくまで擬似だが)拡大モードである。

サイトを約1分間操作せずにいると自動的に起動し、左上のRGBアイコンから任意に開始することもできる。緑色の枠で囲まれた虫眼鏡のような領域の中では、通常は意識することのないディスプレイの構造を拡大して観察できる。

また、右上の白黒アイコンからはディザーモードに切り替えることができる。技術的な検証というよりも、少し寄り道をするためのモードとして用意している。これらのエフェクトはリアルタイム描画ではなく、一度画面全体をキャプチャし、それを画像として処理することで実現している。決してスマートな実装ではなく、やや強引な方法でもある。しかし画面の上で起きていることをもう一度画面として観察するという構造自体が、このサイトには合っているようにも思えた。

Loading Cubes

SubpixelモードやDitherモードへ切り替える際、内部的には一度画面全体をキャプチャしてから処理を行っている。そのため、処理が完了するまでにわずかな待ち時間が発生する。その間に表示されるのがローディングアニメーションである。SubpixelモードではRGBの各面を持つキューブが回転し、Ditherモードでは白黒のチェッカーパターンで構成されたキューブが回転する。これら2種類のLoading GIFは、AIを用いて作成した。

訪問履歴

ページの隅には、これまでに開いたログへのリンクが「Visited Pages」として静かに残っていく。サイトを見て回るうちに、自分がどこを通ってきたのかが、小さな履歴として積み重なっていく仕組みである。機能的にも訪問履歴一覧は、入れておきたかった。

これも、このサイトが大切にしている痕跡という考え方の延長にある。何かを見たという行為そのものが薄く記録され、後から辿り直せる。整理された目次ではなく、歩いたあとに残る足跡のようなものとして置いておきたかった。

和欧混植

Every Subpixel Mattersという名前を掲げている以上、文字そのものの扱いには少しだけこだわっている。このサイトの本文は、日本語と英数字とで異なる書体を組み合わせる、いわゆる和欧混植で組んでいる。日本語にはZen Kaku Gothic New、英数字や記号にはFK Grotesk SemiMonoを充て、フォントの指定順だけで一文字ごとに自動で切り替わるようにしている。

ひとつの文章のなかで、漢字や仮名と、数字やアルファベットとが、それぞれにふさわしい書体で並ぶ。和文と欧文では文字の設計思想も骨格も異なるため、混ぜたときの収まりは思いのほか難しい。普段は意識されないこの境界を、できるだけ自然に見えるよう整えた。

約物と自作フォント

和文を欧文と混ぜて組むと、句読点やかっこといった約物のまわりに、間延びした余白が生まれやすい。そこでこのサイトでは、約物まわりの字詰めを司るpaltという調整をZen Kaku Gothic Newにあらかじめ埋め込んだ、専用のフォントを自分たちで用意している。

既製のフォントをそのまま使えば済む話ではある。しかし、句読点ひとつの空き方が文章全体の印象を左右することもある。サブピクセルという最小単位を見つめるグループとして、文字と文字のあいだのわずかな余白にも、できる範囲で手を入れておきたかった。

ピクセルフォント

ヘッダーを流れていくTickerのテキストには、『A-Z House』で自作したピクセルフォントを使っている。一文字が小さな点の集まりとして描かれた書体で、滑らかな輪郭を持つ本文用のフォントとは、そもそもの成り立ちが違う。

解像度やピクセルそのものに関心を寄せるこのサイトにとって、ドットでできた文字がどこかに一行あることには意味がある。流れる文字のなかに「Meaning Begins Below the Pixel.」という一文を紛れ込ませているのも、同じ気持ちからだった。

AIによる制作

このウェブサイトは、その大部分をAnthropicのClaudeと共に作り上げていった。実装の多くをAIに任せたことで、これまで同じ規模のものに費やしていた労力は、体感でおよそ十分の一にまで減ったように思う。これは正直なところ、かなり驚きだった。

とはいえ、良いことばかりではない。自分たちの手で一行ずつ書いていくわけではないぶん、コードの全体構造を完全には把握しきれず、後から細かく手を入れようとすると、どこに何があるのかを掴むまでに時間がかかることもあった。ゼロから任せる場合でも、使用する言語やフレームワーク、全体のアーキテクチャをある程度理解したうえで進めたほうが、その後の編集の自由度は高くなる。速さと引き換えに何を手放しているのかは、意識しておきたいところである。

CMSの選定

コンテンツの管理には、当初WordPressのデータベースをAPI経由で読み込む構成を考えていた。しかし最終的には、API経由での利用に特化したCMSであるSanityを採用することにした。

Sanityを選んだことで、コンテンツを編集するための管理画面を比較的手軽に用意できるようになった。Logやタグといったこのサイト固有の構造に合わせて、入力フォームそのものを組み立てられるのも都合がよかった。加えて、ある程度の規模までは無料の範囲で運用できる点も、私たちのような活動にとっては魅力的だった。

Subpixel/Ditherの実装

先に触れたSubpixel/Ditherモードは、実装の面ではかなり手こずった部分でもある。当初は、一時期話題になったhtml2canvasのように、表示中のページをそのまま画像へ変換するような仕組みが使えないかと考えていた。しかし、対応するブラウザが限られるといった制約があり、この方法は比較的早い段階で諦めることになった。

結局のところ、モードが切り替わったその瞬間に画面全体を一度キャプチャし、得られた画像に対して拡大やディザリングの処理をかける、という形に落ち着いている。多少の不自由さは残るものの、ウェブサイト全体に虫眼鏡をかけるという課題は思っていた以上に難しく、これが今のところの現実的な答えだった。

ディザリングの選択

Ditherモードで使っているのは、Bayer法と呼ばれる古典的なディザリングのひとつである。4×4の小さな閾値のパターンを画面に敷き詰め、濃淡を白と黒の点の粗密だけで表現していく。誤差拡散のような滑らかさはないが、規則的なパターンが残るぶん、画面の構造そのものを感じさせる。

この選択は、印刷の網点とも無関係ではない。限られた階調やインクの濃淡を点の集まりで再現するという発想は、ディスプレイのディザリングとどこか地続きである。オンスクリーンと印刷のあいだを行き来するこのグループにとって、Bayer法の規則的な点描はちょうど中間にある表現だった。

低速回線とキャプチャ

キャプチャ方式には、もうひとつ厥介な問題があった。画面を画像へ変換するその瞬間に、フォントや画像がまだ読み込まれていないと、虫眼鏡の中だけ文字が崩れたり、絵が欠けたりしてしまうのである。回線が遅いときほど、この食い違いは起こりやすい。

そのため、必要なフォントや画像が出揃うのを待ってからキャプチャするよう、何度か作り直すことになった。派手な機能ではないが、こうした見えないところの調整に意外と時間がかかる。画面に映っているものを、もう一度そのまま画像にするというだけのことが、思いのほか一筋縄ではいかなかった。

このウェブサイトを制作を始めた2025年、Claudeの出力精度も向上し、実装そのものの速度や品質も大きく変わった。2026年6月には、Claude Fable 5騒動があり、また、Figma公式から、webサイトのURLをコピペするだけでデザインがトレースされる「HTML To Figma」が登場し、その期間そのものがウェブサイト制作の変化を観察する時間にもなっていた。今だったら全く異なる作り方をしてたかも知れない。

後から振り返れば、この時代そのものが過渡期だったと言われる可能性も高い。そのため結果だけではなく、途中で何を考え、どのように作り、何に迷っていたのかも含めて記録しておきたいと思ったのでこの文章を残している。(T.Y.)