Revyme
RevymeはFramer代替として開発されたオープンソースのビジュアルWebサイトビルダーです。ピクセルパーフェクトなWebデザインをノーコードで設計し、Next.jsコードとして提供してくれる、というものになります。
主な機能として、任意の要素を再利用可能なコンポーネントとして登録、デフォルト状態、ホバー状態、オープン状態など、必要な視覚状態を設定し、クリックやホバー、スクロールなどのトリガーと連動させることができます。
また、デスクトップ用デザインをベースに、タブレットやモバイル端末向けの調整を直接設定可能で、任意のタイミングのカスタムブレークポイントも追加可能、オーバーライド機能は近似値ではなく、実際のCSSスタイルを適用します。
本格的なCMS機能も備えられており、タイプドコレクション、フィルタリング・ソート可能なリスト、ページネーション、動的ルートに対応した詳細ページなどを実装可能。任意のフィールドを任意の要素に紐付けるには、対象要素を指定するだけで完了します。
さらに、スプリング物理学に基づくアニメーション、イージング曲線、スクロール連動型変形、テキストエフェクト、文字単位の段階的表示など、すべてのアニメーション効果をライブプレビューで視覚的に調整できます。
もちろん多言語対応機能も用意。地域設定を追加して、インラインで翻訳を行うことで訪問者に適切なコンテンツ、URL、SEOメタデータを提供できます。プラグインの拡張なビジュアルフォームエディターも備えられているそうです。
設計から出荷まで必要なすべての機能やリソースが概ね揃えられており、更にチーム向けに設計する事でそれぞれの作業をそれぞれの専門家に分担できるなど、実用的な設計が為されている印象でした。詳細は以下でご確認下さい。
