LIGでフロントエンドエンジニアをしているいとしゅんです。
Slackのtimes(社内の個人メモのようなチャンネル)で、日々「これいいな」「これは気になる」と思ったWebサイトやWeb関連ニュースを、メモ代わりに投稿しています。
社内でも「参考になる」と言ってもらえることが多く、せっかくなので月ごとにまとめて公開していくことにしました。
初回は2025年12月〜2026年1月の2ヶ月分をジャンル別にまとめました。毎月更新していくので、Web制作に携わる方のインプットの参考になれば嬉しいです。
目次
- 今月気になった「Webサイト・表現」35選
- AZERO – Welcome to our warehouse
- SHIFTBRAIN Playground
- Fictional Spaces
- VAP – Studio de Création Vidéo
- ANIMAL FACE
- ZOOM — 日本発のコンテンポラリーデザインペン
- RECRUIT | Branding Career
- WoraWork
- 株式会社PLAYWORK
- Shopify Editions | Winter ’26
- Roizi — Web and Digital Creative Designer
- S—iR | CREATIVE TECHNOLOGY STUDIO
- 東京のオフィスデザイン・レイアウトならwork kit by HITOBA DESIGN
- bruno-simon.com
- untilLabs
- 佐久間宣行事務所
- Mr. Panda’s Psychologically Safe Portfolio
- 株式会社Zero-Ten(ゼロテン)
- Occupied
- 8Puronicles 公式サイト
- THE NORTH FACE | LAB SERIES
- Harry Design Studio
- Goodpatch グッドパッチ採用サイト
- Shoya Kajita
- エレク株式会社
- アスザックグループ 高校生採用サイト
- Road trip
- WING MARK HISTORY | Honda 企業情報サイト
- bfcm.shop
- NIKE LAB RADIO
- minitap.ai
- SERIOUS CERAMIC
- ivan.codes
- ハニワエンタープライズ(820Enterprise)
- Nicola Romei | Digital Experience Designer
- 今月気になった「ツール・プラットフォーム」4選
- 今月気になった「ニュース・読みもの」18選
- 今月のひとこと
今月気になった「Webサイト・表現」35選
AZERO – Welcome to our warehouse

没入感強めのECサイト。ECでここまで世界観に振り切るのは勇気がいると思うけど、体験としてかなり印象に残ります。
SHIFTBRAIN Playground

https://playground.shiftbrain.com/
SHIFTBRAINさんのラボサイト。実験的な表現や試みをアウトプットとして公開しています。Playgroundという名前のとおり、触って楽しめるサイトです。
Fictional Spaces

https://www.fictional-spaces.com/
グリッド状のマスを土台に、レイアウトや配置が切り替わっていく見せ方をしています。シンプルな「マス目」だけで、リズム感のある画面構成になっています。
VAP – Studio de Création Vidéo

バルーンのモデルを使ったインタラクションと、二次元物理演算を使ったメニューやアニメーションなど、随所に遊び心を感じるサイト。
ANIMAL FACE

https://animal-face.pages.dev/
マイクを使った音声操作に対応した子ども向けサイト。Webならではの直感的な操作体験を取り入れています。
ZOOM — 日本発のコンテンポラリーデザインペン

写真と思いきや、画像内(正しくは画像ではない)のものがちゃんとマウスのインタラクションとして機能していて驚きました。質感が細部まで作り込まれています。
RECRUIT | Branding Career

https://branding-career.co.jp/lp/recruit
Utsuboさん制作。WebGLを使った緻密なパーティクル表現と、質感が似たパーティクルの動画を使い分けていて流石の完成度でした。
WoraWork
Hi everyone! I’m happy to finally share my portfolio!🏝️
This portfolio is an island where you can explore around to get to know me, my skills, and my work.
I hope you enjoy exploring around my island!
Go Explore: https://t.co/BqcM6C8q9J#threejs #threejsjourney #r3 pic.twitter.com/ZPyhbZwEsJ— wora_work (@WoraWork) December 5, 2025
どうぶつの森に大きく影響を受けているであろう世界観。
3Dモデリングの細かい作り込みと、遊び心のあるインタラクションが随所に見られます。
株式会社PLAYWORK

GIF画像を背景固定したシンプルなアイディア。スクロールしていくと冒険するような感覚になるサイトです。
Shopify Editions | Winter ’26

https://www.shopify.com/editions/winter2026
Shopifyの新機能発表イベント「Renaissance Edition」の特設サイト。スクロールと連動したダイナミックな演出が特徴で、2025年に見たサイトの中でも圧倒的なクオリティでした。
Roizi — Web and Digital Creative Designer

導入の穴が開くアニメーションが面白いです。
S—iR | CREATIVE TECHNOLOGY STUDIO

リッチなMVとページごとにテーマやBGMが変わり、スクロール操作でページ遷移させる仕組みも面白かったです。
東京のオフィスデザイン・レイアウトならwork kit by HITOBA DESIGN

SHIFTBRAINさん作。一切の無駄のない洗練されたデザインのコーポレートサイト。
bruno-simon.com

Three.js界の教祖の一人がポートフォリオサイトをリニューアル。
以前同様に車動かしてサイト内を閲覧できる方式でしたが、さらにクオリティが上がってリニューアルされました。
untilLabs

パーティクルを点描画風に並べて、チルトシフトで遠近にブラーをかけ奥行きが表現されています。
佐久間宣行事務所

Goodpatchさん作。STUDIO製サイト。公開当初から制作過程まで話題になりました。
Mr. Panda’s Psychologically Safe Portfolio

https://www.mr-pandas-psychologically-safe-portfolio.com/
手書きのイラストやテキストを WebGL に落とし込んだ、やわらかい空気感のポートフォリオサイト。
技術的な表現が前に出すぎず、全体として温もりが感じられるところが印象に残りました。
株式会社Zero-Ten(ゼロテン)

グラデーションを基調にした、全体のトーンが丁寧に揃えられたデザインのサイト。
演出は控えめですが、情報の整理や空気感が心地よく、落ち着いて読み進められます。
Occupied

ジュエリーブランドのサイト。エッジの効いたジュエリーデザインも相まってタイポグラフィーと共に独特の世界観が漂っています。
8Puronicles 公式サイト

https://8puronicles.sanrio.co.jp/
サンリオが展開する特設コンテンツ「8Puronicles(エイトピューロニクルズ)」の公式サイト。
THE NORTH FACE | LAB SERIES

https://www.thenorthface.jp/special/lab_series/
THE NORTH FACEが展開する「LAB SERIES」の特設コンテンツ。
ドットを用いたデジタルアートのような表現が多く、実験的なプロダクトラインを扱っていることが伝わりました。
Harry Design Studio

操作音とインタラクションが組み合わさったサイト。
ゲームを意識したUIやテキスト表現が使われていて、触りながら内容を追っていく作りになっています。
Goodpatch グッドパッチ採用サイト

https://careers.goodpatch.com/
動画の最初と最後をつなげたループ構成で、映像を見ているというより動く写真に近い感覚。
よく見ると、映像表現にはAI生成っぽさも少し感じられました。
Shoya Kajita

WebGLを使った表現を中心に、Webカメラのトラッキングによる手の操作にも対応。
画面を見る体験と、操作する体験の両方が用意されたサイト。
エレク株式会社

FVからフッターまでつながって見えるSVGの光とラインが、スクロールに合わせて流れていくアニメーションになっています。
その動きに沿って視線も自然と移り、世界観の中を辿っていくような感覚。
アスザックグループ 高校生採用サイト

https://recruit.asuzacgroup.jp/highschool/
アスザックグループの高校生向け採用サイト。仕事や職場の雰囲気を、ポップなイラストややわらかいビジュアルを交えてわかりやすく紹介しています。
Road trip

クリックすると空から大量の車が降って壊れる実験的なインタラクション。なぜかスカッとします。
WING MARK HISTORY | Honda 企業情報サイト

https://global.honda/jp/wingmark/
Hondaのウイングマーク(翼のロゴ)の歴史を紹介する特設サイト。
時代ごとのマークの変遷を、ストーリーとして追える設計。スクロールとともにコンテンツが移り変わり、歴代のウイングマークは3D表現でリアルな質感を再現。
bfcm.shop

Shopifyのブラックフライデー・サイバーマンデー(BFCM)2025キャンペーンサイト。
世界中の取引をライブで可視化する地球儀やピンボールのゲームで遊んだりできます。
NIKE LAB RADIO

NIKE LAB RADIOのアーカイブサイト。ラジオというオーディオメディアを、ビジュアルとフィジカルな空間体験に拡張したプロジェクト。
Webサイトはそのアーカイブ的な役割を果たしつつ、NIKEのブランドイメージを損なわない洗練されたデザインになっています。
minitap.ai

AIを使って、モバイルアプリの開発からテスト、リリースまでを自動化するツールの紹介サイト。
Three.js を使った立体的な表現を取り入れたLP構成になっています。
SERIOUS CERAMIC

グリッドを基調にしたデザインのサイト。
MVのKV内で、mask-image を使ったパララックス表現と、画像切り替え時のタイル状マス目パターンのアニメーションが使われています。
ivan.codes

Teenage Engineeringを思わせるビジュアルトーンに、遊び心のあるインタラクションが組み合わさったサイト。
プロダクト的な見せ方と軽い操作感が随所に配置されています。
ハニワエンタープライズ(820Enterprise)

大胆なタイポグラフィが目をひく沖縄の広告・マーケティング企業のサイト。
Nicola Romei | Digital Experience Designer

モノクロ基調で高級感のあるポートフォリオサイト。
ドラッグやスクロールで操作できるアートボードページで心地よい操作体験でした。
今月気になった「ツール・プラットフォーム」4選
Paper Shaders

Paper Shaders – Ultra-fast zero-dependency shaders
お手軽にシェーダーアニメーションが作れるライブラリ。
OSMO

Webアワード常連クリエイターが立ち上げたプラットフォーム。WebアニメーションやWebflowが中心。
Detail · Where craft lives

デザイナーや開発者向けに、プロダクトを適切に感じさせるUI/UXの細部にフォーカスしたキュレーションサイト。
3D屋さん

3D屋さん | 漫画・イラストに使える3Dモデル無料配布サイト
3D素材がフリーでダウンロードできる日本サイト。2026年10月31日をもってサイト閉鎖となってしまうようです。
今月気になった「ニュース・読みもの」18選
技術周りのトピックス
フロントエンドカンファレンス関西で紹介を見送った最新レスポンシブコーディング
昔の「俺流レスポンシブコーディング」では 360px 未満対応を JS を利用して対応しましたが、
zoom プロパティと progress() 関数を使うことで CSS のみかつ数行でリキッドにできます。
※iOS 26以上
#fec_kansai
pic.twitter.com/I4RLll0Rwz
— TAK (@tak_dcxi)
December 6, 2025
zoom プロパティと progress() 関数を使うことで、CSSのみかつ数行でリキッドに。こんな方法が。。。
imagine Siri doing this! 🏎️🏎️
ryOS now with:
• fast lazy load, cache, works offline
• build versions, auto-updates
• unified fs + agent tools
• window minimize & new animations
pic.twitter.com/Y0RVTer6Ey
— Ryo Lu (@ryolu_)
December 1, 2025
vibe codingでOS作ってる画面。今まで見たvibe codingの中でも圧巻でした。
窓から光が差し込む様子を再現した、ブラインド型の面光源の無機EL照明。
Bright Blind | Makoto Hirahara | 217r2
pic.twitter.com/2yYEAnlG70— !DESIGN (@i_______DESIGN)
January 12, 2026
ブラインドそのものに光源をつけることで、閉めた状態のブラインドから光が溢れているように見えるアイディア。
Gmail仕様変更。外部ドメインのメール使用不可に改悪。
CSSプロパティ text-decoration-inset の記事。
フロントエンドエンジニア向けのレスポンシブコーディング手法をまとめたスライド。
ChatGPT上でPhotoshopの機能が使えるようになりました。
Cursorがデザインエディターにアップデート。
Web上の画像を右クリックするだけで、背景削除や明るさ調整が可能。
かつてよく見かけたこのフォント設定は、すでに非推奨になっています。
hidden=”until-found” なんて属性あるの知らなかった。
取り組み・カルチャー紹介
内閣府が進める「見える化改革」の特設コンテンツ。政策や制度の成果・課題をデータや指標で可視化し、国民にわかりやすく伝えることを目的としている。
Web30年の歴史をまとめて振り返れる「まとめ読み」。俯瞰できるのが良かったです。
こんなにいいねがついてるnote記事初めて見ました。
AIでコードを書くこと自体は当たり前になりつつあるけれど、仕組みを理解し続ける姿勢の大切さに触れている内容。バイブコーディング前提の時代に合わせて、学び方や教育も更新していく必要があると感じました。
GoodpatchのUIデザイナーさんが、触っていて気になったアプリをいくつか取り上げている記事。操作や細部のつくりを手がかりに、UIの面白さを拾っていく内容。
ゲームUIアニメーション制作の解説記事。Webとは違ったアプローチで勉強になりました。
今月のひとこと
WebGLやThree.jsを使った3D表現が当たり前のように実装される一方で、Shopify Editionsのような「圧倒的なクオリティ」を持つサイトが次々と登場した時期でした。
同時に、CursorやChatGPT上でのPhotoshop利用など、AI支援ツールの進化も加速。制作の手段は増え続けていますが、結局「何を伝えたいか」「どんな体験を届けたいか」という本質は変わりません。
また来月もお届けします。それでは!