Blog
webデザインと実装まわりで考えたこと、試したことを書いています。
主なテーマはタイポグラフィ、CSS、AI検索、クリエーティブコーディングです。
記事の多くは note で公開しています。
notellms.txt は誰が読んでいるのか？ 仕様とアクセスの実態を調べた（Web #2）
AI検索の対策として勧められる llms.txt は、サイトの概要と主なページへのリンクを書いて置くファイルだ。Google 検索はこのファイルを使わないと明記している。ほかの AI 各社の説明にも、他サイトの llms.txt を使うという記述は見つからなかった。アクセスの調査では、設置したサイトの大半に1か月間リクエストがなく、AI の回答での引用との関連も見られなかった。一方、コーディング用の AI に最新の資料を渡す場面では使い道がある。
noteAI検索に、特別な対策は要る？ llms.txt、FAQ、構造化データを調べた（Web #1）
AI検索に引用されるための「AIO対策」「LLMO対策」として、llms.txt や FAQ、構造化データを足すことが勧められている。その根拠を、Google や Microsoft の説明と研究の結果から確かめた。AI検索も通常の検索と同じ仕組みでページを集めており、Google は特別な対策は要らないとしている。研究も、特定の書き換えが実際の AI検索で引用を増やすことまでは示していない。施策の名前で選ぶより、サイトごとに足りない点を調べて直すほうが確実だ。
noteオプ・アートの源流は、どこまでたどれるか——スーラ、アルバース、モンドリアン、マレーヴィッチ（オプ・アート #2）
オプ・アートの源流としてよく名前が挙がるスーラ、アルバース、モンドリアン、マレーヴィッチ。4人の作品に、オプ・アートにつながる見え方の工夫を探す。画面がちらついて見える晩年のモンドリアン、正方形を傾けた構成にヴァザルリが捧げた絵、色の見え方を色紙で確かめるアルバースの演習と、どちらの面が手前か決まらない線の作品、離れると色が混ざって見えるスーラの点描。オプ・アートより前から、画家たちはそれぞれのやり方で、目に起きることを絵にしていた。
noteストレンジアトラクターを p5.js で描く
1つの点を単純な式で何百万回も動かすだけで、繊維のような複雑な模様が描ける。ストレンジアトラクターだ。p5.js で点を打つたびに塗っていくと、最初の絵は輪郭だけの白いベタ塗りになり、内側の構造が見えなかった。点がよく通る場所とまばらな場所では回数が桁違いに違う。そこで、各マスに点が何回入ったかを貯め、その回数を対数で明るさに写すと、混み合う稜線もまばらな繊維も1枚の絵に出せた。
noteアルキメデスの平面充填を p5.js で描く
正三角形や正方形、正六角形などの正多角形を組み合わせ、どの頂点でも同じ順番で並ぶように平面を敷き詰める。頂点のまわりの並びを決めて p5.js で多角形を置いていくと、角度の合計がぴったり合う並びでも、先へ進むと行き詰まるものがある。最初に選んだ置き方のまま進めると途中で止まる並びも、行き詰まったら一つ前に戻って別の置き方を試すと、敷き詰められる11種類すべてを描けた。
noteヒルベルト曲線で平面を埋める
1本の線で、平面のすべてのマスを1回ずつ通るヒルベルト曲線を p5.js で描く。正方形を4つに分け、それぞれを小さな曲線で埋めてつなぐ再帰で作れるが、端の2つの向きを変え忘れると、継ぎ目で線があちこちに飛んでしまう。順番が近いマスは空間でも近くにまとまる、という性質も、行ごとに折り返す走査と比べて確かめる。
noteペンローズ・タイルを p5.js で描く — 細分割の規則と最初の輪の向き
太い菱形と細い菱形で平面を埋めると、隙間はないのに同じ並びがくり返されない模様ができる。菱形を半分にした三角形を分割し続ける方法で p5.js に描き、2種類の枚数の比が黄金比に近づくことを確かめた。引っかかるのは最初の輪の向きで、すべて同じ向きのまま分割すると、隣り合う辺が途中で食い違う。それでもコードは止まらず枚数も変わらないので、数えるだけでは気づけない。
noteブリジット・ライリーの作品と、その見方
オプ・アートの代表的な画家ブリジット・ライリーの作品を、白黒の時代から色彩への展開まで順に見ていく。線やマスの幅を少しずつ変えるだけで、平らな画面に揺れや奥行きが生まれる。科学理論の応用と見られがちだが、本人はそれに反論し、経験を頼りに組み立てたと述べている。動いて見える理由も眼の小さな動きだけでは説明しきれない。形や色の並びがどこでどう変わるかを追う、という見方を手がかりにする。
noteオプ・アートはどこから来たか — 「応答する眼」以前の視覚実験（オプ・アート #1）
オプ・アートは1965年のMoMA「応答する眼」展で広く知られたが、突然現れたわけではない。核にあるのは、像は画面の上ではなく見る人の眼の中で完成する、という考え方だ。その先行例を、色の点を観者の知覚に委ねたスーラら新印象派、色の見え方を演習で探ったバウハウスとアルバース、回転する円盤や動く彫刻で錯覚そのものを主題にしたデュシャンや初期キネティック・アートという、別々の流れからたどる。
note錯視とは — かたち・明るさ・動きの錯覚
同じ長さの線が違って見える、止まった絵が動いて見える。錯視は、測った性質と見え方が食い違い、しかも多くの人に同じように起こる現象だ。ミュラー・リヤーやエビングハウスのような形と大きさの錯視、まわりで灰色の明るさが変わる錯視、静止画が動いて見える周辺ドリフト錯視、見え方が切り替わる図形を順に見ていく。どれも視覚の欠陥ではなく、ふだん役に立っている働きが特別な図形で表に出たものとして読める。
noteフィロタキシスを p5.js で描く — ひまわりの種の渦巻きを、1つの規則から
ひまわりの種の渦巻きは、種を1つ置くたびに決まった角度だけ回し、少しずつ外へずらしていくだけで描ける。p5.js で試すと、引っかかるところは2つあった。外へずらす量を単純に増やすと中心に種が集まり、外側がまばらになる。円盤全体に均等に敷き詰めるには、面積が増える分だけ広げる必要がある。もう1つは回す角度で、黄金角から少し外れるだけで渦がゆるみ、きりのいい角度にすると種が何本かの腕に分かれてしまう。
noteBoidsを3Dにする — 群れのルールはそのままに、光と箱で奥行きを見せる
前回2次元で作ったボイドを、p5.js の WEBGL モードで3次元にする。分離・整列・結合の3つのルールは、位置と速度に z を足すだけでほぼそのまま動く。手がかかるのは描き方のほうで、小さな円錐を同じ色で並べただけでは奥行きがつかめない。円錐の先を進む向きへ回し、光を当てて陰影をつけ、群れが動く範囲を線の箱で囲み、斜め上から眺める——こうして初めて、群れが空間の中を流れていく様子が見えてくる。
noteボイドで群れを動かす — 中央の指揮者なしで、3つのルールから群れが生まれる
Craig Reynoldsが1987年に考えたボイドを p5.js で動かす。分離（近すぎる仲間から離れる）・整列（まわりと向きをそろえる）・結合（まわりの中心へ寄る）という3つのルールを一羽ずつが守るだけで、群れを仕切る者がいないのに、鳥や魚のような群れの動きが自ずと生まれる。素朴に3つの力を足すとどんどん速くなって飛び散ってしまうので、曲がる力に上限をかけて速さを一定に抑える——これだけで、ばらばらの点がまとまって流れていく。
noteオプ・アートをコードで描く — ライリー、ヴァザルリ、モアレを手で動かす
オプ・アートの代表的な3つの効果——ライリーの波打つ縞、ヴァザルリのふくらむ球、重ねた格子が生むモアレ——を、p5.jsで一から手を動かして再現する。線の間隔や曲がり方、格子を重ねる角度といった数値を自分で少しずつ動かすと、「動いて見える」「ちらつく」といった知覚の効果が、どのパラメータのどこで生まれているのかが見えてくる。
noteオプ・アートとは何か — 幾何学の配置で、知覚に運動とちらつきを起こす
幾何学的な形と色の並べ方で、見る人の知覚に運動・振動・ちらつき・残像を起こす表現がオプ・アート。1964年の『タイム』誌記事と1965年MoMA「応答する眼」展（15ヶ国・99人・120点超）で広まった。ブリジット・ライリーの《Fall》(1963)が白黒の帯でたわみを見せ、ヴィクトル・ヴァザルリは正方形に幾何形を収めた「プラスティック・ユニット」(1959年特許)の組み替えで無限のバリエーションを生む。なぜ動いて見えるかは一つの説に飛びつかず、眼の微小な不随意運動（マイクロサッカード）や、側抑制で説明されてきたが今は疑問視されるハーマン格子、幾何学で説明でき錯視とは別物のモアレを並べて検討する。
notep5.jsでマンデルブロ集合を描く — z→z²+c の反復と、バンドを消す連続化
マンデルブロ集合を p5.jsで描く。画面の各点で同じ計算をくり返し、答えが無限に大きくなるまでの回数を色にするだけで、あの複雑な図形が現れる。ただ回数は整数なので、濃淡が帯のような段差になってしまう——「はみ出した瞬間の大きさ」を手がかりに段差をなめらかにつなぐと、くっきりした縞が消えて滑らかな濃淡になる。作例はキー1つで段々版と滑らか版を切り替えて違いを見られる。
notep5.jsで木を育てる — 空間にまいた引力点へ、枝を伸ばしていく（空間コロニー法）
L-systemのように規則から枝を展開するのではなく、空間にまいた「引力点」へ向けて枝を少しずつ伸ばして木を育てる空間コロニー法（Runions 2007）。素直に作ると引力点が消費されないまま枝ばかりが密集し、樹形がつぶれてしまう。枝が十分近づいた引力点を消す「kill距離」を入れると、引力点を使い切ったところで木が自然に伸びきって止まる——引力の届く範囲とkill距離の取り方で、枝ぶりが決まる。
notep5.jsでメタボールを書く — 重なった「場」の輪郭で、丸をなめらかにつなぐ
メタボール——丸どうしが粘液のように合体したり分かれたりする有機的な形。各点に中心からの「濃さ」を足し合わせた場をつくり、ある濃さの等高線を輪郭としてなぞる。格子をたどって輪郭を拾うとき、交点を辺の真ん中に固定するとカクついてしまう。両端の濃さから交点の位置を見積もって寄せると、なめらかな輪郭になる——対角の2隅だけが濃いときのつなぎ方を取り違えると、くびれがつながるか離れるかまで変わってしまう。
notep5.jsでポアソンディスクを書く — 点を均等に、でも規則的でなくばらまく（Bridson）
どの点どうしもある距離より近づかないのに、格子のような規則は残らない——点描やテクスチャ、ものの配置に効くポアソンディスク分布。ただランダムに打って毎回すべての点と距離を測ると遅いし、隙間もうまく埋まらない。Bridson 2007は、決まった点のまわりに候補をまき、背景に敷いた格子で近くの点だけを調べて速くする——この格子の目の細かさを取り違えると、点が近づきすぎてしまう。
notep5.jsで拡散律速凝集を書く — ランダムに歩く点が、枝分かれに育つ（DLA）
中央の種へ、ランダムウォークする粒子が次々と固着し、でたらめな歩みが枝分かれした樹状構造に育つ拡散律速凝集（DLA）。素朴な実装は遅い——最近接粒子までの距離ぶん一気に飛ぶ適応歩幅と、迷子を防ぐkill半径で速くし、接触距離を引き忘れると粒子がめり込んで形が崩れることも確かめる。
notep5.jsで描く波動関数崩壊 — 隣り合う制約を伝播させて敷き詰める
隣どうしがつながるタイルを、矛盾なく敷き詰める波動関数崩壊（WFC）。ランダムに置くと継ぎ目の半分で線が食い違い、直前のタイルだけを見ると袋小路に陥る——確定したマスから「隣の隣」へ制約を押し広げると、矛盾が起きる前に選択肢が絞られ、やり直しなしで盤が埋まる。
notep5.jsでドロネー三角形分割を書く — ボロノイ図の裏返しを、外接円でつくる（Bowyer-Watson）
散らばった点を三角形で結ぶドロネー三角形分割を、p5.jsで一から書く。「どの三角形の外接円にも他の点を含まない」という条件が、やせた三角形を避け、ボロノイ図の裏返し（双対）にもなる——Bowyer-Watson法でその条件を保ちながら点を足していく。
notep5.jsでボロノイ図を使って点を均等にならす — 重心へ動かす操作（Lloyd's relaxation）
ランダムに打った点は、団子になったり、ぽっかり空いたりで意外とばらけない。各点の“なわばり”（ボロノイ領域）を求め、その重心へ点を動かす——この操作をくり返すだけで、点がじわじわと均等にならされていく（Lloydのアルゴリズム）。
notep5.jsで描くL-system — 規則で文字列を書き換えて木を生やす
「アルゴリズムで絵を描く」シリーズの第8回。「X」1文字から始め、置き換え規則を何度も適用して文字列を伸ばす。できた文字列を前進・回転・分岐の命令として読み、タートルグラフィックスで描くと、植物のような枝分かれが育つ。
notep5.jsで描く微分成長 — 線を交差させずに折りたたむ
「アルゴリズムで絵を描く」シリーズの第7回。1本の閉じた線をすこしずつ伸ばすと、脳やサンゴのような折りたたみ模様が育つ。鍵は自己交差を防ぐこと——隣だけでなく全ノードに反発力をかけ、線どうしが重なる手前で押し返す。
notep5.jsで描く四角パッキング — 重ならないように正方形を詰める
「アルゴリズムで絵を描く」シリーズの第6回。空いた場所に小さな正方形を置き、隣やふちと重なる手前まで大きくして止める——円パッキングと同じ手順で、大小の四角がびっしり並んだ模様ができる。
notep5.jsで描く円パッキング — 重ならないように円を詰める
「アルゴリズムで絵を描く」シリーズの第5回。空いた場所に小さな円を置き、隣やふちと重なる手前まで大きくして止める——種まき・育成・停止のくり返しだけで、大小の円がびっしり詰まった模様ができる。
notep5.jsで描くTruchetタイル — 1種類のタイルで迷路をつくる
「アルゴリズムで絵を描く」シリーズの第4回。四半円をつないだ正方形のタイルを、ランダムに回して並べるだけ。たった1種類のタイルから、曲線が絡み合う迷路のような模様が自ずと生まれる。
notep5.jsで描くセルオートマトン — 番号ひとつで模様が変わる
「アルゴリズムで絵を描く」シリーズの第3回。1次元のセルが、両隣と自分の状態だけで次の色を決める。その規則は0〜255の番号ひとつに畳み込め、たった8ビットの違いが、三角形・フラクタル・カオスまで模様をまるごと変える。
notep5.jsで描く反応拡散（Gray-Scott）— 模様が育つ数値を探す
「アルゴリズムで絵を描く」シリーズの第2回。2つのインクが拡散し反応し合うだけで、迷路や斑点が自ずと育っていく。鍵は f と k の2つのつまみ——多くの値では真っ黒になるので、Pearsonの分類を手がかりに“模様が生まれる数値”を探す。
notep5.jsで描くフローフィールド — ノイズの場に、粒子を流す
「アルゴリズムで絵を描く」シリーズの第1回。ノイズで作った“向きの場”に粒子を乗せ、その軌跡を重ねると、絹のような流れが生まれる。仕組みはごく単純なので、定番のフローフィールドを一から順に組み立てていく。
note和文Webフォントの配信最適化 — 数千字を、どう届けるか
和文フォントは数千字を抱えて重くなりがちだ。実テキストを保ったまま軽くする5つの手——サブセット化、unicode-rangeでの分割、font-displayの指定、WOFF2圧縮、動的配信——を、規格と実装と慣習を分けて整理する。
noteカラーフォントの現状 — COLR / sbix / SVG、絵文字はどれで表示されているか
カラーフォントを支える4つの方式（COLR / SVG / sbix / CBDT）を整理する。ブラウザごとに対応が違うこと、同じ絵文字でも各社で見た目が変わる理由、そして和文のカラー化が構造的に難しいところまで。
notesystem-ui とは何を指すのか？ font-family のおまじないと、日本語の注意点
font-family の末尾に添える system-ui が、実際に呼ぶフォントを確かめる。特定の名前ではなくOS標準のUIフォントで、日本語だと英数字と和字が別々になる点に注意がいる。
notenoise() とは何か？ 乱数との違いと、あなたが使っているノイズの正体
ジェネラティブアートでおなじみの noise() の正体をほどく。乱数との違い、そして p5.js の noise() が実はパーリンノイズではなくバリューノイズ寄りだ、というところまで。
noteバリアブルフォント、2026年は使うべき？ 現状と、和文で使えるかの見極め
バリアブルフォントの現状と実装の作法を一通り押さえる。和文でも使える段階には来たが、グリフ数が多く軽量化はラテンほど効かない——2026年に使うかの見極めどころを考える。
notefont-family、2026年はどう書く？ システムフォントとNoto Sans JPの使い分け
長い font-family の並びを一行ずつ読み解く。Windows にも Noto Sans JP が届いた2025年以降、Noto をファーストチョイスにしてよいのかを考える。