ミルコード - 生成AIで10倍速のフロントエンド開発

動画で詳しく

※︎ 音が出ます

close 閉じる

Webデザイン制作に欠かせない『Figma』

フロントエンドエンジニアとAI技術をつなげる法人様向けのFigmaプラグインです。
(個人事業主様もお気軽にご相談ください)

こんなお悩みありませんか？

エンジニアの採用が

難しい

社内のリソースが

足りない

請負案件を効率よく

こなしたい

ミルコードなら

HTMLとCSSのコードを
かんたんに短時間で生成できます

使い方はとてもシンプルです

デザインを選択します。

HTMLとCSSのコードが生成され、その場で編集も可能です。

資料請求はこちら

ミルコードなら

作業時間をぐぐーっと短縮！！

クライアントとの打ち合わせやデザイン制作、請負案件数を増やすなど...
時間に余裕が生まれます。

資料請求はこちら

使ってすぐにお悩み解決！

1人あたりの作業負担を

大幅に削減

社内のエンジニア不足を

解消

案件にかかる作業時間を

劇的に短く

お客様の声

上原さん

作業効率がとても上がりました。 AIを業務に取り入れることは難しいと思っていましたが、今では使わずに作業をするなんて考えられません。

真鍋さん

デザインからHTML、CSSをすぐに生成するので驚愕でした。今まで1日かかっていたことが1時間で終わるようになったので、効率よく案件をこなせています。

萩原さん

話題の生成AIに興味があって利用しましたが、今ではこのプラグインなしの開発は考えられません。 AIの進化でもっと精度が上がっていくと思うので今後も期待です。

上原さん

作業効率がとても上がりました。 AIを業務に取り入れることは難しいと思っていましたが、今では使わずに作業をするなんて考えられません。

真鍋さん

萩原さん

いまなら7 日間無料！

いまなら

法人様を対象としていますので
お気軽にご相談いただける手厚いサポートが充実！
この機会にぜひお試しください。

資料請求はこちら

7 日間
無料！

Point

高いクオリティーだけじゃない
編集しやすいコードを生成

アフターメンテナンスもばっちりです。

従来

<div style="position: absolute; display: flex; justify-content: center; align-items: center; gap: 20px; padding: 20px; width: 557.27px; height: 178px; background-color: #ffffff; border-radius: 15px; border: 1px solid #9b9b9b; box-sizing: border-box;">
        <img src="https://via.placeholder.com/106x130" alt="" style="position: absolute; left: 20px; top: 24px; width: 106.27px; height: 130px;" />
        <div style="position: absolute; left: 146.27px; top: 20px; display: flex; flex-direction: column; justify-content: center; gap: 20px; width: 391px; height: 138px;">
                <div style="position: absolute; left: 0px; top: 0px; color: #232323; font-size: 18px; letter-spacing: 0.08em;">
                        お洗濯簡単！毎日着たくなる軽やかセーター
                </div>
                <div style="position: absolute; left: 0px; top: 46px; color: #232323; font-size: 16px; letter-spacing: 0.08em;">
                        ￥2,300（税抜）
                </div>
                <div style="position: absolute; left: 0px; top: 89px; display: flex; justify-content: center; align-items: center; gap: 10px; padding: 10px 0; width: 391px; height: 49px; background-color: #f88a5b; border-radius: 10px; box-sizing: border-box;">
                        <div style="position: absolute; left: 153px; top: 10px; color: #ffffff; font-size: 20px; font-weight: bold; letter-spacing: 0.08em;">
                                購入する
                        </div>
                </div>
        </div>
</div>

従来のマークアップ生成はposition: absoluteの絶対配置で、style属性にべた書きでスタイルを書いていました。そのため、メンテナンス性の観点で劣ってしまい、採用を見送るケースが多くありました。

ミルコード

<div class="product-card">
        <img src="https://via.placeholder.com/106x130" alt="" class="product-image" />
        <div class="product-details">
                <div class="product-title">
                        お洗濯簡単！毎日着たくなる軽やかセーター
                </div>
                <div class="product-price">
                        ￥2,300（税抜）
                </div>
                <div class="product-buy-button-wrapper">
                        <div class="product-buy-button">
                                購入する
                        </div>
                </div>
        </div>
</div>

ミルコードは生成AIを活用することで、CSSをクラス名で管理します。人間がメンテナンスしやすいコードを生成するので、実務で採用できるレベルまで水準が上がりました。

Point

便利な機能をシンプルに

さまざまなニーズにお応えできるよう、「あって嬉しい」機能が充実しています。
その中から3種類の生成ボタンと、選択中の要素のcssを表示する機能をご紹介します。

オートレイアウトを設定しているデザインの場合、再現性の高いHTMLを相対配置で瞬時に生成します。
最も基本の生成機能で、プログラムのみでHTMLとCSSを生成しているため、1秒程度で生成できます。

 <div class="element_0">
      <img src="https://via.placeholder.com/106x130" alt="" class="element_1" />
      <div class="element_4">
            <div class="element_5">
                  お洗濯簡単！毎日着たくなる軽やかセーター
            </div>
            <div class="element_8">
                  ￥2,300（税抜）
            </div>
            <div class="element_12">
                  <div class="element_13">
                        購入する
                  </div>
            </div>
      </div>
</div>

.element_0 {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding: 20px 20px 20px 20px;
    width: 557.27px;
    height: 178px;
    background-color: #ffffff;
    border-radius: 15px 15px 15px 15px;
    border: 1px solid #9b9b9b;
    box-sizing: border-box;
}

.element_1 {
    position: relative;
    width: 106.27px;
    height: 130px;
}

.element_4 {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
    width: 391px;
    height: 138px;
}

.element_5 {
    position: relative;
    color: #232323;
    font-size: 18px;
    letter-spacing: 0.08em;
}

.element_8 {
    position: relative;
    color: #232323;
    font-size: 16px;
    letter-spacing: 0.08em;
}

.element_12 {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 10px 0px 10px 0px;
    width: 391px;
    height: 49px;
    background-color: #f88a5b;
    border-radius: 10px 10px 10px 10px;
    box-sizing: border-box;
}

.element_13 {
    position: relative;
    color: #ffffff;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 0.08em;
}

生成AIを活用し、「ささっと生成」より長期のメンテナンス性に優れたコードを生成します。
AIがデザインの内容を確認して、適切なCSSのクラス名を付与したり、不要なCSSを削除して品質の高いマークアップを提供します。

<div class="product-card">
        <img src="https://via.placeholder.com/106x130" alt="" class="product-image" />
        <div class="product-info">
                <div class="product-description">
                        お洗濯簡単！毎日着たくなる軽やかセーター
                </div>
                <div class="product-price">
                        ￥2,300（税抜）
                </div>
                <div class="purchase-button-container">
                        <div class="purchase-button">
                                購入する
                        </div>
                </div>
        </div>
</div>

.product-card {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding: 20px;
    width: 557.27px;
    height: 178px;
    background-color: #ffffff;
    border-radius: 15px;
    border: 1px solid #9b9b9b;
    box-sizing: border-box;
}

.product-image {
    position: relative;
    width: 106.27px;
    height: 130px;
}

.product-info {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
    width: 391px;
    height: 138px;
}

.product-description {
    position: relative;
    color: #232323;
    font-size: 18px;
    letter-spacing: 0.08em;
}

.product-price {
    position: relative;
    color: #232323;
    font-size: 16px;
    letter-spacing: 0.08em;
}

.purchase-button-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    width: 391px;
    height: 49px;
    background-color: #f88a5b;
    border-radius: 10px;
    box-sizing: border-box;
}

.purchase-button {
    position: relative;
    color: #ffffff;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 0.08em;
}

PC版/モバイル版のデザインの両方を選択して生成すると、AIが2つのデザインのHTMLとCSSを分析します。
メディアクエリに対応したマークアップを生成し、「クラス名を付与して生成」と同等のメンテナンス性の高いマークアップを提供します。

<div class="card">
        <img src="https://via.placeholder.com/106x130" alt="" class="card-image" />
        <div class="card-content">
                <div class="card-title">
                        お洗濯簡単！毎日着たくなる軽やかセーター
                </div>
                <div class="card-price">
                        ￥2,300（税抜）
                </div>
                <div class="card-action">
                        <div class="button">
                                購入する
                        </div>
                </div>
        </div>
</div>

.card {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 15px;
    border: 1px solid #9b9b9b;
    box-sizing: border-box;
}

.card-image {
    position: relative;
    width: 106.27px;
    height: 130px;
}

.card-content {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
}

.card-title, .card-price {
    position: relative;
    color: #232323;
    letter-spacing: 0.08em;
}

.card-title {
    font-size: 18px;
}

.card-price {
    font-size: 16px;
}

.card-action {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    background-color: #f88a5b;
    border-radius: 10px;
    box-sizing: border-box;
}

.button {
    position: relative;
    color: #ffffff;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 0.08em;
}

/* Responsive styles for mobile */
@media (max-width: 600px) {
    .card {
        flex-direction: column;
        width: 298px;
        height: 354px;
    }

    .card-content {
        width: 258px;
    }

    .card-action {
        width: 258px;
        height: 49px;
    }
}

選択中の要素のデザイン設定を解析し、メンテナンス性の高いCSSを生成します。
PC版とモバイル版の2つのデザインを選択することで、メディアクエリに対応したレスポンシブのマークアップを提供します。

.selected-element {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding: 20px 20px 20px 20px;
    width: 557.27px;
    height: 178px;
    background-color: #ffffff;
    border-radius: 15px 15px 15px 15px;
    border: 1px solid #9b9b9b;
    box-sizing: border-box;
}

@media (max-width: 600px) {
    .selected-element {
        flex-direction: column;
        width: 298px;
        height: 354px;
    }
}

資料請求

お気軽にご連絡くださいませ。
２営業日以内に返事を差し上げます。