AIが画像をHTMLコーディングしてくれるFrontyを試してみた

AIが画像をHTMLコーディングしてくれるFrontyを試してみた

  • このエントリーをはてなブックマークに追加

様々なサービスでAIが導入されている今日此頃ですが、Webにも期待感を持たせてくれるようなFrontyのサービスが登場しました。

目次

Frontyとは?

Frontyは、Webページのデザイン画像をアップロードするだけでAIが画像をHTMLにコンバートしてくれるWebサービスです。

複雑なレイアウトのコーディングはできませんが、ガイドラインに沿ってデザインをしておくだけで、たったの数分で簡単にHTMLコーディングしてくれる魅力はあります。もちろん、画像からコーディングした場合でもブラウザ上で簡単に修正ができるようになっています。

無料の場合には、Frontyのサブドメインに公開されますが、有料プランの場合には独自ドメインの利用もできるようになっています。

Frontyの使い方

さくっと使い方を紹介したいと思いますが、AIがコーディングしてくれるものの、複雑なレイアウトはやはり現状では難しいです。下記のガイドラインページを参考にレイアウトデザインします。
https://fronty.com/guidelines

  • グリッド、セクション別に分ける
  • 複雑なレイアウトは不可
  • ワイヤーフレームはコーディングできない
  • 並列で画像を並べない

今回はこんな感じのシンプルなデザイン画像をサンプルで用意してみました。

ユーザー登録

まずは下記にアクセスします。
https://app.fronty.com/register

ユーザー名、メールアドレス、パスワードを入力してユーザー登録をします。
Frontyの使い方

ユーザー登録をすると登録したメールアドレスに認証メールが届きますので、「Activate Account」をクリックして有効化しておきましょう。

ダッシュボードからデザイン画像を登録

そしたら、ダッシュボードにアクセスしてログインします。
https://app.fronty.com/

アクセスしたら、早速「Create new website」をクリックして新しくサイトを作成します。
Frontyで新規Webサイトを作成

次の画面が表示されたら「Upload your design」を選択します。
FrontyのUpload your designを選択

この画面が表示されたら画像をドラッグ・アンド・ドロップでデザイン画像をアップロードします。「Select language」で他の言語が選択できますが、残念ながら現在のところ日本語には未対応ですので、「English」のままでアップロードします。
Frontyにデザイン画像をアップロード

アップロードが完了したら右上の「Next」がクリックできるようになりますので、「Next」をクリックします。
Frontyに画像をアップロード完了

無料の場合、公開できるドメインはFrontyのサブドメインとなりますので、好きなサブドメインとサイトのタイトルを入力して「Create website now」をクリックします。
Frontyにドメインとサイトタイトルを登録

するとダッシュボード画面に戻りコーディング処理が行われます。プログレスバーで目安が確認でき、2、3分前後の速さで処理してくれました。
FrontyでAIがコーディング中

処理が完了したらマウスオーバーで「Preview」で確認してみます。
FrontyのPreviewをクリック

AIが独自にコーディングした内容になっていて文字のレイアウト崩れなどがあり、実際のデザインが多少変更されたりしています。
画像からAIがコーディング

Designerで編集

「Designer」モードで崩れた文字の修正などの簡単な編集できます。

ダッシュボードで「Designer」を選択します。
FrontyのDesignerを選択

要素を選択すると移動などの変更ができます。
FrontyでHPを編集

サイドバーは、marginやpaddingなどのスペースの調整や、テキストの位置、色などを変更できます。
Frontyのサイドバー

「+」のアイコンクリックで要素を追加できます。
Frontyの要素を追加

終わったら忘れずに画面上部の保存アイコンで保存をしておきます。

サイトの公開

ダッシュボードに戻ったら、「Publish live」をクリック、「Yes, I’m sure」クリックで公開できます。
Frontyのサイトを公開

手早く作成してみたものを公開してみました。もちろん、粗い部分はまだまだ色々とありますが、短時間でAIが殆どの作業をしてくれるという魅力は今後の改善によってさらなる完成度の高いサービスとしてぜひとも期待したいですね。
https://awesome.fronty.com/

弊社でもAIを活用したサービス「Automa」を展開しています。ぜひともチェックしてみてください。
automa(オートマ) | AIによるLINEへのWebメディア情報自動配信サービス

  • このエントリーをはてなブックマークに追加

記事作成者の紹介

マーツ(その他)

SONICMOOVでは、Webデザイナー、コーダーの経験を経て、Webディレクターに。様々なWeb制作・アプリ開発に関わり、その後、便利な用務員に。

関連するSONICMOOVのサービス

フロントエンドエンジニア募集中!

×

SNSでも情報配信中!ぜひご登録ください。

×

SNSでも
情報配信中!
SONICMOOV Facebookページ SONICMOOV Twitter
フロントエンドエンジニア募集中!

新着の記事

mautic is open source marketing automation