となりのエンジニ屋 ← トップへ戻る
SHOWCASE ・ 動きの展示場

サイトに、“動き”を。

静止画では伝わらない魅力を、インタラクションで。
となりのエンジニ屋で作れる演出の実例を、触れる形で並べました。

↓ マウス(スマホは指)で、それぞれ触ってみてください

EXHIBIT 01

カーソル追従・3Dチルト

マウスの位置に合わせて、パネルが立体的に傾きます。光沢もカーソルを追います。

使いどころ:ヒーロー/主力商品の見せ場
スマホ対応 100%

お店のネットまわり
まるっとお任せ。

やりとりはLINEだけ。縛りもナシ。

無料で相談する →
EXHIBIT 02

フラッシュライト(暗闇+光)

暗闇の中、カーソルの光が当たった場所だけ見える演出。“発見”の体験を作れます。

使いどころ:Before→After/特別な発表
お店のネットまわり
まるっとお任せ。
無料で相談する →
暗闇の中の、新しいお店のかお。
マウスを動かして照らしてみてください
EXHIBIT 03

スポットライト追従

暗い面の上で、カーソルの先を光が照らします。上質さ・高級感の演出に。

EXHIBIT 04

ホバーで詳細が現れる

カーソルを合わせると持ち上がり、説明と「見る」が現れます。制作サンプルや事例に最適。

使いどころ:制作サンプル/メニュー/実績一覧
飲食店サイト

割烹・和食店

スマホ対応・予約導線つき。高級感のある一枚に。

サンプルを見る →
サロンサイト

美容室・サロン

清潔感のあるデザイン。予約をすっきり整理。

サンプルを見る →
士業サイト

税理士・事務所

信頼感のあるレイアウト。問い合わせ導線を明確に。

サンプルを見る →
EXHIBIT 05

マグネットボタン

近づくとボタンがカーソルに吸い付きます。押したくなる、遊び心のある一手。

使いどころ:主要ボタン(相談・購入)
EXHIBIT 06

Before / After スライダー

境界をドラッグ(マウスを乗せて移動)すると、古いサイトと作り直し後を見比べられます。

使いどころ:作り直し実績・お客様の変化
お店のネットまわり、まるっと。
無料で相談する →
〇〇商店 ホームページ
◀▶
BEFORE
AFTER
EXHIBIT 07

スクロールで数字がカウントアップ

画面に入ると、数字が0からスッと増えます。実績や特徴を印象づけます。

使いどころ:実績数・特徴の強調
0%
スマホ対応
0週間
公開までの目安
0円〜
買い切りプラン
EXHIBIT 08

カスタムカーソル

枠の中で、マウスに丸がついてきます。ボタンに乗ると大きく反応。遊び心の一手。

使いどころ:ブランドサイト・こだわりの表現

この枠の中でマウスを動かしてみてください。

EXHIBIT 09

スクロールでふわっと登場(時間差)

画面に入った要素が、少しずつ順番に立ち上がります。読みやすく上品な印象に。

使いどころ:特徴・サービス紹介の各項目
縛らない違約金なし・ドメインは譲渡。いつでも解約OK。
LINEで完結面倒な会議はナシ。メッセージだけで進みます。
本人が対応最初から最後まで、井木本人がお手伝い。
丸投げOK文章も写真も、こちらで整えます。
初期費用0月額プランなら初期費用0円から始められます。
スマホ対応どの画面でもきれいに見えるよう作ります。
EXHIBIT 10

文字がスッと現れる(デコード)

画面に入ると、文字がシャッフルしながら正しい言葉に決まります。掴みのキャッチに。

使いどころ:ヒーローの見出し・キャッチコピー

ご近所の、あなたのWeb担当。

EXHIBIT 11

流れる帯(マーキー)

ロゴやキーワードを横に流し続けます。にぎやかさ・信頼の演出に。

使いどころ:対応業種・導入店ロゴの列
EXHIBIT 12

クリック波紋(リップル)

押した場所から波紋が広がります。「押した」感触が伝わり、操作が気持ちよくなります。

使いどころ:あらゆるボタン
EXHIBIT 13

3Dフリップカード

カーソルを乗せると、カードがくるっと裏返って詳しい説明が出ます。

使いどころ:料金プラン・特徴カード
📱
スマホ対応ホバーで詳細

どの画面でも崩れず、きれいに表示。お客様の多くはスマホで見ています。

🔓
縛らないホバーで詳細

違約金なし・ドメインは譲渡。いつでも解約OK。安心して始められます。

💬
LINEで完結ホバーで詳細

面倒な会議はナシ。メッセージのやりとりだけで、公開まで進められます。

EXHIBIT 14

タイプライター

文字が1文字ずつ打ち込まれるように現れます。掴みのキャッチを印象的に。

使いどころ:ヒーローの見出し

EXHIBIT 15

視差スクロール(パララックス)

スクロールに合わせて、背景と前景が違う速さで動きます。奥行きと没入感が出ます。

使いどころ:世界観のある見せ場

奥行きのある、上質な世界観。

スクロールしてみてください
EXHIBIT 16

アコーディオン(開閉)

クリックで答えが開きます。省スペースで情報を整理でき、よくある質問に最適。

使いどころ:よくある質問・詳細情報
料金表のとおりです。プランの範囲をこえる依頼のみ、必ず事前にお見積もりをお出しします。勝手な追加請求はありません。
シンプルなサイトなら数日〜2週間ほどが目安です(内容・規模により前後します)。
いいえ。やりとりはLINEだけで完結し、オンライン会議は行いません。
EXHIBIT 17

動く背景(グラデーション)

背景がゆっくり流れ、光がさりげなく漂います。静止画にはない“生きている”印象に。

使いどころ:CTA帯・ヒーロー背景
動いているだけで、印象が変わる。

こんな動き、あなたのお店のサイトにも。

“ちょっと動く”だけで、印象は大きく変わります。まずは気軽にご相談ください。