>WebサービスAIが画像をHTMLコーディングしてくれるFrontyを試してみたツイート様々なサービスでAIが導入されている今日此頃ですが、Webにも期待感を持たせてくれるようなFrontyのサービスが登場しました。目次Frontyとは?Frontyの使い方Frontyとは?Frontyは、Webページのデザイン画像をアップロードするだけでAIが画像をHTMLにコンバートしてくれるWebサービスです。複雑なレイアウトのコーディングはできませんが、ガイドラインに沿ってデザインをしておくだけで、たったの数分で簡単にHTMLコーディングしてくれる魅力はあります。画像からコーディングした場合でもブラウザ上で簡単に修正ができるようになっています。無料の場合には、Frontyのサブドメインに公開されますが、有料プランの場合には独自ドメインの利用もできるようになっています。Frontyの使い方さくっと使い方を紹介したいと思いますが、AIがコーディングしてくれるものの、複雑なレイアウトはやはり現状では難しいです。下記のガイドラインページを参考にレイアウトデザインします。https://fronty.com/guidelinesグリッド、セクション別に分ける複雑なレイアウトは不可ワイヤーフレームはコーディングできない並列で画像を並べない今回はこんな感じのシンプルなデザイン画像をサンプルで用意してみました。ユーザー登録まずは下記にアクセスします。https://app.fronty.com/registerユーザー名、メールアドレス、パスワードを入力してユーザー登録をします。Account」をクリックして有効化しておきましょう。ダッシュボードからデザイン画像を登録そしたら、ダッシュボードにアクセスしてログインします。website」をクリックして新しくサイトを作成します。design」を選択します。この画面が表示されたら画像をドラッグ・アンド・ドロップでデザイン画像をアップロードします。language」で他の言語が選択できますが、残念ながら現在のところ日本語には未対応ですので、「English」のままでアップロードします。アップロードが完了したら右上の「Next」がクリックできるようになりますので、「Next」をクリックします。now」をクリックします。するとダッシュボード画面に戻りコーディング処理が行われます。プログレスバーで目安が確認でき、2、3分前後の速さで処理してくれました。処理が完了したらマウスオーバーで「Preview」で確認してみます。AIが独自にコーディングした内容になっていて文字のレイアウト崩れなどがあり、実際のデザインが多少変更されたりしています。「Designer」モードで崩れた文字の修正などの簡単な編集できます。ダッシュボードで「Designer」を選択します。要素を選択すると移動などの変更ができます。サイドバーは、marginやpaddingなどのスペースの調整や、テキストの位置、色などを変更できます。「+」のアイコンクリックで要素を追加できます。終わったら忘れずに画面上部の保存アイコンで保存をしておきます。sure」クリックで公開できます。手早く作成してみたものを公開してみました。粗い部分はまだまだ色々とありますが、短時間でAIが殆どの作業をしてくれるという魅力は今後の改善によってさらなる完成度の高いサービスとしてぜひとも期待したいですね。https://awesome.fronty.com/弊社でもAIを活用したサービス「Automa」を展開しています。ともチェックしてみてください。AIによるLINEへのWebメディア情報自動配信サービスツイート記事作成者の紹介マーツ(その他)ビールが好き。最近はワインと日本酒もいいなぁと思える今日この頃。新規Webサービスから企業ブランディングを高めるコーポレートサイトまで、豊富な制作実績と技術でお客様のニーズに合わせたサイト制作を、企画、デザイン、構築、運用までワンストップで制作が可能となっております。×SNSでも情報配信中!ぜひご登録ください。Market花火大会シミュレーターSHARESHAREWeb制作・アプリ開発に関する、UI/UX情報、イラストテクニック、エンジニア向け情報をお届けしています。