Relume

Relumeは、AIサイトマップ生成ツールとAIワイヤーフレームツールの役割を一度にこなす。サイトを説明するテキストを書けば、推奨ページのサイトマップと各ページのワイヤーフレームが返ってくる。構造には空白の枠ではなく実在のセクションが入るため、見た目を整えた後ではなく、早い段階でレイアウトを判断できる。

ライブラリには、ページ種別ごとに整理された大量のレスポンシブ部品が入っている。ヒーロー、料金表、お客様の声、フッターなどが揃う。各セクションはFinsweetのClient-First命名に従うので、担当が一人でも十人でも構造は同じに保たれる。

プロジェクトができたら、ネイティブで編集可能な要素としてWebflowかFigmaへ送る。これによりRelumeは実用的なWebflow用ワイヤーフレームツールになり、Figmaプラグインはワイヤーフレームとデザインガイドを編集可能なレイヤーとして取り込む。Webflowでは1回の取り込みでページ、セクション、コピーが作られるため、ワイヤーフレームは静止画ではなく動く土台になる。

Relumeはスタイルガイド作成の役割も担い、生成したページに合わせて色、書体、余白のルールを定める。どのセクションも共通の視覚的な基準から始められる。ただしこれは出発点であり、完成したデザインシステムではない。

ツールは生成した文章でセクションを埋め、ワイヤーフレームが実際のページのように読めるようにする。この文章は差し替える前提であり、最終的な内容として扱うのは誤りだ。

RelumeはコンポーネントをReactコードとして出力できる。デザインツールの外まで工程を伸ばせる点が強みで、生成した構造をそのままフロントエンドの実装に流し込みたいチームに向く。