Minimal Motion Hero

動く要素は1つ、意味は明確に。抑制を尊重するモーション。

AIをヒーローセクションデザイナーに変え、ささやかなモーション1つで穏やかでミニマルなヒーローを作ります。目的を持って動く要素は1つだけ、それ以外は静止しています。

こんな方におすすめ

忙しくなく、生きていると感じるヒーローがほしいデザイナー、創業者の方

所要時間

初稿まで~20分

レベル

中級

3ステップでインストール

登録不要。CLIツールも不要です。お使いのAIを選んで、1行コピーして貼るだけです。

Pro — 全511件のスキル

ご自分で入れたい場合は、スキルを購入（$4.99）し、購入完了画面からZIPをダウンロードして、上のディレクトリに展開し、AIのセッションを再起動してください。結果は同じです。すでに購入済みの場合は、AIアシスタントにダウンロードしてもらうこともできます。

パックの内容

SKILL.md（手順書）1点とスターターテンプレート1点が入っています。プレビューはこちらです：

Minimal Motion Hero

When to use

Your hero section is a static wall of text and a screenshot, and visitors bounce before reading the headline
A product page needs to feel alive without turning into a carnival of floating blobs and parallax layers
You have one thing worth showing in motion — a workflow, a transformation, a before-and-after — and it deserves the spotlight
A rebrand toward minimalism left the hero feeling dead, and you want motion that respects the restraint
You are A/B testing a calmer hero against a busy one and need a disciplined minimal version to compare

Workflow

Choose the one moving thing (input: your product and message → output: a single motion concept)
Minimal motion means exactly one element moves. Pick the element that carries the product's core idea: a toggle flipping between two states, a line drawing itself, a card sliding into place, a number counting up to a real figure. Write down what the motion communicates in one sentence — "the setup takes three steps" or "the inbox goes from chaos to calm." If you cannot state what the motion means, it is decoration, and decoration is the first thing a minimal hero cuts.
Write the still frame first (input: motion concept → output: the static hero)
Design the hero as if motion did not exist: headline, one supporting line, one call to action, and the element in its resting state. The still frame must make sense on its own, because many visitors will see exactly that — motion may be disabled, reduced by their settings, or simply missed. The headline carries the promise; the motion only underlines it. If the hero only works with the animation playing, the hierarchy is wrong.
Choreograph one gesture (input: still frame → output: motion spec)
Define the single gesture precisely: what moves, from where to where, over how long, with what easing, and whether it loops, plays once, or responds to scroll or hover. Keep it slow and restrained — roughly 400–800 milliseconds for a one-shot gesture, gentle easing (ease-out, never linear or bouncy), and a loop only if the motion is ambient (a slow pulse, a drifting gradient) rather than informational. Two gestures competing for attention is not minimal; it is a busy hero wearing a minimal costume.
Respect reduced motion (input: motion spec → output: an accessible implementation)
Honor the visitor's reduced-motion preference: when it is set, the hero shows the still frame with no movement at all — no slower version, no partial version, just still. Keep the moving element out of the way of reading: nothing should slide across the headline while someone is trying to read it, and no motion should auto-play with sound. The motion must also degrade gracefully when images or scripts fail: the still frame is the fallback, not an error state.
Tune by watching, not by feeling (input: built hero → output: a verified hero)
Watch five real people (or recordings) encounter the hero and note two things: where their eyes go first, and whether anyone re-reads the headline because the motion distracted them. If eyes go to the motion before the headline, shrink the motion or slow it down; the headline must win. If anyone says the page felt "busy," you have two gestures hiding in one — find the second and cut it. Ship only when the motion feels like a quiet underline, not a wave.