Motion website sample
画像ではなく、コードで動く見せ場を作る。
Fable 5で作った作例の、その中身
触れるホームページを作るSkillを配布します。
東京メトロ3Dマップ、水面サイト、四季のモーション、猫のお腹ぽよぽよまで。 Xで100万impを超えた流れを、ただの作例紹介で終わらせず、作れる側に回るためのSkillとして渡します。
PC推奨。zipを保存したら、まず中のSKILL.mdから読んでください。
LIVE DEMO CAPTURE
22 sec
100万imp超
実際に伸びた作例から設計
20+
制作・QA・公開の参照ガイド
1 zip
Skill本体とスターターを同梱
WHY THIS SKILL
リンクを眺めるだけだと、次の日には作れない。
すごい作例は、見た瞬間のテンションは上がります。けれど、実務で使えるホームページにするには、ヒアリング、構成、デザイン、実装、フォーム、SEO、公開、QAまでの型が必要です。
今回配るSkillは、Fable 5の勢いを「触れるデモを作る力」に変えるための制作手順書です。派手な演出だけでなく、申込や問い合わせにつながるLPにも寄せられるようにしています。
WHAT IS INSIDE
ただのプロンプトではなく、Web制作の工程を丸ごと持たせています。
ホームページやLPを作るときに、最初の壁打ちから公開前QAまで抜けないようにするSkillです。Fable 5のショーケース制作にも、実務寄りのLP制作にも使えるように分岐を入れています。
web-production/
├─ SKILL.md
├─ references/
│ ├─ conversion-design.md
│ ├─ animation-patterns.md
│ ├─ webgl-showcase.md
│ └─ qa-checklist.md
├─ assets/starter/
└─ scripts/qa_check.py
サイト設計から始められる
ヒアリング、サイトマップ、ファーストビュー、CTA、信頼要素まで、作る前のズレを減らします。
リッチ演出まで踏み込める
GSAP、WebGL、スクロール演出など、作例のような「触って楽しい」サイトの見せ場を作れます。
公開前の粗さを潰せる
文字化け、画像劣化、レスポンシブ崩れ、AIっぽさをQAで見直す前提まで入れています。
DOWNLOAD
今のうちに受け取って、作例を見る側から作る側へ。
Fable 5の波は短いです。作例を見て終わるより、作れる型を手元に置いて、自分の商品、LP、セミナー、特典ページに変えてください。
Skill zipをダウンロード
1
zipを保存
このページのボタンからSkill一式をダウンロードします。
2
解凍して配置
使う環境のSkillフォルダに置き、まずSKILL.mdを読み込ませます。
3
自分の題材で試す
商品、店舗、セミナー、特典など、作りたいサイトの情報を入れて動かします。
FAQ
受け取る前に、よくある不安だけ潰しておきます。
Fable 5専用ですか？
作例はFable 5文脈ですが、Skill自体はWeb制作の工程設計なので、CodexやClaude系のSkill運用でも使える構成です。使う環境に合わせて読み込ませてください。
ノンデザイナーでも使えますか？
使えます。ただし、いきなり商用納品に使うより、まずは自分の特典ページやデモLPで試すのがおすすめです。公開前QAは必ず通してください。
どんなサイトに向いていますか？
LP、ブランドサイト、ポートフォリオ、店舗サイト、採用サイト、ショーケースサイトに向いています。フォーム、SEO、公開、WordPress化の参照も入っています。
別ページ遷移は必要ですか？
不要です。記事内やLINE内の特典リンクからこのページへ来た人が、そのままzipをダウンロードできる設計にしています。