matrix関数で100vhごとにセクションを移動するスクロールインタラクション。複数サービスを一つ一つ強調させている

Get Up & Design Inc.

光沢のある見出しと3D感のある画像でメッキを強く打ち出す。動きをもたせる表現にはcanvasとvideoを使って実装

浜岡鍍金工業所

天然成分をブレンドしたヘアオイルのECサイト。製品ごとに余白をたっぷりとり、自然の香りに合わせて背景色を切り替える

Diffar｜Fragrance Hair Oil

製造業らしさと親しみやすさのバランスが取れたCPサイト。FVのSVGアニメーションで柔軟な対応と技術力をアピール

郡家（こおげ）コンクリート工業

EXPO2025のパビリオン紹介サイト。青系のグラデーションや曲線、カーソルの動きと連動する蝶で幻想的な世界観を演出

ノモの国 | パナソニックグループパビリオン

美しい写真で彩られた広大なリゾートホテルの公式サイト。セクションごとに特徴を切り分け、膨大な情報が整理されている

Luxurious 5-Star Integrated | Resort AYANA Bali

FVはcanvasを用いたインタラクションで、明るさと高級感を表現。フッターでは住居を覗くことのできる遊び心のある実装

浅井良工務店

スクロールイベントでcanvasを切り替え。イラストベースであるが、Three.jsを用いて奥行きと動きのあるデザインに

Fluffy HUGS NFT

写真ではなく手書きのイラストを用いて歴史の深さを表現。茨城県北部における自然をめぐる旅の魅力を伝える特設サイト

タイムトリップしよう、常陸国ロングトレイルで。｜茨城県

イージングで躍動感を生み出しているスマホファーストの商品サイト。SVGとCSSを組み合わせて水を連想させる曲線を表現

ネピア wetomo

個性あふれるクリエイターを紹介するWebマガジン。transform-originを使って右後ろに消えていくスライドが目新しい

Loogg

中学生たちの青春を描いたインディーズ映画の公式サイト。レトロでカオスなデザインに、様々な仕掛けを盛り込む遊び心

映画「地獄のSE」公式サイト

猫の健康を守る製品のECサイト。APNGのイラストやパララックス表現のインタラクションなど細部まで丁寧に作りこまれている

miruto（ミルト）公式サイト

自然を感じさせる配色と親しみやすさを与える豊富なイラスト。画像やリンクのバウンスのようなイージングで躍動感を生み出す

フォレストアドベンチャー・米原

裏サイトが隠された期間限定メニューの特設サイト。ちりばめられたヒントを探すために、あらゆる角度からサイトを注視してしまう

モスの月見

OPアニメーションではfilterとclip-pathを使用。ページ全体に慣性スクロールをかけることで高級感を感じさせる

The glow Mita

動画とブレンドモードのアニメーションで画像を表示。横スクロールと和のイラストで落ち着いた雰囲気を演出するコーポレートサイト

酒の柏屋

背景の日本地図をスクロール量に応じて移動させる。全国チェーンらしくスケールの大きさが感じられる採用サイト

ファミリーマート「新卒採用サイト」

制作事例では、ホバーで画像がスクロールするアニメーション‼︎イラストとアニメーションが満載のSTUDIOサービスサイト

STUDIO by spicato inc.

付箋のドラッグアンドドロップで楽しさと親しみやすさを表現。::selectionはカラフルなサイトでも存在感のある強めの黄色

スマイルバトン

商品パッケージのようなFVで、一目でサイトの内容を理解できる。ハンバーガーメニューをレイアウトに沿って動かす斬新なアイデア

こがしバターケーキ

translateとrotateで、ボタンの魚アイコンがかわいく動く。三陸・常磐のあたたかみと豊かさが伝わるブランドサイト

UMIUMA -三陸・常磐うみのうまいものブランド-

下層Pフッターのタイポグラフィがかっこいい。背景でThree.jsを使用し、カーソルの周りはノイズを消去する細かい作りこみ

ALLT STUDIO

シンプルなサイトで際立つグラデーション要素。FVのSVGアニメーションは、線でレイアウトをつくるデザインとの一貫性を感じる

ウェルメスパートナーズ株式会社

映画監督ヨルゴス・ランティモスの紹介サイト。不規則なレイアウト・画像の切り抜きは不気味で独特な映画の雰囲気をそのままに

Yorgos Lanthimos

タイヤをまわして横スクロール。単位をvh基準にしてあらゆるデバイスに対応。余白にゆとりのあるデザインは実装しやすい

クルマこどもサイト | トヨタ自動車株式会社 公式企業サイト

奥行と躍動感のあるデザインにあわせ、写真をうねらせながらフェードアップ。対称的に商品情報は素早く表示しストレスを感じない

8 THE THALASSO HOMME

『About』でギャラリーとともにロゴアニメーションを表示し、目線を誘導して印象付けさせる。ロゴを90度回転させると...

HAPPY OUTSIDE BEAMS | さぁ、外遊びしよう

鮮やかな配色で秋の季節感と商品の特性が一目でわかるデザイン。1s超のゆったりとしたtransitionで高級感を演出する

BOTANIST | フレグランスコレクション キンモクセイとフィグの香り

スクロールによるインタラクションが満載！本がリアルにパラパラとめくられて驚きと没頭させる体験を届ける

LINE GROUND

アニメーションを利用して動的なキャッチコピーを表現。 ヘッダーのmix-blend-modeは色数の多いサイトで効果的

株式会社ほくつう HOKUTSU RECRUIT 2025

ページ最上部では画面いっぱいのメインビジュアル。 モバイルファーストでありながら、PCでも商品を魅せる工夫が施されている

GREEN SPOON

FVの文字を小気味よく変化させる。 複数画像をCSSのsteps()で切り替え続けるアイデアで実現

J'aDoRe JUN ONLINE

ローディング画面から気持ちのいいイージングでサイトを表示。 ロゴはWebGLで滑らかに動き続ける

Vlag yokohama

写真を強調したい箇所でThree.jsを使用。 スクロールと連動し、さらにCSSアニメーションも組み合わせて文章と差別化

株式会社Ｉ－ｎｅ

膨大な情報が集約されているイメージを3Dで表現。 リンクはtransitionの数値をランダム化しデジタルらしさが増す

scramberry

水面に触れたようなインタラクションをjQuery Ripplesで実装。 非同期遷移のアニメーションで高級感が増している

VERSE

奥行きを持たせたスクロールに合わせてギャラリーをなびかせる3D表現。 無数のアート作品を違和感なく短時間で紹介する

Global RISOART Exhibition

ロード後のグリッチがかっこいい。 タイトル・写真も、ドットが効いたエフェクトとフェードインで世界観を統一

ヨーゼフ・ボイス ダイアローグ展

慣性スクロールとパララックスアニメーションを活用したECサイト。 FVとフッターでブランド名もしっかりアピール

ZANE ARTS

CSSによる3Dアニメーションで視線を向かせる。 サービスを短時間で伝える画面いっぱいの動画はシンプルな内容で効果的

株式会社カホエンタープライズ

clip-pathで繰り返し削り続けるアニメーション！ 画像が差別化されてアート作品をより際立たせる

多摩美術大学 彫刻学科研究室オフィシャルサイト

イラストの可愛さを際立たせる細かなアニメーションはWebサイトだからこそ。緩急をつけたページ遷移でメリハリが効いている

Oggy !

シアターに入り込んだような没入感。 FVのWebGLで”感性で楽しむミュージアム”を表現する

デジタル文化財ミュージアム KOISHIKAWA XROSS

動画とインタラクションを組み合わせたカルーセルは気持ちのいいスピード感。メタディスクリプションの絵文字でカジュアルな雰囲気に

Sugar - Social media just got healthy

最下部までスクロールすると次ページに遷移。 丸みを帯びたアニメーションでクリエイティブを演出する

原宿サン・アド - Harajuku Sun-Ad

「おもしろおかしく」という社是をデザインに落とし込み、遊び心と親しみやすさを感じさせる。モーション停止ボタンは珍しい

おもしろおかしくの力で何ができるのだろう。 | HORIBA Our Future

学園のシンボルであるクスノキの葉をSVGとclip-pathで配置し、 パララックスも丁寧に設定した周年記念サイト

学校法人四條畷学園創立100周年記念サイト

画面を埋める無数の図形。物理演算エンジンでクリエイティブを際立たせた遊び心のあるコーポレートサイト

セイタロウデザイン グループ

オープニングのフレーズが訪問毎に変化。 躍動感と綺麗な配色が目立つ生き生きしたリクルートサイト

フォーシーズ株式会社（4C's） | 採用サイト

グリッチエフェクトを用いて、デジタル感を演出。 各見出しをLottieでアニメーションさせる作り込み

ベネッセのDX戦略 | ベネッセグループ

隅のあしらいはマウスの動きと連動。 細かなインタラクションとBGMでヨーロッパの雰囲気を演出

Bateau（バトー）株式会社

文章中の画像をホバーすると、サムネイルとリンクが表示される。文章の流れを邪魔しない画像リンクを実現

株式会社水星 / SUISEI, Inc. | ホテルプロデュースカンパニー

ページ遷移でBarba.jsにより背景を固定。 サイト全体で3Dコンテンツを印象付ける

丸の内イノベーションパートナーズ株式会社

富士山吉田口ルートのスタンプラリーをWebGLとイラストで表現。 金剛杖と共にスクロールで登頂を目指す

½8 JOURNAL: Collecting Stamps on Yoshida Trail, Mt. Fuji

スクロールやホバーのインタラクションで読者を引き込ませて、戦争犯罪の事実を世に伝える特集サイト。

30 Years of Commemorating the Rwandan Genocide

opacityとmaskを組み合わせ、高級感・落ち着きのあるサイトに合わせたアニメーションを表現

株式会社アイトー

背景のノイズでアナログ感を演出。 また、シンプルなアニメーションでキャッチコピーを際立たせる

石見銀山大森町 オフィス林家

コマアニメの独特な動きから生物感のあるかわいさを演出し、商品が生活のパートナーになることを期待させる

Shupatto

光沢のある虹色の文字色は、無限の可能性と期待を感じさせる

Happy Hacking Keyboard | Studio | PFU

雲をかき分けるようなフェードインは、ゲーム世界での背景が開けるような感銘を受ける

Cygames背景美術展 2024-2025 | Cygames

大胆なレイアウトと動画を駆使したデザインでポップで自由な世界観を表現

スーパーマリオブラザーズワンダー

2つの作品のテーマカラーを要所で使い、まとまったデザインに

PERSONA LIVE TOUR2024 -more ahead- 公式サイト

地層に潜り込んでいくドキドキ感と、チョコを割るインタラクションでワクワク感を盛り込んだ没入感のあるサイト

キャラパキ発掘恐竜チョコ5周年特設サイト

ゲーム中のUIを彷彿とさせるあしらいを多用し、重厚な世界観をサイト内に表現

メタファー：リファンタジオ（Metaphor: ReFantazio）| アトラス

素材の組み合わせによるカオスな世界観作りで、既視感のない非現実的なビジュアルに

フワちゃん OFFICIAL WEBSITE

様々なメディアに展開するコンテンツへの導線がスッキリと整理されている

ウマ娘 プリティーダービー 公式ポータルサイト｜Cygames

躍動感あふれるミルクのテクスチャとエネルギッシュな筆文字から生まれる奥行きで、商品の深みと濃厚さが伝わる

Searchカテゴリ検索