LIGでフロントエンドエンジニアをしているいとしゅんです。
Slackのtimesに、日々気になったWebサイトやWeb関連ニュースをメモのように残しているのですが、社内でも「参考になる」と言ってもらえることが多いので、月ごとにまとめて公開しています。
今回は2026年5月版として、気になったサイト・ツール・読みものをジャンル別にまとめます。Web制作に携わる方のインプットの参考になればうれしいです。
▼前回の記事はこちら 今月フロントエンドエンジニアが気になったWebサイト・ニュース48選【2026.4】
Shunsuke Ito
今月気になった「Webサイト・表現」
深愛 | kaf
https://kaf.kamitsubaki.jp/transcendent-love/
バーチャルシンガー・kafの楽曲「深愛」の特設サイト。
ピンクとホワイトを基調に、グリッチやノイズ表現・バーコード状のテクスチャが重なり合う独特のビジュアルが印象的です。
イラストと文字が画面上に層を重ねるようにレイアウトされていて、楽曲の世界観を視覚的に拡張したような作りになっています。
ABCS
ブランド・キャンペーン・フィルム制作を手がけるクリエイティブスタジオのサイト。
極太サンセリフの大きなタイポグラフィが画面を占領するような構成で、テキストが重なり合いながらスクロールで展開していく力強いデザインが印象的です。
Capitolium | TéFéCé × Stade Toulousain
https://www.collabcapitolium.fr/
フランス・トゥールーズを拠点にするサッカークラブとラグビークラブのコラボユニフォームの特設サイト。
大きな映像とテキストが章仕立てでスクロールに合わせて展開する構成で、プロダクトの紹介というよりひとつの読み物として見せる作りが印象的です。
スポーツとシティカルチャーを掛け合わせたブランドコラボのLP事例として参考になります。
World of NRG
NRGのコーポレートサイト。
夜の都市を俯瞰した精緻な3DCGモデルがファーストビューいっぱいに広がり、Three.jsかと思いきや実は動画で再現していて、それでも全く違和感がないのがすごいです。
Contra Labs
クリエイティブAIの評価・学習データを専門に扱うラボのサイト。
クリーム色の背景に古典絵画の画像を大きく使ったビジュアルが独特で、AIラボのサイトとは思えない人文学的な雰囲気があります。
カフェ&スイーツ Parade – パレード伏見洋菓子店
京都・伏見桃山にある洋菓子店のサイト。
クリーム×レッドの配色にセリフ体ロゴが映えるデザインで、焼き菓子の写真が少し傾いてコラージュ風に重なりながら並んでいます。
筆記体のテキストが随所に散りばめられていて、レトロなフレンチパティスリーのような雰囲気があります。
玉座の間から脱出せよ！｜ONE PIECE トレジャークルーズ
https://optc-12th-x.bn-ent.net/
スマホゲームの12周年記念特設サイト。
タイミングよくタップして玉座の間から脱出するインタラクティブなコンテンツになっています。ゲームのプロモーションサイトとしてユーザーを巻き込む仕掛けが面白いです。
QO 新卒採用サイト
QO,Inc.の新卒採用サイト。
「問いをコロコロ転がすと、突破口は見えてくる」というコピーが軸で、物理演算を使って壁を突破していくような縦スクロールの演出とコンセプトが一致していて読み進めるのが楽しいです。
映像作家100人2026
https://eizo100.jp/archives/category/2026
日本の映像作家・映像クリエイターの作品をアーカイブするサイト。
スタジオから個人クリエイターまで、ミュージックビデオ・3DCG・モーショングラフィックス・プロジェクションマッピングなど幅広いジャンルの作品が100本以上収録されています。
三次元 The Classic
富山市の建築デザイン事務所のサイト。
「時と記憶が、美しく積み重なっていく。」というコピーのもと、施工アルバムやモデルハウスの写真が落ち着いたトーンで並んでいます。
写真の質感とサイトのトーンがよく合っています。
Noomo | The power of digital Storytelling
https://storytelling.noomoagency.com/
デジタルストーリーテリングの原則を体験できるイマーシブな3Dサイト。
サイト自体がショーケースになっていて、スクロールやインタラクションで3Dの空間を探索しながらコンテンツを読み進める構成です。
あけたらしろめ
モノクロ画家・あけたらしろめさんのポートフォリオサイト。
Works・Projects・Logとシンプルな構成で、サイト全体に独特の静けさと手作り感が漂っています。
映像作家100人2026にも掲載されているクリエイターさんです。
Steven.com
「クリエイターエコノミーのOS」を掲げるプラットフォーム。
WebGLを使った導入部分の演出も見どころで、サイトに入った瞬間から引き込まれます。
Patchwork Design
「emotionally intelligent design」を掲げるデザインパートナーシップ。
ファーストビューはプロジェクトのサムネイルがアスキーエフェクト風のグリッドに敷き詰められていて、マウストレイルに合わせて歪む表現が面白いです。
ピクトニコ！
https://pictonico.nintendo.com/ja/index.html
任天堂とインテリジェントシステムが共同開発した新作スマホアプリの特設サイト。
自分の写真をゲームとして遊べるミニゲーム80種類が搭載されていて、2026年5月28日に配信されました。
写真がゲームになるという発想がシンプルに面白いです。メイドインワリオのようなミニゲームが楽しめそう。
一歩の冒研 Science Fellowship
若手研究者向けの奨学金プログラムのサイト。
背景がスクロールするたびに足跡が一歩ずつ前進していくアニメーションが印象的で、一定距離進むと足の形も変わっていく演出がプログラムのコンセプトとうまくリンクしています。
Aino Agency
スカンジナビアのデザイン・テクノロジーエージェンシーのサイト。
導入はアスキーエフェクトを使ったアニメーションで始まり、そこからは黒背景に大判のブランドビジュアルが静かに並ぶシンプルな構成に切り替わります。
演出はイントロに凝縮されていて、ページ下部のロゴタイプのフッターで潔く締まる構成が気持ちいいです。
今月気になった「ツール・プラットフォーム」
Smallbits
8×8グリッドに収まるように設計された290以上のピクセルアイコンセット。
個人・商用利用ともに無料で、SVGでダウンロードできます。
制約の中で作られた小さいアイコン一つひとつに密度があって、レトロな雰囲気が出ています。
Cascade — Icons for CSS Properties
https://designsurface.dev/cascade
CSSのプロパティと値の組み合わせをアイコンで表現したオープンソースのアイコンセット。
SVGまたはReactコンポーネントとしてコピーできて、デザインツール・インスペクター・ドキュメント向けに設計されています。
CSSプロパティを視覚的に表現するというアイデアが面白いです。
Morphous — Nature-driven design systems
https://morphos.ameyanagi.com/
動物・花・石など自然のモチーフを指定するだけで、8色パレット・shadcn対応のライト/ダークテーマ・PowerPoint/Wordテンプレートを一括生成してくれるデザインシステムカタログ。
現在611システムが収録されていて、すべてのプロンプトも公開されています。OSSでGitHubで公開されています。
Liquid Metal border
https://metal.jakubantalik.com/
隣接コンポーネントへの反射まで表現する液体メタルボーダーのコンポーネントライブラリ。npmで入れるだけで使えます。
Apple Intelligence風の光沢UIをサクッと試せます。
今月気になった「ニュース・読みもの」
昨日リリースされた Firefox 151 より全コアブラウザでコンテナスタイルクエリがサポートされました。
親・祖先のカスタムプロパティの値によって条件分岐できます。
今までメディアクエリ・コンテナクエリのブレイクポイントの変数管理がCSSのみでも可能になります。※Safariは18から pic.twitter.com/ivf15Wp1E4
— TAK (@tak_dcxi) May 21, 2026
Firefox 151で全ブラウザがCSSコンテナスタイルクエリに対応。
親要素のCSS Custom Propertiesで条件分岐できるようになりました。Chrome・Firefox・Safari全対応でついに実戦投入できます。
AIエージェントが古いフロントエンドコードを書く問題と対策。
AIにコードを書かせると一昔前の書き方になる問題、あるあるすぎる。対策まとめが実用的です。
scroll-driven animationsを使ったエッジマスキングのユーティリティ。デザインのかゆいところに手が届きます。
AIエージェントがアクセスしやすいサイト構築のガイドが公開。
「AIに読まれるサイト」の設計がこれから求められていく中で、Web制作者として押さえておきたい内容です。
AIエージェントが本番DBとバックアップを確認なしに全削除してしまった事故の話。
AIの問題というより、権限設計やバックアップ分離などインフラ側の甘さが重なった結果という指摘が刺さります。
「AIがジュニアエンジニアの仕事を代替するなら雇う必要はない」という風潮に対して、ビジネスリスクの観点から反論した記事。ジュニアを採用しないことはシニアへの交渉力を失うことであり、パイプラインが途絶えると数年後に替えの効かないシニアだけが残って組織が人質に取られると主張しています。
FIREを達成したシニアエンジニアは「辞めても困らない」ので交渉力が段違い、という指摘が鋭かったです。AIが台頭するほど、育成パイプラインの設計こそが重要になるという逆説が刺さります。
noteのCXO・深津貴之さんによる記事。AIが受託開発を始めたことで職種の役割がどう変わるかを論じていて、「エンジニアはコードを書く人から業務を計算可能にする人へ」「AIにできない仕事を探すのは時間稼ぎ」という指摘が刺さります。昨日の自分の仕事を今日の自分がAIで奪えるかどうかを問い続けるという視点が特に響きました。
Spotifyのアプリアイコンが突然変更されSNSで騒然。iPhone版Spotifyのアプリアイコンがミラーボールのような光沢感のあるデザインに突然変更されSNSで話題になりました。
今月のひとこと
今月は、WebGLやアスキーエフェクト・スクロール連動アニメーションなど、インタラクションや動きにこだわりを感じるサイトが多く目に留まりました。表現の引き出しがどんどん広がっている実感があります。
ニュース面ではCSSコンテナスタイルクエリが全ブラウザ対応になったり、sizes="auto"が使えるようになったりと、地味に嬉しいアップデートが続いた月でもありました。
一方でAI関連の話題は「育成パイプライン」「本番DB消滅」「受託の代替」と、楽しい話よりも考えさせられる話が多かった気がします。
また来月もまとめます。それでは！
- LIGブログでは、エンジニアやデザイナーが日々の学びや気づき、技術情報などを発信しています。Web制作やフロントエンドに興味がある方は、ぜひ他の記事も読んでみてください！
- みなさまのキャリアから逆算した案件を提案
- Web制作・システム開発会社が運営会社ならではの現場理解
- エンジニアからクリエイターまで、幅広く対応
登録・相談は完全無料です。まずはぜひお気軽にご相談ください！
