画像からコードへの変換
スクリーンショットや画像をアップロードすると、Frontyが数分でデザインからHTML/CSSコードを生成します。ソースでは、出力はクリーンで編集可能なことを意図しているとされています。
Frontyとは？
Frontyは、ウェブページのスクリーンショットやデザイン画像を編集可能なウェブサイトコードに変換する、AI搭載の画像からHTML/CSSへの変換ツールです。この製品は、最初のコードを手書きせずに、ビジュアルなモックアップから実際に動作するHTML/CSSへ移行したい人を対象としています。
コードが生成された後は、Frontyのオンラインレイアウトエディターでコンテンツやデザインを調整したり、ソースコードをダウンロードしたり、Frontyホスティングでサイトを公開したりできます。また、サイトではカスタムドメイン、プランごとのホスティング上限、既存アプリ向けの統合パッケージもワークフローの一部として案内されています。
Frontyでできること
ノーコードのウェブサイトエディター
オンラインのレイアウトエディターを使って、コード生成後にコンテンツやデザインを変更できます。エディターは、結果をノーコードで調整するための手段として位置づけられています。
ホスティングとコード出力
完成したサイトをFrontyのホスティングサービスで公開するか、ソースコードをダウンロードして手動で利用できます。ワークフローは、ホスティング公開とコード出力の両方に対応しています。
ドメインとプランの選択肢
独自ドメインを接続するか、フリーミアムプランに含まれる無料サブドメインを使用できます。料金ページでは、プランごとのホスティングとページ数の上限も示されています。
Bootstrapベースの出力
技術ページによると、FrontyはBootstrapベースのコードを生成し、minify、最適化された画像、アクセシブルなマークアップなどのベストプラクティスを適用します。
既存アプリとの統合
Frontyによると、FAQで触れられているRuby on Rails gemを含む既存アプリ統合をサポートしており、アプリ内でエディターを使ったりページを最適化したりできます。
利用シーン
“デザインモックアップを動作するページに変換する”
デザイナーはウェブページのモックアップをコードに変換し、その後エディターを使ってコピー、スタイル、レイアウトを一から作り直すことなく調整できます。
“1つのワークフローでサイトを公開する”
小規模チームは、個別のデザイン、コーディング、デプロイのツールを組み合わせる代わりに、サイトを作成し、独自ドメインを接続して、Frontyホスティング経由で公開できます。
“クライアントワーク向けのコードベースの土台を作る”
制作会社は、クライアントのスクリーンショットから初期実装を生成し、その後、引き渡しや追加開発向けに調整できます。
“既存アプリ内で作業する”
既存アプリを保守しているチームは、FAQで説明されている統合パッケージを使ってFrontyのレイアウトエディターを追加し、既存ページを最適化できます。
“小さく始めて後からアップグレードする”
軽量な初期構築が必要なユーザーは無料プランから始め、ブランド表示の削除や利用拡大が必要になったら有料プランに移行できます。
よくある質問
Frontyは何に使いますか？
Frontyは、AIを活用したウェブページのデザインからコードへの変換サービスです。ウェブページデザインのスクリーンショットや画像をアップロードすると、FrontyがHTML/CSSコードを生成し、オンラインのレイアウトエディターで編集したり、Frontyのサーバーでホスティングしたりできます。
Frontyはどのような入力に対応していますか？
ソースによると、FrontyはスクリーンショットおよびJPEG/PNG画像を受け付けており、技術ページではコード生成の入力としてスケッチファイルにも言及しています。
Frontyがコードを生成した後は何ができますか？
Frontyの資料によると、ノーコードのオンラインエディターでコンテンツやデザインを編集したり、ソースコードをダウンロードしたり、Frontyのホスティングサービスで直接サイトを公開したりできます。
Frontyのブランド表示を削除できますか？
FAQでは、無料利用では「Powered by Fronty」バッジを表示し続ける必要があり、有料パッケージではそれを削除できると説明されています。料金ページにはフリーミアムと有料プランも記載されています。
Frontyは既存のアプリやウェブサイトで使えますか？
FAQでは、既存アプリ向けの統合パッケージが案内されており、Ruby on Rails gemを使って既存ページの最適化やアプリへのオンラインレイアウトエディター追加を支援できるとしています。
クイック情報
- カテゴリ
- AIサイトビルダー
- 主なワークフロー
- 画像またはスクリーンショットからHTML/CSSへ
- 記載されている入力形式
- スクリーンショット、JPEG/PNG、スケッチファイル
- ホスティング
- Frontyホスティングサービス
- 価格
- フリーミアムと有料プラン
- ソースドメイン
- fronty.com
Fronty のトラフィック分析
トラフィックデータは参考情報としてご利用ください。
- ドメイン評価
- 57