LIGでフロントエンドエンジニアをしているいとしゅんです。
Slackのtimesに、日々気になったWebサイトやWeb関連ニュースをメモのように残しているのですが、社内でも「参考になる」と言ってもらえることが多いので、月ごとにまとめて公開しています。
今回は2026年10月版として、気になったサイト・ツール・読みものをジャンル別にまとめます。Web制作に携わる方のインプットの参考になればうれしいです。
▼前回の記事はこちら 今月フロントエンドエンジニアが気になったWebサイト・ニュース25選【2026.9】
Shunsuke Ito
今月気になった「Webサイト・表現」
CRL – Creative Reference Library（Bimo Tri・Josh Bendall）
音楽・映画・本・インタビュー映像など、創作の考え方に影響した作品を20件だけ厳選して並べたライブラリサイトです。
WebflowにGSAPのSplitText・CustomEaseとThree.jsを組み合わせて作られています。
mesq（Three.jsテクニカルアーティストのポートフォリオ）
3D空間の中で電柱に止まった可愛い鳥たちを中心としたゲームライクでポップな世界観が広がります。
ウォンテッドリー株式会社 コーポレートサイト
コーポレートカラーの黒と水色だけを使ったテキストアニメーションで見せているのが印象的です。
ナビゲーションは角丸の黒いピル型で上部に浮かせ、「新卒採用」「キャリア採用」のボタンを画面下に固定していて、写真とコピーに視線を集める作りになっています。
80億分の1（人生シミュレーション）
今日生まれる赤ちゃんの一人としてランダムに生まれ、172か国の国連・WHO・世界銀行の統計どおりに一生を生きるサイトです。
運営者がClaudeと一緒に作っていると明記していて、1人の人生を30分〜1時間半で最後まで見届ける作りになっています。
The Tie-break
https://thetiebreak.merci-michel.com/
ゲームを遊びながら、New Balance × Miu Miu のコラボコレクションを見られるキャンペーンサイトです。
Awwwardsではゲームプレイ、画面遷移、シューズが現れる演出が見どころとして挙げられていて、WebGLで作られています。
パティスリー GIN NO MORI ルディック
https://ginnomori.info/ludique/
地下に伸びる銀色の根っこに合わせてジグザグに視線が動くレイアウトにし、リスのキャラクターの首や尻尾、蝶、星などをほんの少しずつ動かして、一枚絵の中で時間が流れているように見せています。
詳しい制作過程はS5-Styleのインタビューで語られています。
Cartier Le Chœur des Pierres
https://www.cartier.com/en-us/lechoeurdespierres.html
宝石を選ぶとその世界に入り、インスパイアされたネックレスやリングに辿り着く体験型サイトです。
Cartier.com本体に統合されて20言語対応している規模感が、WebGLを「孤立したマイクロサイト」で終わらせない実例として参考になります。
今月気になった「ツール・プラットフォーム」
Fontmiru
https://toktaro.github.io/Fontmiru/
フォントファイルをドロップするだけで、バリアブル軸やOpenType機能の効き、縦組み、palt（プロポーショナルメトリクス）の有無などを比べられます。
ファイルはブラウザの中だけで処理され外部に送られないので、社内で扱うフォントも試しやすいです。
Furifont（antfu）— ふりがなをフォント自体で描く日本語フォント
源ノ角ゴシック・源ノ明朝をもとに、単語ごとのリガチャで漢字の上にふりがなやローマ字を描くフォントで、ruby要素もJavaScriptも使わずに表示できます。
文脈までは見られないため読みを間違えることがある、とREADMEに注意書きがあります。
Atelier UI
Three.js + React Three Fiber + Motion + Lenis Smooth Scrollを束ねて、複数のWebGLエフェクトを単一キャンバスで動かすReact UIライブラリです。
シェーダー・カーソル・スクロール・テキストエフェクトをimportするだけで使える設計で、インタラクティブサイトのボイラープレートとして使えそうです。
tslfx ― TSL向けVFXシェーダー・ユーティリティ・SDFの共有ライブラリ
TSLはGLSLと違ってJavaScript関数として書けるので、import { impact } from ‘tslfx’のようにnpmでシェーダーを配布・再利用できます。GLSLスニペット集の役割をTSL時代に担うプロジェクトとして覚えておきたいです。
今月気になった「ニュース・読みもの」
技術周りのトピックス
maxlength はペーストした文字列や変換中のかな入力を黙って切り捨てるため、パスワードの末尾が欠けたまま登録されるといった事故につながります。
AIが書いた日本語に出やすい不自然な言い回しを100個集めた記事です。
Claude Codeで大量に文章を生成し、Opusに抽出させて人が絞り込んだそうで、AIに書かせた文章を見直すときのチェックリストとして使えます。
1日のマージ数が5月の約2,500件から9月には3万件超に増え、Gitが開発のボトルネックになったため、自社製のバージョン管理システム「Scion」を作って5か月で移行したという記事です。
クライアントの大半が常時オンラインのエージェントである前提で、Gitの「全員がリポジトリを丸ごと持つ」設計を見直した経緯が書かれています。
指定した色に対してコントラストが大きいほうの白か黒を返すCSS関数で、2026年4月から主要ブラウザで使えるようになっています。
画像が読み込めなかったときにaltテキストが背景に埋もれないよう、img に background-color: contrast-color(currentcolor) を当てておく使い方がXで紹介されていました。
Hono・tldraw・Ladybird・Ghostty・Zigなどが、外部PRの停止や初参加者への関門、AI生成コードの禁止に動いている状況を整理した記事です。AIで大きなパッチが安く作れるようになり、PRを見ても送った人が信頼できるか分からなくなった、という理由づけが分かりやすく書かれています。
OpenAIが「dots」を発表。GPT‑6 Astra搭載で専用クラウドPCを持ち、24時間自律的にタスクを進めてくれる常駐型エージェント。
ChatGPT／Slack／Teamsから指示でき、使うほど好みや仕事の基準を学習。まずはPro・Businessプレミアムシート向けに順次提供とのこと
「手紙を書いて封筒に送る」プロダクト開発中にCSSアニメーションやBlenderの事前レンダリングでは表現力が足りず、Three.jsの物理シミュレーションとウェブカメラ入力でリアルタイムの折り・着火を実装したという経緯です。プロダクト課題から汎用ライブラリが生まれた流れが読みやすいです。
PHPに認証不要でリモートコード実行（RCE）できる重大な脆弱性が2件見つかり、10/21に修正版（8.5.12／8.4.27／8.3.36／8.2.35）がリリース。
Node.jsのセキュリティリリースが10/21に公開（v22.23.4／v24.22.1／v26.12.1）。深刻度Highが4件あり、Brotliデコーダ経由のリモートコード実行やTLS証明書のホスト名検証バイパスなどが含まれます。
取り組み・カルチャー紹介
ワードアート、Web2.0のジェルボタン、パワポの標準テーマから、今のAIが量産する紫グラデーションと角丸カードまでを年代順に振り返る記事です。
流行が考えなしに量産されると手抜きの合図になる、という整理がAI時代のデザインにもそのまま当てはまります。
11月2日〜10日に完全オンラインで開催され、日本在住ならエンジニア以外も応募できるハッカソン（選考で250名・チームは2名まで）。
参加者にはMax 5xプランと500ドル分のAPIクレジットが提供されます。
今月のひとこと
今月のツールを見返していて、これまで自分で書いていた処理が一段下のレイヤーに下りている、という共通点に気づきました。ふりがなをruby要素ではなくフォント自体で描くもの、シェーダーをnpmで配布できるようにするもの、白か黒かの判定をCSSの関数に任せられるようになった話。どれも「上でやっていたことを下に下ろす」話です。
来月もマイペースに集めていきます。
- LIGブログでは、エンジニアやデザイナーが日々の学びや気づき、技術情報などを発信しています。Web制作やフロントエンドに興味がある方は、ぜひ他の記事も読んでみてください！
👉️Web制作に関する記事一覧
