CSS表現を一度作って終わらせず、学習コンテンツ・体験デモ・再利用素材・実サイトへ循環させる運用設計です。
見た目の表現集ではなく、専門知識を伝わる体験へ変換する実践資産として育てます。
急成長しているのは、汎用的なAI利用だけではなく、導入・編集・業務設計まで扱う領域です。
当プロジェクトへの示唆： Web制作・メディア運用・経済教育・WordPressという専門領域に、AIとデザイントークンを接続する。価値は「AIを使える」ことより、「専門知識を再現可能な体験へ編集し、運用できる」ことに置く。
記事とラボを別々に増やさず、中央の原本から用途別に展開。検証結果を原本へ戻します。
印象・目的・使いどころを、初心者向けの言葉で理解する。
実物を動かし、強さ・速度・余白を変えて違いを体感する。
CSS変数、数値、名前、軽量版を共通の再現条件にする。
HTML雛形、プロンプト、WordPressやLPへの使用例へ展開。
Claude/GPT、修正前後、端末差、成果の違いを確認して還元。
どこへ行けば何ができるかを固定し、同じ解説やコードの重複を防ぎます。
なぜ使うか、どんな印象か、作り方と失敗例を理解する場所。
動くデモ、数値調整、比較を通じて自分の用途を判断する場所。
同じ表現を再現する共通言語。変数・命名・軽量版を管理。
Claude/GPT、修正前後、モバイル差を並べて選ぶ場所。
完成CSS、HTML雛形、プリセット、再現プロンプトを持ち帰る場所。
複合演出を実案件へ適用し、WordPressやLPへ実装する場所。
技術名より「何を伝える動きか」を主役にして、初見でも選べる分類にします。
見出し・カード・CTA。opacity / distance / duration / blur。
手順・年表・カード群。delay / stagger / duration。
ロードマップ・工程図。speed / glow / progress。
歴史・物語・ヒーロー。perspective / scale / translate-z。
更新・検知・注目点。scale / opacity / interval。
背景・区切り・ブランド。blur / opacity / glow / cycle。
「もう少しゆっくり」「少しだけ光らせる」を、共通の名前と段階へ翻訳します。
| トークン | 意味 | 基本値 | 調整の目安 | アクセシビリティ |
|---|---|---|---|---|
| --motion-duration | 動作にかける時間 | 900ms | 強調420ms / 説明900ms / 没入2200ms | reduced-motion時は即時表示 |
| --motion-distance | 登場・移動距離 | 16px | 本文8px / カード16px / 演出32px | 大移動は静止へ置換 |
| --motion-stagger | 順番表示の間隔 | 180ms | 情報量が多いほど80〜140ms | 順序はDOMでも維持 |
| --glow-strength | 光の強さ | 0.28 | 背景0.08 / 通常0.18 / 主役0.38 | 光だけで状態を区別しない |
| --glass-blur | ガラスのぼかし | 12px | モバイルは6〜8pxへ軽量化 | 非対応時も背景色を残す |
| --depth-level | 奥行きの段階 | 3 levels | 前景 / 中景 / 背景の3段階を基本 | 静止画でも階層差を維持 |
一般公開で価値を体験でき、特典と講座では実装までの距離を縮めます。
理解し、試して、信頼できる。
コピーしてすぐ使える。
実案件へ組み込める。
最初から数を増やさず、6テーマが一周つながることを完成条件にします。
作って学び、触って選び、トークンで再現し、実装して成果を測る。この循環そのものをAI TREND UNIVERSEのノウハウにします。