様々なサービスで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メディア情報自動配信サービス

あわせて読みたい記事