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

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

Slackのtimesに、日々気になったWebサイトやWeb関連ニュースをメモのように残しているのですが、社内でも「参考になる」と言ってもらえることが多いので、月ごとにまとめて公開しています。

今回は2026年6月版として、気になったサイト・ツール・読みものをジャンル別にまとめます。Web制作に携わる方のインプットの参考になればうれしいです。

▼前回の記事はこちら

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

Shunsuke Ito

2026.05.28

1

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

X GROUP｜新ブランド特設サイト

https://xgroup.co.jp/

エックスモバイルを中核とするXグループの新ブランド特設サイト。

黒背景に蛍光グリーンを効かせたエネルギッシュなデザインで、8bitアイコン風のデザインエレメントをブランドシステムに取り入れているのが特徴的です。

Ten Years Away – A graphic novel, of a true story

https://ten.375.studio/en

実話をもとにしたインタラクティブなグラフィックノベル体験サイト。年ごとに章立てで読み進めていく構成になっています。

漫画をスクロールで読み進めるような体験になっていて、音・グラフィック・テキストが一体となったイマーシブな読み物として設計されています。

株式会社ビットライズ

https://www.bit-rise.co.jp/

福岡・北九州のWeb制作会社のコーポレートサイト。

ホワイト×レッドのメリハリのある配色で、「MiCHi!」のロゴがファーストビューに大きく展開します。

Vaulk

https://vaulk.com/en-GB

フランス発のモジュール式シェルターシステムの企業サイト。

プロダクトの3DCGやデプロイメントプロセスの映像がスクロールに合わせて展開する構成で、洗練されたLPになっています。

KEI inc.

https://kei-inc.jp/

デザインスタジオのポートフォリオサイト。

余白をたっぷりとった静かなレイアウトに、縦組みの日本語テキストと風景・静物の写真が配置されていて、サイト全体に落ち着いた空気が流れています。

The Lacoste Polo Atelier Experience

https://members-play.lacoste.com/polo-factory-experience/us/en/

ラコステの会員向けに公開されたポロシャツの製造工程を体験できるインタラクティブサイト。

画面上のボタンを押すだけのシンプルな操作で、ポロシャツがどう作られていくのかを順に追っていける構成になっています。操作がシンプルなぶん工程そのものに集中でき、見ているだけで楽しめるサイトになっています。

株式会社興栄コンサルタント

https://www.koei-con.co.jp/

建設コンサルタント会社のコーポレートサイト。

イラストで描かれた街がファーストビューに広がります。スクロールを進めていくと賑やかな街並みが立ち上がっていくアニメーションが気持ちよく、青空から街、田園、山へと続く俯瞰の世界に建設・測量の場面が描き込まれています。

Kenichi Aikawa – Photographer

https://aikawakenichi.com/

フォトグラファー相川健一さんのポートフォリオサイト。

スクロールすると作品が布のように流れていき、余白をたっぷりとった配置とやわらかい光の写真が相まって、静かで上品な空気が流れています。

Son Daven — Design Resort Hotel

https://sondaven.com/en

ウクライナ・カルパティア山脈の麓のヤレムチェに建設中のデザインリゾートホテルの投資プロジェクトサイト。

スクロールに合わせて画像がズームしたり斜めに流れたりと、動きをふんだんに使った演出が印象的です。

Tenztan — Tanmay Premee

https://www.tenztan.in/

インドのAIエンジニアのポートフォリオサイト。

「INTERACT・交信」「創造」など日本語のタイポグラフィを織り交ぜたアニメ調の世界観で、GSAPを駆使したシネマティックな演出が展開します。

CGWORLD Web Design Week

https://cgworld.jp/special/webdesign-week/vol1/

CGWORLDが主催する、3DCGを活用したWeb制作・デザインの情報を届ける5日間のオンラインイベントの特設サイト。

サイト自体が3DCGを大胆に使ったエンタメ的な作りで、イベントのコンセプトをそのまま体現しています。

CRAV | Artisan Smashed Burgers

https://www.cravburgers.shop/

架空のスマッシュバーガーブランド「CRAV」のコンセプトサイト。

肉・チーズ・トマト・レタスなどの食材が大きく重なり合うシズル感たっぷりのビジュアルが食欲をそそります。素材の色にあわせたページ遷移アニメーション、素材が飛び跳ねるフッターなど、バーガーの「全部のせ」感を視覚的に表現していて、見ているだけでお腹が空いてきます。実在ブランドではないものの、フードサイトの表現の参考になりそうです。

IZANAMI

https://izanami-official.com/

ドバイを拠点に、日本の文化や精神性を世界へ届けるブランド「Izanami」のサイトです。

流体を使ったインタラクションは控えめながら存在感があり、デザイン全体に無駄がありません。静かなのに高級感がある、という難しいバランスが成立しています。

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

Liquid DOM — Web で Apple Liquid Glass を完全実装

https://liquid-dom-showcase.vercel.app/

WebGPU ベースで Liquid Glass をフルスクラッチ実装したライブラリ。

食料品消費税減税案 vs 所得連動型給付案 シミュレーター｜チームみらい

https://team-mir.ai/artifacts/kyufu/simulator.html

チームみらいが公開した給付施策の比較シミュレーター。

年収・配偶者の有無・子の人数を入力すると、食料品消費税減税案とチームみらい案（所得連動型給付）の年間恩恵額を比較できます。

Playwrite TZ｜Google Fonts

https://fonts.google.com/specimen/Playwrite+TZ?preview.script=Latn

正式な手書き文字スタイルをデジタルフォントとして再現していて、優雅なカリグラフィー風の書体です。Google Fontsから無料で使えます。

jespervos/blossom-carousel

https://github.com/jespervos/blossom-carousel

ブラウザのネイティブスクロールを置き換えるのではなく、その上にドラッグ操作を加える設計のカルーセルライブラリ。

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

今月のひとこと

今月は、ブランドや作品の世界観をWebの表現そのものに落とし込んだサイトが多く目に留まりました。音やグラフィック、3DCGを使って「読む・見る」を体験に変換していくものがある一方で、余白をたっぷりとった静かなミニマル系も印象的で、にぎやかな方向と静謐な方向の両極が並んでいたのが面白かったです。

ニュース面では、画像圧縮やCSSの新機能など、制作の足回りが着々と進化している印象。AI時代の新しい職種や、AIとの向き合い方そのものを問い直す論考も増えてきていて、ツールが揃っていくほど「何をどう伝えるか」という部分が問われていくのかなと感じています。

また来月もまとめます。それでは！

LIGブログでは、エンジニアやデザイナーが日々の学びや気づき、技術情報などを発信しています。Web制作やフロントエンドに興味がある方は、ぜひ他の記事も読んでみてください！

👉️Web制作に関する記事一覧