AnimaHTMLFixer Anima使Web AnimaHTMLFixer Anima使Web

AdobeXDとFigmaでサイト完成見本を素早くWebページにします。


LEAN

通常、完成見本データをいただいてからのコーディング時間は「機能 ✕アニメーション ✕ ページの量」で長くなるものです。
そのため、納品までの時間が延び、検証や公開が遅れます。

そこでLEANSYSTEMでは、Animaというプラグインを用いてHTML/CSSのマークアップを短縮し、
公開までの時間を極端に短くするオープンソース【
AnimaHTMLFixer】を作成しました。
通常、完成見本データをいただいてからのコーディング時間は「機能 ✕アニメーション ✕ ページの量」で長くなるものです。
そのため、納品までの時間が延び、検証や公開が遅れます。

そこでLEANSYSTEMでは、Animaというプラグインを用いてHTML/CSSのマークアップを短縮し、
公開までの時間を極端に短くするオープンソース【
AnimaHTMLFixer】を作成しました。

AnimaHTMLFixerは…

XD・Figma完成見本データ そのままのデザインでWebページ公開する だけでなく…

FUNCTION FUNCTION

レスポンシブ対応 パソコン用・スマホ用の
デザインデータを用意するだけでOK!
タブレットや320pxの幅の狭いスマホにも対応します。

AnimaのHTML/CSS修正 AnimaでエクスポートされるHTMLファイルは
Webサイトとして公開するには不十分です。
AnimaHTMLFixerはその不十分な部分を補います。

Figma・XD上で「inc-」という命名規則に従って
グループ名・レイヤー名を書くことで
簡単に動的コンテンツを埋め込むことができます。
youtubeなどを簡単埋め込み
Figma・XD上で命名規則に従って
グループ名・レイヤー名を書くことで
簡単にアニメーションを追加できます
簡単アニメーション導入
CSVファイルを用いて
HTMLを書き換えることなく
設定・変更することができます
リンク・SEO・Meta情報管理

Adobe XD もしくは Figma上でデザイン変更した後
Animaでエクスポートしたファイルをviewフォルダに
入れるだけで簡単変更!
デザイン変更が簡単



特に静的なランディングページの制作に向いており、応用すればWordPressのテーマファイルにも対応可能です。

デザイナーの方、HTML/CSSコーディングの時間を短縮したい方、Animaを既に使用している方は
無料でGitHubに公開していますので、ぜひご活用ください。
特に静的なランディングページの制作に向いており、応用すればWordPressのテーマファイルにも対応可能です。

デザイナーの方、HTML/CSSコーディングの時間を短縮したい方、Animaを既に使用している方は
無料でGitHubに公開していますので、ぜひご活用ください。
初回30分相談無料です。その後、Figmaのグループ構成・命名規則チェック、ライブラリの使用方法などの詳細サポートは1時間10,000円になります。
初回30分相談無料です。その後、Figmaのグループ構成・命名規則チェック、ライブラリの使用方法などの詳細サポートは1時間10,000円になります。
pageTop