今月フロントエンドエンジニアが気になったWebサイト・ニュース57選【2026.1】

今月フロントエンドエンジニアが気になったWebサイト・ニュース57選【2026.1】

Shunsuke Ito

Shunsuke Ito

LIGでフロントエンドエンジニアをしているいとしゅんです。

Slackのtimes(社内の個人メモのようなチャンネル)で、日々「これいいな」「これは気になる」と思ったWebサイトやWeb関連ニュースを、メモ代わりに投稿しています。

社内でも「参考になる」と言ってもらえることが多く、せっかくなので月ごとにまとめて公開していくことにしました。

初回は2025年12月〜2026年1月の2ヶ月分をジャンル別にまとめました。毎月更新していくので、Web制作に携わる方のインプットの参考になれば嬉しいです。

今月気になった「Webサイト・表現」35選

AZERO – Welcome to our warehouse

https://azero.industries/

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

SHIFTBRAIN Playground

SHIFTBRAIN Playground

https://playground.shiftbrain.com/

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

Fictional Spaces

Fictional Spaces

https://www.fictional-spaces.com/

グリッド状のマスを土台に、レイアウトや配置が切り替わっていく見せ方をしています。シンプルな「マス目」だけで、リズム感のある画面構成になっています。

VAP – Studio de Création Vidéo

VAP – Studio de Création Vidéo

https://www.vap.studio/

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

ANIMAL FACE

https://animal-face.pages.dev/

マイクを使った音声操作に対応した子ども向けサイト。Webならではの直感的な操作体験を取り入れています。

ZOOM — 日本発のコンテンポラリーデザインペン

ZOOM

https://www.zoom-japan.com/

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

RECRUIT | Branding Career

RECRUIT | Branding Career

https://branding-career.co.jp/lp/recruit

Utsuboさん制作。WebGLを使った緻密なパーティクル表現と、質感が似たパーティクルの動画を使い分けていて流石の完成度でした。

WoraWork

どうぶつの森に大きく影響を受けているであろう世界観。

3Dモデリングの細かい作り込みと、遊び心のあるインタラクションが随所に見られます。

株式会社PLAYWORK

株式会社PLAYWORK

https://pwork.jp/

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

Shopify Editions | Winter ’26

Shopify Editions | Winter ’26

https://www.shopify.com/editions/winter2026

Shopifyの新機能発表イベント「Renaissance Edition」の特設サイト。スクロールと連動したダイナミックな演出が特徴で、2025年に見たサイトの中でも圧倒的なクオリティでした。

Roizi — Web and Digital Creative Designer

Roizi

https://roizi.info/

導入の穴が開くアニメーションが面白いです。

S—iR | CREATIVE TECHNOLOGY STUDIO

S—iR

https://www.s-ir.it/

リッチなMVとページごとにテーマやBGMが変わり、スクロール操作でページ遷移させる仕組みも面白かったです。

東京のオフィスデザイン・レイアウトならwork kit by HITOBA DESIGN

work kit by HITOBA DESIGN

https://hitoba-office.com/

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

bruno-simon.com

bruno-simon.com

https://bruno-simon.com/

Three.js界の教祖の一人がポートフォリオサイトをリニューアル。

以前同様に車動かしてサイト内を閲覧できる方式でしたが、さらにクオリティが上がってリニューアルされました。

untilLabs

untilLabs

https://www.untillabs.com/

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

 

佐久間宣行事務所

佐久間宣行事務所

https://nob-sakuma.com/

Goodpatchさん作。STUDIO製サイト。公開当初から制作過程まで話題になりました。

Mr. Panda’s Psychologically Safe Portfolio

Mr. Panda's Psychologically Safe Portfolio

https://www.mr-pandas-psychologically-safe-portfolio.com/

手書きのイラストやテキストを WebGL に落とし込んだ、やわらかい空気感のポートフォリオサイト。

技術的な表現が前に出すぎず、全体として温もりが感じられるところが印象に残りました。

株式会社Zero-Ten(ゼロテン)

株式会社Zero-Ten(ゼロテン)

https://zeroten.jp/

グラデーションを基調にした、全体のトーンが丁寧に揃えられたデザインのサイト。

演出は控えめですが、情報の整理や空気感が心地よく、落ち着いて読み進められます。

Occupied

Occupied

https://occupied.unadsgn.tw/

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

8Puronicles 公式サイト

8Puronicles

https://8puronicles.sanrio.co.jp/

サンリオが展開する特設コンテンツ「8Puronicles(エイトピューロニクルズ)」の公式サイト。

THE NORTH FACE | LAB SERIES

THE NORTH FACE | LAB SERIES

https://www.thenorthface.jp/special/lab_series/

THE NORTH FACEが展開する「LAB SERIES」の特設コンテンツ。

ドットを用いたデジタルアートのような表現が多く、実験的なプロダクトラインを扱っていることが伝わりました。

Harry Design Studio

Harry Design Studio

https://noeinoi.com/

操作音とインタラクションが組み合わさったサイト。

ゲームを意識したUIやテキスト表現が使われていて、触りながら内容を追っていく作りになっています。

Goodpatch グッドパッチ採用サイト

Goodpatch グッドパッチ採用サイト

https://careers.goodpatch.com/

動画の最初と最後をつなげたループ構成で、映像を見ているというより動く写真に近い感覚。

よく見ると、映像表現にはAI生成っぽさも少し感じられました。

Shoya Kajita

Shoya Kajita

https://shoya-kajita.com/

WebGLを使った表現を中心に、Webカメラのトラッキングによる手の操作にも対応。

画面を見る体験と、操作する体験の両方が用意されたサイト。

エレク株式会社

エレク株式会社

https://www.elec-inc.com/

FVからフッターまでつながって見えるSVGの光とラインが、スクロールに合わせて流れていくアニメーションになっています。

その動きに沿って視線も自然と移り、世界観の中を辿っていくような感覚。

アスザックグループ 高校生採用サイト

アスザックグループ 高校生採用サイト

https://recruit.asuzacgroup.jp/highschool/

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

Road trip

screen.toys/roadtrip

https://screen.toys/roadtrip/

クリックすると空から大量の車が降って壊れる実験的なインタラクション。なぜかスカッとします。

WING MARK HISTORY | Honda 企業情報サイト

WING MARK HISTORY | Honda 企業情報サイト

https://global.honda/jp/wingmark/

Hondaのウイングマーク(翼のロゴ)の歴史を紹介する特設サイト。

時代ごとのマークの変遷を、ストーリーとして追える設計。スクロールとともにコンテンツが移り変わり、歴代のウイングマークは3D表現でリアルな質感を再現。

bfcm.shop

bfcm.shop

https://bfcm.shop/

Shopifyのブラックフライデー・サイバーマンデー(BFCM)2025キャンペーンサイト。

世界中の取引をライブで可視化する地球儀やピンボールのゲームで遊んだりできます。

NIKE LAB RADIO

NIKE LAB RADIO

https://lab-radio.com/

NIKE LAB RADIOのアーカイブサイト。ラジオというオーディオメディアを、ビジュアルとフィジカルな空間体験に拡張したプロジェクト。

Webサイトはそのアーカイブ的な役割を果たしつつ、NIKEのブランドイメージを損なわない洗練されたデザインになっています。

minitap.ai

https://minitap.ai/

AIを使って、モバイルアプリの開発からテスト、リリースまでを自動化するツールの紹介サイト。

Three.js を使った立体的な表現を取り入れたLP構成になっています。

SERIOUS CERAMIC

SERIOUS CERAMIC

https://seiwaceramics.com/ja

グリッドを基調にしたデザインのサイト。

MVのKV内で、mask-image を使ったパララックス表現と、画像切り替え時のタイル状マス目パターンのアニメーションが使われています。

ivan.codes

ivan.codes

https://ivan.codes/

Teenage Engineeringを思わせるビジュアルトーンに、遊び心のあるインタラクションが組み合わさったサイト。

プロダクト的な見せ方と軽い操作感が随所に配置されています。

ハニワエンタープライズ(820Enterprise)

ハニワエンタープライズ

https://820e.co.jp/

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

Nicola Romei | Digital Experience Designer

https://www.nicolaromei.com/

モノクロ基調で高級感のあるポートフォリオサイト。

ドラッグやスクロールで操作できるアートボードページで心地よい操作体験でした。

今月気になった「ツール・プラットフォーム」4選

Paper Shaders

Paper Shaders – Ultra-fast zero-dependency shaders

お手軽にシェーダーアニメーションが作れるライブラリ。

OSMO

OSMO

https://www.osmo.supply/

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

Detail · Where craft lives

Detail

Detail · Where craft lives

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

3D屋さん

3D屋さん | 漫画・イラストに使える3Dモデル無料配布サイト

3D素材がフリーでダウンロードできる日本サイト。2026年10月31日をもってサイト閉鎖となってしまうようです。

今月気になった「ニュース・読みもの」18選

技術周りのトピックス

zoom プロパティと progress() 関数を使うことで、CSSのみかつ数行でリキッドに。こんな方法が。。。

vibe codingでOS作ってる画面。今まで見たvibe codingの中でも圧巻でした。

ブラインドそのものに光源をつけることで、閉めた状態のブラインドから光が溢れているように見えるアイディア。

取り組み・カルチャー紹介

AI時代に「変わらなかった」エンジニアの話

AIでコードを書くこと自体は当たり前になりつつあるけれど、仕組みを理解し続ける姿勢の大切さに触れている内容。バイブコーディング前提の時代に合わせて、学び方や教育も更新していく必要があると感じました。

今月のひとこと

WebGLやThree.jsを使った3D表現が当たり前のように実装される一方で、Shopify Editionsのような「圧倒的なクオリティ」を持つサイトが次々と登場した時期でした。

同時に、CursorやChatGPT上でのPhotoshop利用など、AI支援ツールの進化も加速。制作の手段は増え続けていますが、結局「何を伝えたいか」「どんな体験を届けたいか」という本質は変わりません。

また来月もお届けします。それでは!

この記事のシェア数

大学卒業後、アパレル業界へ就職。その後SIerの経験を経て、Webコーダー兼デザイナーへ転身。Webアニメーションやグラフィカルな表現に情熱を注 ぎ、デザインとコーディングのスキルを磨く。2023年にフロントエンドエ ンジニアとしてLIGに入社。アニメとマンガが好き。

このメンバーの記事をもっと読む
デザイン力×グローバルな開発体制でDXをトータル支援
お問い合わせ 会社概要DL