LIGでフロントエンドエンジニアをしているいとしゅんです。
Slackのtimesに、日々気になったWebサイトやWeb関連ニュースをメモのように残しているのですが、社内でも「参考になる」と言ってもらえることが多いので、月ごとにまとめて公開しています。
今回は2026年4月版として、気になったサイト・ツール・読みものをジャンル別にまとめます。Web制作に携わる方のインプットの参考になればうれしいです。
▼前回の記事はこちら 今月フロントエンドエンジニアが気になったWebサイト・ニュース39選【2026.3】
Shunsuke Ito
目次
- 今月気になった「Webサイト・表現」
- 東京ばにゃ奈クッキーズ
- ビブリア古書堂の事件手帖
- AVA SRG
- Odd Ritual • A Modern Expression of Heritage – oddritual
- R—K Design & Code
- 新卒採用サイト | 中部国際空港旅客サービス株式会社
- ARTE TOKYO｜東京国際文化芸術祭
- Satsukiyama DAYZOO
- Mersi Architecture
- dany.works
- Mountain Birds
- Obys Agency
- tashi Illustration&Design Portfolio
- 『ダンダダン』5周年特設サイト | 少年ジャンプ＋
- HANA 1st TOUR 2026 “Born to Bloom” 追加公演
- カワサキグリーンエナジー株式会社
- YAOYA
- TOMORE｜野村不動産の新しいひとり暮らし。
- CHOCOLATE PARADE
- 湘南工科大学 オープンキャンパス
- PIXELVAULT
- 星街すいせい
- OASIZ
- 株式会社fodesign
- 今月気になった「ツール・プラットフォーム」
- 今月気になった「ニュース・読みもの」
- 今月のひとこと
今月気になった「Webサイト・表現」
東京ばにゃ奈クッキーズ
https://www.tokyobanana.jp/products/banyana.html
「東京ばにゃ奈クッキーズ」の商品紹介ページ。
画面いっぱいにぷっくりしたねこキャラクターたちが飛び出してきて、賑やかでポップな世界観が広がります。6種のフレーバーそれぞれにキャラクターが対応していて、見ているだけで選ぶ楽しさがあるサイトです。
ビブリア古書堂の事件手帖
2027年のTVアニメ化が決定した『ビブリア古書堂の事件手帖』の公式サイト。
ファーストビューはインクが紙に滲んでいくような演出で、縦に流れる文字組みは小説を手に取ったような雰囲気があります。
古書ミステリという世界観をデザインそのもので伝えてくれるサイトです。
AVA SRG
https://srg.ava-digital.site/en
Webデザインスタジオが運営するスクールのサイト。
ファーストビューに大きく映し出された手のモデルがスクロールに合わせてハンドサインを変えていく演出が印象的で、サイト全体を通してモノクロ×赤のコントラストが効いたシリアスなトーンで統一されています。
卒業生のプロジェクトも多数掲載されていて、スクールのアウトプットのレベルの高さも伝わってきます。
Odd Ritual • A Modern Expression of Heritage – oddritual
ゴルフアパレルブランドのサイト。コース内外でのカルチャーや自己表現をテーマに、Tシャツやキャップなどを展開しています。
オフホワイトの背景にモノクロ写真とセリフ体タイポグラフィを組み合わせた落ち着いたデザインで、ゴルフウェアらしくない街着寄りのエディトリアルな雰囲気が漂っています。
R—K Design & Code
https://www.raviklaassens.com/
ポートフォリオサイトでありスタジオサイト。
赤と黒を基調にした官能的でエッジの効いたビジュアルが印象的で、アイデンティティ・Webデザイン・開発まで幅広く手がけています。
エージェンシー向けのサブコントラクター対応も打ち出していて、個人スタジオとしての戦略的な見せ方も参考になります。
新卒採用サイト | 中部国際空港旅客サービス株式会社
https://www.centrair.jp/corporate/recruit/pax/newgrads/
中部国際空港セントレアの新卒採用サイト。
「セントレアの未来に、あなたの笑顔を。」というキャッチコピーのもと、ブルーを基調にした爽やかなデザインで空港らしい開放感があります。
ARTE TOKYO｜東京国際文化芸術祭
臨海・日比谷・渋谷エリアで開催される東京の文化芸術祭の公式サイト。
グラデーションのシンボルマークがLottieアニメーションで動いていて、スクロールで流れるイベントカテゴリやパララックスの画像など、動きのある演出が随所に入っています。
Satsukiyama DAYZOO
https://www.satsukiyamazoo.com/
大阪・池田市の五月山動物園の公式サイト。
ウォンバットの飼育で知られる動物園で、リニューアルプロジェクトの紹介も掲載されています。
ダークレッドを基調にした落ち着いたデザインで、動物園サイトらしくないシックなトーンが印象的です。スクロールすると見出しテキストがヘッダーに吸い込まれていくような表現も面白くて、細かい動きにこだわりを感じます。
Mersi Architecture
https://www.mersi-architecture.com/
パリを拠点とするインテリアデザインスタジオのポートフォリオサイト。
大判の写真を左右に分割して並べるグリッドレイアウトが気持ちよく、素材感のある内装写真との相性が抜群です。
落ち着いた色調が全体に流れていて、サイト自体がひとつの空間のように感じられます。
dany.works
デザイナーさんのポートフォリオ兼日記サイト。
黒背景にモノクロの写真・ロゴ・タイポグラフィが縦に並ぶ、ブログのような構成になっています。ハーフトーン加工された車の写真やヴィンテージ感のあるロゴデザインが混在していて、日常の記録とデザインワークの境界線が曖昧な雰囲気がクセになります。
キーを押すことでさまざまなテーマに切り替わる遊び心もあって、触っていて楽しいです。
Mountain Birds
アートディレクター・嶋澤義弘さんによるグラフィックデザイン・3DCGイラストのポートフォリオサイト。
パステルカラーの街並みや生き物たちを描いた3DCGイラストが並んでいて、見ているだけでほっこりした気持ちになります。水彩画の作品も混在していて、デジタルとアナログを横断する作風が楽しいです。
Obys Agency
ウクライナ発のデザインエージェンシーのポートフォリオサイト。
モノクロの写真が縦に積み上がるシンプルな構成で、余計な装飾を削ぎ落としたストイックなトーンが、スタジオのスタンスそのものを表しているように感じます。
tashi Illustration&Design Portfolio
イラストレーター・tashiさんのポートフォリオサイト。
サイト全体がひとつの絵本のような世界観で構成されています。やわらかい水彩タッチのイラストと手書き文字の組み合わせが心地よく、ポートフォリオサイトとしての個性がしっかり出ています。
『ダンダダン』5周年特設サイト | 少年ジャンプ＋
https://sp.shonenjump.com/p/sp/2604/dandadan5th/
「ダンダダン」の連載5周年を記念した特設サイト。
90年代のWindowsブラウザ風のUIをまるごと再現した作りで、懐かしさとポップさが混ざり合うデザインが楽しいです。グリッド背景やネオンカラーのビジュアルで、作品のエネルギッシュな世界観ともうまくマッチしています。
HANA 1st TOUR 2026 “Born to Bloom” 追加公演
https://hana.b-rave.tokyo/tour/borntobloom/
アーティスト「HANA」の1stツアーの特設サイト。
深紅×ブラックの配色に赤いバラの花びらが舞うビジュアルで、ゴシックでドラマチックな世界観を全面に打ち出しています。
カワサキグリーンエナジー株式会社
川崎重工グループの新電力会社のコーポレートサイト。
アイソメトリックなイラストで描かれたまちの俯瞰図がファーストビューに広がり、グリーン×ベージュの温かみのある配色で環境への配慮が伝わってきます。
YAOYA
「AI時代のIT施策が揃う、デジタル領域の八百屋さん」をコンセプトに掲げるITサービス会社のサイト。
グリーン×パープル×オレンジのビビッドな配色に、ドット絵・3Dキャラクター・ゲーム風UIを組み合わせたデザインで、「ゲームのように軽やかに」というミッションが見た目からも伝わってきます。
TOMORE｜野村不動産の新しいひとり暮らし。
余白を活かした縦長のレイアウトに、入居者の日常を切り取ったような写真が静かに並んでいます。黒×イエローのアクセントカラーと落ち着いたトーンの写真が調和していて、「新しいひとり暮らし」という言葉にふさわしい、上質で自立した雰囲気が伝わってきます。
CHOCOLATE PARADE
https://chocolate-parade.worldmap-game.com/
スイーツをモチーフにしたキャラクターが重火器でバトルするゲームの公式サイト。
ふわふわした3Dキャラクターと激しいバトル映像のギャップがクセになります。チョコレートブラウン×イエローの配色とポップなタイポグラフィで、ゲームの世界観をしっかり伝えてくれるサイトになっています。
湘南工科大学 オープンキャンパス
https://www.shonan-it.ac.jp/oc/2026/
湘南工科大学のオープンキャンパスサイト。
鮮やかなグリーンを基調に、ロボットに乗ったアニメキャラクターがドンと構えるファーストビューが印象的です。工科大学らしいテック感をアニメ・イラスト調のビジュアルで表現していて、受験生に刺さりそうなデザインになっています。
PIXELVAULT
「2047年からのイマーシブなクリエイティブマーケットプレイス」をコンセプトに、3DアセットやシェーダーなどをBuy/Sellできるプラットフォーム。
WebGLを使った暗闇の空間に3Dの衣類が浮遊していて、ドラッグで視点を動かせるのが気持ちいいです。フィルムグレインのかかった黒背景とモノスペースのUIテキストで、近未来的な世界観をうまく表現しています。
星街すいせい
ホロライブ所属のVTuber・星街すいせいの公式サイト。
ブルー系のグラデーションを基調に、イラストやアートワークが大胆なグリッドレイアウトで並ぶデザインが印象的です。
OASIZ
クリエイティブエージェンシーのサイト。
ファーストビューに躍動感のある緑の渦巻き状グラフィックが全画面に広がり、黒背景との対比が印象的です。
サイト全体も黒背景に鮮やかなグリーンのアクセントが効いたエッジの利いたデザインになっています。
株式会社fodesign
「親身になりすぎるデザイン会社」を掲げる、ブランディングデザイン会社のサイト。
落ち着いた配色に、パッケージや食品の写真が温かみのある雰囲気で並んでいます。
今月気になった「ツール・プラットフォーム」
View Transitions Toolkit Demos
https://chrome.dev/view-transitions-toolkit/
Google ChromeチームによるView Transitions APIをより扱いやすくするユーティリティ関数集。
機能検出・アニメーション操作・再生コントロール・ナビゲーションタイプの自動注入など複数のモジュールで構成されていて、npm i view-transitions-toolkitでインストールできます。
Swapy
既存のレイアウトをドラッグ&スワップ操作に対応させられるフレームワーク非依存のJavaScriptライブラリ。
data-swapy-slotとdata-swapy-itemの属性を付けてcreateSwapy()を呼ぶだけで動くシンプルな設計で、React・Vue・Svelteにも対応しています。ダッシュボードのウィジェット並び替えなどに使えそうです。
NASA Scientific Visualization Studio
NASAのゴダード宇宙飛行センターが運営するサイエンスビジュアライゼーションのアーカイブ。
地球・惑星・太陽・宇宙に関するデータをもとにした高品質なアニメーションや映像素材が大量に公開されています。
すべてパブリックドメインなので、Web制作の背景動画や素材としても活用できます（一部音楽除く）。
teng-lin/notebooklm-py
https://github.com/teng-lin/notebooklm-py
Google NotebookLMの非公式PythonAPIライブラリ。PythonのコードやCLIからNotebookLMを自動操作できます。Claude CodeなどのAIエージェントとの連携も可能です。
vscode-pets
https://marketplace.visualstudio.com/items?itemName=tonybaloney.vscode-pets
VS Codeのエディタ内に猫・犬・ヘビ・ラバーダック・Clippyなどのピクセルアートペットを飼えるVS Code拡張機能。
ボールを投げて遊ぶこともできます。インストール数238万超えの大人気拡張で、生産性とは…という話ですが、疲れたときに癒されます。
titanwings/colleague-skill
https://github.com/titanwings/colleague-skill
同僚のSlackや飛書（Lark）のメッセージ・ドキュメントを素材に、その人の技術スタイルや性格を蒸留してAI Skillとして再現するClaude Code用のツール。
The Editorial Engine — Pretext Demos
https://somnai-dreams.github.io/pretext-demos/the-editorial-engine.html
DOMに触れずにテキストの高さや折り返しを計算できるJavaScript/TypeScriptライブラリ。
getBoundingClientRectなどのDOM計測はレイアウトリフローを引き起こすけど、pretextはCanvas APIを使って独自に計測するので高速です。
日本語・アラビア語・絵文字・bidi混在テキストにも対応していて、Canvas・SVG・WebGLへのレンダリングも可能。仮想化リストや独自レイアウトの実装に便利そうです。
Dialed.
色を見せられたあと、それを記憶だけで再現できるかを試すカラー記憶ゲーム。
ソロ・マルチプレイヤー・難易度切り替えにも対応しています。
「人間は色を正確に記憶できない」という前提をゲームにしたアイデアが面白く、デザイナーや色に敏感な人ほど悔しくなりそうです。
Keychron K2 HE コンクリートエディション
Keychronの75%レイアウト磁気スイッチキーボードのコンクリートカラーモデル。
コンクリートのようなマットなボディが渋くて、キーボード好きとしては気になる。
今月気になった「ニュース・読みもの」
CSSのdisplayプロパティに新しい値、display: grid-lanesが登場🌻 先日リリースされたSafari 26.4が、ブラウザで初めてCSS Grid Lanesにネイティブ対応🚌Pinterestみたいな石積み（Masonry）レイアウトができる。
昔は
display: grid + grid-template-rows: masonry… pic.twitter.com/Hcczjs453I— 鹿野 壮 Takeshi Kano (@tonkotsuboy_com) April 8, 2026
It’s official everyone!!
We’re thrilled to share the news that Cavalry is now free!
Download it and start creating today at https://t.co/MtSu9KODS5 pic.twitter.com/qg1AM1B4dS
— Cavalry (@cavalry__app) April 16, 2026
モーショングラフィックスツール「Cavalry」が無料になったとのアナウンスがありました。データドリブンなアニメーション制作が得意なツールで、After Effectsの代替として注目されています。
Google Pixel ユーザーとそのご友人のみなさまへ。 pic.twitter.com/DZcpQO04Sk
— Google Japan (@googlejapan) April 10, 2026
Google Pixelの「Quick Share」がAirDropに対応。
ChromeがさらなるアップデートでArcのような縦型タブに変更可能に。
国内最大級キーボードの祭典「キーケット」キーボード好きなら一度は行ってみたいイベント。
Awwwardsの受賞・ノミネートサイトを中心に、2016年〜2026年のベストWebデザインをまとめた記事。2026年のハイライトはShopifyの「The Renaissance Edition」（2月のSite of the Month）とBruno Simonのポートフォリオ（1月のSite of the Month）など。まとめ読みに便利で、過去のトレンドを振り返りたいときにも読みたい記事。
Googleが対面MTGでもGoogle Meetが議事録を取ってくれる機能を発表。
Cloudflareが、WordPressをゼロから再構築したという新しいCMS「EmDash」を発表。
JavaScript・TypeScript・Reactの基礎を60分でざっと押さえる内容で、各技術が登場した背景も合わせて解説してます。
社員3名でGitHub Copilotを使って半年間AIネイティブ開発を行った実体験レポート。設計書・ソースコード・テストケースを一切手書きせず、すべてCopilotに生成させてレビューするという体制で本番システムを開発した話です。
GoogleカレンダーがSpace Invadersになった2019年のイースターエッグ、StackOverflowがGeoCitiesに全力でなりきった話、Stack Exchangeが自前のDDoSを引き起こしたStack Egg事件など、Web界隈の名（迷）エイプリルフール10選が紹介されています。
リンクをクリックする前にブラウザーが次のページをバックグラウンドでプリレンダリングしておくSpeculation Rules APIの解説記事。
CSSの:nth-child(n of selector)構文を活用して、日付範囲セレクターを実装する方法を解説した記事。JavaScriptは最小限に抑えつつ、範囲のハイライトをCSSだけで処理するアプローチが紹介されています。
レバークーゼンを51戦無敗に導いたシャビ・アロンソの指導哲学を通して、マネジメントと心理的安全性の本質を解説した記事。「管理しすぎると人は考えなくなる」「指示待ち人間はリーダーの管理依存症が作り出したもの」という主張が軸で、アドラー心理学（課題の分離・目的論・勇気づけ）を交えながら展開しています。
for real 😂 pic.twitter.com/9pd5NIQ9Z5
— Venkatesh (@Venkydotdev) March 28, 2026
今月のひとこと
今月は、アニメ・ゲーム・VTuber・動物園・採用サイトまで、ジャンルの振れ幅がとくに大きかった印象です。それぞれがしっかり自分たちの世界観をWebで表現していて、見ていて飽きませんでした。
ツール面ではView TransitionsやSpeculation Rules APIなど、ブラウザネイティブの機能がじわじわ実用的になってきている流れを感じます。AIコーディングまわりも相変わらず賑やかで、半年間全部AIに書かせた話やマネジメント記事など、Webの話をしているようで結局は人や組織の話に着地するのが面白かったです。
ここまで読んでくださりありがとうございます！ また来月もまとめます。それでは！
- LIGブログでは、エンジニアやデザイナーが日々の学びや気づき、技術情報などを発信しています。Web制作やフロントエンドに興味がある方は、ぜひ他の記事も読んでみてください！
