2024.10.07xfacebookはてなブックマークpocket#CSS#HTML#生成AI生成AIの画像分析の機能と、画像からHTML&CSSのコードを生成する機能を利用して、どれくらいの精度のHTMLページが生成できるか検証してみました。最近、設計の作業でこんな感じの画面イメージ(ワイヤーフレーム)をよく作成します。利用して、この画面イメージからHTMLを生成してもらいます。画面イメージをアップロードして、以下のようなプロンプトを入力します。この画像をもとにHTMLコードを生成してください。概要:この画像は、従業員管理システムの一覧画面のイメージです。デザイン:CSSを利用して、全体をモダンなイメージにする。フォームの幅は、最大1000pxとする。数十秒でHTMLが生成されます。HTMLの修正を依頼してみます。ありがとうございます!生成したHTMLの修正をお願いします。名前と入力欄を横並びにしてください。所属と選択のプルダウンを横並びにしてください。検索結果のテーブルは文字を中央揃えにしてください。メニューの背景と検索ボタン、編集ボタンの背景色は#3450a4にしてください。条件クリアボタンの背景色は#b0c4deにしてください。条件クリアボタンと検索ボタンの間は30pxあけてください。ボタンは全て角丸にしてください。修正結果がこちらです。指示通りの修正をしてくれました。チャット形式なので、生成したものに対して修正の指示ができるのが良いですね。感想レイアウトがイマイチな部分があり、まだこの画面をそのまま使おう!というレベルではありませんが、どちらもテキストやフォームの要素はしっかり反映されています。一から手で書くより時短になるのでコーディングアシスタントとして活用できそうです。これに似たページを作りたい、という参考のwebサイトがあるときは、スクリーンショットを取ってHTMLを生成するという使い方もできそうです。CodeはUIやウェブデザインをHTMLのコードに変換をしてくれるAIでした。内部的にはOpenAIのCodexやStableCodeのようなコード生成するAIモデルを使っています。早苗が書いた記事xfacebookはてなブックマークpocketお客様のご要望に柔軟に対応いたします。お気軽にご相談ください。cloudpackは、アイレット株式会社が提供するクラウド支援サービスです。問い合わせまでトータルサポート!お問い合わせはこちらアイレットでは、様々な職種で一緒に働ける仲間を募集しています。インフラエンジニア、開発エンジニア、クリエイティブ職、営業職など、様々な職種で一緒に働ける仲間を募集しています。アイレット公式サイト採用情報をご覧ください。採用情報プライバシーポリシークラウド導入のご相談、お見積り、サービスについてのご質問などお気軽にお問い合わせください。最新情報が得られるメルマガ登録はこちら。