01. ヒーローセクション

未来をつくる、Webの力。

アイデアをかたちに変える、次世代のデジタル体験をあなたのビジネスへ。

無料で相談する

01-01-01

順次フェードインヒーロー

見出し・サブテキスト・CTAが時間差でふわっと立ち上がる王道の演出。WordPressのトップページのファーストビューにそのまま使えます。

CSS onlycss</> コードを見る

色は、動きだす。

ゆらめくグラデーションが、ブランドの世界観を静かに語ります。

01-01-02

動くグラデーション背景ヒーロー

background-size:400%の巨大グラデーションをゆっくり移動させる背景演出。WordPressのLPやコーポレートサイトの雰囲気づくりに最適です。

CSS onlycss</> コードを見る

視線を、奪う。

マウスに反応する奥行きが、ページに立体感を生み出します。

01-01-03

マウス追従パララックスヒーロー

背景の装飾と前景テキストが逆方向に微妙に動くパララックス。WordPressの制作会社サイトなど、技術力を印象づけたいトップに向きます。

JSjs</> コードを見る

一文字ずつ紡がれる言葉が、訪問者の目を惹きつけます。

01-01-04

タイピング風見出しヒーロー

キャッチコピーが1文字ずつタイプされ、カーソルが点滅しながらループ再生。WordPressの採用サイトやサービス紹介ページのアイキャッチに効果的です。

JSautojs</> コードを見る

ふたつの色が、
ひとつの物語に。

カーソルを重ねると、境界線がゆるやかに動きます。

01-01-05

斜めクリップ2分割ヒーロー

clip-pathで斜めに分割した2色レイヤーがホバーで滑らかに変形。WordPressのブランドサイトやリニューアル告知ページに個性を与えます。

CSS onlyhovercss</> コードを見る

SINCE 2010

時を超える、上質。

01-01-06

Ken Burnsヒーロー

写真風の背景がゆっくりズーム&パンし、映像のような余韻を演出。WordPressのホテル・レストラン系テーマのメインビジュアルにおすすめです。

CSS onlycss</> コードを見る

ひかりが、あつまる場所。

やわらかな浮遊感が、サイト全体の空気を変えます。

01-01-07

浮遊パーティクル背景ヒーロー

光る円が複数ふわふわと漂うCSSのみのパーティクル演出。WordPressの医療・美容系サイトなど、清潔感と柔らかさを出したいトップに合います。

CSS onlyautocss</> コードを見る

景色が変わる、体験が変わる。

3つの背景が自動で静かに切り替わります。

01-01-08

自動クロスフェードスライドショーヒーロー

3枚の背景がJSなしのCSSアニメだけで自動クロスフェード。WordPressの観光・不動産サイトなど、複数のビジュアルを見せたいトップに便利です。

CSS onlyautocss</> コードを見る

流れに乗って、前へ。

足元の波が、ページに穏やかなリズムを刻みます。

01-01-09

波形SVGヒーロー

下端のインラインSVGの波が横に流れ続けるループアニメ。WordPressで次のセクションとの区切りを自然につなぐヒーローとして使えます。

CSS onlyautocsssvg</> コードを見る

跳ねる言葉、弾む心。

1文字ずつぴょんと登場する、遊び心のあるタイトルです。

01-01-10

バウンド文字ヒーロー

spanで分割したタイトルの1文字ずつが弾みながら順に登場。WordPressのイベント告知や子ども向けサービスのページを明るく彩ります。

CSS onlycss</> コードを見る

境界を、超えていく。

左右の壁がひらき、隠れていた可能性が姿を現します。

01-01-11

スプリットスライドインヒーロー

左右2枚のパネルが開閉を繰り返し、その度に見出しがふわっと現れる自動ループ演出。WordPressのブランドサイトの導入部で強い第一印象を残せます。

CSS onlyautocss</> コードを見る

点が、線になる。

無数のドットが波のように連鎖し、静かな存在感を放ちます。

01-01-12

ドットマトリクス波紋ヒーロー

格子状に並んだ小さなドットが斜めに波打つように明滅するJS生成の背景演出。WordPressのテック系・スタートアップサイトのトップに知的な印象を添えます。

JSautojs</> コードを見る

11. CTA・バナー・お知らせ

01-02-01

グラデーションCTAバナー

動くグラデ背景に見出しとボタンを配置。画面内に入るとせり上がって表示され、LPやランディングの主役CTAに使えます。

CSS onlyscrollcss</> コードを見る

下にスクロールしてください。記事本文を読み進めると右下にミニCTAが追従して現れます。

WordPressの投稿ページで、読了率の高い読者に登録を促す使い方に向いています。

スクロール量に応じてCTAが出現・退避します。もう少しスクロールしてみましょう。

ここまで読んだ読者は関心が高い層。ミニCTAで自然にアクションへ誘導します。

本文はまだ続きます。最後まで読みやすいレイアウトを保ちます。

01-02-02

追従サイドCTA

内部エリアを一定量スクロールすると右下にミニCTAが吸着して出現。記事に寄り添う登録誘導として機能します（内部スクロールで動作）。

JSscrolljs</> コードを見る

01-02-03

カウントダウンタイマーバナー

残り時間が時:分:秒でリアルタイムに減少するセール告知バナー。ECサイトの期間限定キャンペーンで緊急性を演出できます。

JSjs</> コードを見る

🎉 新機能をリリースしました。詳しくはお知らせをご覧ください。

01-02-04

上部お知らせバー

ページ上部に固定表示する通知バー。×ボタンで上にスライドして消えます。サイト全体の重要告知やメンテナンス連絡に最適です（クリックで動作）。

JSclickjs</> コードを見る

期間限定

プレミアムプラン

¥980/月

通常¥1,980のところ今だけ半額。いつでも解約OK。

申し込む

01-02-05

リボン付きCTAカード

角に「期間限定」の斜めリボンを配したCTAカード。ホバーでふわりと浮き上がります。料金プランやキャンペーン訴求に使えます（ホバーで動作）。

CSS onlyhovercss</> コードを見る

今日から、はじめよう。

無料登録

01-02-06

波打つCTAセクション

上下にSVGの波を配し、波が横方向にゆっくり流れる中央CTAセクション。柔らかい印象のサービスサイトの区切りに向いています。

CSS onlyautocsssvg</> コードを見る

当サイトは体験向上のためCookieを使用します。

01-02-07

Cookie同意バナー

下部からスライドインするCookie同意バー。同意／拒否のいずれかを押すと下へ消えます。プライバシー対応が必要なサイトで活用できます（クリックで動作）。

JSclickjs</> コードを見る

01-02-08

メルマガ登録インラインCTA

メール入力と登録ボタンを横並びにしたインラインCTA。入力欄フォーカスで枠が強調されます。フッターや記事末尾の購読導線に便利です（フォーカス／送信で動作）。

JSclickjsinput</> コードを見る

お問い合わせはこちら

今すぐ相談する

01-02-09

パルス強調CTAボックス

枠が波紋のように外へ広がり続けて視線を集めるCTAボックス。コンバージョンを狙う問い合わせ・予約ボタンの強調に効果的です。

CSS onlycss</> コードを見る

01-02-10

斜めストライプ背景バナー

斜めのストライプがゆっくり流れる背景にキャッチとボタンを重ねたバナー。飲食店やイベントの予約訴求など、動きで目を引きたい場面に。

CSS onlyautocss</> コードを見る

👤 個人のお客様まずは無料でお試し 🏢 法人のお客様導入のご相談はこちら

01-02-11

二択スプリットCTA

個人向け・法人向けの2つの入口を左右に並べ、ホバーした側がせり出して強調されます。WordPressのトップページで来訪者を最適な導線に振り分けたい場合に使えます。

CSS onlyhovercss</> コードを見る

送料無料まであと¥1,200

¥0¥8,800

買い物を続ける

01-02-12

ゴール達成プログレスCTA

送料無料まで残り金額を示すバーが画面内でスッと伸びます。WordPress製ECサイトのカートページやミニカートで購入額アップを後押しできます。

CSS onlyscrollcss</> コードを見る

16. フッター

01-03-01

4カラムフッター

会社情報と3つのリンク列を並べた定番フッター。リンクホバーで下線が左からスライドします。WordPressのサイト共通フッターに最適です。

CSS onlyhovercss</> コードを見る

01-03-02

波形トップ付きフッター

上端にSVGの波を配置し、下部に濃色フッターを敷きます。波がゆっくり左右に流れ続けます。WordPressで柔らかい印象のサイト締めに。

CSS onlyautocsssvg</> コードを見る

01-03-03

ニュースレター付きフッター

登録フォームとリンク、コピーライトをまとめたフッター。送信は preventDefault で完了メッセージを表示します。WordPressのメルマガ導線に。

JSclickjsinput</> コードを見る

01-03-04

ミニマル中央寄せフッター

ロゴ・横並びメニュー・SNS円アイコンを中央に配置。アイコンにホバーすると色が反転しふわっと浮き上がります。シンプルなWordPressサイト向け。

CSS onlyhovercss</> コードを見る

01-03-05

大見出しCTAフッター

大きな見出しとボタンで行動を促すCTAフッター。見出しの文字にグラデーションが流れ続けます。WordPressのお問い合わせ誘導に効果的です。

CSS onlyautocss</> コードを見る

01-03-06

地図風連絡先フッター

左に住所と電話番号、右にグラデーションの地図プレースホルダを並べます。ピンが脈打つように動きます。WordPressの店舗案内フッターに。

CSS onlyautocss</> コードを見る

01-03-07

斜めカット上端フッター

clip-path で上端を斜めにカットした濃色フッター。前セクションから鋭角に切り替わります。WordPressで動きのあるページ締めに使えます。

CSS onlycss</> コードを見る

01-03-08

SNSアイコンが波打つフッター

SNSの円アイコンが順番にふわふわと上下し、波打つように動き続けます。WordPressのSNS連携フッターに遊び心を加えます。

CSS onlyautocss</> コードを見る

01-03-09

アコーディオン式モバイルフッター

各リンク列の見出しをクリックで開閉するスマホ想定のフッター。省スペースにリンクをまとめられます。WordPressのモバイル最適化フッターに。

JSmobileclickjs</> コードを見る

01-03-10

グラデーションボーダー上端フッター

上端に流れるグラデーションのラインを敷いたシンプルなフッター。色が左右にゆっくり流れ続けます。WordPressの上品なサイト締めに。

CSS onlyautocss</> コードを見る

01-03-11

言語切替セレクタ付きフッター

クリックで開くドロップダウンから表示言語ラベルを選べるフッターです。WordPressの多言語対応サイトのフッター言語切替UIに使えます。

JSclickjsoverlay</> コードを見る

01-03-12

グラスモーフィズムフッター

背景をぼかして透過させたガラス質感のフッターです。WordPressで画像やグラデーション背景の上に重ねる先進的なデザインのサイト締めに使えます。

CSS onlycss</> コードを見る

31. サービス・特徴紹介

高速表示

軽量設計で読み込みが速い。

安全設計

堅牢なセキュリティを標準搭載。

簡単操作

直感的に使えるUIを提供。

01-04-01

アイコンボックス3列(特徴)

アイコン+見出し+説明を3カラムで並べる特徴紹介。ホバーでカードが持ち上がります。WordPressのサービス紹介ページの「3つの特長」ブロックに最適です。

CSS onlyhovercss</> コードを見る

高速

安全

時短

高品質

01-04-02

価値提案グリッド

「高速」「安全」などの価値を大アイコンで4つ並べます。スクロールで画面内に入るとフェードアップして順に登場します。WordPressの価値訴求セクションに便利です。

CSS onlyscrollcss</> コードを見る

01
ヒアリング
課題と目標を丁寧に整理します。
02
設計・提案
最適なプランをご提案します。
03
実装・改善
公開後も継続してサポート。

01-04-03

番号付き特徴リスト(縦)

大きな01/02/03の番号と説明を縦に並べたリストです。ホバーで番号に色が差します。WordPressのサービスの流れや強み紹介に使えます。

CSS onlyhoverautocss</> コードを見る

柔軟なカスタマイズ

用途に合わせて自由に設計。

安心のサポート

導入後も専任チームが伴走。

01-04-04

交互配置の特徴(ジグザグ)

グラデーションの図と文章を左右交互に配置。スクロールで画面内に入ると図と文が左右からスライドインします。WordPressの特長紹介LPに最適です。

CSS onlyscrollcss</> コードを見る

初期費用0円で今すぐ始められる
専門知識がなくても運用できる
いつでもプラン変更・解約が可能
手厚いサポート体制で安心

01-04-05

チェック付きメリット一覧

✓アイコン付きの箇条書きで導入メリットを訴求。スクロールで画面内に入ると✓が順番に付いていきます。WordPressの選ばれる理由セクションに便利です。

CSS onlyscrollcss</> コードを見る

Web制作

目的に合わせたサイトを構築します。

詳しく→ 運用支援

公開後の改善まで一気通貫で対応。

詳しく→

01-04-06

サービスカード(リンク付き)

アイコン+説明+「詳しく→」のリンク付きカード。ホバーで矢印が右に動き影が深くなります。WordPressのサービス一覧の各項目に最適です。

CSS onlyhovercss</> コードを見る

Before

更新が大変で放置しがち…

After

誰でも簡単に更新できる!

01-04-07

Before→After訴求

課題と解決を矢印でつなぐ2カラム構成。中央の矢印が脈打つように動き続けます。WordPressの導入効果や改善事例の訴求に便利です。

CSS onlyautocss</> コードを見る

最短即日で対応。スピーディーな納品でビジネスを止めません。

熟練の専門チームが、細部までこだわり抜いた高品質を実現します。

導入後も専任担当が伴走。困ったときにすぐ相談できる安心感。

01-04-08

タブ切替の特徴紹介

タブをクリックして3つの強みを切り替えて表示します。切替時に本文がフェードします。WordPressの限られたスペースで複数の特長を見せたいときに便利です。

JSclickjs</> コードを見る

FEATURES 選ばれる3つの理由

1実績豊富

多数の導入実績。

2低コスト

無駄のない価格設定。

3手厚い保守

安心の運用体制。

01-04-09

中央見出し+3特徴

LP王道の中央見出しと3つの特徴カードの構成。スクロールで見出し→カードの順に時間差で登場します。WordPressのトップページの訴求に最適です。

CSS onlyscrollcss</> コードを見る

高速化

表示速度を徹底改善。

セキュリティ

堅牢に守ります。

レスポンシブ

全端末に対応。

01-04-10

ホバー展開特徴タイル

通常はアイコンのみ表示し、ホバーすると説明文がスッと開くタイルです。WordPressの省スペースな特徴一覧に便利です。

CSS onlyhovercss</> コードを見る

柔軟な運用

ホバーで詳細

プラグイン不要で管理画面から自由にレイアウトを調整できます。

導入までが早い

ホバーで詳細

最短1週間で公開可能。既存サイトからの移行にも対応します。

01-04-11

3Dフリップ特徴カード

カードにマウスを乗せると裏返って詳細説明が現れます。WordPressのサービス特徴を2段階（見出し→詳細）で見せたいときに使えます。

CSS onlycss3d</> コードを見る

データに基づく改善

アクセス解析から次の一手を提案します。

多言語対応

海外顧客にもそのまま展開できます。

24時間監視

サーバー障害を自動で検知・通知します。

01-04-12

自動切替スライド特徴紹介

数秒ごとに特徴が自動でフェード切替わり、下のドットが現在地を示します。WordPressの狭いスペースで複数の強みを順に見せたいときに便利です。

JSautojs</> コードを見る

115. 分割スクリーン・スプリットレイアウト演出

デザイン

開発

01-13-01

ホバー連動スプリットヒーロー

左右2分割のヒーローで、ホバーした側の面積が広がり境界線が動きます。制作会社やサービスサイトのトップで2つの訴求を並列に見せたい場合に使えます。

CSS onlyhovercss</> コードを見る

SPRING SALE

SUMMER SALE

詳しくはこちら

01-13-02

上下2分割スライド切替コンテンツ

画面を上下に分割し、ボタン操作で両パネルの中身が上下にスライドして入れ替わります。キャンペーン訴求やお知らせの切り替えに向いています。

JSjs</> コードを見る

PLAN A

PLAN B

01-13-03

斜めクリップ分割レイアウト

斜めのclip-pathで2領域に分割し、ホバーした側が広がるレイアウト。料金プランやサービス比較の見出しセクションに活用できます。

CSS onlyhovercss</> コードを見る

01

02

03

04

01-13-04

非対称伸縮スプリットパネル

縦に並んだ複数パネルのうちホバーした1枚だけが横に大きく伸びるアコーディオン型分割レイアウト。ポートフォリオや事業紹介の一覧に使えます。

JShoverjs</> コードを見る

PLANNING

DESIGN

BUILD

LAUNCH

GROWTH

企画

設計

制作

公開

改善

01-13-05

逆方向パララックス分割セクション

内部エリアをスクロールすると、左右のコンテンツが逆方向に流れる分割セクション。ブランドサイトのストーリーテリング演出に向いています（内部スクロールで動作）。

JSscrollautojs</> コードを見る

A

B

01-13-06

タブ切替スプリット比率レイアウト

上部タブを選ぶと左右パネルの分割比率がアニメーションしながら変化します。A/B比較や重視ポイントの切り替えUIに使えます。

JSjs</> コードを見る

SPECIAL OFFER

クリックして扉を開く

CLICK

01-13-07

観音開き分割演出

クリックすると中央から左右に扉が割れて開き、背後のコンテンツが現れる演出。キャンペーンLPの導入演出や特典解禁UIに向いています。

JSclickjs</> コードを見る

片側固定・片側スクロール分割ビュー

左側の目次パネルを固定したまま右側だけがスクロールし、読了率に応じて左の進捗バーが伸びる分割ビューポート。ドキュメントサイトや長文コラムに使えます（内部スクロールで動作）。

JSscrolljs</> コードを見る

01

02

03

01-13-09

3分割シーケンシャル展開レイアウト

3つの縦パネルが順番に下から伸び上がって消える動きをループ表示する分割レイアウト。ローディング演出や事業3本柱の紹介に使えます。

CSS onlyautocss</> コードを見る

AFTER

BEFORE

⇔

01-13-10

クリック分割Before/After比較スライダー

バー内をクリックした位置までBefore/Afterの境界線がアニメーションして移動する比較スライダー。リフォームや加工前後の比較訴求に最適です。

JSclickjsinput</> コードを見る

BEFORE

AFTER

01-13-11

カーソル追従スプリットライン

マウスを動かすたびに境界線がカーソルのX座標へリアルタイムに追従して分割位置が変わります。リフォームやダイエット等のビフォーアフター訴求セクションで、能動的に比較させたいときに使えます。

JSjsinput</> コードを見る

企画

設計

制作

公開

01-13-12

自動巡回スポットライト分割グリッド

4分割グリッドの中で明るく強調される区画が一定間隔で自動的に巡回していきます。事業の4本柱や制作フローの紹介セクションで、操作なしに全項目を順番に見せたいときに使えます。

JSautojs</> コードを見る

02. 見出し・テキスト演出

選ばれる理由があります

02-01-01

スライド下線見出し

スクロールで表示された瞬間、下線が左からスッと伸びる定番演出。WordPressのセクション見出し（h2/h3）にそのまま使えます。

CSS onlyscrollcss</> コードを見る

ここがいちばん大事なポイント

02-01-02

蛍光マーカー見出し

表示時に蛍光ペンで引いたような背景が左から塗られます。記事本文の強調やキャンペーン見出しに。プラグインなしで実装可能。

CSS onlyscrollcss</> コードを見る

未来を、デザインする。

02-01-03

流れるグラデーションテキスト

background-clip:text で文字にグラデーションを流し続けます。トップページのキャッチコピーやヒーロー見出しに最適。

CSS onlycss</> コードを見る

GLITCH EFFECT

02-01-04

グリッチ見出し

疑似要素2枚を色ずれさせてチラつかせるデジタルグリッチ演出。ゲーム・テック系サイトのタイトルまわりにインパクトを出せます。

CSS onlycss</> コードを見る

一文字ずつ、想いを込めて。

02-01-05

1文字ずつ浮き上がる見出し

JSでspan分割し、時間差で1文字ずつ浮かび上がらせます。コンセプトページや採用サイトの見出しを印象的に演出。

JSjs</> コードを見る

新サービス、始動。

02-01-06

ボックスリビール見出し

色付きボックスが左から右へ横切った後に文字が現れる映画的な演出。事例紹介や実績セクションのタイトルにおすすめ。

CSS onlycss</> コードを見る

NEON NIGHT

02-01-07

ネオン発光テキスト

暗い背景でtext-shadowが脈打つネオンサイン風テキスト。バー・イベント・エンタメ系サイトのアイキャッチに効果的です。

CSS onlyautocssdark</> コードを見る

0件

累計サポート実績

02-01-08

数字カウントアップ

画面に入ると0から目標値までカウントアップ。実績数・会員数などの数字セクションで説得力を高めます。再表示で再カウント。

JSscrolljs</> コードを見る

季節を味わう、
大人の隠れ家。

02-01-09

縦書き見出し

writing-mode:vertical-rl の和風縦書き見出し。表示時に縦ラインが上から伸びます。和食店・旅館・伝統工芸サイトの世界観づくりに。

CSS onlyscrollcss</> コードを見る

02-01-10

テキストマーキー

帯状のテキストが無限ループで流れる演出。セクションの区切りやフッター上の装飾として、サイトに動きとリズムを加えます。

CSS onlyautocss</> コードを見る

情熱を、かたちに。

02-01-11

縁取り→塗りつぶし見出し

表示時に文字のアウトラインだけの状態から、じわっと塗りつぶし色へ変化する見出し。WordPressのブランドコンセプトページのタイトルに知的な印象を与えます。

CSS onlyscrollcss</> コードを見る

DEPTH

02-01-12

立体レイヤーシャドウ見出し

text-shadowを重ねて奥行きを作り、色相がゆっくり移り変わりながら揺れ続ける立体文字。WordPressのゲーム・エンタメ系サイトの目立たせたい見出しに。

CSS onlycss3d</> コードを見る

積み重ねた信頼と実績

02-01-13

二重ずれ下線見出し

色違いの下線2本がタイミングをずらしながら左から伸び、微妙にずれて重なる見出し。企業サイトの実績紹介や会社概要ページの中見出しに厚みを出せます。

CSS onlycss</> コードを見る

[

SPECIAL OFFER

]

02-01-14

ブラケット挟み込み見出し

左右の角括弧がスクロールで外側から寄ってきて見出しを挟み込む演出。キャンペーンバナーや特集タイトルの目印として使えます。

CSS onlyscrollcss</> コードを見る

デザインと機能性。

02-01-15

スプリットカラー見出し

見出しの左右で色が異なり、その境界線がゆらゆらと常時揺れ続けるスプリットカラー演出。2色ブランドの会社やデュアル事業サイトのタイトルに。

CSS onlyautocss</> コードを見る

先着順で受付中|

02-01-16

点滅カーソル見出し

テキストは最初から表示したまま、末尾のカーソルだけが点滅し続けるタイプライター風見出し。予約受付や募集告知の一文にさりげない動きを加えます。

CSS onlyautocss</> コードを見る

お知らせ

02-01-17

リップル背景見出し

見出しの背後で波紋が絶えず広がり続ける演出。お知らせセクションやライブ配信・受付中バッジ周りの見出しに注目を集めます。

CSS onlycss</> コードを見る

心を込めて、丁寧に。

02-01-18

手書き風ストローク下線見出し

スクロールで表示されると、手書き風の曲線がSVGでゆっくりと描画されていく見出し。ハンドメイド・カフェ・パーソナルサイトに温かみを添えます。

CSS onlyscrollcsssvg</> コードを見る

クリアな未来へ。

02-01-19

ブラー→シャープ見出し

ぼやけた状態からピントが合うように鮮明になる見出し。写真・映像・カメラ関連サイトや、コンセプトページの導入見出しに向いています。

CSS onlycss</> コードを見る

未来を創る力未来を創る力未来を創る力未来を創る力未来を創る力未来を創る力

02-01-20

縦ストライプ組み上げ見出し

見出しを縦のストライプに分割し、各帯が下から次々にスライドインして1つの文字列に組み上がる演出。実績・コンセプトページの見出しに動きを。

CSS onlycss</> コードを見る

MAGNET TEXT

02-01-21

マグネットホバー見出し

マウスカーソルに近い文字だけがわずかに引き寄せられるインタラクティブな見出し。採用サイトやポートフォリオのヒーロー見出しに遊び心を。

JSjs</> コードを見る

導入企業数社

02-01-22

数字スロット回転見出し

ボタンをクリックすると添えられた数字がスロットのように回転し、ランダムな数字で静止する演出。実績数値の見出し脇でクリックを誘導できます。

JSclickjs3d</> コードを見る

やさしい時間を、あなたに。

02-01-23

波線ドローイング見出し

スクロールで表示されると波線の下線が左から右へアニメーションで描かれていく見出し。やさしい雰囲気のサロン・クリニックサイトに。

CSS onlyscrollcss</> コードを見る

PREMIUM PLAN

02-01-24

ハイライトスイープ見出し

ホバーすると斜めの光の帯が見出しの上を一瞬で通過するハイライト演出。プレミアムプラン名やアワード表記に高級感を添えます。

CSS onlyhovercss</> コードを見る

CONCEPT

02-01-25

字間クローズ見出し

表示時に広がった文字間隔が自然な間隔へすっと閉じていく見出し。ブランドコンセプトページやスライド区切りのタイトルに上品な余韻を。

CSS onlyscrollcss</> コードを見る

OUR VISION

02-01-26

コーナーフレームイン見出し

四隅の線がスクロールで内側へ伸びてフレームを形作り、見出しを縁取る演出。ビジョン・ミッションページや写真キャプションの見出しに。

CSS onlyscrollcss</> コードを見る

LIQUID

02-01-27

液体マスク見出し

波形にゆがんだclip-pathがホバーで平らな形へ戻る液体のような見出し。水・飲料・アクアリウムなど液体イメージを扱うサイトの見出しに。

CSS onlyhovercss</> コードを見る

NEXT GENERATION

02-01-28

グリッドスキャン見出し

見出しの背景で格子状のグリッド線が絶えずスキャンするように流れる演出。IT・SaaS・テクノロジー系サイトのヒーロー見出しに近未来的な印象を与えます。

CSS onlyautocss</> コードを見る

静けさの中の、強さ。

02-01-29

スケール展開見出し

文字が縦につぶれた状態からスクロールで通常の高さまで伸び上がる見出し。ミニマルなブランドサイトやプロダクト紹介ページの導入見出しに。

CSS onlyscrollcss</> コードを見る

静寂に浮かぶ、光。

02-01-30

パーティクル浮遊見出し

見出しの周囲を光の粒子が絶えず揺らめきながら浮遊し続ける演出。イベント告知やナイトラウンジ、コスメブランドなど幻想的な世界観のヒーロー見出しに。

CSS onlycss</> コードを見る

お好みの色を、見つけて。

02-01-31

カラーサイクル見出し

クリックするたびに見出しの文字色があらかじめ用意した複数のブランドカラー間で切り替わる演出。カラーバリエーションのある商品紹介ページの見出しに。

JSclickjs</> コードを見る

はねる、文字たち。

02-01-32

ジグル見出し

見出しの一部の単語だけが常時ゆっくりと左右に揺れ続ける演出。子ども向けサービスやポップなキャンペーンページの見出しに遊び心を添えます。

CSS onlyautocssoverlay</> コードを見る

ここから、はじまる。

02-01-33

ロータリーイン見出し

スクロールで画面外から回転しながら正面向きに収まっていく見出し。コンセプトページやスライダーの切り替わり時の見出し演出に躍動感を加えます。

CSS onlyscrollcss3d</> コードを見る

一歩ずつ、進んでいく。

02-01-34

プログレスドット見出し

見出しの下でドットが順番に点灯を繰り返すプログレス風の演出。予約状況の読み込み表示やステップ紹介の導入見出しに使えます。

CSS onlycss</> コードを見る

はねる、文字たち。

02-01-35

バウンスホバー見出し

マウスを乗せると1文字ずつランダムなタイミングで軽くジャンプする見出し。採用サイトやキッズ向けサービスの遊び心あるインタラクションに。

JSjs</> コードを見る

OUTLINE TRACE

02-01-36

アウトライントレース見出し

ホバーすると文字のアウトラインだけが左から右へネオンのように光のトレースで描かれていく演出。ゲーム・テック系サイトのボタン隣接見出しに。

CSS onlyhovercssdark</> コードを見る

STRIPE MOTION

02-01-37

動くストライプ背景見出し

見出しの背後で斜めのストライプ模様が常時ゆっくりとスライドし続ける演出。スポーツブランドやイベントサイトの区切りセクション見出しに勢いを添えます。

CSS onlyautocss</> コードを見る

GRAND OPEN

02-01-38

カーテンオープン見出し

画面に入ると同時に上下2枚のパネルが開いて中の文字が現れる演出。新規オープンのお知らせやキャンペーン開始セクションの見出しに。

CSS onlyscrollcss</> コードを見る

息づく、文字たち。

02-01-39

パルス文字見出し

文字ごとに異なる遅延でわずかな拡大縮小を繰り返す演出。常時動きのあるヒーロー見出しやローディング周辺のアクセントに使えます。

JSautojs</> コードを見る

光を、追いかけて。

02-01-40

シャドウキャッチアップ見出し

スクロールで表示されると、見出しの下に落ちていた影だけが追いつくように本体へ近づく演出。ミニマルなコーポレートサイトの中見出しに奥行きを加えます。

CSS onlyscrollcss3d</> コードを見る

SHATTER

02-01-41

パーティクル分解見出し

クリックすると見出しの文字が紙吹雪のように一瞬散らばり、すぐに元の並びへ再構成される演出。キャンペーンのCTAボタン隣接見出しなどクリックを誘いたい場面に。

JSclickjs</> コードを見る

NEW ARRIVAL.

02-01-42

アクセントブリンク見出し

見出し末尾のピリオドだけが心拍のように脈打って点滅し続ける演出。新着情報や限定告知の見出しにさりげない注目ポイントを加えます。

CSS onlyautocss</> コードを見る

19. キネティックタイポグラフィ

WordPressで、集客する。予約を取る。売上を伸ばす。ファンを増やす。

02-02-01

単語ローテーター(縦フリップ)

キャッチコピーの一部だけが縦にめくれて複数の語へ切り替わり続けます。WordPressのヒーロー見出しで訴求ポイントを1行に凝縮するのに便利です。

CSS onlycss</> コードを見る

02-02-02

波打つテキスト(ウェーブ)

各文字がサイン波の位相をずらして上下にうねり続けます。海・音楽・リラクゼーション系WordPressサイトの装飾見出しに向いています。

CSS onlyautojs</> コードを見る JS

DEPTH

02-02-03

3D回転テキスト

見出しがX軸で奥から回り込みながら登場し、静止後にゆっくり揺れ続けます。WordPressのセクションタイトルに立体的なインパクトを与えます。

CSS onlycss3d</> コードを見る

DECODED

02-02-04

スクランブル/デコード文字

ランダムな記号から正しい文字へ次々に収束していきます。テック系・セキュリティ系WordPressサイトのローディングや見出し演出に最適です。

JSjs</> コードを見る

OUTLINE

02-02-05

ストローク→塗り文字

輪郭だけの文字が左から徐々に塗りつぶされていきます。WordPressのブランド見出しやコンセプト提示で洗練された印象を演出できます。

CSS onlycss</> コードを見る

02-02-06

スプリットフリップ(パタパタ)

空港の発着案内板のように各桁がパタパタと切り替わり目的の単語を表示します。WordPressのニュースやステータス表示にレトロな動きを添えます。

JSjs</> コードを見る

PREMIUM

02-02-07

グラデーションシャイン文字

光沢の帯が文字の上を斜めに繰り返し走り抜けます。WordPressの高級感あるサービス名やキャンペーン見出しにきらめきを加えます。

CSS onlycss</> コードを見る

02-02-08

弾性スケール文字

画面に入ると各文字が1つずつバウンドしながら拡大して現れます。WordPressのスクロール連動見出しで元気で親しみやすい印象を作れます。

CSS onlyscrolljs</> コードを見る JS

SUMMER

02-02-09

背景切り抜き文字(ムービングマスク)

文字の内側で色鮮やかなグラデーションが流れ続けて見えます。WordPressのシーズン特集やイベント見出しに躍動感を持たせられます。

CSS onlyautocss</> コードを見る

デザイン
マーケティング
ブランディング
コンサル
開発
デザイン
マーケティング
ブランディング
コンサル
開発

02-02-10

縦スクロールワードリスト

キーワードが縦に無限スクロールし中央のラインで強調されます。WordPressの提供サービス一覧や実績タグをリズミカルに見せられます。

CSS onlyscrollautocss</> コードを見る

|

02-02-11

タイプライター風自動入力テキスト

1文字ずつ打ち込まれ、最後まで表示すると消えてまた最初から入力し直します。WordPressのヒーロー見出しでキャッチコピーを複数見せたいときに便利です。

JSjsinput</> コードを見る

02-02-12

マウス追従で膨らむ文字

マウスに近い文字ほど拡大して盛り上がる、指で押したような立体テキストです。WordPressの遊び心あるブランド見出しやサービスページのアクセントに使えます。

JSjs3d</> コードを見る

105. スクロール連動テキストハイライト演出

↓ scroll

スクロールに合わせて、この文章は一文字ずつ色づいていきます。読み進める速度がそのまま体験になる、没入感のあるテキスト表現です。ブログ本文や特集記事に活用すれば、読者の視線を自然に文章へ引き込むことができます。

02-08-01

文字追従リーディングハイライト

スクロール量に正確に連動して、蛍光ペンのような帯が文章を1文字ずつなぞりながら読み進めます。WordPressのブログ本文や特集記事で読者の視線を誘導したいときに使えます。

JSscrolljs</> コードを見る

↓ scroll

スクロールするたびに、視線の先だけがくっきり浮かび上がる。

前後の行はやわらかくぼやけて、意識の外側へ退いていく。

まるで本を指でなぞるように、読む場所だけに光が当たる。

長い記事でも、迷わず読み進められる感覚を作り出せます。

採用ページやブランドストーリーの没入感を高める演出です。

02-08-02

行フォーカス読書エフェクト

スクロール位置に応じて、画面中央に近い行だけがくっきり浮かび上がり、離れた行はぼやけて沈みます。長文コンテンツの可読性と没入感を両立できます。

JSscrolljs</> コードを見る

↓ scroll

私たちが大切にしているのは、誠実な対応と圧倒的なスピード、そしてお客様に寄り添う姿勢です。この3つを軸に、日々サービスを磨き続けています。

02-08-03

スクロール連動マーカー下線

重要キーワードの下線が、その行が所定の位置までスクロールされるにつれて滑らかに伸びていきます。強み紹介文やサービス訴求のキーワード演出に効果的です。

JSscrolljs</> コードを見る

↓ scroll

未来を、
加速させる。

見出しの色が、スクロール量に正確に比例して流れます。時間経過ではなく操作量で動くので、触っている実感がそのまま演出になります。

02-08-04

スクロールグラデーション見出し

スクロール量に比例して見出し文字のグラデーションが横に流れます。止まれば止まる、操作していることを実感できるヒーロー見出しの演出に。

JSscrollautojs</> コードを見る

↓ scroll

わたしたちは、余白を大切にものづくりをしています。

急がず、ゆっくりと輪郭が見えてくるように。

滲んだ言葉が、少しずつくっきりと形になっていきます。

02-08-05

滲みフェードイン本文

ぼかしと字間の広がりが、行がスクロールで進入するにつれ連続的に収束し、インクが滲むように文字がくっきりしていきます。理念紹介文やストーリーページに。

JSscrolljs</> コードを見る

↓ scroll

ここに、ものづくりの誇りがある。

02-08-06

サイドから集まる引用文

左右にばらけていた文字が、スクロールするにつれて中央に吸い寄せられ、1つの引用文としてまとまります。お客様の声やコンセプトメッセージの見せ方に。

JSscrolljs</> コードを見る

0%

この記事は読み進めるほど、文字が濃くはっきりと変化します。

左のゲージが現在の読了位置をリアルタイムに示します。

長文コンテンツで、読者に進捗を意識させたいときに有効です。

最後まで読み切ると、ゲージも文字色も完全に満たされます。

02-08-07

読了インジケータ連動テキスト

サイドの読了ゲージがスクロールに連動して伸び、本文全体の文字色も読み進めるほど濃く変化します。長文記事の読了率を可視化する演出に使えます。

JSscrolljs</> コードを見る

↓ scroll

デザイン

ブランドの世界観を、細部まで丁寧に設計します。

開発

表示速度と保守性を両立したWordPress実装を行います。

運用

公開後も数値を見ながら継続的に改善していきます。

02-08-08

スクロールでピントが合う段落

カメラのピント送りのように、画面中央に近づいた段落だけがくっきり合焦し、離れると再びぼやけます。サービス紹介の3ブロック構成などに最適です。

JSjs</> コードを見る

↓ scroll

CREATIVE STUDIO

SINCE 2016 — 二重見出しが異なる速度でずれながらスクロールします

02-08-09

パララックス二重見出し

背景の袋文字と前面の色文字が異なる速度でずれながらスクロールし、奥行きのあるタイポグラフィレイヤーを演出します。ヒーローセクションの差別化に。

JSscrolljs3d</> コードを見る

↓ scroll

小さな一歩が、大きな変化になる。

02-08-10

スクロールで太字化する強調文

スクロール量に応じて文字の太さと縁取りが連続的に増していき、読み進めるほどメッセージの主張が強まります。キャッチコピーや理念文の見せ場に。

JSscrolljs</> コードを見る

↓ scroll

ばらばらの想いが、ひとつのカタチになる。

02-08-11

バラバラ文字集合タイポグラフィ

画面外では文字がランダムな位置・角度に散らばっていますが、スクロールするにつれて一文字ずつ正しい位置へ吸着するように集まります。企業理念やスローガンページの見出し演出に使えます。

JSscrolljs</> コードを見る

↓ scroll

確かな品質を、この手でひとつずつ仕上げていきます。

02-08-12

アウトライン塗りつぶしテキスト

読み進める前は輪郭線だけの文字が、スクロール量に応じて先頭から順に塗りつぶされていきます。まるで色を塗るように文章が完成していく様子を表現でき、こだわりを伝えるプロダクトページに向いています。

JSscrolljs</> コードを見る

106. グリッチ・ノイズテキスト演出

GLITCH

02-09-01

RGBずれグリッチ見出し

赤緑青のレイヤーが不規則にずれて明滅する定番グリッチ演出です。WordPressのテック系・ゲーム系サイトのヒーロー見出しやキャンペーンタイトルに使うと強い視覚的インパクトを与えられます。

CSS onlycss</> コードを見る

SCANLINE

02-09-02

走査線ノイズテキスト

文字の上を水平のノイズ線が流れ続け、時折フリッカーします。WordPressのサイバーパンク系・ゲーム紹介サイトのセクション見出しに近未来的な雰囲気を加えられます。

CSS onlyautocss</> コードを見る

02-09-03

文字化けデコードテキスト

ランダムな記号から徐々に正しい文字へ収束し、しばらくすると再び崩れて繰り返します。WordPressの解析・セキュリティ・エンジニア紹介ページのローディング表現に最適です。

JSjs</> コードを見る

OPEN

02-09-04

点滅ネオンサイン風テキスト

実物のネオン管のように時折チカチカと明滅する演出です。WordPressの飲食店・バー・エンタメ系サイトの営業中表示やロゴ見出しに使えます。

CSS onlycssdark</> コードを見る

STATIC

02-09-05

静電ノイズホバーテキスト

マウスを乗せると文字が微振動し、砂嵐のようなノイズが重なって表示されます。WordPressの製品紹介カードやボタン周りのインタラクションにデジタルな緊張感を加えられます。

CSS onlycss</> コードを見る

HOLOGRAM

02-09-06

ホログラム虹色シフトテキスト

虹色のグラデーションが文字の中を流れ、光の反射のようなグレアが横切ります。WordPressのSF・テック系プロダクトサイトの未来感あるロゴ表現に向いています。

CSS onlyautocss</> コードを見る

CRT WARP

02-09-07

ブラウン管風の歪みテキスト

古いブラウン管モニターのように文字がわずかに波打ち歪み続けます。WordPressのレトロゲーム・90年代テイストのランディングページの見出しに最適です。

CSS onlyautocss</> コードを見る

02-09-08

乱数スロットテキスト

各文字が高速で乱数記号に入れ替わりながら1文字ずつ確定していくスロットマシン風演出です。WordPressのくじ引き・抽選キャンペーンページの当選ワード表示に活用できます。

JSjs</> コードを見る

NO SIGNAL

02-09-09

電波障害ホバーグリッチ

通常時は静止した文字が、ホバー時のみ電波障害のような断続的なRGBずれとジッターを起こします。WordPressのカードやボタンに仕込むとホバーインタラクションとして注目を集められます。

CSS onlyhoverautocss</> コードを見る

RETRO TV

02-09-10

CRTモニターにじみテキスト

走査線とにじみ(ブルーム)を伴い、上下にわずかにロールする古いテレビ画面のような演出です。WordPressのレトロ・アーケード風コンセプトサイトの見出しに使えます。

CSS onlycss</> コードを見る

02-09-11

文字並び替えシャッフルテキスト

文字の並び順がランダムに入れ替わり、ノイズのように暴れたあと正しい順序へ戻ります。WordPressのセキュリティ・暗号・解析系サービスサイトの見出しに使うと不穏な緊張感を演出できます。

JSjsdark</> コードを見る

OFFLINE

02-09-12

ランダムバースト信号グリッチ

一定間隔ではなく不規則なタイミングで文字が一瞬だけ激しく乱れ、すぐに元に戻ります。放送事故のような予測できない乱れ方が、WordPressの障害告知・メンテナンス中ページやサイバー演出のアクセントになります。

JSjs</> コードを見る

118. 文字入れ替えモーフィングテキスト演出

集客採用販売発信

02-11-01

タイプフリップ見出し(パタパタ時計風)

単語がフリップクロックのように縦へめくれながら連続的に切り替わり続けます。WordPressのヒーロー見出しで提供サービスや強みを畳みかけるように見せたいときに使えます。

CSS onlycss3d</> コードを見る

想いを、届ける。形に、変える。未来へ、進む。

02-11-02

フェードクロス単語切替

複数のキャッチコピーが淡くフェードしながら次々に入れ替わり続けます。WordPressのトップページでブランドメッセージを複数訴求したいときに向いています。

CSS onlycss</> コードを見る

スピード対応高品質デザイン柔軟なサポート

02-11-03

縦スライド単語スイッチャー

単語が下から滑り込み、上へ抜けるように切り替わり続けます。WordPressの実績・強みリストをコンパクトな1行で回転表示するのに便利です。

CSS onlycss3d</> コードを見る

02-11-04

ランダム分解モーフィングテキスト

文字が1文字ずつランダムな順番で入れ替わりながら次の単語へ変化し続けます。WordPressのテック系・スタートアップ系サイトの見出しに未来感を加えられます。

JSjs</> コードを見る

PLAN

DESIGN

BUILD

LAUNCH

02-11-05

3Dキューブワードスイッチ

立方体が転がるように面が切り替わり、各面に置いた単語が順番に現れ続けます。WordPressのサービス一覧見出しに立体的な遊び心を加えられます。

CSS onlycss3d</> コードを見る

驚きを、カタチに、伝える。

02-11-06

ストレッチモーフィング単語

テキストが横に縮んでから伸びるタイミングで次の単語へ切り替わり続けます。WordPressのキャンペーン見出しにゴムのような弾力感を演出できます。

CSS onlycss</> コードを見る

成長

02-11-07

カラー&サイズ切替強調ワード

単語が切り替わるたびに色とサイズが同時にパルスするように変化します。WordPressの数字訴求・キーワード訴求の強調演出に向いています。

JSjs</> コードを見る

02-11-08

タイプライター単語書き換え

カーソルが点滅しながら単語をタイプし、消してから次の単語を打ち直し続けます。WordPressの自己紹介文やスキル一覧のヒーロー演出に定番の手法です。

JSautojs</> コードを見る

02-11-09

ウェーブレター切替テキスト

文字が左から右へ波打つようなタイミングでめくれ、次の単語へ変化し続けます。WordPressのクリエイティブ系ポートフォリオの見出しに動きのアクセントを加えます。

JSautojs</> コードを見る

伝わるデザイン。
届く言葉。
進化するサイト。

02-11-10

交互ハイライト・キャッチコピーリスト

複数行のキャッチコピーが順番にハイライトされながら注目を集め続けます。WordPressの理念・強み紹介セクションで複数メッセージを順に見せたいときに便利です。

JSjs</> コードを見る

ぼやけた景色が、くっきり見えてくる。その先の未来へ。

02-11-11

文字ごとブラー・フォーカスモーフィング切り替え

ぼやけた状態からピントが合うようにくっきり浮かび上がりながら単語が切り替わり続けます。WordPressのブランドコンセプトページで、じわりと言葉が像を結ぶような静かな印象を演出できます。

CSS onlycss</> コードを見る

02-11-12

グリッチノイズ風ワードスイッチャー

記号がノイズのように点滅しながら単語が切り替わるグリッチエフェクトです。WordPressのテック系・ゲーム系サイトの見出しに、デジタルなインパクトを加えたいときに使えます。

JSautojs</> コードを見る

119. 縦書き・回転タイポグラフィ演出

SPECIAL NOTICE 特別のお知らせ

02-12-01

横書き⇔縦書きモーフ見出し

ホバーすると横書きの英文が回転しながら消え、入れ替わりで縦書きの和文が現れます。和洋を切り替えたいお知らせ欄やキャンペーン見出しに。

CSS onlyhovercss3d</> コードを見る

旬の便り

02-12-02

カーテンリビール縦書き見出し

スクロールで画面に入ると、下から幕が上がるように縦書きテキストが姿を現します。和食店や旅館サイトの季節のご案内見出しに。

CSS onlyscrollcss</> コードを見る

ROTATE
IN STYLE

02-12-03

回転バウンド斜め見出し

画面に入ると斜めに傾いた状態から回転しながら弾むように定位置へ着地します。イベントバナーやセール告知の見出しにインパクトを。

CSS onlyscrollcss3d</> コードを見る

想いを届ける

02-12-04

縦書き1文字ずつリビール見出し

JSで縦書きテキストを1文字ずつspan分割し、上から順に時間差で降りてくるように出現させます。ブランドコンセプトページの世界観づくりに。

JSscrolljs</> コードを見る

まっすぐな想いを、カタチに。

02-12-05

傾き解消アニメーション見出し

斜めに傾いた状態からスクロールをきっかけに水平へすっと戻る見出し演出です。コンセプトメッセージやスローガンの提示に落ち着いた印象を添えます。

CSS onlyscrollcss</> コードを見る

物語は、続く

since 2010

02-12-06

縦横クロスタイポグラフィ

縦書きと横書きのテキストが十字に交差して配置され、交点がゆっくり明滅します。ブランドサイトのアバウトページなど世界観の演出に。

CSS onlycss</> コードを見る

サークルテキスト

02-12-07

サーキュラーテキスト回転

1文字ずつ円周上に配置した文字列が、リング全体でゆっくり回転し続けます。スタンプ風ロゴやブランドエンブレムの装飾アクセントに。

CSS onlycss3d</> コードを見る

静かな午後

風が運ぶ物語

夏の空

02-12-08

俳句風ふわりリビール

縦書きの三行が右から順にふわっとぼかしが取れながら現れる、短歌・俳句のような趣の演出。文芸イベントや和風ブランドの一節紹介に。

CSS onlycss</> コードを見る

DIAGONAL ENTRY

02-12-09

ダイアゴナルスライド見出し

右上から斜めにスライドしながら回転もおさまり、定位置にぴたりと着地する見出し。サービス紹介セクションの導入見出しに動きを添えます。

CSS onlycss3d</> コードを見る

サービス案内 WEB制作・運用・保守までワンストップでサポートします

02-12-10

縦書きラベル横展開タブ

普段は縦書きの短いラベルとして畳んでおき、ホバーすると横に伸びて説明文が展開します。サイドの固定タブや案内バナーに。

CSS onlyhovercssoverlay</> コードを見る

波打つ言葉

02-12-11

縦書き文字が波打つ揺らぎアニメーション

縦書きの一文字ずつが時間差でゆらゆらと左右に揺れ続ける演出です。和風ブランドサイトの見出しに、水面のようなやわらかい動きのアクセントを添えられます。

CSS onlycss</> コードを見る

つながる未来へ

02-12-12

クリックで縦書き⇔横書き切替ボタン付きテキスト

ボタンを押すたびにテキストの書字方向が縦書きと横書きの間で切り替わります。多言語対応サイトや和洋を使い分けたい見出しで、ユーザー自身に表示形式を選ばせたいときに使えます。

JSclickjs</> コードを見る

151. 文字ドローイング・手書き風演出

Ohara Design

02-15-01

手書きサイン風見出し

担当者名やブランド名の下にサインのような一筆書きが描かれます。WordPressの代表挨拶や制作者クレジットに温かみを添えられます。

CSS onlycss</> コードを見る

シンプルな強調見出し

02-15-02

ペンでなぞる下線見出し

見出しの下にマーカーのような太い下線が左から右へ伸びていきます。WordPressのセクション見出しでキーワードを強調したいときに使えます。

CSS onlycss</> コードを見る

重要ポイント

02-15-03

手描き丸囲みハイライト

キーワードの周囲に手描き風の楕円がぐるっと描かれ注目を集めます。WordPressの料金表や比較表で一番おすすめのプランを目立たせるのに向いています。

CSS onlycss</> コードを見る

02-15-04

輪郭ドローイング→塗りつぶし文字

文字の輪郭が線で描かれたあと内側がじわっと塗りつぶされます。WordPressのブランドロゴ的な見出しやコンセプトワードの提示に洗練された印象を与えます。

CSS onlycss</> コードを見る

申込はとてもかんたんです

02-15-05

蛍光マーカーハイライト

蛍光ペンで線を引くように単語の背後を黄色の帯が横切ります。WordPressの本文中でユーザーに読んでほしい一文を目立たせるのに便利です。

CSS onlyjs</> コードを見る JS

NEW

02-15-06

手描き風囲み線バッジ

四角い囲み線が少し歪んだ手描きタッチで描画され文字を囲みます。WordPressの新着ラベルやキャンペーンバッジにカジュアルな手作り感を出せます。

CSS onlycss</> コードを見る

初回相談無料
最短即日対応
全国どこでも

02-15-07

チェックマーク描画リスト

リストの各項目にチェックマークが順番に描き込まれていきます。WordPressのサービス特徴一覧や選ばれる理由セクションで信頼感を演出できます。

CSS onlycss</> コードを見る

波線アンダーライン

見出しの下でくねくねとした波線が左から描かれていきます。WordPressの飲食・カフェ系サイトのメニュー見出しに柔らかい手描き感を加えられます。

CSS onlycss</> コードを見る

通常価格 ¥9,800 今だけ ¥6,800

02-15-09

二重取り消し線プライス表示

旧価格に手書き風の二重線が引かれたあと新価格がふわっと現れます。WordPressのセール・値下げ告知で訂正表現をわかりやすく演出できます。

JSjs</> コードを見る

こちらボタン

02-15-10

手描き風誘導矢印

手描き風の曲線矢印がボタンに向かってすっと伸びていきます。WordPressのCTAボタン周りに添えると視線誘導とクリック率アップに役立ちます。

CSS onlyclickcss</> コードを見る

大人気サービス

02-15-11

星とハートの装飾見出し

見出しの横で星やハートのアイコンが順番に描かれ塗りつぶされます。WordPressの人気ランキングやお気に入り機能の見出しを華やかに彩れます。

CSS onlyjs</> コードを見る JS

想いを、かたちに。未来へ。

02-15-12

単語ごと時間差ドローイングコピー

キャッチコピーの単語が一つずつ時間差で明るくなり下線が引かれていきます。WordPressのファーストビューで短いメッセージにリズムをつけて印象づけられます。

JSjs</> コードを見る

170. 動的見出しセット(h2/h3/h4連動デザイン)

サービス紹介

導入までの流れ

お申し込み方法

02-17-01

段差フェードアップ見出しセット

スクロールで画面に入ると、h2→h3→h4の順に0.15秒ずつ遅れてふわっと浮かび上がる。階層が上から下へ生まれていく様子がそのまま情報の親子関係を伝える、動く見出し体系の基本形。

CSS onlyscrollcss</> コードを見る

会社案内

事業内容

沿革

02-17-02

下線シーケンス見出しセット

スクロールで表示されると、h2・h3・h4それぞれの下線が左から右へ、太い順に時間差で伸びていく。3本の線が少しずつタイミングをずらして完成するので、読み進める順番を自然に誘導できる。

CSS onlyscrollcss</> コードを見る

導入支援

初回ヒアリング

ご提案から契約まで

02-17-03

タイムライン接続見出しセット

左端の縦ラインがスクロールで上から下へ伸びていき、通過したレベルのドットが順番に点灯する。見出しそのものが工程の一部に見えるので、導入フローや手続きの説明ページに向く。

CSS onlyscrollcss</> コードを見る

お問い合わせ

法人のお客様

個人のお客様

02-17-04

ホバーカスケード罫線見出しセット

set全体をホバーすると、h2→h3→h4の左罫線が上から順番に0.1秒ずつ遅れて伸びる。マウスが離れると逆順に消えるので、問い合わせページの案内ブロックなどでカーソルの動きに呼応する。

CSS onlyhovercss</> コードを見る

ブランドストーリー

素材へのこだわり

製造工程

02-17-05

浮遊ループ見出しセット

h2・h3・h4がそれぞれ異なる周期・位相で常時わずかに上下し続ける、呼吸のような演出。3つの動きが重ならないので落ち着いた印象のまま、ブランドページ全体にゆるやかな生命感を添える。

CSS onlyautocss</> コードを見る

料金プラン

スタンダードプラン

エンタープライズプラン

02-17-06

帯スライド見出しセット

スクロールで表示されると、各レベルの背後にある色帯が左から右へ伸び、その直後に文字が重なって浮かび上がる。3本の帯が時間差で敷かれていくので、料金表の見出しにメリハリが出る。

CSS onlyscrollcss</> コードを見る

ごあいさつ

代表メッセージ

創業からの歩み

02-17-07

字間クローズシーケンス見出しセット

スクロールで画面に入ると、広がった字間から自然な間隔へ、h2から順に0.2秒ずつ遅れて閉じていく。3レベルが少しずつタイミングをずらして落ち着くので、静かな読み物ページの導入にふさわしい余韻が生まれる。

CSS onlyscrollcss</> コードを見る

導入事例

製造業のお客様

課題と成果

02-17-08

ハイライトスイープ連鎖見出しセット

カーソルを乗せると、斜めの光の帯がh2・h3・h4の上を0.15秒刻みでリレーのように通過していく。単体のホバーではなく3レベルが連動する見せ方なので、事例紹介セクションの導入に高級感を添える。

CSS onlyhovercss</> コードを見る

お知らせ

メンテナンス情報

対象サービス

02-17-09

マーカーパルス見出しセット

行頭の丸マーカーがh2は大きくゆっくり、h4は小さく速く、周期をずらしながら常時明滅を繰り返す。3つの鼓動が重ならないよう調整してあるので、お知らせ一覧の見出しに賑やかさを出しすぎない。

CSS onlyautocss</> コードを見る

研究テーマ

基礎研究部門

共同研究の実績

02-17-10

奥行きせり出し見出しセット

スクロールで奥に沈んだ状態からh2→h4の順に時間差で手前へせり出してくる、perspectiveを使った立体的な回転演出。研究紹介や大学サイトのような硬めのページに奥行きのアクセントを加える。

CSS onlyscrollcss3d</> コードを見る

施工事例

住宅リフォーム

キッチンの改修

02-17-11

マスクリフト見出しセット

スクロールで下から覆っていたマスクが持ち上がるように、h2→h3→h4の順で時間差をつけて文字がめくれ出てくる。clip-pathだけで実装しているので画像を使わず、施工事例ページの見出しに軽さを保ったまま動きを足せる。

CSS onlyscrollcss</> コードを見る

品質へのこだわり

原材料の選定

産地について

02-17-12

ホバーウェイトシフト見出しセット

set全体をホバーすると、h2から順に左罫線が0から本来の太さへ時間差で膨らんでいく。太さの重みが階層を下るように連鎖するので、製品ページのこだわり紹介ブロックに手ざわりを添える。

CSS onlyhovercss</> コードを見る

受賞歴

グッドデザイン賞

審査員コメント

02-17-13

シマーカスケード見出しセット

暗い背景の中、金色の光がh2からh4へ向かって順番に、少しずつ遅れながら常時流れ続ける演出。3レベルを1本の光が滝のように伝っていくため、受賞歴や実績紹介のような格を見せたいセクションに向く。

CSS onlyautocssdark</> コードを見る

商品ラインナップ

季節限定アイテム

在庫状況について

02-17-14

スケールインシーケンス見出しセット

画面に入ると0.7倍に縮んでいた3レベルが、h2から順に時間差をつけながら等倍まで拡大する。同じ動きを繰り返すだけの単純な演出だが、時間差があることで階層の主従がはっきり伝わる。

CSS onlyscrollcss</> コードを見る

キャンペーン

対象商品一覧

適用条件

02-17-15

ブラケットクローズ見出しセット

スクロールで画面に入ると、暗いネオン基調の背景で左右の角括弧が外側から寄ってきて見出しを挟み込む。h2・h3・h4それぞれで時間差をつけて再生され、同じ演出が階段状に3回続くことで、キャンペーンページに勢いのあるリズムが生まれる。

CSS onlyscrollcssdark</> コードを見る

FAQ

支払い方法

領収書の発行

02-17-16

スポットライト巡回見出しセット

ボタンを押すたびに、h2→h3→h4→全体表示の順で1レベルだけを明るく残し他を減光するスポットライトが巡回する。FAQのように複数階層を順番に説明したい場面で、視線を1つずつ誘導できる。

JSclickjs</> コードを見る

開発ドキュメント

環境構築

依存パッケージ

02-17-17

ブラーフォーカスシーケンス見出しセット

スクロールで画面に入ると、ぼやけた状態からh2→h3→h4の順にピントが合うように鮮明になる。3段階でフォーカスが移っていく見た目になるため、技術文書のように読む順序がはっきりしているページの見出しに合う。

CSS onlyscrollcss</> コードを見る

私たちの強み

技術力について

対応可能な言語

02-17-18

ホバーラベルスライド見出しセット

set をホバーすると、各レベルの上に添えた英字ラベルが下から時間差でスライドインする。ラベルが階層順に立ち上がってくるので、コーポレートサイトの特徴紹介ブロックに軽い遊びを加えられる。

CSS onlyhovercss</> コードを見る

NIGHT EVENT

LIVE SCHEDULE

TICKET INFO

02-17-19

ネオン明滅シーケンス見出しセット

暗い背景で3レベルのネオン発光が、それぞれ違う周期で常時脈打ち続ける。周期をわずかにずらしているため完全には同期せず、バーやイベントサイトの見出しに賑やかな明滅を作り出す。

CSS onlyautocssdark</> コードを見る

ミッション

私たちの価値観

行動指針

02-17-20

ロータリーシーケンス見出しセット

スクロールで画面に入ると、斜めに傾いた状態からh2→h3→h4の順で時間差をつけながら正面向きに回転して収まる。3レベルがひとつずつ整列していく様子になるので、理念・行動指針のような順序立てた説明に合う。

CSS onlyscrollcss3d</> コードを見る

ブログ

制作の裏側

使用したツール

02-17-21

下線オフセットシーケンス見出しセット

スクロールで画面に入ると、文字から離れた位置にあった下線が、h2から順に時間差をつけて文字へ近づくように詰まっていく。text-underline-offsetのアニメーションだけで構成しているので、ブログ本文にも軽く馴染む。

CSS onlyscrollcss</> コードを見る

お手続き案内

必要書類の準備

本人確認書類

02-17-22

カラーサイクル連動見出しセット

クリックするたびに、h2・h3・h4の文字色が3レベル同時に次の配色セットへ切り替わる。1階層だけでなくセット全体が連動して色を変えるので、複数パターンの配色を1つの見出し体系で見比べられる。

JSclickjs</> コードを見る

お客様の声

医療機関のお客様

導入後の変化

02-17-23

シャドウリフトシーケンス見出しセット

スクロールで画面に入ると、影のない状態からh2→h3→h4の順で時間差をつけながら影が濃くなり、文字がふわりと浮き上がって見える。3レベルが順番に持ち上がることで、導入事例ページの見出しに奥行きの余韻が残る。

CSS onlyscrollcss3d</> コードを見る

アクセス

電車でお越しの方

駐輪場のご案内

02-17-24

アコーディオンラインループ見出しセット

各レベルの下線が0%と100%の間を伸縮し続ける呼吸のようなループ。h2はゆっくり、h4は速く、周期をずらして常時再生されるので、アクセス案内のように短い節が並ぶページに軽いリズムを添える。

CSS onlyautocss</> コードを見る

ギャラリー

常設展示

作品リスト

02-17-25

ホバースケールディケイ見出しセット

set をホバーすると3レベルとも拡大するが、拡大率はh2が一番大きく、h4に向かうほど控えめになる。階層が下がるほど動きも小さくなるため、静かなギャラリーサイトでも上品にとどまる。

CSS onlyhovercss</> コードを見る

ご利用の手順

会員登録

メール認証

02-17-26

ナンバリング回転出現見出しセット

行頭の丸囲み数字が縮んだ状態から回転しながら等倍まで広がり、h2→h3→h4の順に時間差で出現する。手順を示す数字自体が動くことで、会員登録フローのようなステップ紹介に軽快さが出る。

CSS onlyscrollcss3d</> コードを見る

特集記事

季節のおすすめ

編集部より

02-17-27

グラデーションスイープ確定見出しセット

スクロールで画面に入ると、薄いグレーだった文字の上を左から右へ帯グラデーションが通過し、直後に本来の濃い色へ確定する。h2から順に少しずつ遅れて再生されるので、雑誌風のブログ記事見出しに華やかさが出る。

CSS onlyscrollcss</> コードを見る

お申し込みの流れ

ヒアリングシートの記入

ご契約手続き

02-17-28

プログレス接続見出しセット

ボタンを押すと、h2からh4を縦につなぐ進捗バーが上から下へ伸び、通過したレベルのマーカーが順に点灯する。見出しそのものが手続きの進み具合を示すため、契約フローの案内ページに実用的な動きを足せる。

JSclickjs</> コードを見る

採用情報

募集職種

応募資格

02-17-29

トライアングル回転出現見出しセット

スクロールで画面に入ると、行頭の三角マーカーが横向きに倒れた状態から回転して向きを揃え、h2→h3→h4の順に時間差で出現する。方向を持つ記号が整列していく様子が手順感を出すので、採用サイトの募集要項見出しに向く。

CSS onlyscrollcss3d</> コードを見る

サイトマップ

サービス一覧

保守プラン

02-17-30

色相ループ見出しセット

各レベルの左バーの色が、hue-rotateで常にゆっくりと変化し続ける。h2・h3・h4で変化のタイミングをずらしてあるため、3本のバーが揃わずに流れ続け、サイトマップのような一覧性の高いページに彩りを添える。

CSS onlyautocss</> コードを見る

05. ナビゲーション・ヘッダー

03-01-01

下線スライドナビ

ホバーすると下線が左から滑らかに伸びる定番グローバルナビ。WordPressテーマのヘッダーメニューにそのまま応用できます。

CSS onlyhovercss</> コードを見る

LOGO

03-01-02

ハンバーガー→X + ドロワー

クリックで3本線がXにモーフし、右からドロワーメニューが開きます。WordPressのモバイルナビ実装の定番パターンです。

JSmobileclickjsoverlay</> コードを見る

COMPANY

↓ この領域をスクロール

03-01-03

スクロールで縮むヘッダー

スクロールするとヘッダーの高さとロゴが縮み、コンテンツ領域を広く確保します。WordPressの固定ヘッダーによく使われる演出です。

JSscrolljs</> コードを見る

MEGA

03-01-04

メガメニュー

「サービス」にホバーすると3カラムの幅広パネルが降りてきます。項目数の多いWordPressコーポレートサイトのナビに最適です。

CSS onlyhovercss</> コードを見る

03-01-05

ピル型アクティブインジケータ

メニューをクリックすると背景のピルが滑らかにスライドして移動します。WordPressのカテゴリ切替やタブ型ナビに使えます。

JSclickjs</> コードを見る

BRAND

↓ スクロールでヘッダーが白に

03-01-06

透過→白ヘッダー

ヒーロー画像に重なる透明ヘッダーが、スクロールで白背景+影に切り替わります。WordPressのトップページで多用される演出です。

JSscrolljs</> コードを見る

03-01-07

アニメ付きパンくずリスト

CSSで描いた矢印区切りのパンくずリスト。ホバーで下線が伸びるアニメ付きで、WordPressの下層ページの現在地表示に使えます。

CSS onlyhovercss</> コードを見る

03-01-08

サイドドットナビ

縦並びのドットにホバーするとラベルがスライド表示され、アクティブなドットは縦長に変形します。WordPressの1ページ完結型LPのセクション移動に便利です。

CSS onlyhovercss</> コードを見る

タブをクリックすると下線が移動します

03-01-09

タブバー+スライドインジケータ

クリックしたタブへ下線が滑らかにスライド移動します。WordPressの投稿一覧のカテゴリ切替UIなどに応用できます。

JSclickjs</> コードを見る

CIRCLE

右上のボタンをクリック

03-01-10

サークル展開オーバーレイメニュー

ボタンを中心にclip-pathの円が広がり、全面オーバーレイメニューが出現します。印象を強く残したいWordPressサイトのメニュー演出に。

JSscrolljsoverlay</> コードを見る

03-01-11

アコーディオン式モバイルサブメニュー

タップで子メニューが滑らかに開閉するモバイルナビ。WordPressの階層が深いコーポレートサイトでも、ドロワー内をすっきり整理できます。

JSmobileclickjsoverlay</> コードを見る

STUDIO 無料相談

↓ この領域をスクロール

03-01-12

スクロールで出現するCTA付きヘッダー

一定量スクロールすると、ヘッダー右側に相談ボタンが右からスライドインして現れます。WordPressのLPでコンバージョン導線をさりげなく強調できます。

JSscrolljs</> コードを見る

25. メニュー・ドロップダウン応用

03-02-01

マルチレベルドロップダウン

親項目にホバーで子メニュー、子にホバーで孫メニューが横方向に展開する多段ナビ。WordPressの階層カテゴリーやサービス一覧のグローバルメニューに最適。

CSS onlyhovercssoverlay</> コードを見る

該当する項目がありません

03-02-02

コマンドパレット風検索

入力欄に文字を打つと候補が絞り込まれ、↑↓キーでハイライト移動・Enterで選択できる検索UI。WordPress管理画面のクイック操作やサイト内検索の入口に。

JSjsinput</> コードを見る

右クリック領域内をクリック
お好きな位置をクリックしてください

03-02-03

右クリック風コンテキストメニュー

領域内をクリックすると、その位置にメニューがポップアップ表示。外側クリックで閉じます。WordPressの一覧テーブルやブロック操作の右クリックメニューに応用可能。

JSclickjsoverlay</> コードを見る

カテゴリー

お知らせブログ実績

価格上限 50,000円

サービス開始のお知らせ
SEO入門ガイド
ECサイト構築事例
WordPress高速化
LP制作の実績
年末休業のご案内

03-02-04

絞り込みサイドフィルタ

チェックボックスと価格レンジを操作するとリスト項目がリアルタイムに絞り込まれます。WordPressの投稿一覧や商品アーカイブのファセット検索に。

JSjs</> コードを見る

WordPress CSS SEO jQuery デザインブログ高速化レスポンシブ保守アニメーションプラグインマーケティング

03-02-05

タグクラウド

投稿数などの重みに応じて文字サイズが変わるタグ群。ホバーすると色付きで拡大します。WordPressのタグ・カテゴリークラウドウィジェットに最適。

CSS onlyhovercss</> コードを見る

興味のある分野0

03-02-06

セレクトチップ(複数選択)

チップをクリックするたびに選択がトグルし、選択数がバッジに表示されます。WordPressのお問い合わせフォームや絞り込みタグ選択UIに。

JSclickjsinput</> コードを見る

03-02-07

ホバー展開メニュー(アイコン→ラベル)

普段はアイコンのみの縦バー。項目にホバーするとラベルが横に伸びて展開します。WordPressのサイドナビや管理メニューの省スペース表示に。

CSS onlyhovercssoverlay</> コードを見る

03-02-08

スピードダイヤルFAB

プラスボタンをクリックすると子アクションが上方向に順次展開し、再クリックで収納されます。WordPressの新規作成ボタンやクイックアクションに。

JSclickjsoverlay</> コードを見る

03-02-09

円形ラジアルメニュー

中央ボタンをクリックすると、メニュー項目が扇状に開きます。再クリックで閉じます。WordPressのモバイルナビや装飾的なメニュー演出に。

JSmobileclickjs</> コードを見る

検索サジェスト(履歴+候補)

入力欄にフォーカスすると、最近の検索履歴とおすすめ候補が下にパネル表示されます。WordPressのサイト内検索やヘッダー検索の入力補助に。

JSjsinput</> コードを見る

03-02-11

パンくずドロップダウン

パンくずの各階層をクリックすると、その階層の兄弟ページ一覧がドロップダウン表示されます。WordPressの深い階層ページでの回遊導線に便利です。

JSclickjsoverlay</> コードを見る

03-02-12

メガメニュー(3カラム+おすすめ枠)

ホバーで開く大型メニュー。カテゴリを2列に整理し、右側におすすめ枠を配置。WordPressのサービス数が多いグローバルナビに最適です。

CSS onlyhovercss</> コードを見る

47. 言語・地域切替UI

日本語
English
中文
한국어

03-04-01

言語スイッチャードロップダウン

クリックで言語一覧が開閉し選択した言語がボタン表示に反映されます。WPML/Polylangなどの多言語プラグインの言語切替メニューとして使えます。

JSi18nclickjs</> コードを見る

日本語
English
Français
Deutsch

03-04-02

国旗風+言語名リスト

色帯だけで表現した簡易国旗アイコンと言語名を横並びに配置したリストです。多言語プラグインの言語メニューを画像なしで軽量に実装したい場合に便利です。

CSS onlyi18ncss</> コードを見る

¥1,980

03-04-03

通貨切替セレクタ

ボタンをクリックすると円・ドル・ユーロが切り替わり価格表示も連動して変化します。海外向けECサイトで多言語・多通貨プラグインの表示切替UIに応用できます。

JSi18nclickjs</> コードを見る

03-04-04

地域選択モーダル

ボタンを押すとプレビュー内に「地域を選択してください」のモーダルが開きます。多言語サイトの初回訪問時に表示する地域選択ダイアログの実装例です。

JSi18nclickjsoverlay</> コードを見る

JA EN

03-04-05

2言語切替トグル

JA/ENの2択をトグルスイッチのつまみをスライドさせて切り替えます。シンプルな2言語運用のWordPressサイトのヘッダー言語切替に最適です。

JSi18njs</> コードを見る

これはWordPressサイトのテキスト表示方向のサンプルです。

03-04-06

RTL対応表示切替

ボタンでLTR/RTLを切り替えるとテキストの方向と文字揃えが反転します。アラビア語・ヘブライ語対応の多言語WordPressサイトの検証用UIとして使えます。

JSi18njs</> コードを見る

東京21:14JST +9
London13:14GMT +0
New York08:14EST -5

03-04-07

タイムゾーン表示切替

複数都市の現在時刻風表示をタイムゾーン名付きで一覧にしています。グローバル企業のWordPressサイトで拠点ごとの営業時間案内に活用できます。

CSS onlyi18ncss</> コードを見る

180cm

03-04-08

単位系切替(尺貫法/メートル法)

ボタンでcmとinchなど単位表示を切り替えます。海外向けと国内向けで採寸表記が異なるアパレル系WordPressサイトの商品仕様欄に便利です。

JSi18njs</> コードを見る

03-04-09

フッター内言語リンク一覧

フッター風の帯に複数言語へのリンクが横並びで配置されています。多言語サイトのフッターに定番の言語切替リンク一覧として設置できます。

CSS onlyi18ncss</> コードを見る

03-04-10

言語別お知らせバナー

「English version available」のような多言語案内バナーです。閉じるボタン付きで、訪問者の言語に応じた案内をWPML/Polylangサイトの上部に表示する用途に使えます。

JSi18njs</> コードを見る

平日 9:00-18:00(JST)

TEL: 03-1234-5678

03-04-11

地域別営業時間切り替えタブ

タブをクリックすると拠点ごとの営業時間・電話番号が切り替わります。海外拠点を持つWordPressサイトで地域別の問い合わせ先を1箇所にまとめて案内できます。

JSi18nclickjs</> コードを見る

03-04-12

言語切替クイックアクセスFAB

画面右下の丸いボタンをクリックすると言語の選択肢がふわっと展開します。スクロールが長いWordPressサイトで常に手の届く位置に言語切替を置きたい場合に便利です。

JSi18nscrollclickjsoverlay</> コードを見る

108. モバイルハンバーガーメニュー演出

Shop

03-08-01

ハンバーガー→×アイコン変形メニュー

3本線のアイコンがクリックで×字に変形し、下にメニューが展開する定番パターン。WordPressのモバイルヘッダーナビの開閉ボタンにそのまま使えます。

JSmobileclickjsoverlay</> コードを見る

Store

03-08-02

円形に展開するフルスクリーンメニュー

ハンバーガーボタンを起点に円がじわっと広がり、画面全体をメニューで覆う演出。WordPressのECサイトやコーポレートサイトのインパクトあるモバイルナビに。

JSmobilejs</> コードを見る

Media

ニュース特集記事ランキングお問い合わせ

03-08-03

上からスライドダウンするメニューパネル

ボタンをクリックするとメニューパネルがカーテンのように上から下へ広がって表示されます。WordPressのニュースサイトやメディアサイトのヘッダーメニューに。

JSclickjs</> コードを見る

Café

メニュー店舗案内予約採用情報

03-08-04

右からスライドインするオフキャンバスメニュー

クリックで背景が暗転しつつ、右側からメニューパネルがスライインしてくるオフキャンバス型。WordPressの飲食店・店舗サイトのモバイルナビとして扱いやすい構成です。

JSmobileclickjsdark</> コードを見る

Studio

03-08-05

波打つように変形するハンバーガーアイコン

3本線がわずかに時間差を付けて揺れながら×字に収束するアイコン演出。WordPressのポートフォリオサイトなど、遊び心のあるモバイルメニューボタンに。

JSmobilejs</> コードを見る

Journal

03-08-06

項目が時間差で現れるスタガーメニュー

メニューを開くと項目が上から順番にふわっと現れるスタガーアニメーション。WordPressのブログ・ジャーナル系サイトのメニュー開閉に軽やかな印象を与えます。

JSjs</> コードを見る

Gallery

作品一覧展示予定アクセスお問い合わせ

03-08-07

背景ブラーで開くオーバーレイメニュー

メニューを開くと背後のコンテンツがぼかされ、中央にメニューリストが浮かび上がる演出。WordPressのギャラリーサイトなど背景を活かしたい場面で映えます。

JSjs</> コードを見る

Atelier

03-08-08

下線が伸びるミニマルメニュー

開くたびに各項目の下線が左から右へ順番に伸びていくシンプルなメニュー。WordPressのブランドサイトやデザイン事務所サイトの上品なナビゲーションに。

JSjs</> コードを見る

Travel

ツアー宿泊レビュー予約

03-08-09

扇状に展開するファンメニュー

右下のボタンを起点に、メニュー項目が扇を広げるように弧を描いて現れる演出。WordPressの旅行・イベント系サイトで遊び心のあるモバイルメニューに使えます。

JSmobilejs</> コードを見る

Vision

03-08-10

回転しながら展開するフルカバーメニュー

アイコンが回転しながら、パネルが回転を伴って画面全体を覆うように広がるダイナミックな演出。WordPressのブランディングサイトなど印象的な開閉モーションを求める場面に。

JSjs3d</> コードを見る

Hotel

客室一覧レストランアクセスご予約

03-08-11

下からせり上がるボトムシートメニュー

ハンバーガーボタンをタップすると画面下からシート状のメニューがせり上がり、背景が半透明の暗幕で覆われる演出。WordPressの予約サイトやホテル・飲食店サイトで、親指が届きやすい位置にメニューを配置したいときに向く。

JSmobilescrollclickjsdarkoverlay</> コードを見る

Clinic

03-08-12

サブメニューがアコーディオンで開閉する二階層メニュー

ハンバーガーメニュー内の一部の項目をアコーディオンにして、タップするとサブメニューが高さアニメーションで展開する。WordPressのクリニックサイトや多階層の商品カテゴリーを持つECサイトなど、メニュー項目数が多いモバイルナビに便利。

JSmobileclickjsoverlay</> コードを見る

109. サイドバー・ドロワーナビゲーション演出

SHOP

03-09-01

左スライドインドロワーメニュー

ハンバーガーボタンをクリックすると左から半透明オーバーレイ付きのドロワーメニューが現れます。WordPressのスマホ表示グローバルナビの定番実装として使えます。

JSmobileclickjsoverlay</> コードを見る

トグルボタンで
サイドバー幅が切替

03-09-02

ミニマイズ可能サイドバー

トグルボタンでラベル付きのフルサイズ表示とアイコンのみのミニ表示を切り替えられます。WordPressの管理画面風レイアウトや会員マイページのメニューに便利です。

JSjs</> コードを見る

03-09-03

アコーディオン階層サイドバー

見出しをクリックするとサブメニューがアコーディオン式に開閉します。WordPressの多階層カテゴリメニューを省スペースで整理するのに役立ちます。

JSclickjs</> コードを見る

ホバーで幅が広がる
ピンで固定表示も可能

03-09-04

ホバー展開コンパクトサイドバー

普段はアイコンのみの細いサイドバーが、マウスオーバーで幅広に展開します。ピンをクリックすれば展開状態を固定でき、管理画面のナビに最適です。

JSclickjsoverlay</> コードを見る

下部の「その他」をタップ

マイページお気に入り設定ログアウト

03-09-05

モバイル用ボトムドロワー

タブバーの「その他」をタップすると画面下からシート状のメニューがせり上がります。WordPressのモバイル最適化サイトのフッターナビに適した実装です。

JSmobilescrollclickjsoverlay</> コードを見る

メニュー

セール

レディース

トップスボトムスアウター

メンズ

トップスアウター

03-09-06

ドリルダウン式メニュー

項目をクリックするとサブカテゴリへ横スライドで掘り下がり、戻るボタンで前の階層に戻ります。WordPressの多階層カテゴリをスマホでも見やすく整理できます。

JSmobileclickjs</> コードを見る

ハンドルで開き、
ピンで固定表示に

03-09-07

ピン留め可能な常時表示サイドバー

左端のハンドルをクリックするとフライアウトでサイドバーが開き、ピンアイコンで固定すればレイアウトにドッキングして常時表示に切り替わります。管理画面風UIに便利です。

JSclickautojs</> コードを見る

FEED

03-09-08

背景暗転リビールドロワー

ボタンをクリックするとコンテンツ全体が右へスライド縮小し、背後に隠れていたドロワーメニューが暗転演出とともに現れます。個性的なWordPressコーポレートサイトのメニューに。

JSclickjsdarkoverlay</> コードを見る

お知らせ

新着情報メンテナンス予定

設定

アカウント通知設定

アイコンで内容が切替、
再クリックで折りたたみ

03-09-09

タブ切り替え式サイドパネル

アイコンレールをクリックすると隣接パネルの内容がお知らせ・マイリスト・設定などに切り替わり、同じアイコンを再クリックするとパネルを折りたたみます。会員マイページなどに。

JSclickjs</> コードを見る

ハンドルをドラッグ、
またはクリックして開閉

03-09-10

ハンドル付きドラッグドロワー

右端のつまみハンドルを指でつまんで引き出す感覚でドロワーを開閉でき、軽くクリックするだけでも開閉が切り替わります。タブレット向けWordPressサイトのナビに。

JSclickjsoverlay</> コードを見る

03-09-11

FABから扇状に展開するクイックナビ

右下の丸ボタンをクリックするとメニュー項目が下から順にポップアップしながら展開します。WordPressのモバイルサイトでよく使われるフローティングショートカットメニューに応用できます。

JSmobileclickjsoverlay</> コードを見る

本文を下にスクロール
↓

03-09-12

スクロール連動で折りたたまれるサイドバー

右側の本文をスクロールすると左のサイドバーが自動的にアイコンのみのミニ表示へ折りたたまれます。WordPressの記事ページで本文閲覧の妨げにならないナビゲーションに便利です。

JSscrollautojs</> コードを見る

122. スクロール連動ナビバー変形演出

SHOWCASE

↓ 下にスクロールすると隠れ、↑ 上にスクロールすると現れます

03-11-01

下で隠れ上で現れるヘッダー

下方向スクロールでヘッダーが上へスライドして隠れ、上方向に戻すと即座に再表示されます。WordPressの固定ヘッダーで本文の閲覧領域を広げたい時に使えます。

JSscrolljs</> コードを見る

AURA

↓ スクロール量に応じて背景が徐々に不透明化

03-11-02

透明度が連続変化するヘッダー

スクロール量に比例して背景の不透明度が滑らかに変化する演出。WordPressのビジュアル重視なトップページヘッダーに向きます。

JSscrolljs</> コードを見る

MINIMAL

↓ この領域をスクロールするとヘッダーが薄くなります

03-11-03

コンパクト化する固定ヘッダー

スクロールすると高さ・余白・フォントが一斉に縮小し、コンテンツ表示域を広く確保するヘッダー。WordPressの記事詳細ページなどで重宝します。

JSscrolljs</> コードを見る

EMBLEM

↓ スクロール量に応じてロゴが縮小します

03-11-04

ロゴが連続縮小するヘッダー

スクロール量にリアルタイムで比例してロゴサイズが小さくなる演出。WordPressサイトでブランドロゴを目立たせつつ邪魔にならない工夫として使えます。

JSscrolljs</> コードを見る

ICONA

↓ スクロールでナビ項目がアイコンだけに切り替わります

03-11-05

アイコンのみに切り替わるナビ

通常はテキスト付きのメニューが、スクロールするとアイコンのみのコンパクト表示に切り替わります。WordPressの省スペースなヘッダーに便利です。

JSscrolljs</> コードを見る

FLOAT

↓ 少しスクロールするとヘッダーが浮き上がります

03-11-06

影で浮き上がる固定ヘッダー

スクロール開始と同時にヘッダーへ影が付与され、コンテンツの上に浮いているように見えます。WordPressの落ち着いた企業サイトのヘッダーに向く控えめな演出です。

JSscrolljs</> コードを見る

READIT

↓ 読了進捗がヘッダー下部のバーに反映されます

03-11-07

読了プログレスバー付きヘッダー

ヘッダー最下部に細いバーを重ね、スクロール量に応じて右へ伸びていく読了進捗表示。WordPressのブログ記事ページで読み進み具合を可視化できます。

JSscrolljs</> コードを見る

CENTRO

↓ スクロールでロゴが中央から左端へ移動します

03-11-08

中央→サイド配置に移動するロゴ

初期状態は中央にロゴだけを配置したヒーロー風ヘッダーで、スクロールすると左端へ移動しつつナビゲーションがフェードインします。WordPressのブランド訴求型トップページに向きます。

JSscrolljs</> コードを見る

SECTION

SECTION 1 / ライト

SECTION 2 / ダーク

SECTION 3 / サンセット

03-11-09

セクション通過で配色が切り替わるヘッダー

スクロールして通過するセクションに合わせてヘッダーの配色テーマが自動で切り替わります。WordPressの1ページ完結型LPで各セクションの世界観に合わせたい時に有効です。

JSscrollautojs</> コードを見る

UPWARD

↓ しばらくスクロールするとトップへ戻るボタンが現れます

03-11-10

スクロール連動トップへ戻るボタン

ヘッダー下の領域を一定量スクロールすると右下にトップへ戻るボタンがフェードイン表示され、クリックで先頭までスムーズスクロールします。WordPressの長文記事ページの回遊性向上に役立ちます。

JSscrollclickjs</> コードを見る

BLUR

↓ スクロールするとヘッダーの背景ぼかしが強まります

03-11-11

背景ぼかしが連続変化するヘッダー

スクロール量に応じて背景のぼかし(backdrop-filter)と不透明度が徐々に強くなるヘッダー。WordPressの画像を多用したトップページでコンテンツを透かしつつ視認性も保てます。

JSscrolljs</> コードを見る

FOLD

↓ スクロールするとナビ項目が畳まれハンバーガーに変わります

03-11-12

スクロールでナビが畳まれるヘッダー

通常は横並びのナビ項目が、スクロールすると幅の限られたハンバーガーボタンひとつに折り畳まれるヘッダー。WordPressの項目数が多いグローバルナビをスクロール時にコンパクト化したい場合に使えます。

JSscrolljs</> コードを見る

152. パンくず・階層ナビゲーション演出

03-14-01

ホバーで下層プルダウン展開パンくず

パンくずの階層名にホバーすると、その階層の兄弟ページ一覧がプルダウン表示されます。WordPressの深い階層構造を持つサイトで、迂回せずに横移動できる導線として使えます。

CSS onlyhovercss</> コードを見る

03-14-02

折りたたみ中間階層展開パンくず

「…」をクリックすると隠れていた中間階層が幅アニメーション付きで展開します。WordPressの階層が深いページでパンくずが横に長くなりすぎるのを防げます。

JSclickjsoverlay</> コードを見る

03-14-03

現在地マーカースライドパンくず

階層ボタンをクリックすると、下の現在地マーカーが滑らかにスライド移動します。WordPressの疑似パンくずやステップ型ナビの現在位置表示に応用できます。

JSclickjs</> コードを見る

03-14-04

階層を遡るとスライドアウトするパンくず

上位階層のリンクをクリックすると、それより下の階層がスライドしながらフェードアウトします。WordPressのページ遷移前に現在地を視覚的に整理する演出として使えます。

JSclickjs</> コードを見る

ホーム ›ショップ ›レディース ›アウター ›コート ›ロングコート

← 横にスワイプできます →

03-14-05

モバイル横スクロール・スナップパンくず

横幅に収まらない深い階層のパンくずを、スナップ付きで横スクロールできるようにしたモバイル向けUIです。WordPressのECサイトの商品詳細ページなどに向いています。

CSS onlymobilescrollcss</> コードを見る

03-14-06

区切り矢印アニメーションパンくず

階層名にホバーすると直後の矢印区切りが弾むように動き、次の階層への視線誘導になります。WordPressのシンプルなパンくずに軽いアクセントを加えられます。

CSS onlyhovercss</> コードを見る

03-14-07

階層ジャンプメニュー付きパンくず

階層名をクリックすると、同じ階層内の他ページへ移動できるジャンプメニューが開きます。WordPressのカテゴリ横断ナビゲーションに便利です。

JSclickjs</> コードを見る

ホーム› サービス› Web制作› › 料金プラン

↓ この領域をスクロール

03-14-08

スクロール連動省略⇔展開パンくず

ページをスクロールすると、パンくずが「…」+現在地のみの省略表示に切り替わり、上部に戻ると全階層表示に戻ります。WordPressの固定ヘッダー内パンくずの省スペース化に有効です。

JSscrolljs</> コードを見る

03-14-09

アコーディオン階層ツリーサイドナビ

親項目をクリックすると子階層がグリッドアニメーションで滑らかに開閉します。WordPressのサイドバーで多階層のカテゴリツリーを表示する際に便利です。

JSclickjs</> コードを見る

03-14-10

離脱確認モーダル付きパンくず

削除確認など後戻りできない操作の途中でパンくずをクリックすると、確認モーダルが表示されてから移動します。WordPressの管理画面的なUIの誤操作防止に役立ちます。

JSclickjsoverlay</> コードを見る

03-14-11

多言語切替対応パンくず

JP/ENボタンを切り替えると、パンくずの各階層ラベルがフェードしながら多言語表示に切り替わります。WordPressの多言語サイト(WPML等)のヘッダー演出に応用できます。

JSjs</> コードを見る

03-14-12

進捗ステップ色分けパンくず

完了・現在地・未到達をドットの色とサイズで区別する進捗パンくずです。クリックで現在地とバーの塗りが滑らかに切り替わり、WordPressのEC購入フローや申込フォームの進行表示に使えます。

JSclickjsinput</> コードを見る

153. 検索候補オートコンプリート演出

03-15-01

フェードイン候補リスト

1文字入力するごとに候補が1件ずつふわっとフェードインしながら追加表示されます。WordPressのヘッダー検索窓や商品検索の入力補助に。

JSjsinput</> コードを見る

03-15-02

一致部分ハイライト候補

入力した文字列と一致する部分だけ候補内で太字・色付きハイライトされます。WordPressの記事検索やFAQ検索で該当箇所を視覚的に伝えるのに有効です。

JSjsinput</> コードを見る

03-15-03

カテゴリ別グループ化候補

候補が「記事」「商品」「ページ」などカテゴリごとに見出し付きでグループ表示されます。WordPressのサイト内横断検索で種別を分かりやすく示すのに便利です。

JSautojs</> コードを見る

検索履歴パネル

入力欄にフォーカスすると最近検索したキーワードが一覧表示され、クリックで再入力できます。WordPressの会員サイトや社内検索での再検索を効率化します。

JSclickjsinput</> コードを見る

03-15-05

画像サムネイル付き商品候補

入力に応じてサムネイル画像・商品名・価格をセットにした候補が表示されるEC向けオートコンプリート。WooCommerceの商品検索窓の演出に応用できます。

JSjsinput</> コードを見る

03-15-07

矢印キーハイライト移動候補

候補を↑↓キーで移動でき、選択中の候補がハイライトされます。リスト内スクロールのみで自動追従し、Enterで確定。管理画面のクイック検索などに便利です。

JSscrollautojs</> コードを見る

03-15-08

タグ化マルチキーワード検索

候補を選択すると入力欄の上にタグとして積み重なり、複数条件のAND検索を表現できます。WordPressの求人・不動産などの複合条件検索UIに応用可能です。

JSjsinput</> コードを見る

タップして話しかけてください

03-15-09

音声入力風マイクアイコン検索

マイクボタンを押すと波形風のパルスアニメーションとステータス文言が変化する音声検索の演出モック。WordPressのモバイル向け検索窓のアクセントに。

JSmobileclickjs</> コードを見る

03-15-10

スペルミス訂正「もしかして」表示

登録キーワードに近い入力があると「もしかして: 〇〇」という訂正候補を提示します。WordPressの検索結果0件ページでの離脱防止に有効な演出です。

JSjsinput</> コードを見る

03-15-11

ローディングスピナー付き候補欄

入力後に検索中を示すスピナーが一瞬表示されてから候補が現れる、非同期通信を模したオートコンプリート。実際のAjax検索の待機演出として流用できます。

JSjsinput</> コードを見る

03-15-12

候補ゼロ件時フォールバック提案

一致する候補が無い場合に「よく見られているページ」などの代替提案を表示し、検索行き止まりを防ぎます。WordPressの検索結果ページの離脱対策に有効です。

JSjs</> コードを見る

03. ボタン

詳しく見る

04-01-01

シャインボタン

ホバーで光の帯が斜めに走り抜けるボタン。WordPressのCTAや記事内リンクに使うと上品にクリックを促せます。

CSS onlyhoverclickcss</> コードを見る

お問い合わせ

04-01-02

塗りつぶしスライドボタン

ホバーで背景色が左から満ちて文字色が反転します。WordPressの問い合わせ導線など、確実に気づかせたいボタンに。

CSS onlyhovercss</> コードを見る

サービス一覧へ

04-01-03

矢印スライドボタン

ホバーで矢印が右へ動き、線がすっと伸びるテキストリンク型ボタン。WordPressの「もっと見る」導線に最適です。

CSS onlyhovercss</> コードを見る

04-01-04

リップルボタン

クリックした位置から波紋が広がるマテリアル風の演出。WordPressの資料請求や申込みボタンに押した実感を与えます。

JSclickjs</> コードを見る

04-01-05

3Dプッシュボタン

立体的なボタンがクリックで沈み込む、押し心地のある演出。WordPressの予約・購入ボタンなど行動を強く促す場面に。

CSS onlyclickcss3d</> コードを見る

コンセプトを見る

04-01-06

ボーダードローボタン

ホバーで枠線が四辺を一周するように描かれるボタン。WordPressのブランドサイトやポートフォリオの静かな導線に。

CSS onlyhovercss</> コードを見る

無料ではじめる

04-01-07

グラデーション移動ボタン

ホバーでグラデーションの位置が横にスライドし色味が変化します。WordPressのSaaS風LPや会員登録ボタンに映えます。

CSS onlyhovercss</> コードを見る

採用情報を見る

04-01-08

アイコンスワップボタン

ホバーで矢印が右へ飛び出し、左から別の矢印が入れ替わりで現れます。WordPressの回遊導線に軽快な印象を添えます。

CSS onlyhovercss</> コードを見る

LINEで相談する

04-01-09

パルスCTAボタン

波紋が常時ふわっと広がり続け、視線を自然に集めるCTA。WordPressの固定ヘッダーやサイドバーの相談ボタンに有効です。

CSS onlyautocss</> コードを見る

メニューを見るご予約はこちら

04-01-10

テキストロールボタン

ホバーで文字が上へロールし、下から別の文字が現れる2段テキスト。WordPressの飲食店・サロンサイトの導線に遊び心を。

CSS onlyhovercss</> コードを見る

お試しはこちら

04-01-11

マグネット吸着ボタン

カーソルに引き寄せられるように少しだけ追従して動くボタン。WordPressのLPの目立たせたいCTAに、遊び心のあるインタラクションを加えられます。

JSjs</> コードを見る

今すぐ参加する

04-01-12

ネオングロー枠ボタン

ホバーすると枠線が発光しながら背景色が満ちるネオン風ボタン。WordPressのイベント・エンタメ系サイトのダークテーマに映えるCTAです。

CSS onlyhovercssdark</> コードを見る

09. フォーム・入力パーツ

お名前

04-02-01

フローティングラベル入力

フォーカスや入力時にラベルが枠上へ浮き上がる入力欄。Contact Form 7のお問い合わせフォームをモダンな見た目に整えたいときに便利です。

CSS onlycssinput</> コードを見る

04-02-02

下線アニメ入力

フォーカスすると下線が中央から左右に伸びる入力欄。WordPressのお問い合わせページで、シンプルながら動きのあるフォームを作れます。

CSS onlycssinput</> コードを見る

利用規約に同意する

04-02-03

アニメーションチェックボックス

チェックマークがシュッと描かれるカスタムチェックボックス。Contact Form 7の同意チェック欄を目を引くデザインに置き換えられます。

CSS onlycssinput</> コードを見る

通知を受け取る

04-02-04

トグルスイッチ

ON/OFFでノブが滑らかに移動し背景色が変わるスイッチ。WordPressの設定画面風UIや、メルマガ購読の選択などに使えます。

CSS onlycssinput</> コードを見る

ご予算(万円)

50

04-02-05

値表示付きレンジスライダー

つまみの上に現在値のバブルが追従するスライダー。WordPressの料金シミュレーションやアンケートフォームの入力に活用できます。

JSjsinput</> コードを見る

製品について
お見積り依頼
採用について
その他

04-02-06

カスタムドロップダウン

クリックで開閉する装飾されたセレクト風メニュー。標準のselectでは難しいデザインを、WordPressのフォームや絞り込みUIで実現できます。

JSclickjsinput</> コードを見る

04-02-07

バリデーションシェイク

空のまま送信すると入力欄が震えてエラーを表示、入力済みなら成功メッセージを表示。Contact Form 7のエラー表示をよりわかりやすく演出できます。

JSclickjsinput</> コードを見る

8文字以上・英数字混在を推奨

04-02-08

パスワード表示切替+強度メーター

目アイコンで表示/非表示を切り替え、入力に応じて強度バーが伸びて色が変化。WordPressの会員登録フォームのカスタマイズに最適です。

JSjsinput</> コードを見る

タップして評価してください

04-02-09

星評価

ホバーで星がプレビュー点灯し、クリックで確定してラベルを表示。WordPressのレビュー投稿フォームや商品評価UIに組み込めます。

JShoverclickjsinput</> コードを見る

04-02-10

展開する検索ボックス

虫眼鏡アイコンをクリックすると入力欄が横にスッと伸びる検索UI。WordPressのヘッダーにコンパクトなサイト内検索を設置したいときに便利です。

JSclickjsinput</> コードを見る

認証コードを入力してください

04-02-11

分割認証コード入力(OTP)

1桁入力するたびに自動で次の枠へフォーカスが移動する認証コード欄。WordPressの会員サイトの二段階認証やメール確認画面に利用できます。

JSautojsinput</> コードを見る

ここにファイルをドラッグ、またはクリックして選択選択されていません

04-02-12

ファイルアップロードドロップゾーン

ドラッグ&ドロップまたはクリックでファイルを選択でき、枠の色が変化して受付状態を知らせます。WordPressの応募フォームや画像投稿欄に活用できます。

JSclickdragjsinput</> コードを見る

46. フォーム応用パターン

お名前

山田太郎

04-03-01

インライン編集フィールド

テキストをクリックするとその場で編集可能になり、保存ボタンで確定します。会員情報の編集画面など、Contact Form 7と組み合わせたプロフィール編集UIに使えます。

JSclickjs</> コードを見る

スキルタグ

WordPress PHP

04-03-02

タグ入力(チップ追加)

Enterキーでタグがチップとして追加され、×ボタンで削除できる入力欄。Contact Form 7でスキルや興味分野を複数選択させたい場合に便利です。

JSjsinput</> コードを見る

04-03-03

オートコンプリート候補リスト

入力に応じて候補が下に絞り込まれて表示される検索補助UI。Contact Form 7の住所入力やお問い合わせ項目選択の入力補助に活用できます。

JSjsinput</> コードを見る

説明会への参加を希望しますか?

はいいいえ

希望日

04-03-04

条件分岐フォーム

「はい/いいえ」の選択に応じて追加の質問欄が現れたり消えたりします。Contact Form 7のアンケートで不要な項目を隠したいときに役立ちます。

JSjs</> コードを見る

ここにファイルをドラッグ&ドロップ

04-03-05

ファイルドラッグ&ドロップアップロード

枠内にファイルをドラッグすると強調表示され、ドロップするとファイル名が一覧に並びます。Contact Form 7の履歴書添付やポートフォリオ提出フォームに便利です。

JSdragjsinput</> コードを見る

1 2 3

ステップ 1: 基本情報の入力

04-03-06

複数ステップ進捗フォーム(別角度)

上部のドットと線で進捗を示し、次へ/戻るボタンでステップを移動します。Contact Form 7の長い申込フォームを段階的に見せたいときに使えます。

JSjsinput</> コードを見る

プライバシーポリシーに同意する

04-03-07

同意チェックで送信ボタン活性化

チェックボックスにチェックが入るまで送信ボタンがグレーアウトして押せません。Contact Form 7の個人情報同意フローで誤送信を防ぎたい場合に使えます。

JSclickjsinput</> コードを見る

招待コード

メールに記載された8桁の招待コードを入力してください。お持ちでない場合は事務局までお問い合わせください。

04-03-08

フォーム内ヘルプ吹き出し

入力欄横の?アイコンをクリックすると説明ポップが表示されます。Contact Form 7の分かりにくい入力項目に補足説明を添えたいときに便利です。

JSclickjsoverlayinput</> コードを見る

お名前必須

会社名任意

メールアドレス必須

04-03-09

必須/任意ラベルの使い分け

必須バッジと任意バッジを項目名の横に並べた入力欄一覧です。Contact Form 7で入力必須項目を一目で分かるようにしたいときの基本パターンです。

CSS onlycssinput</> コードを見る

送信が完了しました。ご連絡ありがとうございます。

04-03-10

送信後の確認画面遷移

送信ボタンを押すと入力フォームが「送信完了」表示に切り替わります。Contact Form 7送信後のサンクスメッセージをその場で表現したいときに使えます。

JSclickjsinput</> コードを見る

お問い合わせ内容(200文字以内)

0 / 200

04-03-11

文字数カウンター付きテキストエリア

入力中の文字数がリアルタイムで表示され、上限に近づくと色が変わります。Contact Form 7の文字数制限があるお問い合わせ欄に使えます。

JSjsinput</> コードを見る

パスワード

強度: -

04-03-12

パスワード強度メーター付き入力欄

入力に応じてメーターが伸び強度ラベルが変化し、表示ボタンで平文確認もできます。会員登録フォームでパスワードの強さをその場で伝えたいときに使えます。

JSjsinput</> コードを見る

55. 高度なファイルアップロードUI

design.jpg

0%

report.pdf

0%

video.mp4

0%

04-04-01

複数ファイル同時アップロード進捗リスト

複数ファイルの進捗バーが個別に伸びていく一覧表示。問い合わせフォームや投稿フォームの複数添付UIに使える。

JSjsinput</> コードを見る

04-04-02

円形プログレスのアップロードアイコン

ファイルアイコンを円形プログレスが取り囲み、完了するとチェックマークに切り替わる。プロフィール画像アップロード等に。

CSS onlycss</> コードを見る

design.jpg / アップロード中…

04-04-03

アップロード完了→サムネイル切替

進捗が完了するとファイルアイコンが画像サムネイル風カードへ切り替わる。商品画像登録フォームなどに最適。

JSjsinput</> コードを見る

ここにファイルをドラッグ

04-04-04

ドラッグ中のドロップゾーン強調演出

ファイルをドラッグして重なると枠が波打つように強調表示される。応募フォームの添付欄などに使える。

JSautodragjsinput</> コードを見る

photo1.png待機中

photo2.png待機中

photo3.png待機中

04-04-05

アップロードキュー管理リスト

待機中・アップロード中・完了のステータスが順番に切り替わるキュー表示。一括登録フォームの進行状況表示に。

JSjsinput</> コードを見る

全体の進捗0%

04-04-06

一括アップロード全体進捗バー

個別ファイルの進捗と連動して全体進捗バーが伸びる。まとめてアップロードするフォームの状況把握に。

JSjsinput</> コードを見る

アップロードに失敗しました

04-04-07

エラー・リトライ付きアップロード

失敗表示から「再試行」ボタンで進捗が再開し成功する演出。回線不安定時のフォームUXを想定した表現。

JSjsinput</> コードを見る

圧縮中…

完了しました

04-04-08

画像圧縮中インジケーター

「圧縮中…」のスピナーから完了表示へ切り替わる演出。画像アップロード前の自動最適化処理の表現に。

CSS onlyautocss</> コードを見る

ファイルを分割して送信中…

04-04-09

チャンク分割アップロード可視化

ファイルが複数の小片に分かれて順番に送信されていくイメージ演出。大容量ファイルの分割送信表現に。

CSS onlyclickcssinput</> コードを見る

invoice.pdf

avatar.png

notes.docx

chart.xlsx

04-04-10

ファイル一覧の並び替え・削除アニメーション

アップロード済みファイルを削除すると他の項目が詰めるようになめらかに移動する。添付ファイル管理欄に。

JSjs</> コードを見る

+

3/6 枚選択中

04-04-11

画像プレビューサムネイル一覧UI

選択した画像がサムネイル一覧で並び、×ボタンで個別に取り消せる送信前プレビュー。商品登録フォームの複数画像添付確認に使えます。

JSclickjsinput</> コードを見る

ストレージ使用量3.2GB / 5GB

04-04-12

ストレージ使用量メーター演出

ファイル追加のたびに使用容量バーが伸び、上限に近づくと色が黄色→赤へ変化し警告文が表示されます。会員サイトの容量制限つきアップロード機能に使えます。

JSjs</> コードを見る

111. マルチステップフォーム・ウィザード演出

お名前を入力してください

メールアドレスを入力してください

ご希望のプランをお選びください

1 / 3

04-09-01

横スライド式フォームウィザード

「次へ」を押すたびに入力パネルが横にスライドして切り替わる複数ステップのフォームです。Contact Form 7の長い申込フォームを1問ずつ見せて離脱を防ぎたいときに活用できます。

JSclickjsinput</> コードを見る

1基本情報

2連絡先

3確認

お名前

電話番号

入力内容をご確認の上、送信してください。

04-09-02

丸数字ステップインジケータ付きフォーム

上部の丸数字が現在地を示し、進むたびに完了ステップが緑のチェック色に変わるフォームです。会員登録や資料請求など複数ページにまたがる申込フローの進捗を分かりやすく伝えられます。

JSjsinput</> コードを見る

お申し込み手続き 33%

お名前

ご住所

お支払い方法

04-09-03

伸びるプログレスバー申込みフォーム

入力の進み具合に合わせて上部のバーがぐんぐん伸びていく申込みフォームです。Contact Form 7の入会申込みや予約フォームで完了までの目安を視覚的に伝えたいときに使えます。

JSjsinput</> コードを見る

Q1

好きな作業スタイルは?

Q2

得意な分野は?

RESULT

診断結果

あなたは「戦略デザイナー」タイプです。

04-09-04

フェードクロス診断カード

選択肢をクリックするたびにカードがふわっとクロスフェードして次の質問へ切り替わる診断・アンケート風フォームです。相性診断やおすすめ商品診断など遊び心のあるヒアリングフォームに活用できます。

JSclickjsinput</> コードを見る

STEP 1

ご希望の来店日

STEP 2

ご希望の時間帯

STEP 3

ご来店人数

04-09-05

矢印送りカルーセル型フォーム

左右の矢印ボタンでステップを行き来できるカルーセル型の予約フォームです。日付・時間・人数など項目数の多い予約フォームをコンパクトな1画面にまとめたいときに便利です。

JSjsinput</> コードを見る

利用目的
業種
チーム人数

サービスの利用目的を選んでください

04-09-06

チェックリスト式オンボーディングフォーム

上部のチェックリストを1項目ずつ選択式で埋めていくオンボーディング風フォームです。初期設定ウィザードや会員登録直後のヒアリングフォームに使うと入力のハードルを下げられます。

JSjsinput</> コードを見る

メールアドレス

表示名

アカウントの作成が完了しました。

04-09-07

パンくず型ステップナビフォーム

①②③のパンくずナビで現在地と完了済みステップが一目で分かるフォームです。完了済みの項目はクリックで戻れるため、Contact Form 7の会員登録フォームで後から修正させたい場面に向いています。

JSclickjsinput</> コードを見る

1お届け先情報

2お支払い方法

3ご注文確認

内容をご確認の上、注文を確定してください。

04-09-08

積み上げアコーディオンステップフォーム

各ステップがアコーディオンのように開閉しながら縦に積み上がっていくフォームです。入力項目が多い注文フォームをページ遷移なしのスクロール1本で完結させたいときに使えます。

JSscrolljsinput</> コードを見る

3残り

お名前

ご連絡先

ご要望

04-09-09

円形プログレスの残りステップ表示フォーム

円形プログレスバーが「残りあと何問か」を直感的に示すフォームです。数ステップで終わる無料相談申込みなど、ゴールまでの距離感を伝えたい問い合わせフォームに向いています。

JSjsinput</> コードを見る

お名前

メールアドレス

入力内容の確認

お名前: -
メール: -

04-09-10

サマリーへ滑らかに遷移する確認フォーム

入力が終わると内容のサマリー画面へふわっとクロスフェードして切り替わる確認フォームです。Contact Form 7の申込フォームで送信前に内容確認をさせたいときの仕上げに使えます。

JSclickjsinput</> コードを見る

ご相談内容を教えてください

04-09-11

チャット風会話型ウィザードフォーム

選択肢をタップするたびに自分の回答が吹き出しで積み上がり、ボットが次の質問を投げかけるチャット形式の入力フォームです。Contact Form 7の問い合わせフォームを親しみやすい対話形式に見せたいときに使えます。

JSmobileclickjsinput</> コードを見る

STEP 1 / 3

ご利用目的は?

該当するものをお選びください

04-09-12

3Dフリップ式ステップカード

「次へ」を押すとカードが縦軸でくるりと回転しながら内容が切り替わる立体的な演出のウィザードです。会員登録フォームやアンケートフォームに立体感のあるアクセントを加えたいときに使えます。

JSclickjs3dinput</> コードを見る

125. リアルタイムバリデーション演出付きフォーム

自己紹介文

0 / 120

04-11-01

文字数カウンターが色変化するテキストエリア

入力中の文字数がリアルタイムに表示され、上限に近づくと警告色に変わるテキストエリア。WordPressのお問い合わせフォームで文字数制限のあるメッセージ欄に使うと、送信前に文字量を意識してもらえます。

JSclickjsinput</> コードを見る

04-11-02

メール形式判定チェックマーク入力欄

入力しながらメールアドレスの形式を判定し、正しい形式になった瞬間にチェックマークがふわっと現れる入力欄。Contact Form 7のメールアドレス欄に組み込むと入力ミスの早期発見につながります。

JSjsinput</> コードを見る

強度: -

04-11-03

パスワード強度可視化バー

入力中のパスワードの強度をリアルタイムでバーの長さと色に反映する入力欄。WordPressの会員登録フォームで安全なパスワード設定を視覚的に促せます。

JSjsinput</> コードを見る

お名前必須

この項目は必須です

04-11-04

未入力シェイクフィールド

必須項目からフォーカスが外れた際、未入力だと入力欄が震えて警告するフィールド。Contact Form 7の必須項目にエラー表示のアクセントを加える際に使えます。

JSjsinput</> コードを見る

04-11-05

チェックアイコンがドローインする入力欄

条件を満たす文字数を入力すると、円とチェックマークが順番に描かれるように現れる入力欄。WordPressのユーザー名登録フォームで入力完了の達成感を演出できます。

JSjsinput</> コードを見る

確認用のパスワードを入力してください

04-11-06

確認用パスワードのリアルタイム一致判定

確認用パスワード欄に入力するたびに元のパスワードと一致するかを判定し、メッセージと枠色で知らせる欄。会員登録フォームのパスワード再入力欄に使うと入力ミスをその場で防げます。

JSjsinput</> コードを見る

電話番号

04-11-07

自動フォーマット電話番号欄

数字を入力するたびにハイフン区切りへ自動整形される電話番号欄。WordPressの予約フォームや問い合わせフォームで入力ゆれのない電話番号を集められます。

JSautojsinput</> コードを見る

郵便番号

04-11-08

赤枠パルスエラーフィールド

フォーカスを外した際に入力形式が誤っていると、枠線がパルス状に光って知らせる入力欄。Contact Form 7の郵便番号欄など形式チェックが必要な項目に活用できます。

JSjsinput</> コードを見る

会社名

会社名を入力してください

04-11-09

フェードインエラーメッセージ欄

フォーカスアウト時に未入力だった場合のみ、エラーメッセージがふわっと下からフェードインする入力欄。WordPressの会社概要フォームなどでエラー表示を控えめかつ丁寧に見せられます。

JSjsinput</> コードを見る

04-11-10

全項目入力で有効化される送信ボタン

すべての入力欄が埋まって初めて送信ボタンが色付きで押せるようになるフォーム。WordPressのお問い合わせフォームで未入力のまま送信されるのを防ぎたいときに便利です。

JSclickjsinput</> コードを見る

希望ユーザー名

4文字以上入力すると空き状況を確認します

04-11-11

空き状況を確認中スピナー付きユーザー名入力欄

入力が止まると一瞬スピナーが回り、サーバー確認をしているかのような演出のあとに利用可否のアイコンが表示される入力欄。WordPressの会員登録フォームでユーザー名の重複チェックUIの参考になります。

JSjsinput</> コードを見る

利用規約に同意する

04-11-12

同意トグルで有効化される送信ボタン

カスタムのトグルスイッチをオンにするとボタンの色とラベル文言が切り替わり送信可能になるフォームパーツ。WordPressの会員登録や資料請求フォームの規約同意欄に使えます。

JSclickjsinput</> コードを見る

154. アンケート・チェックリスト回答演出

準備物チェックリスト

本人確認書類
印鑑
申込用紙

04-14-01

チェックでバウンドするチェックリスト

項目をチェックすると四角がぽよんと弾んでチェックマークが描かれます。来店予約や申込フォームの持ち物チェックリストに使えます。

JSjsinput</> コードを見る

Q2. 当サービスをどこで知りましたか?

2 / 5

04-14-02

進捗バー連動アンケートフォーム

次へ/戻るを押すたびに上部の進捗バーと分数表示が滑らかに伸縮します。複数問の顧客満足度アンケートで残り設問数を可視化したいときに使えます。

JSclickjs</> コードを見る

現在のご利用プランは?

04-14-03

単一選択でカードがハイライト

カードをクリックすると枠と背景色が変わり選択状態が一目で分かります。プラン選択やアンケートの単一回答項目にそのまま使えます。

JSclickjs</> コードを見る

興味のある分野を選択

0 件選択中

04-14-04

選択数カウンター付きチェックリスト

複数選択のたびにカウンターがカウントアップ/ダウンし選んだ数がすぐ分かります。興味関心を複数選ばせる会員登録アンケートに便利です。

JSjs</> コードを見る

今回の対応にご満足いただけましたか?

🙂

左右のボタンで回答してください

04-14-05

はい/いいえのスワイプ式アンケート

ボタンを押すとカードが左右に流れて次の状態を表示するスワイプ風演出です。簡易満足度アンケートやYES/NOアンケートに使えます。

JSmobileclickautodragjs</> コードを見る

サポート対応の評価

評価を選択してください

04-14-06

クリックで選ぶ5段階評価アンケート

星をクリックすると該当位置まで黄色く塗られ評価テキストが変化します。カスタマーサポートの満足度アンケートの定番パーツです。

JSclickjs</> コードを見る

Q. 現在お住まいは持ち家ですか?

04-14-07

条件分岐で次の質問が変わるアンケート

選んだ回答によって続く質問文がふわっと切り替わる分岐型アンケートです。不動産や保険の事前ヒアリングフォームに応用できます。

JSjsinput</> コードを見る

出発前チェックリスト

チケット確認
パスポート
荷物準備

全項目完了しました!

04-14-08

全項目チェックで完了アニメーション

すべてのチェックが揃うと一覧が隠れ完了メッセージがふわっと現れます。旅行・イベント準備の持ち物チェックリストで達成感を演出できます。

JSjs</> コードを見る

重要だと思う順に並べ替え

⋮⋮価格
⋮⋮品質
⋮⋮サポート

04-14-09

ドラッグで優先順位を並べ替えるアンケート

グリップ部分をドラッグすると項目の順序を入れ替えられる優先度アンケートです。商品開発の優先順位ヒアリングフォームに使えます。

JSdragjsinput</> コードを見る

今日の気分は?

04-14-10

絵文字選択式の満足度アンケート

絵文字をクリックすると選ばれたものだけ拡大表示されます。カジュアルなアプリ内アンケートやイベント後の一言アンケートに向きます。

JSclickjs</> コードを見る

1/4

質問1: お名前を入力してください

04-14-11

質問番号がアニメーションするアンケートナビ

「次の質問へ」を押すと現在の番号が上に流れて次の番号がスライドインします。1問ずつ表示するタイプのアンケートフォームのヘッダーに使えます。

JSclickautojsinput</> コードを見る

ご回答: -

ご協力ありがとうございました。

04-14-12

回答後にサマリーが表示される完了画面

送信すると選んだ回答内容を含む完了サマリーに切り替わります。アンケートの最後に回答内容を振り返らせたいときに便利です。

JSclickjsinput</> コードを見る

04. カード

春の京都を歩く旅

桜の名所を巡る2泊3日のモデルコースをご紹介します。

05-01-01

ホバーリフトカード

ホバーでカードが浮き上がり、影が深くなる定番の動き。WordPressの記事一覧やサービス紹介グリッドに最適です。

CSS onlyhovercss</> コードを見る

読む →

自家焙煎コーヒーの淹れ方

2026.06.18

05-01-02

画像ズームカード

ホバーでサムネイル部分だけがゆっくり拡大するカード。WordPressのブログカードに追加すると写真の印象が引き立ちます。

CSS onlyhovercss</> コードを見る

沖縄の海と離島めぐり

エメラルドグリーンの海が広がる絶景スポット特集。

05-01-03

キャプションスライドカード

ホバーで下からオーバーレイキャプションがスライドイン。WordPressのギャラリーや制作実績一覧で写真を隠さず情報を出せます。

CSS onlyhovercssoverlay</> コードを見る

Aoi

デザイナー

ホバーで詳細を表示

青井さくら

UI/UXデザイン歴8年。ブランドサイトのデザインを中心に活動しています。

05-01-04

フリップカード

ホバーで3D回転して裏面の詳細が現れるカード。WordPressのスタッフ紹介やサービス説明にインパクトを加えられます。

CSS onlyhovercss3d</> コードを見る

NEW

プレミアムプラン

マウスの位置に合わせてカードが立体的に傾きます。

05-01-05

3Dチルトカード

マウス位置に応じてカードが立体的に傾くリッチな演出。WordPressのLPでキャンペーンや目玉商品の訴求に効果的です。

JSjs3d</> コードを見る

会員限定コンテンツ

グラデーションの枠が回転し続けて視線を集めます。

詳しく見る

05-01-06

グラデーションボーダーカード

conic-gradientの枠が回転し続けるカード。WordPressで注目させたい会員募集やキャンペーン枠にアクセントを与えます。

CSS onlycss3d</> コードを見る

高速表示

表示速度を最適化

SEO対策

内部構造を改善

保守運用

更新を毎月代行

05-01-07

スタッガー出現カード

スクロールで画面に入ると小カード3枚が時間差でフェードアップ。WordPressのサービス紹介セクションの導入演出に使えます。

CSS onlyscrollcss</> コードを見る

ライト

¥980/月

基本機能
メール対応

人気No.1

スタンダード

¥2,980/月

全機能利用可
電話サポート

プロ

¥5,980/月

専任担当者
優先サポート

05-01-08

料金プランカード

3枚並びで中央の人気プランを強調し、ホバーでさらに拡大。WordPressの料金ページにそのまま流用できる構成です。

CSS onlyhovercss</> コードを見る

YK

山田桂子

フォトグラファー / 東京

05-01-09

プロフィールカード

ホバーでSNSアイコンが下からスライドイン。WordPressの運営者紹介やチームメンバー一覧ページに使いやすい形です。

CSS onlyhovercss</> コードを見る

レシピ

2026.07.01

夏野菜たっぷり！15分で作れる冷製パスタの簡単レシピまとめ

続きを読む →

05-01-10

ブログ記事カード

サムネ・カテゴリバッジ・日付・2行制限タイトルを備えた実用型。ホバーでバッジ色が変わりタイトルに下線が伸びます。WordPressの記事一覧の定番形です。

CSS onlyhovercss</> コードを見る

お知らせ資料

ホバーで重なった用紙が扇状に開きます。

05-01-11

スタック紙めくりカード

普段は重なって見える3枚のカードが、ホバーで扇状に開いて奥の情報を覗かせます。WordPressの資料ダウンロードや事例紹介の一覧に個性を添えられます。

CSS onlyhovercss</> コードを見る

マウスを重ねてください

カーソルの位置に光が追従するインタラクティブなカードです。

05-01-12

カーソル追従スポットライトカード

マウスの位置にあわせて柔らかな光がカード内を動き回る演出。WordPressのダークテーマのサービス紹介や会員限定コンテンツの案内カードに向いています。

JSjsdark</> コードを見る

12. テーブル・料金・比較

フリー

¥0/月

基本機能
1ユーザー
1GB

選択

3列料金表

中央プランを強調表示し、ホバーで各列が持ち上がる料金表。WordPressの料金ページやLPの価格提示に。

CSS onlyhovercss</> コードを見る

月額年額2ヶ月無料

フリー

¥0

スタンダード

¥980

プロ

¥2,980

05-02-02

月額/年額トグル料金表

スイッチで月額と年額を切り替え、価格がふわっと変化。WordPressのサブスク型サービス料金表に最適。

JSjs</> コードを見る

機能	フリー	スタンダード	プロ
基本機能	✓	✓	✓
広告非表示	×	✓	✓
優先サポート	×	✓	✓
API連携	×	×	✓
専任担当	×	×	✓

05-02-03

機能比較表(○×)

行ホバーでハイライトし、対応は緑✓・非対応はグレー×で表示。WordPressのプラン比較セクションに。

CSS onlyhovercss</> コードを見る

チーム人数で料金を試算

5 人

基本料金¥5,000

1人あたり ¥800 ×5¥4,000

月額合計¥9,000

05-02-04

スライダー料金シミュレータ

スライダーで人数を動かすと料金がリアルタイム計算。WordPressの見積もりページや料金体験に。

JSjs</> コードを見る

日付	プラン	状態	金額
07/01	スタンダード	完了	¥980
06/01	スタンダード	完了	¥980
05/01	プロ	完了	¥2,980
04/01	プロ	完了	¥2,980
03/01	フリー	—	¥0

05-02-05

縞模様データテーブル

ゼブラ模様と行ホバーで視認性を高めた汎用テーブル。WordPressの実績一覧や履歴表示に幅広く使える。

CSS onlyhovercss</> コードを見る

商品	価格	販売数
プランA	¥980	120
プランB	¥2,980	48
プランC	¥480	310
プランD	¥1,980	76

05-02-06

ソート可能テーブル

見出しクリックで数値・文字を昇降ソートし矢印で方向を表示。WordPressのランキングや一覧に。

JSclickjs</> コードを見る

処理速度

92

安定性

85

使いやすさ

78

サポート

96

05-02-07

プログレスバー付きスペック表

各評価を伸びるバーで視覚化し、表示時にアニメーション。WordPressの製品スペックや評価表示に。

CSS onlyscrollcss</> コードを見る

直接紹介広告

1月

2月

3月

05-02-08

積み上げ横棒比較

複数項目を色分けした積み上げ横棒で比較し、表示時に伸びる。WordPressの流入分析や構成比の可視化に。

CSS onlyscrollcss</> コードを見る

フリー

¥0

詳細を見る

1ユーザー
1GB
基本機能

スタンダード

¥980

詳細を見る

5ユーザー
50GB
広告非表示
優先サポート

プロ

¥2,980

詳細を見る

無制限
500GB
API連携
専任担当

05-02-09

フリップ料金カード

ホバーでカードが裏返り詳細な内訳を表示する料金カード3枚。WordPressのインタラクティブな料金提示に。

CSS onlyhovercss3d</> コードを見る

フリー

¥0/月

個人でお試し

人気No.1

スタンダード

¥980/月

中小規模におすすめ

プロ

¥2,980/月

大規模・法人向け

05-02-10

レスポンシブ縦積みプラン

カード型に縦積みされた料金プランで人気プランにバッジを表示。WordPressのモバイル向け料金表示に。

CSS onlymobilecss</> コードを見る

機能	フリー	スタンダード	プロ	エンタープライズ
ユーザー数	1	5	30	無制限
ストレージ	1GB	50GB	500GB	無制限
API連携	×	×	○	○
専任担当	×	×	×	○

05-02-11

先頭列固定の横スクロール比較表

列数が多い料金表を横スクロールでき、項目名の列だけ画面に固定されます。WordPressでプラン数が多い比較表をスマホでも見やすく提供できます。

CSS onlymobilescrollcss</> コードを見る

フリー

¥0

スタンダード

¥980

プロ

¥2,980

05-02-12

通貨切替料金表

JPY/USDのボタンで料金表記が切り替わります。海外向けにも展開するWordPressサービスサイトの料金ページに便利です。

JSjsoverlay</> コードを見る

13. タイムライン・ステップ・プロセス

お問い合わせフォームからご相談
ヒアリング要件を整理します
制作デザイン・実装を進行
納品公開して運用開始

05-03-01

縦タイムライン線描画

縦線が上から伸び、各ノードと内容が順に点灯します。WordPressの制作フロー紹介や会社沿革の表示に最適です。

CSS onlycss</> コードを見る

1お問い合わせ
2ヒアリング
3制作
4納品

05-03-02

横ステップインジケータ

番号丸と接続線で進捗を示し、アクティブなステップを強調します。WordPressの購入フローや申込みステップの表示に便利です。

CSS onlycss</> コードを見る

お問い合わせご相談を受付

ヒアリング要件を整理

制作デザイン実装

納品公開・運用

05-03-03

交互配置タイムライン

左右交互にカードが並び、表示時に左右からスライドインします。WordPressの実績ストーリーや制作工程の紹介に効果的です。

CSS onlyscrollcss</> コードを見る

01お問い合わせ

まずはご相談を

02ヒアリング

要件を整理

03制作

実装を進行

05-03-04

番号付きプロセスカード

大きな番号入りの手順カードが横並びになり、ホバーで持ち上がります。WordPressのサービス案内やご利用の流れに使えます。

CSS onlyhoverautocss</> コードを見る

お問い合わせ

ヒアリング

制作・納品

05-03-05

アニメ矢印フロー図

カード間を流れる点線の矢印でプロセスをつなぎます。WordPressのワークフロー説明やサービス連携図の可視化に役立ちます。

CSS onlyautocss</> コードを見る

ご要望の確認
お見積り提示
デザイン制作
公開・納品

05-03-06

チェックリスト進捗

項目が順にチェックされていくアニメーションです。WordPressの制作進行状況や導入チェックリストの表示に向いています。

CSS onlycss</> コードを見る

1お問い合わせ 2制作 3納品

05-03-07

ジグザグ工程

上下ジグザグに配置した工程をSVGの曲線パスでつなぎます。WordPressの制作ステップやロードマップを楽しく見せられます。

CSS onlycsssvg</> コードを見る

制作
フロー 1相談 2設計 3制作 4納品

05-03-08

円形ステップ(サークルフロー)

円環上に4工程を配置し、中心にラベルを置きます。WordPressの循環するサービスサイクルやPDCAの図解表示に使えます。

CSS onlycss</> コードを見る

企画

設計

制作

納品

1週2週3週4週

05-03-09

ガントチャート風スケジュール

週ごとの横棒バーが表示時に左から伸びます。WordPressのプロジェクトスケジュールや制作期間の目安表示に最適です。

CSS onlyscrollcss</> コードを見る

フォームまたはお電話でご相談内容をお聞かせください。

目的やご要望を整理し、最適なプランをご提案します。

デザインから実装まで進め、公開・運用を開始します。

05-03-10

縦アコーディオンステップ

クリックで詳細が開き、線上のノードが色づきます。WordPressのご利用の流れやFAQ付き工程紹介にそのまま使えます。

JSclickautojs</> コードを見る

お問い合わせ

フォームからご相談内容をお送りください。1営業日以内に返信します。

お見積り

要件を整理し、最適なプランと概算費用をご提案します。

ご契約・着手

内容にご納得いただけたら契約し、制作を開始します。

05-03-11

タブ切替式工程解説

番号タブをクリックすると各工程の説明パネルがフェードで切り替わります。WordPressのご利用の流れをコンパクトに見せたいときに便利です。

JSclickautojs</> コードを見る

01ヒアリング

ご要望を伺います

02設計

構成を設計します

03制作

デザイン・実装

04納品

公開・運用開始

05-03-12

横スクロールスナップ工程カード

指でスワイプまたはドラッグすると工程カードが1枚ずつピタッと止まる横スクロールUIです。WordPressのスマホビューでの工程紹介に向いています。

CSS onlymobilescrolldragcss</> コードを見る

14. 実績・数字・統計

0導入企業数

0顧客満足度

0実績年数

0サポート対応

05-04-01

カウントアップ数字グリッド

4つの実績数字が画面内で0からカウントアップします。WordPressの会社概要や実績セクションで信頼感を演出できます。

JSscrolljs</> コードを見る

0%

目標達成率

05-04-02

円グラフ(ドーナツ)アニメ

SVG円のstroke-dashoffsetで表示時に円弧が伸び、中央のパーセントも連動します。WordPressのKPI表示や達成率の可視化に最適です。

JSscrolljssvg</> コードを見る

88%売上目標

64%新規獲得

95%継続率

05-04-03

円形プログレスリング複数

3つの達成率リングが画面内で順に伸びます。WordPressのダッシュボードや部門別実績の並列表示に使えます。

CSS onlyscrollcss</> コードを見る

認知度

82

信頼性

91

使いやすさ

74

サポート

88

05-04-04

横棒グラフアニメ

複数項目の横棒が表示時に左から伸び、値ラベルが末尾に付きます。WordPressのアンケート結果や評価指標の可視化に便利です。

CSS onlyscrollcss</> コードを見る

4月

5月

6月

7月

8月

9月

05-04-05

縦棒グラフアニメ

月別の縦棒が表示時に下から伸び上がります。WordPressの売上推移やアクセス数の月次レポートに活用できます。

CSS onlyscrollcss</> コードを見る

月間売上 ¥8.4M ▲ 12.5%

解約率 2.1% ▼ 0.8%

新規会員 1,340 ▲ 6.2%

05-04-06

KPIカード(増減矢印付き)

数値と前月比の▲▼バッジを表示し、ホバーでカードが浮き上がります。WordPressの管理画面風レポートやダッシュボードに使えます。

CSS onlyhovercss</> コードを見る

0点

総合パフォーマンススコア

05-04-07

パーセンテージゲージ(半円メーター)

半円SVGゲージの弧と針が目標値まで動きます。WordPressの評価スコアや達成度の直感的な表示に向いています。

JSjssvg</> コードを見る

四半期ごとの成長推移

05-04-08

折れ線グラフ描画

SVGパスのstroke-dashで折れ線が左から描かれ、頂点が順に点灯します。WordPressの成長トレンドや推移レポートに使えます。

CSS onlycsssvg</> コードを見る

総合満足度

★★★★★

4.5

リピート意向

4.0

おすすめ度

5.0

05-04-09

星やアイコンで示す評価スタッツ

満足度を星やドットで視覚化し、表示時に左から順次点灯します。WordPressのレビューや顧客評価セクションで効果的です。

CSS onlyscrollcss</> コードを見る

42%

28%

18%

12%

直販
代理店
EC
その他

05-04-10

積み上げ棒/比率バー

1本のバーを色分けして構成比を表示し、表示時に各セグメントが左から広がります。WordPressの売上構成やシェア分析の可視化に使えます。

CSS onlyscrollcss</> コードを見る

月別稼働実績ヒートマップ

少ない多い

05-04-11

実績ヒートマップカレンダー

月ごとの稼働量を濃淡のマスで一覧化するヒートマップです。WordPressの制作実績や更新頻度の可視化、活動量アピールに使えます。

CSS onlycss</> コードを見る

対応速度

継続率

自社業界平均

05-04-12

自社 vs 業界平均バー

自社実績と業界平均を色分けした2本のバーで直接比較します。表示時に左から伸び、優位性を視覚的に訴求できます。WordPressの実績訴求セクションに。

CSS onlyscrollcss</> コードを見る

35. ダッシュボード・ウィジェット

本日のアクセス

1,284

+8.4% 前日比

05-05-01

統計タイル(スパークライン付き)

数値・前日比・小さな折れ線を1枚に凝縮したタイル。WordPress管理画面ダッシュボードや会員マイページのサマリー表示に最適です。

CSS onlycss</> コードを見る

週間投稿数

月

火

水

木

金

土

日

05-05-02

ミニ棒グラフウィジェット

週間データを小さな棒グラフで表示。画面に入ると各バーが下から伸びます。管理画面の活動サマリーや会員の利用状況カードに。

CSS onlyscrollcss</> コードを見る

72% 目標達成率

05-05-03

KPIリングカード

円形プログレスで達成率を可視化。画面に入ると弧が伸びて描かれます。会員のポイント達成率や管理画面の月間目標表示に。

CSS onlyscrollcss</> コードを見る

最近のアクティビティ

記事「夏の新商品」を更新3分前
注文 #1042 を承認21分前
山田さんが新規登録1時間前
お問い合わせが届きました2時間前

05-05-04

アクティビティフィード

アイコン付きの時系列ログをリスト表示。WordPress管理画面の操作履歴や会員マイページの通知一覧として使えます。

CSS onlycss</> コードを見る

通知設定

メール通知

プッシュ通知

週次レポート

ダークモード

05-05-05

トグル設定ウィジェット

複数のON/OFFスイッチを並べた設定パネル。クリックで切替できます。会員マイページの通知設定や管理画面のオプション画面に。

JSclickjs</> コードを見る

通知センター 3

新しいコメントが投稿されました5分前
プラグイン更新が利用可能です1時間前
バックアップが完了しました3時間前
月次レポートを生成しました昨日

05-05-06

通知センターパネル

未読ドット付きの通知一覧と「すべて既読」ボタン。クリックで未読数が減ります。管理画面のお知らせや会員通知に。

JSclickjs</> コードを見る

2026年 7月

日月火水木金土

293012345 6789101112 13141516171819 20212223242526 272829303112

05-05-07

ミニカレンダーウィジェット

当月の小型カレンダーで本日を強調表示。管理画面のスケジュール確認や会員マイページの予約カレンダー枠に配置できます。

CSS onlycss</> コードを見る

プロジェクト進捗

サイトリニューアル82%

LP制作60%

ブログ移行45%

SEO対策93%

05-05-08

タスク進捗バー一覧

複数プロジェクトの進捗バーをまとめて表示。画面に入るとバーが伸びます。管理画面のタスク管理や会員の学習進捗表示に。

CSS onlyscrollcss</> コードを見る

オーガニック45%
SNS30%
広告25%

05-05-09

ドーナツ内訳+凡例

SVGドーナツグラフと色分け凡例のセット。画面に入ると円が描画されます。流入経路の内訳や会員ランク構成の可視化に。

CSS onlyscrollcsssvg</> コードを見る

27°C

東京 · くもり時々晴れ

湿度 62%風 3m/s

05-05-10

天気風カード

SVGなしのCSSで描いた天気アイコンと気温のカード。雲や日差しがゆっくり動きます。管理画面のダッシュボードや会員トップの装飾ウィジェットに。

CSS onlycsssvg</> コードを見る

現在のオンライン会員

128

リアルタイム更新中

05-05-11

リアルタイム人数カウンター

数秒ごとに数値が小さく増減し、リアルタイム感を演出するウィジェットです。WordPress会員サイトの「今アクセス中」表示や在庫残数表示に使えます。

JSjs</> コードを見る

ウィジェット並び替え

⠿アクセス統計
⠿最近のコメント
⠿カレンダー
⠿売上サマリー

ドラッグして並び替え

05-05-12

ドラッグ並び替えウィジェット

項目をドラッグ&ドロップして表示順を入れ替えられるリストです。WordPress管理画面のダッシュボードウィジェット配置カスタマイズに使えます。

JSdragjs</> コードを見る

51. データビジュアライゼーション演出

売上来訪者

05-07-01

アニメーション折れ線グラフ

2系列の折れ線が凡例付きで左から順に描画されます。実績レポートや月次サマリーページに。

CSS onlycss</> コードを見る

商品A 40%
商品B 30%
商品C 20%
商品D 10%

05-07-02

ドーナツチャート内訳アニメ

複数セグメントが順番に描き込まれ中央に合計値が浮かぶ。売上内訳や構成比の見せ場に。

CSS onlycss</> コードを見る

1東京店

92

2大阪店

78

3名古屋店

65

4福岡店

50

5札幌店

34

05-07-03

横棒グラフ・ランキング演出

順位付きの横棒グラフが上位から順に伸びていく。店舗別・商品別ランキング表示に最適。

CSS onlycss</> コードを見る

曜日 × 時間帯アクセス密度

05-07-04

ヒートマップ描画アニメ

グリッド状のセルが色濃度とともに順番に浮かび上がる。アクセス解析や稼働状況の可視化に。

JSjs</> コードを見る

05-07-05

レーダーチャート描画

多角形が中心から外側へ広がるように描画される。サービス評価や能力診断の結果表示に。

CSS onlycss</> コードを見る

Q1Q2Q3Q4

製品A製品B製品C

05-07-06

積み上げ縦棒グラフアニメ

複数系列が下から順に積み重なって伸びる。四半期売上や構成推移の比較資料に。

CSS onlycss</> コードを見る

A

B

C

D

E

F

G

H

05-07-07

バブルチャート出現演出

大小のバブルがポップしながら順に配置される。カテゴリ別ボリュームやポジショニングの図解に。

CSS onlycssoverlay</> コードを見る

0%

達成率

05-07-08

ゲージ・KPIダッシュボード連動アニメ

半円ゲージの針と数値カウントが連動して動く。目標達成率や進捗確認のカードUIに。

JSjs</> コードを見る

検索流入 +12%

SNS経由 +6%

直帰率 -3%

滞在時間 +9%

05-07-09

スパークライン一覧アニメ

複数の小さな折れ線が行ごとに順番に描画される。管理画面のKPI一覧やレポート行に。

CSS onlycss</> コードを見る

ライブ更新中

05-07-10

リアルタイム風データストリームグラフ

右から新しいデータ点が流れ込み続ける折れ線をループ表示。監視ダッシュボードの演出に。

CSS onlyautocss</> コードを見る

64%目標達成率

05-07-11

ワッフルチャート達成率演出

小さな正方形が並ぶワッフルチャートが達成率の分だけ順番にポップして色付きます。目標管理ダッシュボードやKPI達成率の可視化に使えます。

JSjsoverlay</> コードを見る

訪問 12,400

カート追加 8,680

購入 5,580

リピート 3,472

05-07-12

ファネルチャート(コンバージョン)描画演出

訪問→カート→購入と段階が狭まるファネルが上から順に描画されます。ECサイトのコンバージョン分析やLPの離脱率可視化に使えます。

CSS onlycss</> コードを見る

15. お客様の声・レビュー

“

★★★★★

対応が丁寧で、依頼から納品までとてもスムーズでした。また必ずお願いしたいと思えるお店です。

田田中様会社員

06-01-01

引用符付きレビューカード

大きな引用符と星評価、アバターを備えた王道のレビューカード。WordPressのお客様の声セクションにそのまま配置できます。

CSS onlycss</> コードを見る

★★★★★

スタッフの皆さんの笑顔が印象的で、安心して任せられました。
SS.K 様

★★★★★

細かな要望にも柔軟に応えていただき、大満足の仕上がりです。
Y山本様

★★★★☆

初めての利用でしたが、丁寧な説明で不安なく進められました。
MM.T 様

06-01-02

自動スライドレビュー

3件のレビューがフェードで自動的に切り替わります。トップページの限られたスペースで複数の声を見せたい時に最適です。

JSautojs</> コードを見る

★★★★★
期待以上の対応で感動しました。友人にも紹介しています。
佐藤様

★★★★★
納期も早く、品質も高い。ずっとお願いしたいと思います。
H.N 様

★★★★☆
相談しやすい雰囲気で、些細なことも聞けて助かりました。
鈴木様

06-01-03

前後ボタン式レビューカルーセル

◀▶ボタンとドットで1件ずつ切り替えるカルーセル。ユーザーが自分のペースで複数の声を読める導入実績セクションに向きます。

JSjs</> コードを見る

★★★★★

短期間でここまで仕上げていただけるとは。感謝しかありません。丁寧で正確な仕事に脱帽です。

K.I 様

★★★★★

親身な対応でした。

渡辺様

★★★★☆

価格以上の価値がありました。細部までこだわりを感じます。

A.M 様

★★★★★

また利用します。

小林様

06-01-04

レビュー壁(メーソンリー風)

高さの異なるカードを敷き詰め、io-revealで順番にフェードイン。声の多さと熱量を一望させる実績ページに効果的です。

CSS onlycss</> コードを見る

4.8

★★★★★

327件の評価

582%

413%

33%

21%

11%

06-01-05

星評価サマリー

平均点と各星の割合バーを表示。バーは画面表示時に伸びます。商品・サービスの総合評価をひと目で伝えるのに便利です。

CSS onlyscrollcss</> コードを見る

T

問い合わせの返信がとても早くて驚きました！

こちらこそ、ご丁寧にありがとうございました。

運

T

また次回もぜひお願いしますね。安心して任せられます。

06-01-06

吹き出し会話型レビュー

チャット風の左右吹き出しで声を順に表示。親しみやすい雰囲気を出したいサービス紹介やFAQ近辺に合います。

CSS onlycss</> コードを見る

導入企業

NIPPONCORP Sakura Tech MIDORIDESIGN Aoba Works FUJISYSTEMS Hikari Lab

06-01-07

ロゴ流し(導入企業マーキー)

企業名ロゴが無限に横スクロール。信頼感を演出する「導入企業」「取引先」セクションを画像なしで実装できます。

CSS onlyscrollautocss</> コードを見る

★★★★★

対応が早く、仕上がりも完璧でした。

見積もりから納品まで一貫してスピーディで、こちらの細かな要望にも一つひとつ丁寧に応えていただきました。次のプロジェクトでもぜひお願いしたいです。

N.S 様

06-01-08

ホバー展開レビュー

通常は短評のみ、ホバーで全文がスッと展開します。省スペースで多くの声を並べたいレビュー一覧に向いています。

CSS onlyhovercssoverlay</> コードを見る

0:48

R

R.K 様お客様インタビュー

06-01-09

動画風レビューカード

グラデのサムネと再生ボタン付きの動画型レビュー。ホバーで再生アイコンが波打ちます。お客様インタビュー動画への導線に。

CSS onlyhoverautocss</> コードを見る

★★★★★

丁寧な仕事でした。

I 様

★★★★☆

相談しやすかったです。

大野様

★★★★★

期待以上でした。

C.H 様

★★★★★

安心して任せられます。

森様

★★★★★

また利用します。

K.A 様

★★★★☆

満足しています。

藤田様

06-01-10

縦スクロールレビュー2列

2列のレビューが上下逆方向にゆっくり無限スクロール。動きのある背景として声を大量に見せたいヒーロー横に効果的です。

CSS onlyscrollautocss</> コードを見る

N

N.Okada@n_okada_design

対応がとにかく丁寧。相談してから公開までの流れがスムーズで安心して任せられました。

06-01-11

SNS投稿風レビューカード

SNSの投稿を模したレビューカードで、いいねボタンを押すとハートが弾み件数が増加します。WordPressでSNS上の口コミを埋め込み風に見せたいときに使えます。

JSclickjs</> コードを見る

返信がとても早く助かりました。

K 様

仕上がりのクオリティに大満足です。

S 様

スピードも品質も期待以上でした。

T 様

06-01-12

タグ絞り込みレビュー一覧

タグボタンで表示するレビューを絞り込めます。フェードで該当カードのみ表示。WordPressで観点別にレビューを見せたい実績ページに使えます。

JSjs</> コードを見る

21. ブログ・記事コンテンツ

はじめに

この記事では基本的な考え方を解説します。スクロールに応じて左の目次が追従します。全体像を先につかむと理解が早まります。

背景と課題

従来の方法には手間の多さという課題がありました。読者がどこを読んでいるかを可視化することで、長文でも迷子になりません。

具体的な手順

まず準備を整え、次に設定を行い、最後に確認します。段階を分けることで再現性が高まり、ミスも減らせます。

注意点

環境によって挙動が変わる場合があります。事前にバックアップを取り、少しずつ反映すると安全です。

まとめ

要点を押さえれば難しくありません。目次追従は長文記事の読みやすさを大きく高めてくれます。

06-02-01

目次追従ハイライト

内部スクロール領域の現在地に応じて左の目次項目が自動でハイライトされます。長文記事の現在位置を示すWordPressの目次ウィジェットに。スクロールで動作します。

JSblogscrollautojs</> コードを見る

マーケティング

成果を出すコンテンツ設計の基本原則

田田中太郎・ 2026.07.04

06-02-02

記事ヘッダー(カテゴリ+タイトル+メタ)

グラデ帯の中にカテゴリバッジ・タイトル・日付/著者を配置。表示時に各要素がフェードアップします。WordPressの投稿冒頭のアイキャッチ帯に。画面内に入ると動作します。

CSS onlyblogscrollcss</> コードを見る

S

佐藤花子

Webディレクター / コンテンツ戦略担当

10年以上の制作経験をもとに、読まれる記事づくりを支援しています。

X n ✉

06-02-03

著者プロフィールボックス

グラデ円+イニシャルのアバターに肩書とSNSリンクを添えたボックス。ホバーでふわりと浮上します。WordPress記事末尾の著者紹介に最適。ホバーで動作します。

CSS onlybloghovercss</> コードを見る

この記事をシェア

コピーしました

06-02-04

記事シェアボタン群

X/Facebook/LINE/コピーの丸アイコンを横並びに。ホバーで各サービス色に拡大、コピー押下で「コピーしました」を表示。WordPress記事のSNSシェア導線に。ホバー・クリックで動作します。

CSS onlybloghoverclickjs</> コードを見る JS

TIPS初心者でも失敗しない記事構成の作り方入門ガイド SEO検索順位を上げるために今日からできる5つの施策

06-02-05

引用ブロック(pullquote)

大きな引用符の装飾と左の色ラインで、本文中の印象的な一節を強調するプルクオート。WordPress記事の見せ場や名言の抜き出しに。静的な装飾です。

CSS onlyblogcss</> コードを見る

コンテンツ制作で最も大切なのは読者を第一に考える姿勢です。誰に何を届けるのかを明確にし、具体的な検索意図に応えることで、記事は自然と読まれるようになります。

06-02-07

マーカーハイライト注釈

本文中の重要語に蛍光マーカーが左から引かれる演出。io-revealで画面内に入ると塗られます。WordPress記事の要点強調に。スクロールで表示すると動作します。

CSS onlyblogscrollcss</> コードを見る

⏱ 約5分で読めます

この記事は読了までおよそ5分。上部の進捗バーが読み進めた割合を示します。長文でも残りの分量が一目で分かるので、最後まで安心して読めます。

スクロールに合わせてバーが伸び、記事の全体像を把握しやすくなります。集中して読み切れる工夫のひとつです。

読了率を意識した設計は、直帰率の改善にもつながります。まずは体験してみてください。

下までスクロールすると進捗が100%に達します。読み終わりの達成感も演出できます。

06-02-08

読了プログレス+読了時間バッジ

「約5分」バッジと、内部スクロールに連動して伸びる細い進捗バーの組み合わせ。WordPress記事上部の読了時間・進捗表示に。スクロールで動作します。

CSS onlyblogscrolljs</> コードを見る JS

ここまで記事の基本的な考え方を説明してきました。実際に手を動かすと理解が深まります。

まずは無料で試してみませんか？

登録は1分。今すぐ始められます。

無料で始める

続いて、より実践的なテクニックを紹介していきます。

06-02-09

記事内インラインCTA

本文の途中に差し込む囲みCTAボックス。ホバーで枠線がぐるりと動きます。WordPress記事の途中に自然に置く申込み導線に。ホバーで動作します。

CSS onlybloghovercss</> コードを見る

✳ ✳ ✳

06-02-10

コンテンツ区切り装飾

ドット・アスタリスク・波線の3種の記事セクション区切り。アスタリスクは軽く点滅します。WordPress記事の話題転換の仕切りに。装飾の一部が動作します。

CSS onlyblogautocss</> コードを見る

CSS

.card {
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
}

06-02-11

コードブロック(コピー機能付き)

シンタックスハイライト風の配色を施したコードブロック。「コピー」ボタンでクリップボードにコピーし、ボタン表示が一時的に変化します。WordPress技術ブログのサンプルコード掲載に。

JSblogjs</> コードを見る

1WordPress高速化の完全ガイド12,400 views
2初心者向けSEO内部対策まとめ9,820 views
3失敗しない配色の選び方7,150 views
4お問い合わせフォームの作り方5,930 views

06-02-12

23. プロフィール・チーム

TS

高橋誠

代表取締役

06-03-01

チームメンバーカード

アバターと氏名・肩書を並べたカード。ホバーでSNSアイコンが下からスライドインします。WordPressの会社案内やスタッフ紹介ページに。

CSS onlyhovercss</> コードを見る

JavaScript

CSS / HTML

UIデザイン

WordPress

06-03-02

スキルバー(横棒)

各スキルの習熟度を横バーで表示。画面内に入ると左から伸びます(io-reveal)。プロフィールページの得意分野の可視化に。

CSS onlyscrollcss</> コードを見る

88%企画

72%開発

95%運用

06-03-03

円形スキルメーター

円グラフ状のスキル達成率3つ。画面内に入ると弧が伸びます(io-reveal)。担当者の強みをコンパクトに見せる紹介欄に。

CSS onlyscrollcss</> コードを見る

MK

小林美咲

UIデザイナー

ユーザー目線の設計を大切に、使いやすさと美しさを両立させたデザインを心がけています。

06-03-04

フリップ式メンバーカード

ホバーでカードが裏返り、自己紹介文が表示されます。WordPressのスタッフ紹介を遊び心のある演出にしたい時に。

CSS onlyhovercss3d</> コードを見る

YT

田中陽介

フロントエンドエンジニア

2015年に受託開発会社へ入社し、コーポレートサイトからWebアプリまで幅広く担当。2020年より独立し、パフォーマンスとアクセシビリティを重視した実装を得意としています。趣味は登山とコーヒー焙煎。

06-03-05

バイオ展開カード

「もっと見る」で経歴文がスムーズに展開します(JS)。長めのプロフィールをすっきり収めたいWordPressの人物紹介に。

JSjsoverlay</> コードを見る

最優秀賞

認定資格

グランプリ

技術認証

06-03-06

資格・受賞バッジ列

メダルやバッジのSVGが並び、ホバーで拡大してラベルが表示されます。実績や保有資格をアピールするプロフィール欄に。

CSS onlyhovercsssvg</> コードを見る

SN

サポート担当

お困りごとは私、佐藤にお任せください！

06-03-07

担当者ふきだし紹介

アバターの横にセリフの吹き出しを表示。画面内に入るとポップと弾んで現れます(io-reveal)。問い合わせ窓口の担当者紹介に。

CSS onlyscrollcssoverlay</> コードを見る

AK MT YS RN +8

06-03-08

アバターグループ(重なり)

複数のアバターが少し重なって並び、ホバーで扇状に広がります。「+8」で総人数を表示。チーム規模を示すプロフィール欄に。

CSS onlyhovercss</> コードを見る

IK

井上健太

プロジェクトマネージャー

06-03-09

メンバー一覧→詳細切替

小さいメンバーをクリックすると大きな詳細プロフィールに切り替わります(JS)。省スペースでチーム全員を紹介したい時に。

JSclickjs</> コードを見る

2016新卒でIT企業に入社
2019Webディレクターに昇格
2022独立・フリーランス開業
2025制作チームを立ち上げ

06-03-10

経歴ミニタイムライン

1人の略歴を縦タイムラインで表示。画面内に入ると上から順に点灯します(io-reveal)。プロフィールの沿革・歩みを見せる欄に。

CSS onlyscrollcss</> コードを見る

NK

中村賢一

営業部マネージャー

☎03-1234-5678
✉nakamura@example.com
🌐example.com

06-03-11

連絡先カード(名刺風)

アバターと氏名・肩書の下に電話/メール/サイトの連絡先を並べた名刺風カード。ホバーで浮き上がります。WordPressの担当者紹介や名刺ページに。

CSS onlyhovercss</> コードを見る

KT木村

HS橋本

OY大山

FR藤原

06-03-12

チーム紹介グリッド(部署タブ切替)

タブで部署を選ぶと該当メンバーだけがフェードで絞り込まれるチーム一覧。WordPressの会社案内で部署別にスタッフを見せたい時に。

JSjs</> コードを見る

54. ソーシャル・エンゲージメント演出

128 いいね

06-04-01

いいね数カウントアップ演出

ハートをクリックすると数字が+1され、ハートが弾んで小さなハートが飛び散る。ブログやSNS埋め込みの「いいねボタン」に。

JSclickjs</> コードを見る

06-04-02

シェアボタン拡散演出

シェアボタンをクリックすると複数のSNSアイコンが放射状に飛び出す。記事末尾のシェア導線に使うと視認性が高まる。

JSclickjs</> コードを見る

2,048 フォロワー

06-04-03

フォロワー数リアルタイム風カウンター

数字が小刻みに増加し続け、リアルタイムで人気が伸びている印象を演出する。SNS連携ウィジェットに。

JSjs</> コードを見る

0

06-04-04

拍手(クラップ)カウンター

クリック連打で拍手数が増え、アイコンがそのたびに弾む。note風の記事評価ボタンに使える。

JSclickjs</> コードを見る

06-04-05

リアクション絵文字ピッカー演出

複数の絵文字リアクションから選ぶとポップして選択状態を表示する。コメント欄やチャットUIの反応に。

JSjsoverlay</> コードを見る

あと100いいねでランクアップ!

0%

06-04-06

バイラル達成メーター

目標いいね数までの進捗をバーで可視化し、伸びるたびに数値が更新される。キャンペーンLPの応援ゲージに。

JSjs</> コードを見る

素敵な投稿ですね!

06-04-07

コメント投稿ポップ演出

送信ボタンを押すと新しいコメントが下から吹き出すように追加される。記事コメント欄やレビュー投稿に。

JSclickjsinput</> コードを見る

54

06-04-08

リツイート・拡散アニメーション

アイコンがくるっと回転しながらカウントが増加する。SNS埋め込みの拡散ボタンに。

JSjs3d</> コードを見る

LIVE 128 人が視聴中

06-04-09

視聴者数・オンライン人数表示演出

「現在◯人が視聴中」の数字が小刻みに変動し続け、盛り上がりのライブ感を演出する。配信・セミナーLPに。

JSjs</> コードを見る

06-04-10

サンクスメッセージポップ

ボタンを押すと「ありがとう!」のメッセージがハートと共にふわっと浮かんで消える。投げ銭・応援ボタンに。

JSclickjs</> コードを見る

06-04-11

フォロー/フォロー中ボタン切替演出

クリックで「フォローする」から「フォロー中」へ形状と色がなめらかにモーフィングするボタン。会員サイトのユーザーフォロー機能に使えます。

JSclickjs</> コードを見る

新着通知 5件

06-04-12

通知ベルバッジ演出

ベルアイコンをクリックすると揺れながら未読バッジが弾けて消え、既読状態に切り替わります。会員マイページやヘッダーの通知アイコンに使えます。

JSclickjs</> コードを見る

113. 記事内目次・読了率演出

はじめに

この記事では読了率を高める目次設計を解説します。左のラインが読み進めた分だけ伸びていきます。

現状の課題

長文記事は読者が今どこにいるか分からず離脱しがちです。位置の可視化が重要になります。

解決のステップ

見出しを整理し、目次と本文をリンクさせ、現在地を常にハイライトする仕組みを作ります。

実践のポイント

色のコントラストや余白を工夫し、目次自体が読みやすいことも大切です。

まとめ

現在地表示は読者の安心感を高め、最後まで読み切ってもらう助けになります。

06-09-01

現在地ハイライト目次サイドバー

内部スクロールに連動して目次項目がハイライトし、脇の縦ラインが読了位置まで伸びます。WordPressの記事サイドバー目次に。スクロールで動作します。

JSscrolljs</> コードを見る

0%

読了率で記事を可視化する

上部のバーは読み進めた割合をリアルタイムに表示します。キャップに表示される数値も一緒に移動します。

なぜ有効なのか

残り分量が視覚的に分かることで、読者は最後まで読み切ろうという意識を持ちやすくなります。

実装のコツ

スクロール量に応じて幅を更新するだけのシンプルな仕組みで、負荷も軽く導入しやすい演出です。

06-09-02

記事上部・伸びる読了プログレスバー

スクロールに応じて上部バーが伸び、進捗キャップの数値がバーの先端に沿って移動します。WordPress記事上部の読了率表示に。スクロールで動作します。

JSscrolljs</> コードを見る

はじめに

右上の円形メーターが常時追従し、読了率をパーセントで表示します。

背景

数値による進捗表示は、目次が無い記事でも読了状況を直感的に伝えられます。

手順

スクロール量から割合を算出し、円の線の長さ(stroke-dashoffset)を書き換えるだけで実現できます。

注意点

固定表示のため、他の要素と重ならない余白設計が必要です。

まとめ

ミニマルながら読了状況が一目で分かるインジケータです。

0%

06-09-03

固定表示・円形読了率インジケータ

記事本文のスクロール量に応じて円形メーターが常時追従して満ちていきます。WordPress記事右上の読了率バッジに。スクロールで動作します。

JSscrollautojs</> コードを見る

はじめに

上のタブをクリックすると、該当の見出しまで内部プレビューがなめらかにジャンプします。

背景

長文記事ではページ内リンクによる移動が読者の負担を大きく減らします。

手順

クリックされたリンクのターゲットIDから対象の見出し位置を計算し、スクロール位置を更新します。

まとめ

クリック一つで狙った場所へ移動できる、シンプルで実用的なジャンプ目次です。

06-09-04

クリックでジャンプするミニ目次

タブ形式の目次をクリックすると、内部プレビュー領域がなめらかに該当見出しへスクロールします。WordPressの見出しジャンプ目次に。クリックで動作します。

JSscrollclickjs</> コードを見る

はじめに課題整理改善のステップまとめ

はじめに

ボタンを押すと目次パネルが開閉します。項目を選ぶと本文がその位置まで移動します。

課題整理

目次を常時表示すると本文が狭くなるため、必要な時だけ開く形式が好まれます。

改善のステップ

開閉ボタンと本文位置の連動を実装することで、省スペースかつ実用的な目次になります。

まとめ

折りたたみ式は特にスマホ表示の記事と相性の良い目次形式です。

06-09-05

折りたたみ可能な目次パネル

ボタンで開閉するオーバーレイ式の目次パネル。項目クリックで内部プレビューが該当位置へ移動し自動で閉じます。WordPress記事冒頭の開閉式目次に。クリックで動作します。

JSclickautojsoverlay</> コードを見る

⏱ 残り 4分

はじめに

スクロールするほどバッジの残り時間が減っていきます。読み終える目安が一目で分かります。

効果

残り時間の表示は「あと少しで読み終わる」という感覚を作り、離脱を防ぎます。

実装

推定読了時間とスクロール割合から、残り分数を都度計算して表示を更新します。

まとめ

読み切ると残り時間は0分になり、達成感を演出できます。

06-09-06

読了時間カウントダウンウィジェット

スクロールに応じて右上バッジの「残り分数」がカウントダウンされます。WordPress記事の読了目安表示に。スクロールで動作します。

JSscrolljs</> コードを見る

環境を整える

まずは記事構成の土台となる見出し設計を整理します。

ツール選定

目次生成に使うプラグインやスクリプトを選びます。

手順の実行

実際に目次を組み込み、スクロール連動の挙動を確認します。

検証と改善

読者の動きを見ながら表示や間隔を細かく調整します。

06-09-07

スクロール連動アコーディオン階層目次

本文のスクロール位置に応じて、該当する親グループだけが自動で開く階層目次です。WordPressの章立て記事の目次に。スクロールで動作します。

JSscrollautojs</> コードを見る

続きを読むと見える本文

最初は数行だけ表示され、下側がグラデーションでフェードします。ボタンを押すと全文が読めるようになります。

全文表示後は内部スクロールで最後まで読み進められ、末尾に到達するとフェードが消えます。

この演出は要約と全文の間の橋渡しとして、記事の第一印象を軽く保つのに役立ちます。

読者の興味を引いた上で本文へ誘導できるため、離脱防止にもつながります。

06-09-08

続きを読むフェードグラデーション

本文下部をグラデーションで隠し、ボタンで全文表示に切り替わります。展開後はスクロールで末尾に達するとフェードが消えます。WordPress記事の続き表示に。クリックで動作します。

JSscrollclickjsoverlay</> コードを見る

はじめに

右のドットが読み進めたセクション分だけ点灯していきます。

課題

目次の項目数が多いと圧迫感が出るため、ドット表示は省スペースで有効です。

施策

各セクションの開始位置を基準に、現在地のドットだけを強調表示します。

効果

通過済みのドットは薄い色に変わり、進捗が一目で把握できます。

まとめ

ドットは直接クリックしてジャンプすることもできます。

06-09-09

セクション進捗ドット目次

セクションごとにドットが点灯し、通過済みは淡色に変化します。クリックでそのセクションへ移動可能。WordPress記事の縦型進捗ナビに。スクロールで動作します。

JSscrollclickjs</> コードを見る

はじめに

下部のカプセルが現在の見出しを表示しながら追従します。

背景

フローティング目次は本文の邪魔をせず、必要な時だけ開いて使えます。

手順

カプセルをタップするとミニリストが上に開き、見出しへ直接移動できます。

注意点

本文と重ならないよう、下部に余白を確保して配置します。

まとめ

省スペースかつ現在地が分かる、モバイルとも相性の良い目次形式です。

はじめに背景手順注意点まとめ

06-09-10

フローティング追従ミニ目次カプセル

現在の見出し名を表示するピル型カプセルが下部に固定追従し、タップでミニ目次を展開します。WordPressのモバイル記事に最適な省スペース目次。スクロールで動作します。

JSmobilescrollclickjsoverlay</> コードを見る

✓

はじめに

スクロールして最後まで読み進めると、右のバッジがチェックマークとともに弾けてお祝いします。

目的

読了の達成感を演出することで、記事を最後まで読み切るモチベーションを高めます。

実装

スクロール量が100%に達した瞬間だけ、特別なアニメーションクラスを付与します。

まとめ

ちょっとした演出が読者の満足度を後押しします。

06-09-11

読了達成でバッジが弾けるお祝い進捗バー

最後まで読み終えた瞬間にバッジがポップしてチェックマークが浮かび上がる演出です。WordPressのコラム記事や学習コンテンツで読了の達成感を演出したいときに使えます。スクロールで動作します。

JSscrolljsoverlay</> コードを見る

導入展開結論

導入

下のバーをドラッグすると、そのままの割合で本文がスクロールします。

展開

動画再生バーのような感覚で、読みたい位置へ直接移動できます。

結論

長文記事の目次代わりとして、直感的な位置操作を提供します。

06-09-12

ドラッグで読了位置を移動できるシークバー目次

動画の再生バーのように、つまみをドラッグすると本文がその割合の位置までスクロールする目次です。WordPressの長文レポートやインタビュー記事で読みたい箇所へ素早く移動したいときに使えます。

JSscrolldragjs</> コードを見る

131. コメント・ディスカッション投稿演出

A
あかり
素敵な記事でした!
K
健太
参考になります。

06-11-01

コメント投稿リアルタイム追加演出

送信すると新しいコメントがリスト末尾にふわっと追加される。記事下のコメント欄やレビュー投稿フォームに使うと投稿直後の反応が伝わりやすい。

JSclickjsinput</> コードを見る

M

まさき

このやり方、試してみます!

R
りな
私もやってみます!
T
たけし
良い結果でした!

06-11-02

返信ネスト展開スレッド表示演出

「返信を表示」を押すとネストされた返信一覧が滑らかに展開する。フォーラムやブログのスレッド形式コメント欄に使うと会話の階層が分かりやすくなる。

JSclickjsoverlay</> コードを見る

S
さやか
とても参考になりました!
Y
ゆうと
次回も楽しみです。

06-11-03

いいねで弾むコメントリアクション

コメントごとのハートボタンを押すとアイコンが弾んで件数が増減する。レビューやQ&A投稿の「役に立った」ボタンに応用できる。

JSclickjs</> コードを見る

みさき
この記事、保存しました!

06-11-04

タイピングインジケータ付きコメント欄

相手の入力中は点滅ドットで通知し、自分が入力すると「入力中…」表示に切り替わる。チャット風のコメント・質問フォームに使える。

JSautojsinput</> コードを見る

はると

ついに公開されましたね!

06-11-05

絵文字リアクション選択バー

コメント下の絵文字ボタンを押すとポップして選択状態になり件数が増える。掲示板やチャットのリアクション機能のデザイン見本に。

JSclickjsoverlay</> コードを見る

つばさ
面白い視点ですね。

06-11-06

投稿直後ハイライト演出コメント

投稿した直後のコメントが黄色くハイライトされ、数秒かけて通常の背景に馴染んでいく。自分の投稿が反映された実感を与える演出。

JSjs</> コードを見る

06-11-07

文字数カウント付きコメント入力欄

入力に応じて残り文字数の色が変化し、上限に近づくと警告色になる。文字数制限のあるレビューやSNS風投稿フォームに使える。

JSjsinput</> コードを見る

あい
いいね記事!
♥ 2
だいき
すごく勉強になりました
♥ 8
ゆま
次も期待してます
♥ 1
こうた
共感します
♥ 5

06-11-08

並び替えで再配置されるコメント欄

「新着順」「人気順」タブを切り替えるとコメントリストがふわっと再配置される。まとめ記事やレビュー一覧のソート機能に使える。

JSjs</> コードを見る

06-11-09

下書き自動保存インジケータ付きフォーム

入力を止めると自動で「保存中…」から「保存済み」に切り替わるインジケータ。長文コメントや記事投稿フォームの下書き機能に使える。

JSautojsinput</> コードを見る

なな
とても分かりやすい説明でした。
しょう
実践してみます!
ひろき
続編も楽しみにしています。

06-11-10

解決済みマーク付きコメント

ボタンを押すとコメントに緑のチェックが付き「解決済み」ラベルへ切り替わる。Q&A形式の記事やサポートページの質問コメントに使うと未解決/解決の区別がひと目でわかる。

JSclickjs</> コードを見る

この記事は役に立ちましたか?

投票ありがとうございます!

06-11-12

役に立った投票付きフィードバック欄

上下ボタンで記事への評価を投票でき、投票後はお礼メッセージがふわっと表示される。ヘルプセンターやナレッジベース記事の下部フィードバックに使える。

JSjs</> コードを見る

156. SNSシェア・埋め込みカード生成演出

06-14-01

シェアメニュー展開ボタン

クリックすると各SNSアイコンが下に展開表示される。記事下部のシェア導線をコンパクトに収めたい時に使えます。

JSclickjsoverlay</> コードを見る

06-14-02

シェア完了チェックマーク演出

ボタンを押すとアイコンがチェックマークに切り替わり「シェアしました」に文言が変わる。単体のSNSシェアボタンに最適です。

JSclickjs</> コードを見る

https://example.com/article/42

コピーしました!

06-14-03

URLコピー完了メッセージボタン

クリックでURLがコピーされた想定の完了メッセージがふわっと表示される。埋め込みコードやページURLの共有欄に使えます。

JSclickjs</> コードを見る

06-14-04

ホバーで色づくSNSボタン群

普段はモノトーンのアイコンが、ホバー時にそれぞれのブランドカラーへ切り替わり、クリックするとシェア完了メッセージが表示される。フッターやサイドバーのシェアボタンに。

JShoverclickjs</> コードを見る

06-14-05

シェア数カウントアップボタン

クリックのたびにシェア数がアニメーションしながら増加する。バイラル感を演出したい記事末尾のシェアボタンに使えます。

JSclickjs</> コードを見る

記事タイトルがここに入ります

OGP風の説明文がここに表示されるプレビューカードです。

example.com

06-14-06

OGP風プレビューカードフェードイン

読み込み時にサムネイル・タイトル・説明文が順にふわっと現れ、ボタンをクリックするとカードが軽くハイライトする埋め込みプレビューカード。記事共有リンクの見え方確認用サンプルに。

JSclickjs</> コードを見る

06-14-07

SNSアイコン順番ポップシェアパネル

ボタンを押すと複数SNSのアイコンが時間差でポンポンと現れる。シェアパネルを賑やかに見せたい時のアクセントに。

JSclickjs</> コードを見る

クリックでシェア(スクロール追従イメージ)

06-14-08

フローティング縦並びシェアボタン

画面端に縦に並ぶシェアボタン群。ホバーで軽く浮き上がり、クリックすると選択状態が一瞬強調表示される。記事ページの追従シェアバーとして使える構成です。

JShoverclickjs</> コードを見る

06-14-09

QRコード生成風シェアパネル

ボタンを押すとドット柄のQRコード風パネルが展開する。店頭POPやチラシと連動したURL共有導線の見た目デモに。

JSclickjsoverlay</> コードを見る

06-14-10

メール共有フォームのスライド展開

ボタンを押すとメールアドレス入力欄が下にスライド展開する。会員限定コンテンツの紹介・招待シェアに使えます。

JSclickjsoverlayinput</> コードを見る

シェアありがとうございます!

06-14-11

シェア後お礼メッセージ演出

シェア操作の直後にお礼のメッセージがふわっと入れ替わり表示される。キャンペーンや寄稿記事のシェア導線に。

JSjs</> コードを見る

埋め込み用プレビューカード

06-14-12

埋め込みコードコピー付きプレビュー

プレビューカードの下にあるボタンでコピー完了状態に切り替わる。ブログパーツやウィジェットの埋め込み案内に使えます。

JSjs</> コードを見る

06. 画像・ギャラリー

🏔️

山岳の風景 ホバーで詳細が浮かび上がります

07-01-01

ホバーズーム+キャプション

画像がズームしつつ暗くなり、キャプションが下から浮かび上がる定番演出。WordPressのギャラリーや施工事例一覧に最適。

CSS onlygallerycssdark</> コードを見る

🌅

🌊

🌸

07-01-02

モノクロ→カラー

通常はグレースケール、ホバーで彩度が戻る上品な演出。WordPressのクライアントロゴ一覧やスタッフ紹介に使いやすい。

CSS onlygalleryhovercss</> コードを見る

AFTER ✨

BEFORE 🌫️

07-01-03

ビフォーアフター比較スライダー

スライダー操作でclip-pathを動かし2枚の画像を比較。リフォーム施工例や美容系のWordPressサイトで効果的。

JSgalleryjsinput</> コードを見る

07-01-04

ミニライトボックス

サムネイルをクリックすると拡大表示がフェードイン。プラグインなしで実装できる軽量ライトボックスとしてWordPressの写真ページに。

JSgalleryclickjsoverlay</> コードを見る

🌋

🍁

❄️

🌾

🌺

07-01-05

モザイクタイルギャラリー

大小のタイルを組み合わせたグリッドで、ホバーすると明るく浮き上がる。WordPressのフォトギャラリーページに変化をつけたいときに。

CSS onlygalleryhovercss</> コードを見る

🌊

⛰️

🐚

🌲

⛵

🏕️

07-01-06

フィルターギャラリー

カテゴリボタンで該当タイルだけをふわっと絞り込み表示。WordPressの制作実績・メニュー一覧のカテゴリ分けにそのまま使える。

JSgalleryjs</> コードを見る

🌄スライド 1

🏞️スライド 2

🌌スライド 3

07-01-07

ミニカルーセル

前後ボタンとドットで横スライド切替する軽量カルーセル。WordPressのメインビジュアルやお客様の声の表示に、プラグインなしで対応。

JSgalleryjs</> コードを見る

🎈

カーソルを動かしてみてください

07-01-08

ホバーパララックス画像

マウス位置に応じて画像がわずかに追従し、奥行きを感じさせる。WordPressのヒーローセクションやブランドサイトのアイキャッチに。

JSgalleryjs3d</> コードを見る

🦋

07-01-09

クリップリビール画像

スクロールで画面に入ると、斜めのclip-pathが開いて画像が現れる。WordPressのコンテンツセクションに高級感のある登場演出を加えられる。

CSS onlygalleryscrollcss</> コードを見る

🎸

🎹

07-01-10

デュオトーンホバー

mix-blend-modeの単色オーバーレイがホバーでふっと外れ、元の色が現れる。WordPressのイベント告知やクリエイティブ系一覧ページに映える。

CSS onlygalleryhovercssoverlay</> コードを見る

🌵

🌙

🍂

07-01-11

円形フレームホバーリビールギャラリー

丸型サムネイルにホバーすると外周のリングが浮かび上がり中身がわずかに拡大回転。WordPressのスタッフ紹介やSNSアイコン一覧に軽やかな動きを添えます。

CSS onlygalleryhovercss3d</> コードを見る

🏛️

🗼

⛩️

🏰

07-01-12

スクロールリビール・スタガーグリッド

画面に入ると2×2のタイルが時間差で拡大しながら浮かび上がるギャラリー。WordPressの施工事例やフォトギャラリーの導入部で視線を引きつけます。

CSS onlygalleryscrollcss</> コードを見る

17. 背景エフェクト・装飾

背景サンプル

07-02-01

アニメーショングラデーションメッシュ

複数の放射グラデーションがゆっくり移動し続ける柔らかなメッシュ背景です。WordPressのヒーローやセクション背景に敷くと動きのある印象を与えます。

CSS onlycss</> コードを見る

背景サンプル

07-02-02

浮遊する幾何学図形

円・三角・四角がふわふわ回転しながらゆっくり漂う装飾背景です。WordPressの余白セクションに軽やかな動きを添えたいときに便利です。

CSS onlyautocss3d</> コードを見る

背景サンプル

07-02-03

パーティクル接続ネットワーク

動く点同士が近づくと線で結ばれる軽量なネットワーク背景です。WordPressのテック系・コーポレートのヒーロー背景として映えます。

JSjs</> コードを見る

背景サンプル

07-02-04

ドットグリッド(点描)背景

細かなドットのパターンがゆっくりスクロールし続ける点描背景です。WordPressのセクション区切りや資料風レイアウトの背景に相性が良いです。

CSS onlyscrollcss</> コードを見る

背景サンプル

07-02-05

アニメーションブロブ(有機的な形)

border-radiusが変形し続ける、ぼかしの効いた有機的なブロブ背景です。WordPressの柔らかい世界観のLPやサービス紹介に映えます。

CSS onlycss</> コードを見る

背景サンプル

07-02-06

ノイズ/グレイン風テクスチャ

SVGのfeTurbulenceで生成したザラつきを重ねた、フィルム風グレイン背景です。WordPressで質感のあるレトロ・アナログな雰囲気を演出できます。

CSS onlycsssvg</> コードを見る

背景サンプル

07-02-07

動く斜めストライプ

斜めのストライプが一定速度で流れ続けるダイナミックな背景です。WordPressのキャンペーンバナーや注意喚起セクションのアクセントに向きます。

CSS onlyautocss</> コードを見る

背景サンプル

07-02-08

星空/きらめき背景

小さな光点がランダムに点滅する、静かなダーク背景です。WordPressの夜のイベント告知やプレミアム感のあるヒーローに最適です。

CSS onlyautocssdark</> コードを見る

背景サンプル

07-02-09

波紋リップル背景

中心から同心円の波紋が広がり続ける穏やかな背景です。WordPressのお知らせや音・水をテーマにしたコンテンツの背景に馴染みます。

CSS onlycss</> コードを見る

背景サンプル

07-02-10

グリッド線パースペクティブ(レトロ)

遠近感のあるグリッド床が奥へ流れ続けるシンセウェーブ風の背景です。WordPressのレトロ・80年代テイストのヒーローやイベントページに映えます。

CSS onlyautocssdark</> コードを見る

背景サンプル

07-02-11

オーロラ(Aurora)グラデーション背景

複数の帯状グラデーションが緩やかに回転しながら発光するオーロラ風背景です。WordPressの先進的なプロダクトサイトやヒーロー背景に映えます。

CSS onlycss3d</> コードを見る

背景サンプル

07-02-12

ハニカム(六角形)パターン背景

六角形が敷き詰められたハニカムパターンが淡く明滅する背景です。WordPressのテクノロジー系・製造業サイトの整然とした印象づくりに向いています。

CSS onlycss</> コードを見る

32. 動画・メディア埋め込み

07-03-01

16:9レスポンシブ動画枠

アスペクト比を16:9で固定した動画プレースホルダー。中央の再生ボタンにマウスを乗せると拡大します。WordPressの記事内に動画埋め込み枠を差し込む用途に。

CSS onlycss</> コードを見る

07-03-02

再生ボタンパルス

再生アイコンの周りに波紋が広がり続けるアニメーション。動画セクションへ視線を誘導したいときに効果的で、WordPressのCTAとしても使えます。

CSS onlycss</> コードを見る

再生中

07-03-03

サムネ→再生切替

クリックするとサムネイルが消え「再生中」風の疑似プレーヤー表示に切り替わります。WordPressで動画クリックの体験を軽量に再現したいときに。

JSclickjs</> コードを見る

FEATURE MOVIE

私たちのストーリー

07-03-04

動画背景セクション風

グラデーションがゆっくり動く背景の上にテキストと疑似再生ボタンを配置。WordPressのヒーローに動画背景ふうの演出を軽量に加えたいときに。

CSS onlycss</> コードを見る

07-03-05

音声プレーヤーUI

波形バーと再生/一時停止ボタンの音声プレーヤー。ボタンクリックで再生状態になると波形が上下に動きます。WordPressのポッドキャスト紹介などに。

JSclickjs</> コードを見る

07-03-06

ライトボックス動画

サムネイルをクリックすると枠内に拡大プレーヤーがフェード表示され、×ボタンで閉じられます。WordPressで動画をポップアップ表示したいときに。

JSclickjsoverlay</> コードを見る

07-03-07

メディアギャラリー混在

動画サムネ（再生アイコン付き）と画像サムネが混在するグリッド。マウスを乗せるとタイルが浮き上がります。WordPressのメディア一覧表示に。

CSS onlycss</> コードを見る

♡ 💬 ↷

@channel
縦型ショート動画

07-03-08

縦型ショート動画枠

9:16の縦型フレームに再生ボタンと右側のいいね等アイコンを配置。WordPressでショート動画風のセクションを作りたいときに便利です。

CSS onlycss</> コードを見る

再生中: エピソード 1

エピソード 1
エピソード 2
エピソード 3
エピソード 4

07-03-09

プレイリスト

左に動画枠、右にサムネ列を並べたプレイリスト。右のサムネをクリックすると選択がハイライトされ、再生中のタイトルが切り替わります。連載動画の一覧に。

JSclickjs</> コードを見る

0:00 / 1:00

07-03-10

簡易プレーヤーバー

再生/一時停止ボタン・進捗バー・時間表示を備えた簡易プレーヤー。再生ボタンを押すと進捗バーが進み、時間表示も更新されます。動画UIの雛形に。

JSclickjs</> コードを見る

編集前

編集後

↔

07-03-11

動画Before/Afterスライダー

中央のハンドルをドラッグすると編集前後の映像比較が切り替わります。WordPressの動画編集実績やカラーグレーディングの訴求に使えます。

JSdragjs</> コードを見る

音声を認識しています…

07-03-12

自動字幕表示プレーヤー

画面下部の字幕テキストが数秒ごとに自動で切り替わります。WordPressの動画マニュアルやセミナー動画に字幕サンプルとして添えられます。

JSautojs</> コードを見る

59. 音楽・オーディオプレーヤー応用UI

07-06-01

イコライザー風波形ビジュアライザー

複数バーが音楽に合わせるように不規則に上下するループアニメーション。再生中コンテンツの演出に使えます。

CSS onlyautocss</> コードを見る

07-06-02

アルバムアート回転レコード演出

再生中はジャケット画像に見立てたグラデ円がゆっくり回転し続けるレコードプレーヤー風演出です。

CSS onlycss3d</> コードを見る

01夜明けのメロディ再生中
02青い予感
03星屑のステップ
04ノスタルジア

07-06-03

プレイリストキュー表示

現在再生中の曲がハイライトされ、次に流れる曲が控えて並ぶプレイリスト表示です。

CSS onlyautocss</> コードを見る

07-06-04

波形シークバー(クリックでシーク)

音声波形上をクリックすると再生位置がその地点まで移動する、シーク操作つきの波形バーです。

JSclickjs</> コードを見る

ミニプレーヤークリックで展開

▶

フルスクリーン表示 タップで戻る

07-06-05

ミニプレーヤー⇄フルスクリーン展開

下部の小さい再生バーをクリックすると、全画面プレーヤーへ滑らかに拡大表示するUIです。

JSclickjs</> コードを見る

灯りが滲む夜道を

歩き出す君の背中

遠くで鳴る汽笛の音

まだ見ぬ明日へ

07-06-06

歌詞シンクロハイライト演出

再生の進行に合わせて歌詞の行が順番にハイライトされていくカラオケ風の演出です。

CSS onlycss</> コードを見る

🔉

60%

07-06-07

音量スライダー(波形アイコン付き)

ドラッグで音量を調整でき、値に応じてスピーカーアイコンの見た目が変化するスライダーです。

JSdragjs</> コードを見る

+12曲

07-06-08

プレイリストカバーコラージュ

複数のアルバムアートが少しずつ重なって並ぶ、プレイリストのサムネイル表現です。

CSS onlycss</> コードを見る

⠿光の粒子
⠿夏の輪郭
⠿静寂のあと
⠿遠い声

07-06-09

再生キュー並び替え(ドラッグ)

曲順をドラッグ&ドロップで自由に入れ替えられる、再生キューの並び替えUIです。

JSdragjs</> コードを見る

#42 デザインの余白再生速度を選択

07-06-10

ポッドキャスト再生速度切替UI

1x / 1.5x / 2xのボタンで再生速度を切り替えられる、ポッドキャストプレーヤー風UIです。

JSjs</> コードを見る

波音のあとで
夕凪ラウンジ
静かな窓辺

07-06-11

ムード別プレイリスト切替タブ

「Chill / Focus / Party」などの気分タブを切り替えると曲リストがフェードで入れ替わる演出です。BGM配信サービスのシーン別プレイリスト選択に使えます。

JSjs</> コードを見る

● REC 録音レベル

07-06-12

録音レベルLEDメーター演出

マイク入力を模したLED風の縦バーが不規則に伸び縮みして音量レベルを表現します。ポッドキャスト収録画面や音声入力機能のインジケーターに使えます。

CSS onlycssinput</> コードを見る

134. 動画背景・オーバーレイ演出

NEW COLLECTION

Feel the Motion

動く背景で世界観を伝えるヒーローセクション

07-10-01

ゆらぐグラデーション背景ヒーロー

ゆっくり波打つグラデーションを背景にしたヒーロー演出。WordPressのトップページのメインビジュアルにリッチな動きの印象を与えられる。

CSS onlyautocss</> コードを見る

想いを、かたちに。

07-10-02

暗転オーバーレイ+フェードインコピー

動く背景に暗いグラデーションを重ねてキャッチコピーを浮かび上がらせる演出。WordPressの採用サイトやブランドサイトのファーストビューに使える。

CSS onlycssdark</> コードを見る

07-10-03

動く背景+パルス再生ボタン

ゆっくり動く背景の中央で再生ボタンがパルスして注目を集める演出。WordPressの動画紹介セクションやインタビュー記事のサムネイルに使える。

CSS onlycss</> コードを見る

SCROLL

背景動画 → 静止画

07-10-04

スクロールで動画背景→静止画に切替

スクロールで画面に入ると動く背景が静止画にクロスフェードする演出。WordPressのランディングページで、途中から表示負荷の軽い静止画に切り替えたい場合に使える。

CSS onlyscrollcss</> コードを見る

Our Story

移り変わる情景でブランドの世界観を演出

07-10-05

複数シーンがクロスフェードするヒーロー

3枚のグラデーションシーンが順番にフェードして切り替わる背景演出。WordPressの企業サイトやホテル・観光サイトのメインビジュアルに動きと物語性を持たせられる。

CSS onlycss</> コードを見る

07-10-06

動く背景+再生/ミュートコントロールUI

下部に動画プレイヤー風の再生・ミュートボタンと進捗バーを配置した演出。WordPressのプロモーション動画セクションで、実際の動画を差し込む前のUIモックアップとして使える。

JSjs</> コードを見る

DEEP FIELD

07-10-07

パララックス風レイヤー背景+固定テキスト

速度の異なる複数のグラデーション帯が奥行きを演出し、中央のテキストは固定されたまま動く。WordPressのブランドサイトやポートフォリオのイントロ演出に使える。

CSS onlycss3d</> コードを見る

✦

Cinematic Look

07-10-08

動く背景+ビネット効果

周囲を暗くするビネットを重ねて映画のような没入感を演出する背景。WordPressの映像制作会社やギャラリーサイトのトップ画面に使える。

CSS onlycssdark</> コードを見る

MOTION

07-10-09

色調が周期的に変化する背景+白抜きテキスト

hue-rotateで背景の色合いがゆっくり循環し、白抜き文字が常に映える演出。WordPressのイベント告知やキャンペーンページのアイキャッチに使える。

CSS onlycss</> コードを見る

Live Now 動く背景の上に浮かぶガラス風カード

07-10-10

動く背景+半透明フローティングカード

動く背景の上をゆっくり上下しながら浮かぶ半透明カード。WordPressのお知らせバナーやキャンペーン訴求カードを重ねたい場合に使える。

CSS onlycss</> コードを見る

SIGNAL LOST

ノイズの走る背景で緊張感のある演出

07-10-11

スキャンライン風グリッチ背景ヒーロー

横に流れるスキャンラインとちらつく背景を組み合わせたグリッチ風ヒーロー演出。WordPressのテック系・ゲーム系サイトのティザーページの導入部に使える。

CSS onlyautocss</> コードを見る

Chapter 1

07-10-12

動く背景+チャプター切替タブ

下のタブを押すと動く背景がクロスフェードで別の章の映像に切り替わる演出。WordPressのブランドムービーや会社紹介ページで章立てのストーリーを見せたい場合に使える。

JSclickjs</> コードを見る

135. 画像ホバーズームギャラリー演出

07-11-01

ホバーでゆっくり拡大するサムネイル

マウスを乗せるとフレーム内の画像だけがゆっくり拡大する基本のズーム演出です。WordPressの商品一覧やブログのサムネイルグリッドにそのまま使えます。

CSS onlycss</> コードを見る

07-11-02

クロップ内キープズーム画像

拡大しても画像がフレームからはみ出さず、内側の枠線が浮かび上がってクロップ境界を示すサムネイルです。WordPressのポートフォリオやギャラリーページで整列を崩さずズーム効果を加えたいときに向きます。

CSS onlycss</> コードを見る

07-11-03

回転しながら拡大する円形サムネイル

丸型フレームの画像がホバー時にわずかに回転しつつ拡大する、遊び心のあるズーム演出です。WordPressのメンバー紹介やアイコン風ギャラリーにアクセントとして使えます。

CSS onlyhovercss3d</> コードを見る

+

07-11-04

クリックで中央拡大するライトボックス風表示

サムネイルをクリックするとプレビュー枠の内側で画像が中央に拡大表示されるライトボックス風演出です。WordPressの作品ギャラリーで、別ページに遷移せずに画像を大きく見せたい場合に便利です。

CSS onlyclickcssoverlay</> コードを見る

SUMMER COLLECTION

07-11-05

キャプションせり上がり画像タイル

ホバーすると下から半透明のキャプション帯がせり上がる画像タイルです。WordPressの特集記事一覧やカテゴリタイルで、画像と見出しを同時に見せたい場面に適しています。

CSS onlyscrollhovercss</> コードを見る

07-11-06

フォーカス強調ギャラリー(隣接画像縮小)

1枚にホバーすると、その画像だけが拡大し隣接する画像は縮小・減光して視線を集めるギャラリーです。WordPressの実績紹介やサービス比較の横並びギャラリーに使えます。

CSS onlyhovercss</> コードを見る

07-11-07

モノクロ→カラー変化画像

普段はグレースケールの画像が、ホバーすると鮮やかなカラーに変わる演出です。WordPressのBefore/After風コンテンツやトップページの静かなギャラリーにアクセントを加えられます。

CSS onlyhovercss</> コードを見る

07-11-08

浮き上がるシャドウ画像タイル

ホバーすると画像タイルが持ち上がり、影が大きく広がって手前に浮き出るような演出です。WordPressのカードグリッドやニュース一覧で立体感を出したいときに使えます。

CSS onlyhovercss3d</> コードを見る

07-11-09

マウス追従パンズーム画像

フレーム内でマウスを動かすと、拡大された画像がその方向へわずかに視点移動するパン演出です。WordPressの製品詳細ページで質感や細部を見せたいサムネイルに向きます。

JSjs</> コードを見る

07-11-10

扇状に展開するホバーギャラリー

重なった画像カードにホバーすると、扇形に広がって全体を見せてくれるギャラリー演出です。WordPressのお知らせカードやポートフォリオのまとめサムネイルに使うと目を引きます。

CSS onlyhovercss</> コードを見る

BEFORE AFTER

07-11-11

ホバーで切り替わるビフォー/アフター画像

マウスを乗せている間だけ「アフター」画像がスライドインして重なる比較演出です。WordPressのリフォーム施工事例やダイエット系ビフォーアフターコンテンツに使えます。

CSS onlycssinput</> コードを見る

07-11-12

タイル分割めくれ画像ギャラリー

画像が6分割のタイルになっており、ホバーすると各タイルが順にめくれるように回転して奥の色柄を見せる演出です。WordPressの特集ページやキャンペーンバナーの目を引くアイキャッチに使えます。

CSS onlyhovercss3d</> コードを見る

136. サウンド波形・オーディオビジュアライザー演出

07-12-01

バー型オーディオビジュアライザー

再生中を模した10本のバーが不規則な速さで上下に揺れ続けるループ演出です。音楽・ポッドキャストページの再生中表示に使えます。

CSS onlyautocss</> コードを見る

07-12-02

サーキュラーオーディオビジュアライザー

中心の周りに円形配置されたバーが波打つように伸縮するビジュアライザーです。ラジオ・ライブ配信サイトのアイキャッチに向きます。

CSS onlyautocss</> コードを見る

07-12-03

シークバー風波形プレイヘッド演出

静止した波形の上を再生ヘッドの縦線が自動で往復移動する、シーク操作を想起させる演出です。ポッドキャストや音声コンテンツの視聴イメージ画像に使えます。

CSS onlyautocss</> コードを見る

REC

07-12-04

録音中の波打つ波形ライン

REC表示と共に細いバーの列が絶えず波打ち、音声を録音中であることを示す演出です。ボイスメモ機能やライブ配信の収録画面に使えます。

CSS onlyautocss</> コードを見る

07-12-05

ポッドキャスト風音量メーター(VUメーター)

L/R2列のセグメントが音量に応じて緑→黄→赤の順に点灯するVUメーター演出です。ライブ配信や録音アプリの音量モニターに使えます。

JSjs</> コードを見る

07-12-06

周波数スペクトラム風カラフルバー

虹色のグラデーションで彩られた20本のバーが個別のリズムで伸縮する、周波数スペクトラム風の演出です。イベント・音楽フェスサイトの背景演出に向きます。

CSS onlycss</> コードを見る

▶

07-12-07

波紋が広がる再生ボタン

中央の再生ボタンから波紋のリングが繰り返し広がって消えていく演出です。動画・ポッドキャストの再生開始ボタンの目印に使えます。

CSS onlycss</> コードを見る

07-12-08

ミニマル3本線の音量インジケーター

3本の細い線だけで音が鳴っている状態を表現する、極めてシンプルな音量インジケーターです。通知アイコンやチャットの発話中表示に使えます。

CSS onlycss</> コードを見る

LEVEL

07-12-09

円弧状オーディオレベルメーター

円弧が音量に応じて伸び縮みを繰り返す、レベルメーター風の演出です。録音アプリやマイク入力状態の可視化表示に使えます。

CSS onlycssinput</> コードを見る

07-12-10

複数トラック波形比較表示

色の異なる3本のミニ波形を縦に並べ、複数トラックの音量を見比べられるようにした演出です。DAW風の編集画面やミックス比較のイメージ表示に使えます。

CSS onlycss</> コードを見る

07-12-11

再生ボタン連動オン/オフビジュアライザー

再生ボタンを押すとバーが波打ち始め、もう一度押すと途中の高さで静止するインタラクティブなビジュアライザーです。音楽プレイヤーウィジェットの再生状態表示に使えます。

JSclickautojs</> コードを見る

07-12-12

回転レコード+ミニイコライザー

ゆっくり回転するレコード盤の横で、小さなイコライザーバーが再生に合わせて揺れ続ける演出です。音楽アーティストのプロフィールページや楽曲紹介カードのアクセントに使えます。

JSjs3d</> コードを見る

07. スクロール演出

✦

ふわっと登場

画面に入ると下からふわっと浮かび上がります。スクロールで往復すると何度でも再生されます。

08-01-01

フェードアップリビール

要素が画面に入った瞬間、下からふわっと浮かび上がる基本のリビール。WordPressの見出しやカードセクションに付けるだけでページ全体が生き生きします。

CSS onlycss</> コードを見る

01ヒアリング

02設計・デザイン

03実装・構築

04公開・運用

08-01-02

スタッガーリビール

4つの子要素が時間差で順番に現れる演出。WordPressのサービスの流れや特徴リストに使うと、視線を上から順に誘導できます。

CSS onlyautocss</> コードを見る

左からスライドイン

右からスライドイン

また左から登場

また右から登場

08-01-03

左右交互スライドイン

項目が左右から交互に滑り込むリビール。WordPressの実績紹介や交互配置の画像＋テキストセクションと相性が良い動きです。

CSS onlycss</> コードを見る

ぼかしからくっきり

08-01-04

スケール＆ブラーリビール

縮小＋ぼかし状態から、ピントが合うようにくっきり拡大表示。WordPressのメインビジュアルやギャラリー画像の登場演出に効果的です。

CSS onlycss</> コードを見る

0%

お知らせ記事のサンプル

この枠内をスクロールしてください。読み進めた割合に応じて、上部のプログレスバーが伸びていきます。

読了バーは長い記事でも「あとどのくらいか」がひと目で分かり、読者の離脱を防ぐ効果が期待できます。

実装はスクロール量を全体の高さで割るだけのシンプルな仕組みです。追加のライブラリは必要ありません。

デザインはサイトのテーマカラーに合わせて自由に変更できます。細めのバーにするとより上品な印象になります。

ここまで読むとバーは100%に到達します。お疲れさまでした。

↓ 枠内をスクロール

08-01-05

読了プログレスバー

記事の読み進みに応じて上部のバーが伸びる読了インジケーター。WordPressのブログ記事上部に置くと長文コンテンツの読了率アップに役立ちます。

JSscrolljs</> コードを見る

PARALLAX

↓ 枠内をスクロール

背景の円が前景より
ゆっくり動きます

奥行きが生まれて
ページに立体感が出ます

08-01-06

パララックス背景セクション

スクロール時に背景レイヤーが前景と違う速度で動く視差効果。WordPressのトップページの区切りセクションに使うと奥行きのある印象になります。

JSscrolljs3d</> コードを見る

1ヒアリング

STEP 1
ヒアリング。↓ 枠内をスクロールすると左の図が切り替わります。
STEP 2
デザイン制作。左の図は固定されたまま内容だけが更新されます。
STEP 3
実装・構築。長い説明でも図が常に見えるので迷いません。
STEP 4
公開。手順解説やサービス紹介ページに最適な構成です。

08-01-07

スティッキーステップ

左の図を固定したまま、スクロールで右のステップ説明が切り替わる構成。WordPressのご利用の流れや機能紹介ページで説得力のある見せ方ができます。

JSscrollautojs</> コードを見る

↓ 縦にスクロールするとカードが横に流れます

WORKS 01

WORKS 02

WORKS 03

WORKS 04

WORKS 05

08-01-08

縦→横スクロールセクション

縦スクロールに連動してカード列が横方向に流れるセクション。WordPressの制作実績や商品一覧を印象的に見せたいときに使えるモダンな演出です。

JSscrollautojs</> コードを見る

0% 顧客満足度

0件累計制作実績

08-01-09

スクロール連動カウンター＆ゲージ

画面に入ると数値がカウントアップし、円ゲージとバーが同時に伸びる実績表示。WordPressの会社概要ページの実績セクションに置くと信頼感を演出できます。

JSscrolljs</> コードを見る

2019

会社設立

2022

制作実績500件を突破

2026

新サービスをリリース

08-01-10

タイムライン線描画

画面に入ると縦線が上から伸び、ドットと項目が順に点灯するタイムライン。WordPressの会社沿革ページやイベントスケジュールにぴったりです。

CSS onlyscrollcss</> コードを見る

◆

回転しながら現れる

わずかに傾いた状態からまっすぐに戻りながらフェードインします。

08-01-11

回転フェードインリビール

斜めに傾いたカードが画面に入ると水平に戻りながら現れる、動きに個性のあるリビール。WordPressのお知らせカードや特集見出しのアクセントに使えます。

CSS onlyscrollcss</> コードを見る

MORPH SCROLL

↓ 枠内をスクロールしてください

背景の色味がスクロール量に応じて
なめらかに移り変わります

セクションの切り替えを
視覚的に演出できます

08-01-12

スクロール連動背景カラーモーフ

スクロール量に応じて背景のグラデーションカラーがなめらかに変化する演出。WordPressのストーリーテリング型ページで章の切り替わりを演出できます。

JSscrolljs</> コードを見る

08. ローダー・ローディング演出

読み込み中…

08-02-01

リングスピナー

borderと回転だけで作る定番のローディングリング。WordPressのAjax読み込みや「もっと見る」ボタンの待機表示にそのまま使えます。

CSS onlycss3d</> コードを見る

データを取得しています

08-02-02

バウンスドットローダー

3つのドットが順番に跳ねる軽快なローダー。フォーム送信中やWooCommerceのカート更新中の表示に向いています。

CSS onlyclickcssinput</> コードを見る

アップロード中しばらくお待ちください

08-02-03

ストライププログレスバー

縞模様が流れながらバーが伸びて繰り返すプログレス表示。WordPressのメディアアップロードやインポート処理の演出に使えます。

CSS onlyautocss</> コードを見る

08-02-04

スケルトンスクリーン

記事カードの骨組みにシマー(光の帯)が流れるプレースホルダー。WordPressの記事一覧をAjaxで読み込む間の表示に最適です。

CSS onlyautocss</> コードを見る

ページのコンテンツ

LOADING

08-02-05

カーテン遷移演出

左右から幕が閉じて開くページ遷移風の演出。WordPressテーマのページ切り替え時に挟むと高級感のあるサイトになります。

JSjs</> コードを見る

SITE

08-02-06

ロゴパルスローダー

中央のロゴが脈打ち、背景にリングが広がっていくローダー。WordPressサイトの初回表示時のスプラッシュ演出にぴったりです。

CSS onlyscrollautocss</> コードを見る

0%

08-02-07

円形パーセントローダー

SVG円のstroke-dashoffsetと数値が0→100で同期して進むローダー。WordPressサイトのオープニングやスキルグラフにも応用できます。

JSjssvg</> コードを見る

08-02-08

デュアルリングスピナー

大小2つのリングが逆方向に回転する目を引くスピナー。WordPressの検索結果や無限スクロールの読み込み中表示におすすめです。

CSS onlyscrollautocss3d</> コードを見る

処理中です…

08-02-09

波形バーローダー

5本のバーが波打つイコライザ風ローダー。音声・動画系のWordPressサイトや、ポップな雰囲気の読み込み表示に合います。

CSS onlyautocssoverlay</> コードを見る

🤖

08-02-10

タイピングドット

チャットの「入力中…」を表す吹き出しと3点アニメ。WordPressに設置したチャットボットやお問い合わせUIの応答待ち表示に使えます。

CSS onlycssinput</> コードを見る

読み込み中

08-02-11

ドットマトリクスウェーブローダー

格子状に並んだ15個の四角が斜めに波打ちながら明滅するローダー。WordPressのダッシュボード風管理画面やデータ集計中の表示に使えます。

CSS onlyautocss</> コードを見る

LOADING...

コンテンツを準備しています

08-02-12

テキストシマーローディング

文字自体に光の帯が流れるシマーエフェクトを施したローディング表示。WordPressのダークテーマのページ遷移中の表示や動画サイトの待機画面に。

CSS onlyautocssdark</> コードを見る

18. ホバー・マイクロインタラクション

08-03-01

ハートいいねボタン

クリックでハートが弾んで塗られ、周りに小粒子が飛び散ります。WordPressの記事やコメントの「いいね」ボタンに好適です。

JSclickjs</> コードを見る

08-03-02

マグネティックボタン

マウスが近づくとボタンが吸い寄せられるように移動し、離れると元へ戻ります。WordPressのヒーローCTAで目を引く演出に使えます。

JSjs</> コードを見る

08-03-03

SVGアイコンモーフ（メニュー⇔閉じる）

クリックで3本線が滑らかにXへ変形し、再クリックで戻ります。WordPressのモバイルハンバーガーメニューにそのまま流用できます。

JSmobileclickjs</> コードを見る

中央から広がる左から伸びる波打つ下線スワイプ塗り

08-03-04

テキストリンク下線バリエーション

ホバーで中央から広がる・左から伸びる・波打つ・塗り替わる、4種の下線アニメを収録。WordPressの本文リンクやフッターナビに使えます。

CSS onlyhoverautocss</> コードを見る

08-03-05

チェックマーク成功アニメ

クリックで円が描かれ、続いてチェックが跳ねて現れます。WordPressのフォーム送信完了や設定保存の合図に最適です。

JSclickjsinput</> コードを見る

08-03-06

通知ベル振動

ホバーまたはクリックでベルが左右に揺れ、赤い件数バッジがぷるんと弾みます。WordPress管理画面やヘッダーの通知アイコンに向いています。

JShoverclickjs</> コードを見る

08-03-07

スイッチ切替の質感

トグルON/OFFでつまみが滑り、太陽⇔月とトラック色が切り替わります。WordPressのダークモード切替UIとして組み込めます。

JSjsdark</> コードを見る

SPOTLIGHT

08-03-08

カーソル追従スポットライト

プレビュー内でマウス位置に光の円が追従し、暗いパネルを照らします。WordPressの特集バナーやカードのホバー演出に使えます。

JShoverjsdark</> コードを見る

高速表示
安全な設計
手軽に導入

08-03-09

アイコンリスト順次ポップ

各行にホバーするとアイコンが拡大し、色が付いて横にスライドします。WordPressの特徴・メリット一覧を軽快に見せられます。

CSS onlyhovercss</> コードを見る

コピーしました

08-03-10

コピー成功トースト

「コピー」ボタンを押すとミニトースト「コピーしました」がふわっと現れて消えます。WordPressのコード表示やシェアURLのコピーUIに便利です。

JSclickjs</> コードを見る

評価を選んでください

08-03-11

星評価入力(クリック選択)

星にホバーすると選択予定の数までプレビューで色付き、クリックで確定します。WordPressのレビュー投稿フォームや満足度アンケートに使えます。

JShoverclickjsinput</> コードを見る

✦ マウスで傾く

カード上でマウスを動かしてみてください

08-03-12

3Dチルトホバーカード

マウス位置に応じてカードが立体的に傾き、光沢がスッと動きます。WordPressの商品カードやサービス紹介カードに高級感を加えられます。

JSjs3d</> コードを見る

52. ページ遷移・ルーティング演出

Page A トップページ

ようこそ

Page B 会社概要

私たちについて

08-04-01

フェードクロス遷移

固定ページ同士のリンク遷移をAjaxで読み込み、フェードで滑らかに切り替える演出。離脱率の高いページ遷移の体感速度改善に。

JSjs</> コードを見る

記事一覧

投稿をチェック

記事詳細

本文を表示

08-04-02

スライド送り遷移

投稿一覧から記事詳細へ移動する際のスライド送り演出。SPA化したWordPressテーマのページ送りに活用できる。

JSjs</> コードを見る

商品一覧

気になる商品を選択

商品詳細

詳細情報を表示

08-04-03

スケールズーム遷移

商品一覧から商品詳細ページへ遷移する際のズームイン演出。ECサイトやポートフォリオの詳細表示に。

JSjs</> コードを見る

ホーム

サイトのトップ

お問い合わせ

フォームへ移動

08-04-04

円形ワイプ遷移

メニューリンク押下時に円形ワイプで次のページを表示する演出。コーポレートサイトのトップメニュー遷移に。

JSclickjs</> コードを見る

マイページ

アカウント情報

設定画面

プロフィール編集

08-04-05

スタック重なり遷移

モーダル的にせり上がる遷移で設定画面やマイページへ移動する演出。会員サイトのアカウント関連ページに。

JSscrolljsoverlay</> コードを見る

特集ページ

キャンペーン情報

トップページ

08-04-06

分割スライド遷移

画面を分割してスライドさせ背後のページを見せる演出。特集LPからトップページへの復帰導線などに。

JSjs</> コードを見る

ギャラリー

作品一覧

作品詳細

拡大表示

08-04-07

ブラー溶け込み遷移

ページ切り替え時にぼかしをかけて溶け込ませる演出。ギャラリーサイトの作品詳細表示に。

JSjs</> コードを見る

ニュース

縦スワイプ遷移(SPA風)

SNSアプリのような縦スワイプでページを切り替える演出。ニュース記事の連続閲覧UIなどに。

JSmobiledragjs</> コードを見る

ランディング

キャンペーンLP

申込みフォーム

お申し込みはこちら

08-04-09

カラーフラッシュ遷移

ブランドカラーが一瞬フラッシュしてページが切り替わる演出。キャンペーンLPからフォームへの遷移に。

JSjsinput</> コードを見る

トップページ

サイトのホーム

カテゴリ一覧

商品カテゴリ

商品詳細

商品ページ

08-04-10

パンくず連動スライド遷移

パンくずリストと連動してスライド方向が変わる階層遷移。カテゴリ→商品ページなど多階層サイトの案内に。

JSjs</> コードを見る

サービス一覧

提供メニューを見る

導入事例

お客様の声を見る

08-04-11

3Dフリップ・ページめくり遷移

ページ全体がカードのようにY軸回転してめくれ、裏側の次ページが現れる演出。会社案内から実績紹介への切り替えなど立体感を出したい遷移に使えます。

JSjs3d</> コードを見る

お知らせ一覧

最新情報をチェック

お知らせ詳細

本文を表示

08-04-12

液体モーフィング(ブロブ)遷移

不定形な液滴が画面全体を覆うように広がり、覆い切ったタイミングで次ページに切り替わる有機的な遷移演出。個性的なブランドサイトのページ送りに使えます。

JSjs</> コードを見る

57. 3Dインタラクション演出

正面

背面

右

左

上

下

ドラッグして回転

08-05-01

3D回転キューブ

マウスドラッグで立方体が自由に回転し、各面のラベルが確認できます。WordPressのサービス紹介や実績アピールの目を引くアクセントに使えます。

JSdragjs3d</> コードを見る

表

裏

コインをクリック

08-05-02

3Dコインフリップ

クリックするたびにコインが縦回転して表裏が切り替わります。抽選・キャンペーン企画やゲーミフィケーション要素の演出に使えます。

JSclickjs3d</> コードを見る

第1章
はじめに

第2章
導入事例

08-05-03

3D本(ブック)めくり演出

ボタン操作でページが本のように奥へめくれ、次のコンテンツが現れます。会社案内や事例紹介のストーリー性のある見せ方に使えます。

JSjs</> コードを見る

Product A ¥4,800

スペック

重量 320g
サイズ S/M/L
素材アルミ

08-05-04

パースペクティブ商品回転ビューア

ボタン操作で商品カードが3D回転し、裏面にスペック情報が表示されます。ECサイトの商品詳細ページの視覚的なアクセントに使えます。

JSjs3d</> コードを見る

NEW

08-05-05

3Dフローティングカードスタック

奥行きを持って重なったカードに、ホバーすると一番手前のカードが浮き上がります。お知らせやキャンペーンカードの重なり演出に使えます。

CSS onlyhovercss3d</> コードを見る

立体視差シーン

08-05-06

視差3Dレイヤーシーン

マウスの動きに合わせて複数レイヤーが異なる奥行きで移動し、立体的な背景演出になります。トップページの世界観づくりに使えます。

JSjs3d</> コードを見る

料金プランについて

月額制と年額制からお選びいただけます。

納期の目安

ご依頼内容により2〜4週間が目安です。

サポート体制

公開後も専任スタッフがサポートします。

08-05-07

3Dアコーディオンパネル

クリックするとパネルが奥へ折れ込むように開閉するアコーディオンです。WordPressのFAQや料金プラン説明に使えます。

JSclickjs</> コードを見る

1

2

3

4

5

6

08-05-08

回転ギャラリーカルーセル(3D)

円柱状に配置された画像カードが回転し、手前に来た面が正面に表示されます。実績ギャラリーや商品一覧の立体的な見せ方に使えます。

JSjs3d</> コードを見る

LOGO

ご来店
ありがとうございます

08-05-09

3Dめくれるロゴ演出

ホバーするとロゴがY軸方向に回転し、裏面のメッセージに切り替わります。ヘッダーロゴやウェルカムページの遊び心のある演出に使えます。

CSS onlyhovercss3d</> コードを見る

★

プレミアムプラン

高機能・優先サポート付き

08-05-10

チルト連動3Dパララックスカード

マウス位置に応じてカード全体と内部のアイコン・見出し・説明文がそれぞれ異なる強さで傾き、立体感のある高級感を演出します。プラン紹介カードに使えます。

JSjs3d</> コードを見る

ドラッグして回転

08-05-11

3Dタグクラウド・スフィア演出

キーワードタグが球面上に配置され、自動回転しながらドラッグでも向きを変えられます。ブログのタグ一覧やスキルセット紹介の目を引くアクセントに使えます。

JSautodragjs3d</> コードを見る

🎁 特典コード
WELCOME10

08-05-12

3Dギフトボックス開梱演出

ボタンを押すとボックスの蓋が奥へ倒れるように開き、中の特典コードが立ち上がって現れます。会員登録特典やキャンペーン当選の受け取り演出に使えます。

JSclickjs</> コードを見る

58. カスタムカーソル演出

エリア内でマウスを動かしてください

08-06-01

リング型追従カーソル(遅延あり)

マウスカーソルに遅れてリング型の要素が追従するエフェクト。WordPressのポートフォリオサイトなどでカーソル演出として利用できます。

JSjs</> コードを見る

画像エリア

ボタン

08-06-02

テキスト表示カーソル

ホバーした要素に応じてカーソル脇のラベルが「見る」「クリック」などに切り替わります。商品一覧やギャラリーの操作誘導に便利です。

JShoverclickjs</> コードを見る

08-06-03

拡大鏡カーソル

カーソル周辺だけコンテンツが拡大表示される虫眼鏡風エフェクト。写真ギャラリーや地図パーツの詳細確認UIに応用できます。

JSjs</> コードを見る

08-06-04

マグネット吸着カーソル

近くにカーソルが来るとボタンがわずかに吸い寄せられるマグネット効果。CTAボタンのクリック率向上を狙う演出に使えます。

JSclickjs</> コードを見る

マウスを動かすと粒子が発生します

08-06-05

パーティクル軌跡カーソル

マウスの軌跡に沿って小さな粒子が発生して消えていくエフェクト。ヒーローセクションなど装飾的な演出に向いています。

JSjs</> コードを見る

08-06-06

カラー反転カーソル(ミックスブレンド)

mix-blend-modeでカーソル部分の色が背景と反転して見える演出。ダークテーマのランディングページのアクセントに使えます。

JSjsdark</> コードを見る

ドラッグ対象

ドラッグして移動

08-06-07

ドラッグ可能アイコンカーソル

ドラッグ可能な要素にカーソルを合わせると案内ラベルが表示され、実際に移動もできます。並び替えUIの操作案内に活用できます。

JSdragjs</> コードを見る

クリックしてみてください

08-06-08

クリック波紋カーソルエフェクト

クリックした位置から波紋が広がるエフェクト。ボタンやカードのクリックフィードバックとして使用できます。

JSclickjs</> コードを見る

リンクテキスト

08-06-09

カーソル形状のホバー変化(丸→矢印)

通常は丸いカーソルがリンク上でホバーすると矢印形状にモーフィングします。ナビゲーションのインタラクション強化に使えます。

JShoverjs</> コードを見る

エリア内でマウスを動かしてください

08-06-10

双方向追従カーソル(2レイヤー)

内側は即座に、外側はゆっくり追従する二重リングのカーソル演出。カーソル自体をブランド表現として演出したい場合に有効です。

JSjs</> コードを見る

エリア内でマウスを動かしてください

08-06-11

追従グラデーションブロブカーソル

マウスにやや遅れて追従する、グラデーションで彩られた有機的なブロブ形状のカーソル効果です。個性を出したいヒーローエリアの背景演出に使えます。

JSjs</> コードを見る

この下に隠れた
メッセージがあります

08-06-12

スポットライト・フラッシュライトカーソル

暗闇に覆われたエリアがカーソル周辺だけ光で照らされ、隠れたコンテンツが見える演出です。謎解き要素のあるキャンペーンページや特別感の演出に使えます。

JSjsdark</> コードを見る

101. ドラッグ&ドロップ演出

⠿企画書を作成
⠿デザイン確認
⠿クライアント確認
⠿公開・納品

08-07-01

ドラッグ並び替えリスト

行をつかんで上下にドラッグすると即座に順番が入れ替わります。WordPressのタスク一覧やメニュー項目の並び替えUIに応用できます。

JSdragjs</> コードを見る

音量60%

08-07-02

ドラッグ値変更スライダー

つまみをドラッグするとバーが伸縮し数値がリアルタイムに更新されます。WordPressの音量・明るさ・価格フィルターなどの入力UIに使えます。

JSdragjsinput</> コードを見る

📁 メニュー
・ホーム
・お知らせ
・設定

▸

08-07-03

ドラッグ開閉ドロワー

右端のハンドルをドラッグすると引き出しメニューが横から開閉し、指を離すと開閉状態にスナップします。WordPressのサイドメニューに好適です。

JSdragjs</> コードを見る

未着手

デザイン確認

原稿執筆

完了

公開設定

08-07-04

カンバンボード風ドラッグ移動

カードを別のカラムへドラッグして落とすとステータスが移動します。WordPressの案件管理や制作進行ボードのデモ表示に使えます。

JSdragjs</> コードを見る

1⠿

2⠿

3⠿

4⠿

08-07-05

ハンドル付き並べ替えタイル

タイルをドラッグして別マスに重ねると位置が入れ替わります。WordPressのギャラリー画像順やウィジェット配置の並び替えに応用できます。

JSdragjs</> コードを見る

💌 山田さんから
メッセージ

📷 新着写真が
あります

🔔 リマインダー
設定完了

ドラッグして左右に振り分け

08-07-06

スワイプ削除カード

カードを左右にドラッグして離すと弾かれるように消え、次のカードが繰り上がります。WordPressの通知一覧やレコメンド確認UIに使えます。

JSdragjs</> コードを見る

120×90

08-07-07

ドラッグリサイズハンドル

右下のハンドルをドラッグするとボックスの幅と高さが連動して変化し、サイズ数値も更新されます。WordPressの画像トリミングUIの土台になります。

JSdragjs</> コードを見る

08-07-08

ドラッグカラーグラデーションピッカー

虹色バー上のつまみをドラッグすると上のスウォッチがリアルタイムに色替わりします。WordPressのテーマカラー選択UIに応用できます。

JSdragjs</> コードを見る

1:12 / 3:45

08-07-09

ドラッグ巻き戻し進捗バー

再生バーのつまみをドラッグすると再生位置と時間表示が連動して変わります。WordPressに埋め込む動画・音声プレーヤーのシークバーに使えます。

JSdragjs</> コードを見る

よくある質問⌄

送料は全国一律500円、通常2〜3営業日でお届けします。返品は到着後7日以内なら可能です。

08-07-10

ドラッグ開閉アコーディオンハンドル

下部のグリップを下にドラッグすると回答欄が引き出され、離すと開閉状態にスナップします。WordPressのFAQセクションに使えます。

JSdragjs</> コードを見る

📄 見積書.pdf

⬆

ここにドラッグ&ドロップ

08-07-11

ドラッグ&ドロップアップロードゾーン

ファイルのチップを枠内にドラッグすると枠が反応し、ドロップでアップロード完了状態に変わります。WordPressのお問い合わせフォームや資料提出フォームの添付欄に応用できます。

JSdragjsinput</> コードを見る

🖼️ 写真01.jpg
🖼️ 写真02.jpg
🖼️ 写真03.jpg

🗑 ここにドラッグして削除

08-07-12

ドラッグでゴミ箱に投入して削除

リスト項目をつかんでゴミ箱エリアまでドラッグして離すと、その項目が削除されます。WordPressのメディアライブラリやファイル管理一覧の削除操作に活用できます。

JSdragjs</> コードを見る

102. スワイプジェスチャー演出

1

2

3

08-08-01

スワイプ画像カルーセル

指ドラッグ（またはマウスドラッグ）でスライドが切り替わる軽量カルーセル。ドットが現在位置を示します。WordPressの商品バナーやトップページのメインビジュアルに活用できます。

JSdragjs</> コードを見る

既読削除

田中様より
お見積りの件でご連絡しました
既読削除

山田様より
打合せ日程のご確認です

08-08-02

スワイプで既読・削除リスト

メールアプリのようにカードを左右にドラッグすると、既読化や削除アクションが下から現れます。WordPressの通知一覧やお知らせ管理画面のUIに応用できます。

JSdragjs</> コードを見る

上にスワイプでシートを開く

詳細オプション

配送方法や支払い方法をここから選択できます。

08-08-03

スワイプで開くボトムシート

下部のシートを上へドラッグすると詳細パネルがせり上がって開きます。WordPressの商品詳細やフィルター設定パネルに使えるモバイル向けUIです。

JSmobilescrolldragjsoverlay</> コードを見る

商品 A

¥2,400

商品 B

¥3,200

商品 C

¥1,800

08-08-04

スワイプで進む商品ギャラリー

横方向にドラッグすると次のカードがスナップして表示される商品ギャラリー。WordPressのECサイトやおすすめ商品カルーセルに向いています。

JSdragjs</> コードを見る

山の絶景ツアー ↑ スワイプ／クリックで詳細

朝焼けの稜線を歩く1日コース。集合は6:00、装備レンタルあり。定員8名。

08-08-05

上スワイプで詳細展開カード

カード上部を上にドラッグすると詳細説明がふわっと開き、下にドラッグすると閉じます。WordPressのツアー・イベント一覧の簡易プレビューに活用できます。

JSdragjs</> コードを見る

LIKENOPECさん

LIKENOPEBさん

LIKENOPEAさん

08-08-06

スワイプ評価カードスタック

カードを左右にドラッグすると「NOPE」「LIKE」のラベルが浮かび上がり、離すと弾き飛んで次のカードが現れます。WordPressの求人マッチングやおすすめ提案UIに使えます。

JSdragjs</> コードを見る

🚀ようこそ

アプリの使い方を3ステップでご紹介します

🔔通知設定

大事な更新をリアルタイムでお知らせ

🎉準備完了

さっそく使いはじめましょう

08-08-07

スワイプ送りオンボーディング

横ドラッグでスライドが送られ、上部のバーが現在位置を示すオンボーディング画面。WordPressの初回訪問者向けガイドやチュートリアル表示に最適です。

JSdragjs</> コードを見る

シンプルで軽量なワイヤレスイヤホン。連続再生8時間。

Bluetooth5.3／IPX4防水／重量4.5g

★4.6（238件）「装着感が良い」との声多数

08-08-08

横スワイプ切替タブコンテンツ

タブタップに加えて、コンテンツ本体を左右にドラッグしてもパネルが切り替わります。WordPressの商品スペック・レビュー切替セクションに便利です。

JSmobileclickdragjs</> コードを見る

✓

保存しました

変更内容が反映されました

08-08-09

スワイプで閉じる通知トースト

通知カードを左右にドラッグして一定距離を超えると、フェードしながら画面外へ消えます。WordPressのサイト内通知やCookie同意バナーに応用できます。

JSdragjs</> コードを見る

アイテム 01
アイテム 02
アイテム 03
アイテム 04
アイテム 05
アイテム 06
アイテム 07
アイテム 08

08-08-10

慣性スクロールリスト

ドラッグの勢いのままリストが滑らかに減速しながらスクロールする慣性付きリストです。WordPressのモバイル向けメニューやランキング一覧に使えます。

JSmobilescrolldragjs</> コードを見る

改装後

改装前

08-08-11

スワイプで見比べるビフォーアフター

中央の境界線を左右にドラッグすると施工前・施工後の写真範囲が入れ替わります。WordPressのリフォーム施工事例やダイエット成果紹介のビジュアルに活用できます。

JSdragjsinput</> コードを見る

☀

60%

縦にスワイプ

08-08-12

縦スワイプで明るさ調整

パネルを上下にドラッグすると明るさのゲージと数値がリアルタイムに変化します。WordPressに埋め込む動画プレーヤーの明るさ・音量コントロールのデモに使えます。

JSdragjs</> コードを見る

103. クリック・タップリアクション演出

08-09-01

マテリアル風リップルボタン

クリックした指の位置から波紋が広がって消えます。WordPressの送信・購入ボタンに乗せるとクリックの手応えが伝わります。

JSclickjsinput</> コードを見る

08-09-02

バウンドアイコンボタン

クリックするとアイコンがバネのように弾んで戻ります。WordPressのカート追加やお気に入り登録ボタンの反応演出に使えます。

JSclickjs</> コードを見る

08-09-03

紙吹雪お祝いボタン

クリックすると色とりどりの紙吹雪が弾け飛びます。WordPressの達成・購入完了・目標クリアボタンをお祝いムードで演出できます。

JSclickjs</> コードを見る

タップして波紋

08-09-04

波紋が広がるカード

タップした位置から円形の波紋がカード全体に広がります。WordPressの商品カードやお知らせカードのタップ反応に使えます。

JSmobileclickjs</> コードを見る

入力内容をご確認ください

08-09-05

シェイクエラーフィードバック

クリックするとボタンが左右に震え、赤いエラーメッセージが現れます。WordPressのフォーム送信エラー通知に使えます。

JSclickjsinput</> コードを見る

資料を提出する

08-09-06

チェックマーク・ドローインボタン

クリックで四角いチェックボックスが緑に塗られ、チェックが描き込まれます。WordPressのToDoリストや同意チェック欄に使えます。

JSclickjs</> コードを見る

ダブルクリックでいいね

128

08-09-07

ダブルタップいいねバースト

写真をダブルクリックすると大きなハートが弾んで消え、いいね数が加算されます。WordPressのSNS風フィードやギャラリーに使えます。

JSclickjs</> コードを見る

08-09-08

クリック波及トグルスイッチ

クリックするとつまみの位置から色の波が広がり、トラック全体の色が切り替わります。WordPressの設定パネルのON/OFFスイッチに使えます。

JSclickjs</> コードを見る

08-09-09

プレスホールド進捗ボタン

押し続けるとリング状のプログレスが溜まり、満タンで実行されます。WordPressの削除確認や誤タップ防止ボタンに向いています。

JSmobileclickjs</> コードを見る

08-09-10

バーストパーティクルボタン

クリックすると小さな粒子が放射状に飛び散って消えます。WordPressの目立たせたいアクションボタンやゲーミフィケーション要素に使えます。

JSclickjs</> コードを見る

08-09-11

ハンバーガー⇄クローズモーフィングボタン

クリックするたびに3本線のアイコンがなめらかに×印へ変形します。WordPressのモバイルナビゲーションメニューの開閉ボタンに使えます。

JSmobileclickjs</> コードを見る

星をクリックして評価

08-09-12

順番にポップする星レーティング

星をクリックすると選択した星まで左から順番にポンッと弾みながら塗りつぶされます。WordPressのレビュー投稿フォームや商品評価UIに使えます。

JSclickjsinput</> コードを見る

104. フォーカス・キーボードナビゲーション演出

08-10-01

移動するフォーカスリング付きボタン群

Tabキーで移動するたびに、紫のハイライトが滑らかに次のボタンへスライドします。WordPress管理バーやツールバーのキーボード操作性向上に使えます。

JSjs</> コードを見る

08-10-02

Tab移動で滑るハイライトメニュー

Tabキーでリンクを移動するたびに下線バーが追従してスライドします。WordPressのグローバルナビのキーボード操作の視認性向上に役立ちます。

JSjs</> コードを見る

本文へスキップ

Tabキーで最初にフォーカスすると、左上に「本文へスキップ」リンクが現れます。

▼ 本文コンテンツ

08-10-03

フォーカス時のみ現れるスキップリンク

マウス操作時は非表示で、キーボードでフォーカスした瞬間だけ画面内にスライドインします。WordPressサイトのアクセシビリティ対応（本文へスキップ）に直結します。

CSS onlyscrollcss</> コードを見る

08-10-04

矢印キーで選ぶラジオグループ

左右の矢印キーで選択がなめらかに移動し、選択中の項目が拡大表示されます。WordPressの注文フォームや設定選択UIに応用できます。

JSjsinput</> コードを見る

お名前

08-10-05

フォーカスで浮き上がるフローティングラベル

Tabキーでフォーカスすると同時にラベルが上へ浮き上がり、下線カラーがアクセントに変わります。WordPressのお問い合わせフォーム入力欄に最適です。

JSjsinput</> コードを見る

08-10-06

Escで閉じるフォーカストラップモーダル

開くとモーダル内にフォーカスが移動して閉じ込められ、Escキーまたはボタンで閉じると呼び出し元へフォーカスが戻ります。WordPressの確認ダイアログに最適です。

JSjsoverlay</> コードを見る

プランA Tabでフォーカスすると枠線が描画されます

08-10-07

フォーカスで枠線がドローインするカード

キーボードでフォーカスすると輪郭線がSVGでするすると描き込まれます。WordPressの料金プランカードやサービス紹介カードの選択状態表現に使えます。

CSS onlycsssvg</> コードを見る

/ キーで検索を開く

08-10-08

ショートカットキーで開く検索ボックス

「/」キーを押すと検索ボックスが伸びながら現れ、自動的に入力欄へフォーカスします（Escで閉じます）。WordPressサイト内検索のショートカット起動に使えます。

JSclickautojsinput</> コードを見る

08-10-09

フォーカス移動を示すステップインジケータ

Tabキーで各ステップへ移動するたびに、進捗ラインが現在位置まで伸びて番号が強調されます。WordPressのフォームウィザードやEC購入フローに使えます。

JSjsinput</> コードを見る

08-10-10

Enter送信でアニメーションするボタン

入力欄でEnterキーを押すと送信ボタンが跳ねて回転し、送信済みの合図として色が変わります。WordPressのコメント欄やチャット風フォームに使えます。

JSclickjs3dinput</> コードを見る

全国一律550円、5,000円以上のご購入で送料無料です。

商品到着後7日以内であれば返品を承ります。

クレジットカード・銀行振込・代金引換に対応しています。

08-10-11

矢印キーで移動するキーボード対応アコーディオン

↑↓キーで見出し間をフォーカス移動し、EnterまたはSpaceキーで開閉できます。WordPressのFAQセクションのキーボード操作性向上に使えます。

JSjs</> コードを見る

数量

入力欄をフォーカスして↑↓キーでも変更できます

08-10-12

↑↓キーで増減するフォーカス対応ステッパー

数量入力欄をフォーカスした状態で↑↓キーを押すと数値が増減し、フォーカスリングが色付きで強調されます。WordPressのEC商品ページの数量入力に使えます。

JSclickjsinput</> コードを見る

138. 音・振動フィードバック風マイクロインタラクション

認証コード（4桁）

08-11-01

バイブレーション風シェイク入力

送信するとインプットが小刻みに震え、振動アイコンが明滅してスマホの触覚フィードバックを視覚的に模倣します。WordPressのフォーム入力エラー通知に使えます。

JSmobileclickjsinput</> コードを見る

保存しました

08-11-02

ポンと弾む成功確認アイコン

保存すると丸いチェックアイコンが軽くバウンドし、同時に音波のようなリングが一度だけ広がります。WordPressの保存・更新完了フィードバックに使えます。

JSjs</> コードを見る

要確認：残り容量わずかです

08-11-03

点滅アラートアイコン

ボタンを押すと警告アイコンと背景が赤く数回明滅し、そのあと落ち着いた警告色で留まります。WordPressの在庫僅少・容量超過などの警告表示に使えます。

JSclickjs</> コードを見る

メッセージ

08-11-04

打鍵ウェーブ・インプット

キーを打つたびに入力欄の下端から小さな波紋が浮かび上がり、タイピング音を視覚的に表現します。WordPressの検索窓やチャット入力欄のアクセントに使えます。

JSjsinput</> コードを見る

クリックで通知受信

08-11-05

トゥルンと弾む通知バッジ

通知を受け取るたびにベルの数字バッジがゼリーのように伸縮しながら弾みます。WordPressのヘッダー通知アイコンやメッセージ件数表示に使えます。

JSjs</> コードを見る

📄 資料.pdf 📄 資料.pdf

08-11-06

ビリッと破れる削除エフェクト

削除ボタンを押すとカードがギザギザに裂けて左右に分かれ消えます。WordPressのファイル削除・添付ファイル取り消しの操作フィードバックに使えます。

JSclickjs</> コードを見る

タップしてロック解除

08-11-07

カチッと鳴るロック解除

タップすると錠前アイコンがカチッと弾んでシャックルが開き、緑色に切り替わります。WordPressの会員限定コンテンツの解錠・認証成功演出に使えます。

JSmobileclickjs</> コードを見る

08-11-08

ドクンと脈打つ長押しボタン

押し続けると縮んだまま待機し、規定の長さ押し切ると心拍のように二度弾んで確定します。WordPressの重要操作の誤タップ防止ボタンに使えます。

JSmobileclickjs</> コードを見る

左右にスワイプ

08-11-09

スワイプ拒否バウンスバック

カードを左右にドラッグして離すと、弾力のあるアニメーションで元の位置に跳ね返ります。WordPressのスワイプ操作が受理されなかった時の拒否フィードバックに使えます。

JSmobiledragjs</> コードを見る

08-11-10

パリンと弾けるグラスクラック演出

クリックすると白い閃光とともにガラスの破片のような三角形が飛び散ります。WordPressの目標達成・実績解除・レベルアップ演出に使えます。

JSclickjs</> コードを見る

サイレントモード

08-11-11

コトッと止まるトグルスイッチ

切り替えるとノブが少しオーバーシュートしてから小さく跳ね返り、機械式スイッチが噛み合うような感触を演出します。WordPressの設定画面のON/OFFスイッチに使えます。

JSjs</> コードを見る

クリックでカチカチ加算

08-11-12

カチカチ刻むダイヤルカウンター

押すたびに目盛りの針が段階的に回転し、数字がコマ送りで一段ずつ増える演出です。WordPressの数量選択やクリックカウンターの操作感を強調したい場面で使えます。

JSclickjs3d</> コードを見る

139. 視差(パララックス)多層背景演出

↓ 枠内をスクロールすると
山・丘・草地が違う速度で動きます

08-12-01

3層ランドスケープパララックス

遠景の山・中景の丘・近景の草地が別々の速度でスクロールに追従する本格的な多層パララックス。WordPressのトップページの風景バナーに使うと奥行きのある印象的な導入部になります。

JSscrolljs3d</> コードを見る

↓ 枠内をスクロール
円が3つの速度で浮遊します

08-12-02

浮遊サークル多重パララックス

大小の円形装飾が3つの速度レイヤーで浮遊するパララックス背景。WordPressのサービス紹介セクションの背景装飾として使うと、単調な余白に動きと奥行きを加えられます。

JSjs3d</> コードを見る

PARALLAX背景とテキストが逆方向に動く

↓ 枠内をスクロール

08-12-03

テキスト逆走パララックス

背景の格子模様とキャッチコピーが逆方向にスクロール移動する演出。WordPressのファーストビューの見出しに使うと、単純な固定表示より印象に残るヒーローセクションになります。

JSscrolljs</> コードを見る

↓ 枠内をスクロール
雲が段階的な速度で流れます

08-12-04

雲流れる空パララックス

大きさの異なる雲が3段階の速度で左右に流れる空の背景演出。WordPressの旅行系・子ども向けサイトのヘッダー背景に使うと、爽やかで柔らかい雰囲気を演出できます。

JSautojs</> コードを見る

FRONT

↓ 枠内をスクロール
前景カードだけ手前へ飛び出します

08-12-05

前景オブジェクト飛び出しパララックス

背景のドット模様に対して前景カードが速く大きく動き、手前に飛び出すような奥行きを表現。WordPressの商品訴求カードや実績バッジの強調演出として使えます。

JSjs3d</> コードを見る

↓ 枠内をスクロール
4つの図形がそれぞれ違う方向へ

08-12-06

幾何学図形マルチスピードパララックス

円・四角・三角・六角形がそれぞれ異なる速度と方向でスクロールに反応する背景。WordPressのクリエイティブ系サイトやポートフォリオの余白装飾として動きのアクセントになります。

JSscrolljs</> コードを見る

↓ 枠内をスクロール
4層の山シルエットが重なって動きます

08-12-07

山シルエット重なりパララックス

夕焼けを背景に4層の山シルエットが手前ほど速く動くレイヤードパララックス。WordPressのアウトドア系・旅行系サイトのトップビジュアルに使うと印象的な世界観を演出できます。

JSjs</> コードを見る

↓ 枠内をスクロール
3枚のドットグリッドが波打ちます

08-12-08

ドットグリッド波打ちパララックス

3枚のドットグリッドが速度差でずれて重なり、モアレのような揺らぎを生む背景演出。WordPressのテック系・SaaS系サイトのセクション背景に使うと先進的な雰囲気を演出できます。

JSjs</> コードを見る

↓ 枠内をスクロール
カラーブロブが3速度で浮遊します

08-12-09

カラーブロブ浮遊パララックス

柔らかい形のカラーブロブ(有機的な図形)が3つの速度でゆらゆらと浮遊する背景演出。WordPressのブランドサイトやLPの余白に置くと、優しく親しみやすい雰囲気を演出できます。

JSjs</> コードを見る

03

02

01

↓ 枠内をスクロール
手前のカードほど速く離れていきます

08-12-10

カード積層奥行きパララックス

重なり合う3枚のカードが速度差で少しずつ分離していく積層パララックス。WordPressの料金プランや実績カードの見出し演出に使うと、立体的で印象的な導入表現になります。

JSjs3d</> コードを見る

↓ 枠内をスクロール
星が3つの速度できらめきながら流れます

08-12-11

瞬く星空多層パララックス

大小の星が3つの速度レイヤーで流れながら明滅する夜空の背景演出。WordPressの占い・ホロスコープ系サイトや夜イベントのランディングページの背景として使うと幻想的な雰囲気を演出できます。

JSautojsdark</> コードを見る

⛵

↓ 枠内をスクロール
波と船が異なる速度で左右に動きます

08-12-12

波打ち際レイヤードパララックス

手前と奥の波形レイヤー、そしてその上を漂う船アイコンがそれぞれ異なる速度でスクロールに反応する海辺の背景演出。WordPressのマリン・リゾート系サイトのファーストビューに使うと爽やかな奥行き感を演出できます。

JSscrollautojs3d</> コードを見る

140. スクロール方向検知インタラクション

↓ 下スクロールで画像が縮小 / ↑ 上スクロールで拡大

08-13-01

スクロール方向で伸縮するヒーロー画像

下方向にスクロールすると画像がコンパクトに縮小し、上方向へ戻すと元のサイズへ滑らかに拡大します。WordPressの固定ヒーロー画像やプロフィール写真の表示領域を可変にしたい場面で使えます。

JSscrolljs</> コードを見る

↓ 下スクロールでボタンが消え / ↑ 上スクロールで再表示

08-13-02

方向検知フェード式フローティングボタン

下方向スクロールでボタンがフェードアウトして隠れ、上方向スクロールで再びふわっと現れます。WordPressの資料請求・予約ボタンなど、閲覧の邪魔をしたくないフローティングCTAに向きます。

JSscrolljs</> コードを見る

↓↑ スクロールしてインジケータの動きを確認

↑

08-13-03

左右にスライドする方向インジケータ

スクロール方向に応じてつまみが左右に移動し、矢印表示も切り替わります。WordPressのロングページで、現在のスクロール方向をさりげなく可視化したい場合に使えます。

JSscrolljs</> コードを見る

再生中

↓ 下スクロールで一時停止 / ↑ 上スクロールで再生再開

08-13-04

方向連動で一時停止するローディングアニメ

下方向スクロール中はローダーが一時停止し、上方向スクロールに転じると回転が再開します。WordPressの読み込み演出や装飾アニメーションを、閲覧動作に合わせて制御したい場合に使えます。

JSscrolljs3d</> コードを見る

AUTO DETECT OFF

↓ 下スクロールでON / ↑ 上スクロールでOFF

08-13-05

スクロール方向で自動反応するトグルインジケータ

クリック不要で、下方向スクロールでON、上方向スクロールでOFFへ自動的に切り替わるスイッチ風UI。WordPressで「読書モード」や「集中モード」などの状態表示に応用できます。

JSscrollclickautojs</> コードを見る

↑ 上スクロールでのみボタンが出現します

08-13-06

上スクロール時だけ現れるトップへ戻るボタン

上方向にスクロールした時だけボタンが出現し、下方向にスクロールしている間は隠れます。WordPressの記事ページで、読み返したいユーザーの動作に寄り添うUIとして使えます。

JSscrolljs</> コードを見る

↓ 下スクロールで時計回り / ↑ 上スクロールで反時計回り

08-13-07

方向で回転が反転する装飾アイコン

下方向スクロールで時計回り、上方向スクロールで反時計回りに回転する装飾アイコンです。WordPressの見出し脇や区切り線のアクセントに遊び心を加えられます。

JSscrolljs3d</> コードを見る

↓ 下スクロールで折りたたみ / ↑ 上スクロールで展開

08-13-08

方向で開閉するパンくずリスト

下方向スクロールでパンくずリストが折りたたまれて省スペース化し、上方向スクロールで全項目が展開表示されます。WordPressの階層が深いページで、邪魔にならないナビゲーションを実現できます。

JSscrolljsoverlay</> コードを見る

↓ 読み進むと青系 / ↑ 読み返すと暖色系にバーが変化

08-13-09

方向で色が変わる読了プログレスバー

読み進む下方向スクロールでは青系、読み返す上方向スクロールでは暖色系にバーの色が変化します。WordPressの長文記事で、読者の動きを色の変化で伝える演出です。

JSscrolljs</> コードを見る

↓↑ スクロールしてカードの出現方向の違いを確認

CARD 01

CARD 02

CARD 03

CARD 04

CARD 05

08-13-10

方向によって左右から現れるカードリスト

下方向スクロールで現れるカードは右から、上方向スクロールで現れるカードは左からスライドインします。WordPressの実績一覧やタイムラインを印象的に演出できます。

JSscrolljs</> コードを見る

概要詳細レビュー

↓ 下スクロールでタブが縮小 / ↑ 上スクロールで通常表示

08-13-11

方向で高さが縮むタブナビゲーション

下方向スクロールでタブバーの高さと文字が縮小してコンパクトになり、上方向スクロールで元の大きさに戻ります。WordPressの商品詳細ページのタブ切り替えUIで、閲覧領域を広く保ちたい場合に使えます。

JSscrolljs</> コードを見る

↓↑ スクロールして通知バナーの動きを確認

08-13-12

上スクロール中だけ現れる通知バナー

上方向にスクロールしている間だけ画面上部からバナーが下りてきて、下方向に転じると引っ込みます。WordPressの記事ページで、読み返す動作を検知してお知らせやキャンペーン情報をさりげなく見せたい場合に使えます。

JSscrolljs</> コードを見る

160. マグネットホバー・引力インタラクション演出

08-14-01

吸い寄せられるマグネットボタン

カーソルが近づくとボタン全体が引力で吸い寄せられ、離れると静かに元へ戻ります。WordPressのヒーローCTAボタンで注目を集める演出に使えます。

JSjs</> コードを見る

08-14-02

カーソルから逃げる反発アイコン

マウスが近づくとアイコンが反発力でスッと逃げ、離れると中央へ戻ります。WordPressの遊び心あるバッジやイースターエッグ的な装飾に使えます。

JSjs</> コードを見る

MAGNET

08-14-03

文字ごとに反応するマグネット見出し

カーソルに近い文字だけが個別に引き寄せられ、見出し全体が生き物のように揺れます。WordPressのトップページの目を引くタイトル演出に使えます。

JSjs</> コードを見る

08-14-04

磁力線風に歪むドットグリッド

カーソル位置に応じてグリッド上の粒が磁力線のように吸い寄せられ、歪みます。WordPressの背景装飾やセクション区切りのインタラクティブな演出に使えます。

JSjs</> コードを見る

08-14-05

アイコンが吸着するマグネットナビ

カーソルに近いアイコンだけが拡大しながら吸い寄せられる、Dock風のナビゲーションです。WordPressのフローティングツールバーに応用できます。

JSjs</> コードを見る

08-14-06

離すと弾んで戻るマグネットボタン

吸い寄せ中は滑らかに追従し、カーソルを離すとバネのように弾んで元の位置へ戻ります。WordPressのフォーム送信ボタンなどに躍動感を加えられます。

JSclickjsinput</> コードを見る

08-14-07

引力の強さが異なる装飾ドット

粒ごとに磁力の強さが違うため、同じ距離でも引き寄せられ方が変わります。WordPressの背景演出でランダム感のある動きを出したいときに使えます。

JSjs</> コードを見る

Magnet Card

カーソル方向にわずかに引き寄せられます

08-14-08

カーソル方向へ傾くマグネットカード

カード全体がカーソルの方向へわずかに移動・回転し、磁力に引かれているような質感を出します。WordPressのサービス紹介カードに上品な動きを加えられます。

JSjs3d</> コードを見る

08-14-09

カーソルに追従する磁力可視化リング

大きさの異なる同心円がそれぞれ違う遅延でカーソルを追いかけ、磁場のような残像を描きます。WordPressのカーソルエフェクトや特集ページの演出に使えます。

JSjs</> コードを見る

M

08-14-10

吸着してから離れるマグネットロゴ

カーソルが近づくとロゴが吸い寄せられますが、さらに接近しすぎると磁力が反転して離れます。WordPressのヘッダーロゴに意外性のある動きを持たせられます。

JSjs</> コードを見る

08-14-11

マグネットスイッチ風トグルボタン

クリックでON/OFFが切り替わるだけでなく、ホバー中はつまみがカーソル方向へわずかに引き寄せられます。WordPressの設定パネルのトグルUIに使えます。

JShoverclickjs</> コードを見る

08-14-12

カーソルに伸縮するマグネットゲージ

バー上でカーソルを動かすと、位置に応じてゲージがまるで磁力に引かれるように伸び縮みします。WordPressのスキル紹介やローディング演出に使えます。

JSjs</> コードを見る

161. エラスティック・バウンスドラッグ演出

08-15-01

バネで戻るエラスティックノブ

ノブを外周までドラッグして離すと、バネのように弾んで中心に戻ります。WordPressのジョイスティック風操作や感情スタンプの強度入力UIに応用できます。

JSdragjsinput</> コードを見る

端まで引くとゴムのように抵抗

08-15-02

ラバーバンド抵抗ドラッグ

ハンドルを引くほど抵抗が強くなり、離すとゴムひものように起点まで跳ね返ります。WordPressのプルリフレッシュや引っぱり操作の演出に応用できます。

JSjs</> コードを見る

📌
ドラッグしてみて

08-15-03

バウンド帰還ドラッグカード

カードを自由にドラッグして離すと、弾みながら必ず元の位置へ着地します。WordPressの付箋メモやドラッグお試しデモUIに使えます。

JSdragjs</> コードを見る

♥

08-15-04

揺れながら戻るペンダントドラッグ

先端のアイコンを横にドラッグして離すと、振り子のように揺れながら減衰して静止します。WordPressのお気に入りバッジやペンダント風装飾に使えます。

JSdragjs</> コードを見る

Mon

Tue

Wed

Thu

Fri

Sat

Sun

08-15-05

慣性で滑るドラッグリスト

チップを勢いよく振って離すと慣性で滑り、端では跳ね返って止まります。WordPressの日付選択バーやタグの横スクロールUIに応用できます。

JSscrolljs</> コードを見る

08-15-06

ゴムひも風ドラッグ接続線

丸ノードをドラッグすると接続線が伸びて細くなり、離すとバネのように起点へ跳ね戻ります。WordPressの相関図やマインドマップ風演出に使えます。

JSdragjs</> コードを見る

📦 在庫状況
残り12点

08-15-07

弾性ドラッグハンドルパネル

下部ハンドルをドラッグして離すと、開閉位置にオーバーシュートしながら弾むように収まります。WordPressのボトムシートや在庫確認パネルに使えます。

JSdragjsoverlay</> コードを見る

Drag

08-15-08

ぷるんと震えるゼリードラッグ

ドラッグ中は動きに合わせて伸び縮みし、離すとゼリーのようにぷるんと震えて静止します。WordPressの遊び心あるボタンやマスコットUIに使えます。

JSdragjs</> コードを見る

08-15-09

スプリング開閉ドラッグトグル

つまみをドラッグして離すと、近い側の状態へオーバーシュートしながらバネで吸着します。WordPressの設定オン/オフスイッチに応用できます。

JSdragjs</> コードを見る

✅ 完了

フリックで放り投げる

08-15-10

投げて飛んでいくドラッグ&リリース

勢いよくフリックすると慣性で飛んでいき、弱く離した場合はバネで元の位置に戻ります。WordPressのタスク完了スワイプや通知消去演出に使えます。

JSmobiledragjs</> コードを見る

張力 0%

08-15-11

伸縮するゴム風張力インジケータ

グリップを引くと帯が伸びて細くなり張力%が上昇、離すと勢いよく起点に縮んで戻ります。WordPressの負荷メーターや達成度演出に応用できます。

JSjs</> コードを見る

🎨 デザイン
✍️ 原稿
🔍 レビュー
🚀 公開

08-15-12

バウンド整列ドラッグ並べ替えリスト

行をドラッグして離すと、着地の瞬間にぷるっと弾んでから定位置に収まります。WordPressのタスク一覧や工程並び替えUIに応用できます。

JSdragjs</> コードを見る

162. スクロールスクラブ・アニメーション連動演出

↓ 枠内をスクロール
スクロール量がそのままキューブの回転角度になります

08-16-01

3Dキューブ回転スクラブ

スクロール位置を1対1でキューブの回転角度に変換する演出。慣性やイージングを使わず、指を止めれば回転もぴたりと止まります。WordPressの技術力訴求セクションやローディング後のヒーロー装飾に使えます。

JSscrolljs3d</> コードを見る

↓ 枠内をスクロール
スクロール量に応じてロケットのパーツが組み上がります

08-16-02

パーツ組み立てイラストスクラブ

バラバラに散ったロケットのパーツがスクロール量に応じて正確な位置へ集まり組み上がる演出。WordPressのプロジェクト進行度・工程紹介セクションで「完成に近づく」比喩表現として使えます。

JSscrolljs</> コードを見る

↓ 枠内をスクロール
スクロール量がキャラクターの歩数と位置になります

08-16-03

歩行コマ送りキャラクタースクラブ

スクロール量を離散的な「コマ」に区切り、キャラクター風アイコンの手足を歩行フレームごとに切り替えながら左右に移動させる演出。WordPressのオンボーディングやステップ紹介の進行キャラとして使えます。

JSscrolljs</> コードを見る

0%

↓ 枠内をスクロール
スクロール量がそのままグラスの水位(%)になります

08-16-04

液体水位スクラブ

グラス内の液体の高さがスクロール位置と完全に同期して上下する演出。WordPressの達成率・充足率メーターや目標金額の進捗表示に応用できます。

JSscrolljs</> コードを見る

↓ 枠内をスクロール
スクロール量に応じてページがめくれます

08-16-05

ページめくりスクラブ

本のページの開閉角度をスクロール量に1対1で連動させる演出。WordPressの会社案内・沿革ページやカタログ的なコンテンツで、次のページへの興味を引く導入表現として使えます。

JSscrolljs</> コードを見る

HUE 0°

↓ 枠内をスクロール
スクロール量が背景の色相(0〜300°)になります

08-16-06

グラデーション色相スクラブ

スクロール量をそのまま背景グラデーションの色相角度にマッピングし、段階的に色が変化する演出。WordPressのブランドカラー紹介やアート系ポートフォリオの背景演出に使えます。

JSscrolljs</> コードを見る

↓ 枠内をスクロール
スクロール量がSVGパスの描画進捗になります

08-16-07

SVGパス描画スクラブ

スクロール量をSVGパスの描画進捗(stroke-dashoffset)に直接マッピングし、線が描かれていく演出。WordPressの実績グラフや工程説明、署名風の演出として使えます。

JSscrolljssvg</> コードを見る

↓ 枠内をスクロール
スクロール量に応じてロゴが分解・組み立てされます

08-16-08

ロゴ分解・組み立てスクラブ

4つの三角パーツがスクロール量に応じて外側へ分解、または中央へ組み上がりダイヤ形のロゴマークを形成する演出。WordPressのブランドロゴのオープニング演出やCIページに使えます。

JSscrolljs</> コードを見る

↓ 枠内をスクロール
スクロール量に応じてタイムラインが伸びていきます

08-16-09

タイムライン進行スクラブ

縦線の伸長とマイルストーンの点灯をスクロール量に直接連動させる進行タイムライン演出。WordPressの会社沿革・プロジェクト進行ステータスの表示にそのまま活用できます。

JSscrolljs</> コードを見る

1

2

3

4

5

↓ 枠内をスクロール
スクロール量が切り替わるコマ番号になります

08-16-10

コマ撮り風パラパラスクラブ

5枚の静止画をスクロール量に応じて瞬時に切り替える、フェードを使わないコマ撮り風の演出。WordPressのビフォーアフター表現や制作工程のステップ切り替えに使えます。

JSscrolljs</> コードを見る

0%

↓ 枠内をスクロール
スクロール位置がそのまま数値になります

08-16-11

数値カウントスクラブ

アニメーションのタイマーではなくスクロール位置そのものを数値に変換して表示するカウンター演出。WordPressの達成率・売上実績・KPIダッシュボードの数字表示に活用できます。

JSscrolljs</> コードを見る

↓ 枠内をスクロール
スクロール量が太陽・月の位置と時間帯になります

08-16-12

太陽・月の運行スクラブ

スクロール量を太陽と月の軌道位置、空の明暗にそのまま変換する一日の推移演出。WordPressの営業時間案内やスケジュールセクションの背景演出として使えます。

JSscrolljsdark</> コードを見る

24. バッジ・ラベル・アイコン

在席
離席
取込中
オフライン

09-01-01

ステータスドット

在席・離席・取込中などを色付きのドットで表現。オンライン時のみ脈打つアニメーション付き。会員サイトやスタッフ紹介ページの在席表示に便利です。

CSS onlyautocss</> コードを見る

NEW

SALE

HOT

-30%

09-01-02

NEW/SALEリボン各種

角掛けリボン・帯リボン・折り返しリボンなど4種を用意。商品カードやお知らせに重ねて、新着やセールを目立たせる装飾に使えます。

CSS onlycss</> コードを見る

クリックで数字が増えます

09-01-03

通知バッジ数字

アイコン右上に数値バッジを表示。クリックで数が増え、バッジがポンと弾みます。ヘッダーの通知アイコンやカート件数の表示に最適です。

JSclickjs</> コードを見る

デザイン WordPress SEO 制作

09-01-04

ピルタグ群(削除可)

×付きのタグチップを横並びに表示。×をクリックするとそのタグが消えます。絞り込み条件や選択済みカテゴリのUIに使えます。

JSclickjs</> コードを見る

GOLD SILVER BRONZE

09-01-05

評価/ランクバッジ

GOLD・SILVER・BRONZEのメダル風バッジ。表面を光沢が繰り返し走る演出付き。会員ランクや実績評価の表示に映えます。

CSS onlycss</> コードを見る

09-01-06

アニメーションアイコン集

ベル揺れ・ハート鼓動・チェック描画・星の点滅の4種を自作SVGで表現。常時ゆるく動きます。ボタンやリストの視線誘導アクセントに便利です。

CSS onlyautocsssvg</> コードを見る

クリックで獲得演出

09-01-07

達成メダル(獲得演出)

クリックするとメダルが回転し、キラッと光って「獲得!」が飛び出します。会員のバッジ取得やゲーミフィケーション演出に使えます。

JSclickjs3d</> コードを見る

入力確認 3完了

09-01-08

進捗チップ(ステップ状態)

完了(✓)・進行中(回転)・未着手を色とアイコンで示すチップ列。フォームの入力ステップや申込みフローの現在地表示に使えます。

CSS onlycss3dinput</> コードを見る

お知らせブログイベント重要コラム

09-01-09

カテゴリラベル(色分け)

色分けされた角丸ラベル群。ホバーで少し拡大して浮き上がります。投稿一覧のカテゴリ表示やタクソノミーの視覚整理に使えます。

CSS onlyhovercss</> コードを見る

NEW

09-01-10

キラキラNEWバッジ

NEWバッジの周りで星が順番に瞬く華やかな装飾。新着記事やキャンペーンの注目ラベルとして目を引く演出に使えます。

CSS onlycss</> コードを見る

Design Development Marketing Support

09-01-11

アウトラインバッジ(ホバーで塗りつぶし)

普段は枠線のみのシンプルなバッジが、ホバーで一気に色が塗りつぶされます。WordPressのタクソノミー表示やスキルタグの控えめな装飾に。

CSS onlyhovercss</> コードを見る

セール終了まで 00:00:00

09-01-12

カウントダウンタイマーバッジ

時:分:秒がリアルタイムに減っていくバッジ(デモは0からループ)。WordPressのタイムセールや限定キャンペーンの残り時間表示に緊迫感を与えます。

JSautojs</> コードを見る

27. 通知・アラート・ステータス

保存が完了しました。

新しいバージョンがあります。

容量が残りわずかです。

送信に失敗しました。

09-02-01

アラートボックス4種

成功・情報・警告・エラーを色とアイコンで区別する通知ボックス。閉じるボタンをクリックすると消えます。WordPressの管理通知やフォーム結果表示に。

CSS onlyclickjsinput</> コードを見る JS

09-02-02

スタック型トースト

ボタンをクリックするたびに下から複数トーストが積み上がり、数秒後に個別に消えます。手動で閉じることも可能。WordPressの操作フィードバック集約に。

JSclickjs</> コードを見る

09-02-03

バナー通知(スライドイン)

上部からスライドインする横長のお知らせバナー。アクションボタンと閉じるボタン付き。「バナーを表示」クリックで再表示します。WordPressのサイト全体告知に。

JSclickjs</> コードを見る

09-02-04

インラインバリデーション表示

入力欄の下に成功✓またはエラー!メッセージがスッと出入りします。入力しながら判定、「確認」クリックでも判定。WordPressのフォーム検証UIに。

JSclickjsinput</> コードを見る

まだデータがありません

最初の項目を追加してみましょう。

09-02-05

空状態(empty state)

イラスト風SVGと案内文、CTAボタンで構成した空状態。イラストがふわっと浮遊します。WordPressの一覧が0件のときの表示に最適。

CSS onlycsssvg</> コードを見る

受付

発送

配達中

完了

09-02-06

ステータスタイムライン

注文状況を点と線で表す横型タイムライン。完了ステップは色付きでチェック、現在地は脈打つドットで示します。WordPressの注文追跡や進行表示に。

CSS onlyautocss</> コードを見る

この項目を削除しますか?

この操作は取り消せません。

09-02-07

確認ダイアログ

「削除」ボタンをクリックすると .prev 内にミニ確認ダイアログがポップアップ。キャンセル/削除を選べます。WordPressの削除前確認に。

JSclickjsoverlay</> コードを見る

09-02-08

ローディング→成功遷移

ボタンをクリックするとスピナー表示に変わり、少し待つとチェックマークの成功状態へ遷移します。WordPressの送信ボタンのフィードバックに。

JSclickjsinput</> コードを見る

処理中... 0%

09-02-09

プログレス通知(処理中%)

処理中の進捗パーセントとバーが伸び、100%到達で✓完了表示に切り替わります。ループ再生。WordPressのアップロードや一括処理の進捗表示に。

JSautojs</> コードを見る

アクティビティ

09-02-10

リアルタイム風フィード通知

「〇〇さんが登録しました」等の通知が数秒ごとに上から差し込まれ、パネル内をスクロールします。WordPressの新着アクティビティ表示風に。

JSscrolljs</> コードを見る

システムステータス

Webサイト稼働中

決済システム稼働中

メール配信遅延あり

09-02-11

システムステータスインジケータ

各サービスの稼働状況を色付きドットで一覧表示するパネル。正常時は緑がゆっくり点滅。WordPressの管理者向けステータスページやシステム監視表示に。

CSS onlyautocss</> コードを見る

予約が確定しました

新着コメントが2件あります

システムメンテナンスのお知らせ

09-02-12

通知センターベル(未読数バッジ)

ベルアイコンに未読数バッジを表示し、クリックすると通知一覧がドロップダウン表示されます。WordPress管理画面風のヘッダー通知メニューに。

JSclickjsoverlay</> コードを見る

33. エラー・404・メンテナンス・空状態

404

ページが見つかりません

トップへ戻る

09-03-01

404ページ

大きな「404」の数字がゆらゆら揺れ、下に「トップへ戻る」ボタンを配置。WordPressの 404.php テンプレートにそのまま組み込めるエラー画面です。ボタンはホバーで反応します。

CSS onlyhovercss</> コードを見る

ただいまメンテナンス中

しばらくお待ちください

09-03-02

メンテナンス中

2つの歯車SVGが逆回転しながら回り続け、「ただいまメンテナンス中」の文言を表示。WordPressのメンテナンス画面（maintenance.php やプラグインの停止中表示）に使えます。

CSS onlycsssvg3d</> コードを見る

見つかりませんでした

09-03-03

空の検索結果

虫眼鏡のイラストと「見つかりませんでした」の文言、再検索ボックスをまとめた空状態。WordPressの search.php で検索ヒット0件のときに表示する画面に最適です。

CSS onlycss</> コードを見る

エラーが発生しました

09-03-04

汎用エラー画面

「!」マークが小刻みに揺れ、「エラーが発生しました」の文言と再試行ボタンを表示。WordPressの各種エラー表示や処理失敗時の汎用フォールバック画面に使えます。ボタンはホバーで反応します。

CSS onlyhovercss</> コードを見る

COMING SOON

準備中

12日

08時間

45分

09-03-05

Coming Soon

「準備中」の見出しと装飾ライン、固定値のカウントダウン風数字を並べた公開前ページ。WordPressのサイト公開前やランディング準備中の画面として設置できます。

CSS onlycss</> コードを見る

接続がありません

09-03-06

オフライン表示

雲に斜線が引かれた断線アイコンと「接続がありません」の文言、再読み込みボタンを表示。WordPressサイトの通信エラー時やオフライン用フォールバック画面に使えます。ボタンはホバーで反応します。

CSS onlyhovercss</> コードを見る

403

アクセス権限がありません

09-03-07

403権限なし

南京錠のSVGと「403」「アクセス権限がありません」を表示する権限エラー画面。WordPressの会員限定ページや管理エリアへの不正アクセス時に表示する 403 画面に使えます。

CSS onlycsssvg</> コードを見る

まだ商品がありません

お買い物を続ける

09-03-08

空のカート／リスト

空箱のイラストと「まだ商品がありません」の文言、買い物を続けるCTAを表示。WordPress/WooCommerceのカートが空のときやお気に入りリスト未登録時の画面に使えます。ボタンはホバーで反応します。

CSS onlyhovercss</> コードを見る

読み込みに失敗しました

09-03-09

読み込み失敗→リトライ

「再試行」ボタンを押すとスピナー表示に切り替わり、少し待つとコンテンツ表示（成功）へ遷移します。WordPressのAjax読み込み失敗時のリトライUIとして使えます。クリックで動作します。

JSclickjs</> コードを見る

完了しました！

09-03-10

完了/成功ページ

大きなチェックマークが跳ねながら描かれ、上から紙吹雪風の粒子が舞い落ちます。WordPressのフォーム送信完了ページや決済サンクスページの成功画面に使えます。

JSclickjsinput</> コードを見る

429

アクセスが集中しています

10秒後に自動で再試行します

09-03-11

429レート制限クールダウン

カウントダウン秒数と進捗バーが自動で減少していくアクセス過多エラー画面です。WordPressのAPI呼び出し過多やお問い合わせフォームの連投防止表示に使えます。

JSautojsinput</> コードを見る

500

サーバーエラーが発生しました

しばらくしてから再度お試しください

09-03-12

500サーバーエラー(グリッチ演出)

大きな「500」の文字が時々ノイズ状に乱れるグリッチ演出付きのサーバーエラー画面です。WordPressの重大障害時のフォールバック画面に使えます。

JSjs</> コードを見る

48. 信頼性・権威付けパーツ

SSL暗号化通信 お客様の情報を安全に保護

09-05-01

SSL/セキュリティ認証バッジ

鍵アイコンと「SSL暗号化通信」の表示で通信の安全性を訴求。LPやECサイトのフォーム周辺に置くと安心感を高められる。

CSS onlycssdarkinput</> コードを見る

09-05-02

支払い方法アイコン列

クレジットカードや銀行振込など対応する決済手段を一覧表示。ECサイトのフッターやカート画面で支払いの選択肢を可視化する。

CSS onlycss</> コードを見る

掲載メディア

WEB TIMES Biz Journal くらしNAVI TREND+

09-05-03

メディア掲載ロゴ列

「掲載メディア」の見出しとともにダミーの媒体名ロゴを横並びに配置。第三者からの紹介実績を示し信頼度を底上げする。

CSS onlycss</> コードを見る

2025 AWARD

09-05-04

受賞歴バッジ

装飾リボン付きの円形エンブレムで受賞実績を表現。サービス比較サイトでの評価やアワード受賞をアピールするのに適する。

CSS onlycss</> コードを見る

30 日間返金保証

09-05-05

返金保証バッジ

円形バッジで「30日間返金保証」を強調し、購入への心理的ハードルを下げる。EC商品ページの購入ボタン付近に効果的。

CSS onlycss</> コードを見る

ROBOTEC Greenfield NOVA Lab Studio Ori Blue Harbor Kinetic Co.

09-05-06

導入実績ロゴウォール

導入企業名(ダミー)を格子状に並べ、画面内に入るとふわっと表示する。「多くの企業に選ばれている」実績を印象づける。

JSscrolljs</> コードを見る

皮膚科専門医佐伯直人監修医療法人直心会クリニック院長

09-05-07

専門家監修表示

専門家アイコンと肩書きを添えたクレジット表示。医療・美容・健康系コンテンツの記事や商品説明に専門性の裏付けを添える。

CSS onlycss</> コードを見る

09-05-08

認証マーク一覧

ISO風・エコ認証風の円形マークを複数並べて表示。工場や製造・食品関連ページで品質・環境基準への適合をアピールする。

CSS onlycss</> コードを見る

4.7 1,200件のレビュー

09-05-09

レビュー件数+平均評価の信頼表示

星評価と平均点、レビュー件数を組み合わせて表示。実際の利用者数の多さを可視化し購入・申込の後押しとなる。

CSS onlycss</> コードを見る

送料無料
即日発送
全額保証

09-05-10

返品/保証ポリシー要約バッジ

「送料無料」「即日発送」など購入前の不安を解消するアイコン付きバッジを列で表示。カート・商品詳細ページに最適。

CSS onlycss</> コードを見る

09-05-11

実績数値カウントアップ表示

画面内に入ると0から実際の数値まで数字がカウントアップします。導入実績や累計販売数などのインパクトのある数字を印象づけたいLPの実績セクションに使えます。

JSscrolljs</> コードを見る

一級建築士 4名
インテリアコーディネーター 6名
福祉住環境コーディネーター 8名

09-05-12

資格者内訳アコーディオン

クリックすると有資格スタッフの内訳リストが開閉します。専門性を裏付ける情報を普段は畳んでおき、必要な人だけが確認できるようにしたい場合に使えます。

JSclickjs</> コードを見る

53. ゲーミフィケーション・実績演出

09-06-01

バッジ獲得演出

ボタンを押すと新しいバッジがくるっと回転しながら光の輪とともに出現します。会員サイトや学習サイトの達成バッジ表示に活用できます。

JSscrollclickjs3d</> コードを見る

Lv.4 → Lv.5

09-06-02

レベルアップ演出

「Lv.4→Lv.5」の数字が切り替わり、周囲に光の輪が広がります。学習サイトの習熟度表示や会員ランクの昇格通知に使えます。

JSjs</> コードを見る

09-06-03

実績アンロック通知

「実績解除!」のバナーがトロフィーアイコンとともに上からスライドインします。学習サイトの継続達成通知やクエスト完了の告知に向きます。

JSjs</> コードを見る

XP320/500

09-06-04

XPバー加算アニメ

ボタンを押すと経験値バーがシュンと伸び、次のレベルまでの残量が数字とともに更新されます。学習サイトの進捗表示に最適です。

JSclickjs</> コードを見る

×0COMBO

09-06-05

コンボ・連続達成カウンター

クリックのたびに「COMBO ×3」のような数字が弾みながら増えていきます。学習サイトの連続正解や連続クリアの演出に使えます。

JSclickjs</> コードを見る

継続ログイン7日達成中

09-06-06

ストリーク(継続日数)カレンダー演出

出席した日のマスが順番に光りながら埋まっていくループ演出です。学習サイトの連続学習日数の可視化にぴったりです。

CSS onlyautocss</> コードを見る

ポイント+500獲得

なぞって削ろう

09-06-07

スクラッチくじ風報酬演出

ドラッグでなぞると銀色の層が削れて中の報酬アイコンが現れます。学習サイトのログインボーナスや抽選イベントに活用できます。

JSdragjs</> コードを見る

1Aoi980pt
2Rio860pt
3You790pt
4Sho710pt

09-06-08

チェックポイント達成スタンプ

「達成!」のスタンプがドンと押されるように出現する演出です。学習サイトのステージクリアや課題達成の記録画面に使えます。

JSscrolljs</> コードを見る

デイリーミッション

記事を1本読む

09-06-10

ミッションカード完了演出

チェックを入れるとカード全体が達成色にふわっと変化し、チェックマークが描かれます。学習サイトのデイリーミッション表示に向きます。

JSjs</> コードを見る

▼

09-06-11

ルーレット抽選(ガチャ)演出

ボタンを押すとカラフルなルーレットが勢いよく回転し、減速しながら景品を確定表示します。会員限定の抽選キャンペーンやログインボーナス企画に使えます。

JSclickjs3d</> コードを見る

7/10

09-06-12

コンプリート達成コンフェッティ演出

円形プログレスが100%まで満ちると紙吹雪が舞い上がり「コンプリート!」の達成感を演出します。学習サイトの全ミッション制覇や実績コンプリート表示に使えます。

JSjs</> コードを見る

141. リアルタイム通知・トースト演出

保存しました 変更内容を自動で保存しました

09-12-01

右下スライドイン通知トースト

画面右下からトースト通知がスライドインし、一定時間で自動的にフェードアウトします。フォーム送信後の「保存しました」通知など、WordPressサイトのAjax処理後のフィードバック表示に活用できます。

JSclickautojsinput</> コードを見る

09-12-02

積み重なるトーストスタック

複数の通知が右下に次々と積み重なるトーストスタック演出です。コメント投稿や在庫更新など複数のイベントが連続するWordPress管理画面風UIやライブ通知欄に向いています。

JSjs</> コードを見る

アップデートがあります

09-12-03

進捗バー付き自動消去トースト

通知の下部に自動で消えるまでの残り時間を示す進捗バーを添えたトーストです。会員サイトのお知らせバナーなど、消えるまでの猶予を視覚的に伝えたい場面に適しています。

JSautojs</> コードを見る

09-12-04

ステータスカラー切替トースト

成功・エラー・警告の3状態を自動で切り替えながら色とアイコンが変化するトースト通知です。フォームバリデーション結果の表示など、状態ごとに色分けしたいWordPressサイトの通知に応用できます。

JSautojsinput</> コードを見る

お知らせ 利用規約が更新されました

09-12-05

手動クローズ可能な通知トースト

×ボタンをクリックすると手動で閉じられ、再表示ボタンから呼び直せるトーストです。ユーザー自身のタイミングで消せるお知らせバナーとして、会員限定コンテンツの案内などに使えます。

JSclickjs</> コードを見る

新しいアップデートを配信中です

09-12-06

上部ドロップイン通知バナー

画面上部からバナーがドロップインするように現れる通知演出です。新着情報やメンテナンス告知など、ページ上部で目立たせたいWordPressサイトのお知らせ表示に向いています。

JSjs</> コードを見る

実績を解除しました！ 「はじめての投稿」バッジを獲得

09-12-07

バウンドアイコン通知トースト

アイコンがバウンドしながら弾むように現れる通知トーストです。実績解除やポイント獲得など、ゲーミフィケーション要素を持つ会員サイトの達成通知に活用できます。

JSjs</> コードを見る

09-12-08

順次表示される通知キュー

複数の通知メッセージが「n/件数」の表示とともに1件ずつ順番に切り替わるキュー演出です。処理ログやタスク完了通知を順に見せたい管理画面・ダッシュボードに適しています。

JSjs</> コードを見る

左右にドラッグして消せます

← スワイプ →

09-12-09

スワイプで消せる通知トースト

トーストを左右にドラッグするとスワイプするように消せる演出です。スマートフォン向けWordPressサイトで、通知を直感的なジェスチャーで閉じられるUIを再現したい場合に使えます。

JSmobiledragjs</> コードを見る

09-12-10

ベルアイコン集約通知バッジ

送信ボタンをクリックすると通知カードがベルアイコンに向かって吸い込まれるように消え、バッジの件数が増えていく演出です。ヘッダーの通知ベルに新着数を集約表示したいWordPressサイトのUIに応用できます。

JSclickjsinput</> コードを見る

通知すべて既読にする

新しいコメントがあります
注文が発送されました
プロフィールが承認されました

09-12-11

ベルアイコン開閉式通知ドロップダウン

ベルアイコンをクリックすると通知一覧パネルが下にふわっと開き、もう一度押すと閉じます。ヘッダーの通知欄をクリック展開式にしたいWordPress管理画面風UIに使えます。

JSclickjsoverlay</> コードを見る

メールを削除しました

09-12-12

円形カウントダウン付き取り消しトースト

削除などの操作直後に円形プログレスが縮みながら自動消去までの時間を示し、リング内の「戻す」ボタンで即座に取り消せる通知です。WordPressの一覧画面での誤操作防止UIに活用できます。

JSautojs</> コードを見る

22. EC・商品

🎧

ワイヤレスヘッドホン

¥12,800

🛒0

🎧

10-01-01

商品カード+カート追加アニメ

「カートに入れる」クリックで商品がカートアイコンへ弧を描いて飛び、バッジ数が増えます。WooCommerceの商品一覧で購入意欲を高める演出に。

JSecclickjs</> コードを見る

数量

1

小計 ¥2,400

10-01-02

数量ステッパー

−/＋で数量を増減し、1のとき−が無効化されます。変化時に数字がふわっと切り替わり小計も連動。カートや商品詳細の個数選択に最適。

JSecjs</> コードを見る

👕

カラー

サイズ

10-01-03

カラー/サイズスウォッチ選択

色丸とサイズチップをクリックすると選択枠が付き、メイン画像の背景色が選んだ色に変わります。WooCommerceのバリエーション商品UIに。

JSecclickjs</> コードを見る

SALE

👟

ランニングシューズ

¥9,800 ¥6,860 -30%

10-01-04

価格・割引タグ

二重線で消した旧価格に割引率バッジと新価格を並べ、角にSALEリボンを配置。WooCommerceのセール価格表示をわかりやすく訴求できます。

CSS onlyeccss</> コードを見る

🧴

残りわずか

🕯️

NEW

📦

SOLD OUT

🎁

在庫/セールバッジ

「残りわずか」が点滅し、「NEW」「SOLD OUT」「人気」など各種バッジを商品サムネに重ねます。WooCommerceの在庫状況表示に流用できます。

CSS onlyecautocss</> コードを見る

10-01-06

お気に入りトグル

ハートや星をクリックするとON/OFFが切り替わり、弾むアニメと小粒子がはじけます。WooCommerceのウィッシュリスト追加ボタンに。

JSecclickjs</> コードを見る

⌚

スマートウォッチ

¥18,500

クリックで詳細

⌚

スマートウォッチ Pro

¥18,500

心拍・睡眠計測に対応。7日間バッテリー。防水仕様。

10-01-07

商品クイックビュー

商品カードをクリックすると .prev 内に詳細オーバーレイがふわっと表示され、×で閉じられます。WooCommerceの一覧から離脱せず詳細確認できます。

JSecclickjsoverlay</> コードを見る

カート

🎧ヘッドホン¥12,800

⌚ウォッチ¥18,500

合計¥31,300

10-01-08

ミニカートドロワー

カートアイコンをクリックすると右から明細ドロワーがスライドインし、合計金額を表示します。×で閉じ。WooCommerceのサイドカートに。

JSecclickjsoverlay</> コードを見る

あと ¥1,200 で送料無料 🚚

¥0¥5,000

10-01-09

送料無料プログレスバー

「あと¥1,200で送料無料」のバーが画面表示時に目標割合まで伸びます。WooCommerceのカートで送料無料まであといくらかを促進します。

CSS onlyecscrollcss</> コードを見る

	ベーシック	プロ	プレミアム
価格	¥1,980	¥3,980	¥6,980
容量	○	○	○
保証	×	○	○
ギフト包装	×	×	○
送料無料	×	○	○

10-01-10

商品比較トグルカード

3商品のスペックを○×で並べた比較表。行にホバーすると該当行が強調表示されます。WooCommerceの商品比較・プラン選択ページに。

CSS onlyechovercss</> コードを見る

4.6 ★★★★☆ 238件のレビュー

5

4

3

2

1

10-01-11

商品レビュー星評価サマリー

平均評価と星の数、星ごとの内訳を横棒グラフで表示するレビューサマリー。WooCommerceの商品詳細ページのレビュー欄冒頭に配置すると説得力が増します。

CSS onlyeccss</> コードを見る

お届け日を選択

追加料金: ¥0

10-01-12

お届け日程選択(配送オプション)

通常便・お急ぎ便・日時指定をボタンで選択でき、選択に応じて追加料金表示が切り替わります。WooCommerceのチェックアウトの配送方法選択に。

JSecjs</> コードを見る

26. 予約・日付・カレンダー

2026年 7月

日月火水木金土

10-02-01

ミニカレンダー(月表示)

7列の月間カレンダー。今日の日付を強調表示し、日付をクリックすると選択マークが付きます。WordPressの予約サイトやイベント告知ページの日付選択に。

CSS onlybookingclickjs</> コードを見る JS

来店希望日

2026年 7月

10-02-02

日付ピッカー(入力+ポップ)

入力欄をクリックすると下に小さなカレンダーがポップし、日付を選ぶと入力欄に反映されます。WordPressの予約フォームの日付入力に最適。

CSS onlybookingclickjsoverlayinput</> コードを見る JS

予約枠を選択

10-02-03

時間スロット選択

10:00からの予約枠ボタン。空きは選択可能、満席は無効で押せません。選択すると色が付きます。WordPressの来店・施術予約の枠選択に。

CSS onlybookingjs</> コードを見る JS

1日時

2情報入力

3確認

10-02-04

予約ステップインジケータ

日時→情報入力→確認の3段階を進捗バーで表示。完了・現在・未完了を色分け。WordPressの予約フローや複数ステップ申込フォームの進捗表示に。

CSS onlybookingcssinput</> コードを見る

2026年 7月空席状況

◎余裕○あり△わずか×満

10-02-05

空席状況カレンダー

各日に◎○△×の空き記号を色分けで表示。ひと目で予約可能日が分かります。WordPressの宿泊・イベント・レッスンの空席案内に。

CSS onlybookingcss</> コードを見る

営業時間
月	10:00 - 19:00
火	10:00 - 19:00
水	定休日
木	10:00 - 19:00
金	10:00 - 21:00
土	09:00 - 18:00
日	09:00 - 17:00

10-02-06

営業時間テーブル

曜日ごとの営業時間を一覧表示し、本日の行をハイライト。定休日も明示。WordPressの店舗・サロン・クリニックの営業案内に便利です。

CSS onlybookingcss</> コードを見る

27

DAYS

夏フェス2026
7月31日 開催

10-02-07

イベントカウントダウン

開催日までの残り日数をバッジで表示(固定値)。リング装飾がゆっくり回転して注目度を高めます。WordPressのイベント・セール告知に。

CSS onlybookingcss3d</> コードを見る

9101112

月火水木金

朝礼

会議

研修

面談

10-02-08

週間タイムテーブル

曜日×時間のグリッドに予定ブロックを色付きで配置。ブロックにマウスを重ねると詳細が表示されます。WordPressの教室スケジュールや会議室予約に。

CSS onlybookingcss</> コードを見る

2026年 7月

日月火水木金土

10-02-09

月切替カレンダー

◀▶ボタンで前月・翌月に切り替えられます(ダミー2ヶ月分)。クリックで月表示が入れ替わります。WordPressの予約カレンダーやイベント一覧に。

CSS onlybookingclickjs</> コードを見る JS

2026年 7月開始日と終了日をクリック

10-02-10

期間選択(範囲ハイライト)

カレンダーで開始日と終了日をクリックすると、その間の期間が帯でハイライトされます。WordPressの宿泊予約やレンタル期間の選択に最適。

CSS onlybookingclickjs</> コードを見る JS

ご予約内容の確認

📅2026年7月18日(土)
⏰14:00 〜 15:00
👥2名様
📋フェイシャルコース

合計¥8,800

10-02-11

予約内容確認サマリーカード

日時・人数・コースをアイコン付きで一覧表示し、合計金額を明示する確認画面カード。WordPressの予約フローの最終確認ステップに使えます。

CSS onlybookingcss</> コードを見る

前日リマインダー

通知タイミング

設定に応じて「前日 18:00」にお知らせします。

10-02-12

リマインダー通知設定

トグルで通知のON/OFF、セレクトで通知タイミングを選べる予約リマインダー設定UI。切り替えると案内文がリアルタイムに変化します。

JSbookingjs</> コードを見る

28. チャット・SNS風UI

R

やっほー、今どこにいるの？

駅前のカフェだよ、来る？

M

R

行く行く！すぐ着くよ〜

待ってるね☕

M

10-03-01

チャット吹き出し(左右)

相手は左のグレー、自分は右のカラー吹き出しで会話を表現。順に出現するアニメ付き。WordPressのお客様の声やLINE風の使い方紹介に。

CSS onlychatscrollcss</> コードを見る

R

入力中…

10-03-02

入力中インジケータ

相手が返信を打っている「入力中…」を3点の波打つアニメで表現。WordPressのチャットボットやサポート演出のアクセントに。

CSS onlychatautocssinput</> コードを見る

やっほー！

元気だよ〜

10-03-03

メッセージ送信アニメ

入力欄に打って送信ボタンを押すと、自分の吹き出しが下からふわっと追加される（クリック動作あり）。WordPressの問い合わせ体験デモに。

JSchatclickjsinput</> コードを見る

この写真すごくよく撮れてるね！

吹き出しにホバー / タップして選択

10-03-04

リアクション(いいね等)

吹き出しにホバーすると絵文字リアクションバーが出現、選ぶとバッジとして付く（ホバー・クリック動作あり）。WordPressのコメント演出に。

JSchatscrollhoverclickjs</> コードを見る

Y

Yuki 3分前

この記事すごく参考になりました！

8

M

Mika 1分前

@Yuki 私も同じこと思ってました！

2

10-03-05

コメントスレッド(ネスト)

返信がインデントされ、いいね数付きで表示されるコメント欄。WordPressの投稿コメント表示やレビュー欄のデザインに。

CSS onlychatcss</> コードを見る

MMika

RRen

YYuki

SSora

10-03-06

ストーリーズ風サムネ列

グラデ枠の丸アバターを横並びにし、未読はリングがゆっくり回転。WordPressの新着情報やスタッフ紹介の導線に。

CSS onlychatcss3d</> コードを見る

A

Aoi Design

@aoi_design

10-03-07

フォローボタン切替

「フォロー」⇔「フォロー中」をクリックで切替、色が反転する（クリック動作あり）。WordPressの会員登録やお気に入り登録ボタンに。

JSchatclickjs</> コードを見る

Mikaがあなたの投稿にいいねしました
Renがコメントしました
Yukiがあなたをフォローしました

10-03-08

通知フィードリスト

アイコン付き通知の一覧。未読は左に色ドットが付き、ホバーで背景が変化。WordPressのマイページや更新履歴の表示に。

CSS onlychathovercss</> コードを見る

😊

10-03-09

絵文字/リアクションピッカー

ボタンで絵文字パレットが開き、選んだ絵文字を大きく表示（クリック動作あり）。WordPressのアンケートや気分投稿UIに。

JSchatclickjs</> コードを見る

今日の資料できたよ〜

送信済み 14:32

10-03-10

チャットバブル+既読表示

送信メッセージに時刻と「既読」を表示。読み込み後にチェックが2つに増え既読へ変化（自動アニメ）。WordPressのメッセージ機能デモに。

JSchatclickautojsinput</> コードを見る

10-03-11

いいね数カウントアップボタン

ハートをクリックするたびに数値が弾みながら増減し、色がピンクに変化します。WordPressの投稿・コメントの「いいね」ボタンに使えます。

JSchatclickjs</> コードを見る

R Ren今から向かうね！ 2
M Mika写真ありがとう！
S Sora了解です

10-03-12

オンラインステータス付きDMリスト

アバターに在席状況ドットを重ねたメッセージ一覧。未読は数字バッジで強調し、行にホバーで背景が変化します。WordPressの会員向けメッセージ機能に。

CSS onlychathovercss</> コードを見る

29. 地図・アクセス・位置

10-04-01

ピンドロップアニメ

地図風の背景にピンが上から落ちて弾みます。スクロールで表示されると再生。店舗アクセスページの地図見出しに。

CSS onlymapscrollcss</> コードを見る

10-04-02

波紋ロケーションマーカー

現在地ピンから波紋が絶えず広がります。店舗の位置を目立たせたいアクセス案内に最適。

CSS onlymapcss</> コードを見る

カフェ・スノーラビット

〒000-0000 みどり市さくら町1-2-3

最寄駅：さくら中央駅徒歩4分

10-04-03

アクセスマップ枠+情報カード

抽象地図の上に住所と最寄駅の情報カードを重ねたレイアウト。店舗ページのアクセス欄にそのまま使えます。

CSS onlymapcss</> コードを見る

さくら本店
みどり支店
あおば店

10-04-04

店舗リスト+地図連動

左のリスト項目にホバーすると、地図上の対応ピンが跳ねて反応します。複数店舗の一覧ページに。

JSmaphoverjs</> コードを見る

営業中 11:00 - 22:00

準備中〜11:00

10-04-05

営業中インジケータ

「営業中」は緑点滅、「準備中」はグレーで表示するステータス。営業時間の見出し横に置くと分かりやすい。

CSS onlymapautocss</> コードを見る

駅店

10-04-06

方向・ルート矢印

駅から店舗までの順路を流れる点線と矢印で示します。徒歩ルート案内の見出しに動きを添えます。

CSS onlymapautocss</> コードを見る

徒歩5分 320m 車2分

10-04-07

距離・所要時間バッジ

「徒歩5分・320m」などをアイコン付きバッジで表示。アクセス情報を一目で伝えられます。

CSS onlymapcss</> コードを見る

対応エリア

10-04-08

エリアハイライト（対応地域）

抽象地図上で対応エリアの区画がふわっと色づきます。表示時に再生。配達・出張対応地域の案内に。

CSS onlymapscrollcss</> コードを見る

10-04-09

ルート線描画

SVGパスの経路が始点から終点へ描かれます。表示されると再生。アクセスルートの図解に。

CSS onlymapcsssvg</> コードを見る

みどりベーカリー

N 00.00000 / E 000.00000

みどり市さくら町1-2-3

コピーしました

10-04-10

位置情報カード（座標風）

店舗名・緯度経度風ダミー・住所を並べ、ボタンで住所をコピーすると通知が出ます（クリックで動作）。

JSmapclickjs</> コードを見る

さくら中央駅から4分

駐車場完備・2分

駅前より320m・5分

10-04-11

交通手段タブ切替

電車・車・徒歩のタブを切り替えると、それぞれの所要時間案内が入れ替わります。WordPressの店舗アクセスページで複数の来店手段を案内する際に。

JSmapjs</> コードを見る

N

10-04-12

地図ズームコントロール風UI

抽象地図の右下にズームボタン、右上にコンパスを配置した装飾。ボタンはホバーで浮き上がります。WordPressの地図セクションの雰囲気づくりに。

CSS onlymaphovercss</> コードを見る

50. 会員・限定コンテンツUI

続きは会員限定です

10-05-01

ペイウォール(ぼかし+続きを読むCTA)

本文の途中からぼかしがかかり「続きを読むには登録」ボタンが重なる表示です。MemberPress等で有料記事の一部だけを無料公開する際に使えます。

CSS onlymembershipcss</> コードを見る

ゴールド会員

シルバー会員

ブロンズ会員

10-05-02

会員ランクバッジ

ゴールド・シルバー・ブロンズのランクを色分けバッジで並べた一覧です。MemberPressの会員レベルをマイページ等で視覚的に示すのに使えます。

CSS onlymembershipcss</> コードを見る

会員限定

10-05-03

限定コンテンツロック表示

鍵アイコンと「会員限定」の文字をサムネイルに重ねてロック状態を示す表示です。MemberPressの未購入コンテンツ一覧のカードに使えます。

CSS onlymembershipcss</> コードを見る

10-05-04

ポイント/マイル表示ウィジェット

保有ポイント数と次の特典までの進捗バーを表示するウィジェットです。画面内に入るとバーが伸び、MemberPressの会員向けポイント制度の表示に向いています。

CSS onlymembershipscrollcss</> コードを見る

Members Only

特別インタビュー記事

会員だけが読める限定コンテンツです。

10-05-05

会員限定タグ

記事一覧のサムネイル左上に付く「Members Only」タグの見本です。MemberPressで一般記事と会員限定記事を一覧上で見分けやすくします。

CSS onlymembershipcss</> コードを見る

10-05-06

クーポンコード入力欄

コードを入力して適用ボタンを押すと割引額が表示される入力欄です。MemberPressの会員登録・更新時のクーポン適用フォームに使えます。

JSmembershipclickjsinput</> コードを見る

10-05-07

ログイン促進バナー

「ログインしてすべての機能を利用」と呼びかける横帯バナーです。MemberPressで非ログインユーザーにページ上部から会員登録を促す用途に向いています。

CSS onlymembershipcss</> コードを見る

シルバー

基本コンテンツ閲覧
月1回のニュースレター

ゴールド

全コンテンツ閲覧
限定動画アクセス
優先サポート

10-05-08

会員特典一覧カード

会員ランクごとの特典を並べて比較できるカードです。料金表とは異なり特典内容の比較に絞った構成で、MemberPressのランク説明ページに向いています。

CSS onlymembershipcss</> コードを見る

会員証

田中太郎様

有効期限: 2026年12月31日

10-05-09

有効期限付きメンバーシップ表示

会員証を模したカードに氏名と「有効期限: 2026年12月31日」を表示する見本です。MemberPressのマイページで契約状況を確認させる用途に使えます。

CSS onlymembershipcss</> コードを見る

10-05-10

招待コード入力フォーム

招待コードを入力して送信するフォームです。MemberPressで招待制のクローズドコミュニティへの参加受付ページに使えます。

JSmembershipclickjsinput</> コードを見る

あと 03:00 で無料公開

10-05-11

会員限定コンテンツのアンロックカウントダウン

残り時間がカウントダウンし、0になると再び時間が巻き戻る無料公開までの待機表示です。MemberPressで一定時間後にコンテンツを無料開放する仕組みの見本になります。

JSmembershipjs</> コードを見る

✓ 基本記事の閲覧

✓ 限定動画コンテンツ

✓ 会員限定セミナー招待

🔒 限定動画コンテンツ(要アップグレード)

🔒 会員限定セミナー招待(要アップグレード)

10-05-12

会員ステータス切替タブ(無料/プレミアム比較)

タブを切り替えると無料会員とプレミアム会員それぞれで見える項目が変化します。MemberPressで会員ランクごとの閲覧範囲の違いを事前に見せたいページに使えます。

JSmembershipjs</> コードを見る

56. AIチャット・タイピング演出

AIアシスタント

10-06-01

AI応答ストリーミング表示

ChatGPTのように1文字ずつテキストが流れて表示される演出。AIチャットボットや自動応答UIの回答表示に使えます。

JSautojs</> コードを見る

AI

考え中

10-06-02

AI思考中インジケーター

「考え中…」の文字と波打つ3つのドットでAIが処理中であることを伝える表示。応答待ちのローディングに最適です。

CSS onlyautocss</> コードを見る

ご質問にお答えしています…
もう少しお待ちください。

10-06-03

AIチャット吹き出しグラデーション枠

送信・応答中の吹き出しの枠がグラデーションで脈打つように光る演出。処理中であることを視覚的に強調できます。

CSS onlyclickautocssinput</> コードを見る

要約して翻訳してコードを書いてアイデア出し

10-06-04

プロンプト候補チップ表示

「要約して」などの候補チップが順番にふわっとフェードインで並ぶ演出。AIチャット入力欄の提案表示に使えます。

CSS onlycssinput</> コードを見る

10-06-05

AI応答の段階的表示(コード→説明)

コードブロックが先にストリーミング表示され、続けて説明文が流れる2段階の応答演出。技術系AIツールの回答表現に向きます。

JSautojs</> コードを見る

10-06-06

音声入力風波形アニメーション

マイクアイコンと音声波形のバーが揺れ動く入力インジケーター。音声入力対応のAIチャットUIに使えます。

CSS onlycssinput</> コードを見る

10-06-07

AIアバターの脈動演出

円形のAIアイコンが応答中に光の輪を放つように脈打つ演出。チャットヘッダーのAIステータス表示に使えます。

CSS onlyautocss</> コードを見る

導入方法を教えてください

まずプラグインをインストールします。

ありがとうございます

10-06-08

チャット履歴スクロール自動追従

新しいメッセージが追加されるたびに自動で一番下までスクロールする挙動。長いAI会話ログの表示に必須の動きです。

JSscrollautojs</> コードを見る

AI提案カードのポップアップ

「こちらもおすすめ」のカードが下からふわっとポップして提示される演出。関連提案やレコメンドの表示に使えます。

CSS onlycssoverlay</> コードを見る

回答を生成しています…

10-06-10

停止・再生成ボタン付き応答完了演出

応答完了後に「停止」ボタンが「再生成」ボタンへ切り替わる演出。AIチャットの応答操作UIに使えます。

JSjs</> コードを見る

案A: 結論から述べると、プラグインの有効化だけで導入できます。

案B: まずAPIキーを取得し、設定画面に入力してください。

案C: 詳細な手順は公式ドキュメントもあわせてご確認ください。

10-06-11

AI応答の複数候補切替UI

1つの質問に対する複数の回答案を左右に切り替えながら比較できるカルーセル。AIライティングツールの候補文提示や言い換え提案に使えます。

JSjs</> コードを見る

WordPressでのSEO対策は、まずタイトルタグの最適化1と、内部リンク構造の見直し2から始めるのが効果的です。

引用元を選択してください

10-06-12

AI回答の引用元(ソース)表示演出

回答文中の番号マーカーが順にフェードインし、クリックすると根拠となる引用元カードが下に表示されます。RAG型AIチャットの出典明示UIに使えます。

JSclickjs</> コードを見る

60. 高度な日付・予約UI

	候補A 7/12(日)	候補B 7/19(日)	候補C 7/26(日)
時間帯	10:00〜	14:00〜	18:00〜
空き状況	◎ 余裕あり	△ 残りわずか	◎ 余裕あり
選択

10-07-01

複数日程比較テーブル

3つの候補日程を横並びで比較し選択できる表。レストランや施設予約サイトで候補日を一目で比較させたい場合に使う。

CSS onlycss</> コードを見る

19:00

7月10日(金)

予約日時はご覧の都市時間で表示されます

10-07-02

タイムゾーン対応時刻表示切替

「東京/ニューヨーク/ロンドン」等の都市タブを切り替えると予約時刻の表示が変わる。海外拠点向けオンライン商談予約サイトに便利。

JSjs</> コードを見る

1日時
2人数
3確認

人数を選択してください

10-07-03

予約進捗ステップバー(日時→人数→確認)

3ステップを視覚的に進む予約フォーム。次へ/戻るボタンで現在地が変わり、飲食店やサロン予約の入力導線に使える。

JSjsinput</> コードを見る

7月の空き状況

月火水木金土日 1234567 891011121314

空き混雑

10-07-04

空き状況ヒートマップカレンダー

日付ごとの混雑度を色の濃淡で表示するカレンダー。宿泊施設や会議室予約で混雑具合を直感的に伝えたい時に使う。

CSS onlycss</> コードを見る

大人13歳以上

2

子供4〜12歳

0

合計金額 ¥8,400

10-07-05

複数人予約人数セレクター

大人/子供の人数をボタンで増減させると合計金額が連動更新される。ツアーや飲食店の人数指定予約フォームに使える。

JSjsinput</> コードを見る

7/15(水) 19:00〜満席

✓

キャンセル待ちを受け付けました

空きが出次第メールでお知らせします

10-07-06

キャンセル待ちリスト登録演出

満席表示から「キャンセル待ちに登録」ボタンを押すと受付完了メッセージへ切り替わる。人気店の予約サイトで使える。

JSclickjs</> コードを見る

この内容で仮予約中です

04:59

残り時間内にお手続きください

10-07-07

予約確定カウントダウンタイマー

「あと5分で確定」の残り時間が減っていくタイマー。チケットや航空券予約で仮押さえ枠の期限を伝える演出に使える。

JSjs</> コードを見る

繰り返しパターン

選択中: 月・金

10-07-08

定期予約(繰り返し)設定UI

「毎週月曜」等の繰り返しパターンを複数選択できるチップ群。習い事やジムの定期予約設定画面に使える。

JSjs</> コードを見る

7/8 10:20
人数を2名→4名に変更
7/6 18:05
時間を12:00→13:30に変更
7/3 09:40
予約を作成しました

10-07-09

予約変更履歴タイムライン

過去の変更履歴が縦タイムラインで表示される。マイページの予約詳細で変更経緯を確認させたい場合に使える。

CSS onlycss</> コードを見る

SCREEN

選択中の座席: 0席

10-07-10

空席マップ選択(座席指定風)

グリッド状の座席から複数選択できるUI、選択済みは色が変わる。上映会やセミナーの座席指定予約に使える。

JSjs</> コードを見る

リマインダー通知

3日前にメール

1日前にメール

1時間前にSMS

10-07-11

予約リマインダー通知設定UI

「3日前」「1日前」「1時間前」などの通知タイミングをトグルスイッチで個別にON/OFFできる設定画面です。予約確認メールの事前通知設定に使えます。

CSS onlycss</> コードを見る

宿泊日程を選択(チェックイン→チェックアウト)

月火水木金土日

日付を選択してください

10-07-12

範囲選択カレンダー(チェックイン/チェックアウト)

開始日と終了日を順にクリックすると、その間の日付がまとめてハイライトされる宿泊日程選択カレンダーです。ホテルや民泊サイトの日程選択に使えます。

JSclickjs</> コードを見る

144. 不動産・物件検索UI演出

12.8万円

サンライズコート 302号室

10-13-01

お気に入りハートバウンス

物件カードのハートアイコンをクリックすると赤く染まりながら弾みます。賃貸検索サイトのお気に入り登録ボタンに。

JSclickjs</> コードを見る

家賃 6〜21万円

10-13-02

家賃レンジフィルタースライダー

2つのハンドルをドラッグして家賃の上限・下限を変更できます。トラックのクリックでも近い方のハンドルが移動。物件検索の絞り込みパネルに。

JSclickdragjs</> コードを見る

グリーンハイツA棟

8.2万円 / 1LDK

パークサイドB

9.8万円 / 2DK

リバーテラスC

11.5万円 / 2LDK

10-13-03

地図ピンクリックで詳細ポップアップ

地図上のピンをクリックすると物件の詳細カードがふわっとポップアップ表示。地図検索ページのピン連動UIに使えます。

JSclickjsoverlay</> コードを見る

3枚の写真

10-13-04

物件写真クロスフェードギャラリー

物件カードの写真が自動でクロスフェード切替。クリックや下のドットでも手動送りできます。一覧カードのサムネイル演出に。

JSclickautojs</> コードを見る

間取り図（ホバー / クリックで拡大）

10-13-05

間取り図ホバーズーム

間取り図にカーソルを乗せると拡大表示。クリックすると拡大状態を固定でき、もう一度クリックで解除。物件詳細ページの間取り確認に。

JSclickjs</> コードを見る

掲載3日以内の新着物件です

7.4万円

ステラコート101

10-13-06

比較リスト追加でカードがチェック状態に

比較ボタンをクリックするとチェックボックスが埋まり、カード全体が選択中の枠線で強調されます。物件比較機能のカードに。

JSclickjs</> コードを見る

10-13-08

絞り込みタグの動的追加・削除

候補タグをクリックすると選択中エリアに追加され、選択中タグをクリックすると解除されます。物件検索の条件フィルターUIに。

JSclickjs</> コードを見る

内見予約 - 空き状況

10 11 12 13 14 15 16

日付を選択してください

10-13-09

内見予約カレンダー選択

空いている日付をクリックすると選択状態になり、下部に予約希望日が表示されます。予約済みの日はグレーで選択不可。内見予約フォームに。

JSclickjsinput</> コードを見る

10-13-10

一覧⇔地図スライド切り替えタブ

タブをクリックすると物件一覧と地図表示が横にスライドして切り替わります。検索結果ページの表示切替UIに使えます。

JSclickjs</> コードを見る

0°

左右にドラッグして360°プレビュー

10-13-11

物件写真360度ビュー風ドラッグプレビュー

写真エリアを左右にドラッグすると背景の色合いと角度表示が変化し、外観を一周見渡しているような演出になります。物件詳細ページの外観確認コンテンツに使えます。

JSdragjs</> コードを見る

住宅ローン返済シミュレーター

借入額 4,000万円

月々の目安返済額 ¥111,000

10-13-12

住宅ローン月々返済額シミュレーター

スライダーで借入額を動かすと月々の概算返済額がリアルタイムに再計算されます。売買物件ページに設置する簡易ローンシミュレーターとして活用できます。

JSjs</> コードを見る

10. UIパーツ（アコーディオン・モーダル・その他）

月額980円からご利用いただけます。初月は無料でお試し可能です。

はい、マイページからいつでも解約できます。違約金は一切かかりません。

平日10時〜18時にメールとチャットでサポートを提供しています。

11-01-01

アコーディオンFAQ

クリックでスムーズに開閉し、＋アイコンが×に回転するFAQ。WordPressのよくある質問ページにそのまま使えます。

JSclickjs3d</> コードを見る

かんたん操作
専門知識がなくても直感的に使えるインターフェースを提供します。

月額980円〜
初期費用0円。プランはいつでも変更でき、日割りで精算されます。

導入実績1,200社
中小企業から上場企業まで幅広い業種で活用されています。

11-01-02

フェードタブ切替

タブをクリックするとコンテンツがふわっと切り替わります。WordPressの料金表やプラン比較の出し分けに便利です。

JSclickjs</> コードを見る

11-01-03

モーダルウィンドウ

ボタンで背景が暗転し、モーダルがふわっと拡大表示。×ボタンや背景クリックで閉じます。WordPressの告知やフォーム表示に。

JSclickjsdarkoverlayinput</> コードを見る

11-01-04

ツールチップ4方向

ホバーで上下左右にツールチップがふわっと出現。WordPressの用語補足やアイコンボタンの説明に使えます。

CSS onlyscrollhovercssoverlay</> コードを見る

✓ 保存しました

11-01-05

トースト通知

ボタンを押すと右下からトーストがスライドインし、数秒で自動退場。WordPressのフォーム送信完了通知などに。

JSclickautojsinput</> コードを見る

11-01-06

ページネーション

番号のホバーやアクティブで背景がふわっと変化する前後矢印付きページ送り。WordPressの記事一覧ページに最適です。

CSS onlyhovercss</> コードを見る

下にスクロールしてください
ある程度スクロールすると右下にボタンが現れます。

セクション 1
ダミーの本文テキストです。記事の内容がここに入ります。

セクション 2
ダミーの本文テキストです。記事の内容がここに入ります。

セクション 3
ダミーの本文テキストです。記事の内容がここに入ります。

セクション 4
ここまで読んだら、右下のボタンで先頭へ戻れます。

11-01-07

トップへ戻るボタン

スクロールすると右下にボタンがフェードインし、クリックでスムーズに先頭へ。長いWordPress記事の定番パーツです。

JSscrollclickjs</> コードを見る

SCROLL

11-01-08

スクロールダウンインジケータ

マウス型アイコンの中で点が落ち、下の矢印が順に点滅。WordPressのファーストビュー下部でスクロールを促します。

CSS onlyscrollautocss</> コードを見る

波（動く）

斜め

ギザギザ

11-01-09

セクションディバイダー

波・斜め・ギザギザ3種のSVG区切り。波はゆったり動きます。WordPressのセクション境目を柔らかくつなぐ演出に。

CSS onlycsssvg</> コードを見る

下にスクロール

手前のコンテンツが終わると、その下に隠れていたフッターが視差効果とともに現れます。

ページの最後に奥行きを感じさせる演出で、コーポレートサイトのWordPressテーマによく使われます。

スクロールを続けてフッターの出現を確認してください。

11-01-10

フッターリビール

コンテンツの背後に隠れたフッターが、スクロールの終わりで視差とともに現れる演出。WordPressサイトの締めの印象を高めます。

JSscrolljs</> コードを見る

1情報入力
2内容確認
3完了

11-01-11

ステップウィザードインジケーター

クリックするたびに現在地のドットが進み、通過済みのステップが色付きに変わるウィザード表示。WordPressの申込みフォームや診断コンテンツの進捗表示に使えます。

JSclickjsinput</> コードを見る

functions.php

add_action('init', function() {
  // カスタム処理
});

11-01-12

コピー機能付きスニペットボックス

ボタンを押すとコード全文をクリップボードにコピーし、ボタンが一時的に「コピーしました」表示に変わります。WordPressのカスタマイズ解説記事のコード掲載に便利です。

JSclickjs</> コードを見る

20. 特殊UI・その他

ダッシュボード

スイッチで配色が滑らかに反転します。

11-02-01

ダーク/ライトモード切替UI

スイッチ操作でミニUI全体の配色がトランジションで反転します。WordPressのサイト全体のカラーテーマ切替ボタンに応用できます。

JSjs</> コードを見る

11-02-02

ステップ式ウィザードフォーム

進捗バー付きで複数ステップを行き来できる入力フォームです。WordPressの予約や見積もり依頼フォームに最適です。

JSjsinput</> コードを見る

⟺

BeforeAfter

11-02-03

ドラッグ式ビフォーアフター

ハンドルを左右にドラッグして2枚の画像を重ねて比較します。WordPressの施工事例やレタッチ紹介に効果的です。

JSdragjs</> コードを見る

11-02-04

通知バッジ付きアイコンメニュー

アイコンに件数バッジを表示し、ホバーでバッジが弾みます。WordPress会員サイトのヘッダーメニューに使えます。

CSS onlyhovercss</> コードを見る

はじめに
特長
料金
まとめ

はじめに

スクロールに応じて左の目次が追従してハイライトされます。

特長

現在地が一目で分かるため長い記事でも迷いません。

料金

シンプルで分かりやすいプラン設計になっています。

まとめ

ぜひお気軽にお問い合わせください。

11-02-05

縦スクロールプログレス+目次追従

コンテンツのスクロールに合わせて現在地の目次項目がハイライトされます。WordPressの長文記事やマニュアルに便利です。

JSscrolljs</> コードを見る

11-02-06

セグメントコントロール

iOS風の3択トグルで、選択に合わせてスライダーが滑らかに移動します。WordPressの表示期間や表示形式の切替に使えます。

JSjs</> コードを見る

価格帯¥2,000 〜 ¥7,000

11-02-07

レンジ2点(価格帯)スライダー

下限と上限の2つのつまみで範囲を指定し、選択中の値を表示します。WordPressの商品検索や絞り込みフィルターに便利です。

JSjs</> コードを見る

配送について▾

ご注文から3営業日以内に発送いたします。地域により到着日は異なります。
返品・交換▾

商品到着後7日以内であれば返品を承ります。詳細はサポートまで。

11-02-08

展開カード(詳細インライン展開)

カードをクリックするとその場に詳細がスムーズに展開します。WordPressのFAQや商品情報のインライン表示に使えます。

JSclickjsoverlay</> コードを見る

SAVE3030%OFFクーポン

タップして
めくる

11-02-09

スタンプ/スクラッチ風インタラクション

クリックでカバーがめくれてクーポンが光りながら現れます。WordPressのキャンペーンや会員特典の演出に使えます。

JSclickjs</> コードを見る

1

2

3

4

5

11-02-10

3Dカルーセル(カバーフロー)

中央が大きく左右が奥に傾く3Dカード回転をボタンで操作します。WordPressの実績紹介やギャラリーの目玉演出に最適です。

JSjs3d</> コードを見る

⠿デザイン確認
⠿コーディング
⠿動作テスト
⠿公開

11-02-11

ドラッグ並べ替えリスト

項目をドラッグしてつかんで上下に並べ替えられるTodoリストUIです。WordPressの管理画面風のタスク優先度並べ替え機能などに応用できます。

JSdragjs</> コードを見る

タグ

11-02-12

カラーテーマスウォッチピッカー

スウォッチを選ぶとミニプレビューのアクセントカラーが即座に切り替わります。WordPressのテーマカスタマイザーやカラー設定UIのイメージ確認に使えます。

JSjs</> コードを見る

30. モバイル・レスポンシブUI

アプリ画面

11-03-01

ボトムタブナビ

スマホ画面下部の固定タブバー。アイコンをタップするとアクティブなアイコンが跳ねて色付きになります。WordPressのモバイル用フッター固定ナビに。

JSmobileclickjs</> コードを見る

A

B

C

D

← ドラッグ →

11-03-02

スワイプカード(Tinder風)

一番上のカードをドラッグで左右に振ると飛んでいき、次のカードが現れます。ポインタ操作対応。WordPressの商品・求人カードの選別UIに。

JSmobiledragjs</> コードを見る

引っ張る

プルダウン更新

リストを上から下にドラッグで引っ張るとスピナーが現れ、離すと更新される演出。WordPressのモバイル記事一覧の再読込UIに。ドラッグで動作。

JSmobiledragjs</> コードを見る

コンテンツ

オプション

11-03-04

ボトムシート

「開く」で下からシートがせり上がり、ハンドルを下にドラッグするか閉じるボタンで格納。WordPressのモバイル操作メニューに。タップ/ドラッグで動作。

JSmobilescrollclickdragjsoverlay</> コードを見る

投稿一覧

11-03-05

フローティングアクションボタン

右下の＋ボタンをタップすると子メニューが上に展開し、＋が×に回転。WordPressのモバイル投稿・追加操作に。タップで開閉します。

JSmobileclickjs3doverlay</> コードを見る

セグメント切替(タブ)

上部の3セグメントを選ぶとスライダーが滑らかに移動し、下のコンテンツが切り替わります。WordPressのモバイル記事フィルタ切替に。タップで動作。

JSmobileclickjs</> コードを見る

MySite

コンテンツ

11-03-07

サイドドロワー(ハンバーガー)

左上のハンバーガーをタップすると左からメニュードロワーがスライドイン。背景タップで閉じます。WordPressのモバイルナビに定番。タップで動作。

JSmobileclickjsoverlay</> コードを見る

受信トレイ

削除

メッセージ 1

削除

メッセージ 2

削除

メッセージ 3

11-03-08

スワイプで削除(リスト)

リスト項目を左にスワイプ/ドラッグすると削除ボタンが現れ、タップで消去。WordPressのモバイル通知・メッセージ管理に。ドラッグとタップで動作。

JSmobileclickdragjs</> コードを見る

1

2

3

4

11-03-09

ページドットインジケータ

横スワイプ/ドラッグできるスライドの下にドット。スライド位置に合わせてドットが追従します。WordPressのモバイルギャラリー・カルーセルに。ドラッグで動作。

JSmobiledragjs</> コードを見る

MySite

ページ内容

11-03-10

モバイルメニュー全画面オーバーレイ

ハンバーガーをタップすると枠内に全画面メニューがフェード展開し、項目が上から順に出現。WordPressのモバイル全画面ナビに。タップで開閉します。

JSmobilescrollclickjsoverlay</> コードを見る

MySite

コンテンツ

11-03-11

モバイル検索バー展開

虫眼鏡アイコンをタップすると、検索入力欄が横に滑らかに広がります。WordPressのモバイルヘッダーで省スペースに検索機能を組み込みたい時に。

JSmobileclickjsinput</> コードを見る

ホーム画面

🔔 新しいメッセージが届きました

11-03-12

ステータスバー風トップ通知(スワイプで閉じる)

画面上部に現れるアプリ内通知バナー。上方向にドラッグすると閉じます。WordPressのPWA風モバイル通知や新着お知らせのデモに。

JSmobiledragjs</> コードを見る

34. オンボーディング・ツアー・ヒント

ここから記事を新規作成できます。

1 / 3

11-04-01

ツアーツールチップ

「次へ」を押すたびに吹き出しが対象ボタンへステップ移動します。WordPress管理画面の初回操作ガイドに使えます。

JSclickjs</> コードを見る

11-04-02

ウェルカムモーダル

初回訪問時にふわっと表示される案内モーダル。閉じるボタンで消え、再表示も可能。会員サイトの歓迎画面に最適です。

JSjsoverlay</> コードを見る

STEP 1 / 3

アカウント作成

メールアドレスを登録して始めましょう。

11-04-03

オンボーディング進捗ステップ

「次へ」でステップが1/3→2/3→3/3と進み、上部の進捗バーが伸びます。初期設定ウィザードに使えます。

JSjs</> コードを見る

公開ステータス「公開」にすると誰でも閲覧可能になります。下書きは自分だけに表示されます。

11-04-04

ヒントバブル（?）

?アイコンにホバー、またはタップ・フォーカスすると説明バブルが出現します。管理画面の項目補足に便利です。

CSS onlymobilescrollhoverclickcss</> コードを見る

投稿一覧

公開ボタン

メディア

ここを押すと記事が公開されます。まずはお試しで下書き保存もできます。

11-04-05

スポットライト・コーチマーク

周囲を暗くして対象だけ明るく強調し、説明を表示します。「わかった」で解除。重要操作の誘導に効果的です。

JSjsdark</> コードを見る

初期セットアップ 0%

プロフィールを登録
アイコンをアップロード
最初の記事を作成
通知設定を確認

11-04-06

セットアップチェックリスト

項目をクリックすると✓が付き、進捗%とバーが更新されます。会員サイトの初期設定を促すのに使えます。

JSclickjs</> コードを見る

MyApp

✨

新機能：レポート

アクセス数や会員の動きをグラフで確認できるようになりました。

11-04-07

新機能ポップオーバー

「NEW」バッジをクリックすると新機能の紹介ポップが出ます。管理画面のアップデート告知に使えます。

JSclickjsoverlay</> コードを見る

まだ投稿がありません

最初の記事を書いて、あなたのサイトを始めましょう。

11-04-08

空状態からの誘導

データが無いときにイラストと大きめCTAで次の行動を促します。会員ダッシュボードやコンテンツ一覧の初期表示に。

CSS onlycss</> コードを見る

キーボードショートカット

検索を開く⌘K
新規投稿⌘N
保存⌘S
ヘルプ?

11-04-09

ショートカット案内

⌘Kなどのキーを装飾キー風に表示する使い方ヒント一覧。管理画面や会員サイトの操作効率を伝えられます。

CSS onlycss</> コードを見る

📝

記事を書く

エディタで簡単に投稿を作成できます。

🖼️

画像を追加

ドラッグ&ドロップでメディアを挿入。

🚀

公開する

ワンクリックでサイトに反映されます。

11-04-10

スライド式ガイド

ドットと矢印で数枚の案内を前後に切り替えます。初回ログイン時の使い方ツアーとして活用できます。

JSjs</> コードを見る

11-04-11

閉じられるヒントバナー

ページ上部の一言ヒントを×で閉じられる案内バナーです。閉じると「再表示」ボタンに切り替わります。WordPress管理画面の一時的な操作案内に使えます。

JSjs</> コードを見る

アイコンを選択してください

11-04-12

アバターカラー選択オンボーディング

好みの色を選ぶとチェックが移動し「次へ進む」ボタンが有効になります。WordPress会員登録時のプロフィール初期設定ステップに使えます。

JSjs</> コードを見る

49. 検索結果・フィルタリングUI

「木製デスク」の検索結果

木製ラウンドデスク幅100cmナチュラルな質感の天然木デスク。省スペース設計。
北欧スタイル木製ワークデスクシンプルな脚部と木製天板の組み合わせ。
折りたたみ式デスク(木製脚)使わない時はコンパクトに収納可能。

11-05-01

検索結果リスト(キーワード強調)

検索語に一致する部分をハイライト表示する結果一覧。WordPressの検索結果ページで、ユーザーが目的の記事や商品を素早く見つける手助けになります。

CSS onlycss</> コードを見る

価格: ¥1,000-¥3,000 カテゴリ: 家具在庫あり

絞り込み条件はありません

11-05-02

フィルタチップ行(選択中の条件)

現在選択中の絞り込み条件をチップで一覧表示し、×クリックで個別に解除できるUI。WordPressの商品一覧ページの条件確認に便利です。

JSclickjs</> コードを見る

全6件

商品A¥4,200
商品B¥1,800
商品C¥6,900
商品D¥2,900

11-05-03

並び替えドロップダウン

「おすすめ順・新着順・価格順」を選択すると一覧の並びがその場で入れ替わる演出。WordPressの商品一覧・検索結果の並び替え機能に使えます。

JSjs</> コードを見る

123件が見つかりました

条件: デスク / 木製 / ¥1,000〜¥3,000

検索時間: 0.08秒

11-05-04

結果件数+検索条件サマリー

ヒット件数と現在の検索条件を要約表示するヘッダー部分。WordPressの検索結果ページ冒頭で状況を一目で把握できるようにします。

CSS onlycss</> コードを見る

木製デスク¥4,200

折りたたみ椅子¥3,600

収納ラック¥5,400

11-05-05

フィルタ+結果2カラムレイアウト

左に絞り込みチェックボックス群、右に検索結果一覧を配置した定番の2カラム構成。WordPressの商品一覧ページの基本レイアウトに使えます。

CSS onlycss</> コードを見る

11-05-06

検索候補ハイライト(タイプ中)

入力中の文字列が候補リストの中で強調表示されるオートコンプリート。WordPressのサイト内検索の入力補助として使えます。

JSjsinput</> コードを見る

木製家具 ¥3,000以下家具価格
在庫あり・新着在庫新着
北欧デザイン雑貨雑貨北欧

11-05-07

保存した検索条件一覧

よく使う検索条件を「保存した検索」としてタグ付きで一覧表示。WordPressの会員向けページで再検索の手間を減らすUIとして使えます。

CSS onlycss</> コードを見る

木製デスク ¥4,200
折りたたみ椅子 ¥3,600
収納ラック ¥5,400

11-05-08

比較チェックボックス付きリスト

各結果にチェックを入れると件数が更新され「比較する」ボタンが有効化されるUI。WordPressの商品一覧で比較機能を実装する際の見本になります。

JSjs</> コードを見る

結果 1: 木製デスク
結果 2: 折りたたみ椅子
結果 3: 収納ラック

11-05-09

検索履歴タグ

最近使った検索キーワードをタグとして並べ、クリックで再検索したような挙動を再現。WordPressのサイト内検索フォーム周りの補助UIに使えます。

JSclickjsinput</> コードを見る

価格帯で絞り込む: ¥1,000 〜 ¥8,000

下限

上限

11-05-11

価格帯レンジスライダー

下限・上限のスライダーを動かすと絞り込み価格帯の表示がリアルタイムに更新されます。WordPressの商品一覧ページで価格による絞り込みUIとして使えます。

JSjs</> コードを見る

商品A¥3,200

商品B¥2,600

商品C¥4,100

商品D¥1,900

11-05-12

検索結果の表示形式切替(グリッド/リスト)

アイコンボタンで検索結果をグリッド表示とリスト表示に切り替えられます。WordPressの商品一覧・記事一覧で好みの見た目を選べるようにしたい場合に使えます。

JSjs</> コードを見る

147. プルトゥリフレッシュ・無限スクロール演出

お知らせ: メンテナンス完了のお知らせ
新着記事: 夏のおすすめコーデ特集
キャンペーン: 会員限定クーポン配布中
更新: プロフィール編集機能を改善
お知らせ: よくある質問を追加しました
新着記事: 週末の過ごし方アイデア

▼ リスト最上部から下へドラッグで更新

11-10-01

プルトゥリフレッシュ(基本)

下に引っ張ると回転インジケーターが現れる、モバイルアプリでおなじみの更新ジェスチャー。WordPressの会員向けお知らせ一覧やモバイル最適化トップで、最新情報をワンアクションで取得するUIに使えます。

JSmobiledragjs3d</> コードを見る

記事001: 春の新生活準備リスト
記事002: 在宅ワークの効率化術
記事003: 週末におすすめの過ごし方
記事004: 収納上手になるコツ

読み込み中

▼ 下までスクロールで自動読み込み

11-10-02

無限スクロール(自動読み込み)

リスト末尾に到達すると自動で次の記事を読み込むIntersectionObserverベースの無限スクロール。WordPressの記事一覧やアーカイブページで、ページ送りなしに閲覧を続けられます。

JSscrollautojs</> コードを見る

予約: 7/12(日) 12:00〜 2名
予約: 7/13(月) 18:30〜 4名
予約: 7/15(水) 19:00〜 2名
予約: 7/16(木) 20:00〜 3名
予約: 7/18(土) 11:30〜 5名

▼ 下へドラッグして更新完了を確認

11-10-03

プルトゥリフレッシュ完了チェックマーク

更新が完了するとスピナーがチェックマークに切り替わり、完了を視覚的に伝える演出。WordPressの予約状況一覧や在庫確認ページなど、更新結果を明確に伝えたい場面に向いています。

JSjs</> コードを見る

商品: レザーミニトート ¥8,900
商品: リネンシャツ ¥5,400
商品: キャンバススニーカー ¥6,200

11-10-04

「もっと読み込む」ボタン→スピナー変化

クリックするとボタン自体がスピナーに変化し、読み込み完了後に新しい商品が追加される演出。WordPressの商品一覧・ギャラリーページの「もっと見る」ボタンに使えます。

JSclickjs</> コードを見る

引っ張って更新

投稿: 今日のコーディネート紹介
投稿: おすすめカフェ巡りレポ
投稿: 週末DIYの記録
投稿: 旅先で見つけた雑貨
投稿: 手作りお菓子レシピ

▼ 引っ張り具合で矢印が回転

11-10-05

引っ張り角度連動アイコン回転

引っ張った距離に応じて矢印アイコンがリアルタイムに回転し、閾値を超えると「離して更新」に文言が切り替わるプルトゥリフレッシュ。WordPressのモバイル対応トップページで直感的な更新操作を提供します。

JSmobiledragjs3d</> コードを見る

ニュース: 新サービス開始のお知らせ
ニュース: イベント開催決定
ニュース: サイトリニューアル情報

▼ スクロールでスケルトン→本文表示

11-10-06

無限スクロールのスケルトン読み込み

スクロール末端で新しいコンテンツが確定するまでスケルトンプレースホルダーを表示する演出。WordPressのニュースフィードやSNS風タイムラインで、読み込み待ちのストレスを軽減します。

JSscrolljs</> コードを見る

最新の情報に更新しました

最終更新: --:--:--

通知: コメントが3件届いています
通知: フォロワーが増えました
通知: 下書きの保存が完了しました
通知: 新しいメッセージがあります

▼ 下へドラッグして更新するとトースト表示

11-10-07

プルトゥリフレッシュ完了トースト通知

更新完了時に「最新の情報に更新しました」というトーストメッセージが上部にスライド表示される演出。WordPressの通知一覧やダッシュボードウィジェットの更新結果通知に活用できます。

JSjs</> コードを見る

レビュー: 使い心地に満足しています
レビュー: 配送が早くて助かりました
レビュー: 期待通りの品質でした

すべて読み込みました

▼ 下までスクロールすると自動読み込み

11-10-08

全件読み込み完了メッセージ

無限スクロールでリストの最後まで読み込むと「すべて読み込みました」が表示され、それ以上の読み込みが停止する演出。WordPressの記事一覧の終端をユーザーに明確に伝えられます。

JSscrollautojs</> コードを見る

タイムライン: 出発しました
タイムライン: 目的地に到着
タイムライン: レビューを投稿
タイムライン: 次の予定を確認

▼ 引っ張るほど動きが鈍くなる抵抗感

11-10-09

引っ張り抵抗感(ラバーバンド)演出

引っ張るほど動きが鈍くなる非線形の抵抗曲線と抵抗メーターを組み合わせたプルトゥリフレッシュ。WordPressのモバイルアプリ風UIで、ネイティブアプリに近い操作感を再現します。

JSmobiledragjs</> コードを見る

今日の一言: 新しい季節が始まりました。

画像コンテンツ

広告 - おすすめアイテムをチェック

▼ スクロールでテキスト・画像・広告が混在読み込み

11-10-10

複数コンテンツ混在の無限フィード

テキスト・画像・広告风のカードが交互に無限読み込みされるフィード演出。WordPressのSNS風タイムラインや広告枠を挟んだ記事一覧の実装例になります。

JSautojs</> コードを見る

再試行

在庫: Aサイズ残り2点
在庫: Bサイズ残り5点
在庫: Cサイズ残りわずか
在庫: Dサイズ在庫あり

▼ 下へドラッグ(1回目は更新失敗を再現)

11-10-11

プルトゥリフレッシュ失敗時のリトライ表示

引っ張って更新すると1回目は通信エラーを再現し、×アイコンと再試行ボタンが表示されます。再試行を押すと通常どおり更新完了する演出です。WordPressの在庫一覧などエラー時の見た目確認に使えます。

JSclickdragjs</> コードを見る

投稿: 今週のピックアップ記事
投稿: メンバー紹介インタビュー
投稿: 制作の裏側を公開
投稿: よくある質問まとめ
投稿: 次回イベントの案内

▼ 下にスクロールすると新着バッジが出現

11-10-12

164. オフライン・接続状態検知演出

お知らせ: 新着メッセージが3件あります

最新の投稿を読み込んでいます…

11-14-01

オフライン警告バナー(スライドダウン)

オフラインになると画面上部から警告バナーがスライドダウンして表示される演出。WordPressのモバイル対応ページやPWA的なサイトで、通信断をユーザーに即座に伝えるUIに使えます。

JSmobilejs</> コードを見る

接続が復旧しました

同期待ちのデータを送信しています…

最新のコンテンツに更新中…

11-14-02

接続復旧チェックマーク通知(自動フェードアウト)

接続が復旧すると緑のチェックマーク付き通知が現れ、数秒後に自動でフェードアウトする演出。WordPressの投稿編集画面やダッシュボードで、再接続を控えめに知らせたい場面に向いています。

JSautojs</> コードを見る

接続済み

11-14-03

Wi-Fiアイコン点滅オフライン表示

オフライン時にWi-Fiアイコンへスラッシュが入り、点滅アニメーションで注意を引く演出。WordPressのモバイルメニューやステータスバー風UIに組み込むと、電波状況の変化を視覚的に伝えられます。

JSmobileautojs</> コードを見る

チャット: メッセージを送信できません

下書きはローカルに保存されています

11-14-04

再接続試行中スピナー付きバナー

オフラインになると再接続の試行回数がカウントされ、上限に達すると自動で復旧するバナー演出。WordPressのチャットプラグインやリアルタイム通知UIで、通信復旧までの過程を可視化できます。

JSautojs</> コードを見る

オフラインのため操作できません

11-14-05

オフライン時に操作不能になるボタン群

オフラインになると「いいね」「コメント」「シェア」ボタンがグレーアウトし操作できなくなる演出。WordPressの記事下アクション欄で、通信断時に誤操作を防ぎたい場合に活用できます。

JSjs</> コードを見る

強・安定した接続です

11-14-06

接続速度インジケータ(強/中/弱バー)

信号バーの本数と色で回線の強さを段階的に表す接続速度インジケータ。WordPressのモバイルアプリ風ヘッダーやライブ配信ページで、現在の通信品質を一目で伝えるのに使えます。

JSmobilejs</> コードを見る

記事: 週末のおすすめスポット5選

記事: 初心者向け家庭菜園ガイド

最終同期: --:--

11-14-07

オフラインでもキャッシュ表示を伝えるバナー

通信が切れてもキャッシュ済みの記事を表示していることを伝えるバナーと最終同期時刻の表示。WordPressのPWA化されたブログやニュースサイトで、閲覧継続性を保証するUIに使えます。

JSjs</> コードを見る

コンテンツを読み込めませんでした

通信状態を確認してもう一度お試しください

記事: 最新ニュースを表示しています

記事: 今週の注目トピック

11-14-08

再試行ボタン付きエラー表示

読み込み失敗を示すエラーカードから「再試行」を押すと読み込みが成功しコンテンツに切り替わる演出。WordPressの記事一覧やAPI連携ウィジェットの通信エラー時のフォールバック表示に使えます。

JSclickjs</> コードを見る

オンライン・接続は良好です

チャット: 相手がオンラインです
通知: リアルタイム同期が有効です

11-14-09

接続状態に応じて色が変わるステータスドット

緑(オンライン)・黄(不安定)・赤(オフライン)と接続状態に応じて色が切り替わるステータスドット。WordPressのチャットプラグインや会員向けリアルタイム機能の在席状況表示に応用できます。

JSjs</> コードを見る

0

オンライン・同期済みです

11-14-10

同期待ちアイテム数を示すバッジ

オフライン中に発生した操作の件数がクラウドアイコンのバッジに自動で積み上がり、復旧時に一括同期される演出。WordPressの下書き保存やオフライン対応フォームの状態表示に使えます。

JSautojsinput</> コードを見る

設定: 通知の受信をオンにしています

プロフィール: 最終ログイン今日

11-14-11

オフライン→オンライン切替時のトースト通知

接続状態が切り替わるたびに画面下部からトーストが現れ、数秒後に自動で消える通知演出。WordPressの会員ページやSPA的なテーマで、通信状態の変化を控えめに知らせるのに使えます。

JSautojs</> コードを見る

機内モード: オフ

11-14-12

機内モード風のアイコントグル

スイッチをオンにすると飛行機アイコンが色付き・チルト演出し、通信が停止したことを伝える機内モード風トグル。WordPressの会員設定ページや通知設定UIのオン/オフ切替に応用できます。

JSjs3d</> コードを見る

レイアウト・セクション

01. ヒーローセクション

未来をつくる、Webの力。

順次フェードインヒーロー

色は、動きだす。

動くグラデーション背景ヒーロー

視線を、奪う。

マウス追従パララックスヒーロー

タイピング風見出しヒーロー

ふたつの色が、ひとつの物語に。

斜めクリップ2分割ヒーロー

時を超える、上質。

Ken Burnsヒーロー

ひかりが、あつまる場所。

浮遊パーティクル背景ヒーロー

景色が変わる、体験が変わる。

自動クロスフェードスライドショーヒーロー

流れに乗って、前へ。

波形SVGヒーロー

跳ねる言葉、弾む心。

バウンド文字ヒーロー

境界を、超えていく。

スプリットスライドインヒーロー

点が、線になる。

ドットマトリクス波紋ヒーロー

11. CTA・バナー・お知らせ

春の新生活応援キャンペーン

グラデーションCTAバナー

追従サイドCTA

カウントダウンタイマーバナー

上部お知らせバー

プレミアムプラン

リボン付きCTAカード

今日から、はじめよう。

波打つCTAセクション

Cookie同意バナー

メルマガに登録

メルマガ登録インラインCTA

お問い合わせはこちら

パルス強調CTAボックス

週末限定ディナーご予約受付中

斜めストライプ背景バナー

二択スプリットCTA

ゴール達成プログレスCTA

16. フッター

4カラムフッター

波形トップ付きフッター

ニュースレター付きフッター

ミニマル中央寄せフッター

大見出しCTAフッター

地図風連絡先フッター

斜めカット上端フッター

SNSアイコンが波打つフッター

アコーディオン式モバイルフッター

グラデーションボーダー上端フッター

言語切替セレクタ付きフッター

グラスモーフィズムフッター

31. サービス・特徴紹介

高速表示

安全設計

簡単操作

アイコンボックス3列(特徴)

価値提案グリッド

番号付き特徴リスト(縦)

交互配置の特徴(ジグザグ)

チェック付きメリット一覧

サービスカード(リンク付き)

Before→After訴求

タブ切替の特徴紹介

中央見出し+3特徴

ホバー展開特徴タイル

柔軟な運用

導入までが早い

3Dフリップ特徴カード

自動切替スライド特徴紹介

115. 分割スクリーン・スプリットレイアウト演出

ホバー連動スプリットヒーロー

上下2分割スライド切替コンテンツ

斜めクリップ分割レイアウト

非対称伸縮スプリットパネル

ふたつの色が、
ひとつの物語に。

週末限定ディナー
ご予約受付中

季節を味わう、
大人の隠れ家。

導入企業数社