Markdown AIに新機能「Image Script」が登場！誰でも簡単に画像生成できるサイトが作れる！

# 新機能で画像生成AIがもっと身近に！
すぐにサイト制作を始められ、サーバー設定の手間もなく、誰でも簡単に全世界へ公開できる **「Markdown AI」** に、新たな機能が追加されました！

これまでは、サイトに特化したAIのカスタマイズや導入が可能でしたが、画像生成AIについては、単に画像を生成するだけで、制作サイトに画像生成AIそのものを実装することはできませんでした。

しかし、今回のアップデートにより 「画像生成AI」 のカスタマイズが可能となり、**制作したサイトに画像生成AIを簡単に導入できるようになりました。**

このアップデートで、制作サイトに画像生成ツールを手軽に実装できるだけでなく、サイト訪問者が設定済みのプロンプトを基に画像を簡単に生成できるようになります。また、これまで複雑だった画像生成のプロンプト入力が効率化され、直感的な操作を実現しました。

この記事では、この魅力的な新機能の使い方を詳しくご紹介します。

![image_script.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3921729/23112018-b63c-d774-6b3a-9416d97796a1.png)



# 画像生成AIサイトを作る手順
Markdown AIの基本操作が不安な方は、まずこちらの記事をご覧ください

https://qiita.com/mdown_ai_jpn/items/d3e281565c876a0bd64f

## ステップ１:ログインしてモデル作成画面へ
Markdown AIにログイン後、左上にあるロボットアイコンをクリックして下さい。

![image_script_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3921729/81e22ebf-7333-5612-49a7-3e63a4a3ef0a.png)

## ステップ2: モデルをDALL-E 3に設定/AIモデル名入力
遷移した画面(※以下クリエイトモデル画面と記載)で、右側の「Select Model」を「dall-e-3」に変更し、「Model Name」に任意のAIモデル名を入力します。
**※ここでdall-e-3を選択しないと、ステップ6でのAIモデル選択画面に設定したAIが表示されません。**

![image_script_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3921729/cad9bed4-a8b8-77bb-fe75-31d2f2443c28.png)

## ステップ3: 基礎となるプロンプトを入力
クリエイトモデル画面中部の「Prompt」欄に画像生成AIの基礎となるプロンプトを記載して下さい。
例：水彩画風、油絵風、シンプルな線画など。

![image_script_3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3921729/0977137d-bf36-0751-780f-93ddb256d100.png)

## ステップ4:画像生成AIのモデルを挿入
クリエイトモデル画面下部の「Createボタン」をクリック後、上部の「Back」ボタンをクリックしてエディター画面(※最初の画面)に戻って下さい。
エディター画面に遷移後、上部の「Insert」ボタンをクリックして下さい。

![image_script_4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3921729/1adae4fd-4b4f-982f-2095-1adddeda2d20.png)


## ステップ5:Image Scriptボタンをクリック
上記の手順でインサート画面が表示されるので、項目の一番下の「Image Script」ボタンをクリックして下さい。

![image_script_5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3921729/b4bd748f-ecaf-1404-cfba-291e2ff0ed68.png)


## ステップ6:画像生成AIのモデルを選択
先ほど作成した画像生成AIモデルの名前が表示されるので、そのモデルを選択後に「Insert」ボタンをクリックして下さい。

![image_script_6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3921729/c9b78996-2ad3-e61e-9835-b20a445af4dd.png)


## ステップ7:画像生成AIモデルのスクリプト挿入
インサートが完了すると、デフォルトのHTML/CSSとJavaScriptが挿入されるので、そのまま画面上部の「View」ボタンをクリックして下さい。

![image_script_7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3921729/c03ce464-2629-ed78-5a25-116207f25b74.png)

## ステップ8:入力欄とボタンを生成
下の画像のような入力欄とボタンが生成されていれば成功です。
この入力欄に生成したい画像の文言を入力して、「Run AI」ボタンを押下して下さい。

![image_script_8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3921729/cc0c47a0-e25c-198a-5a7f-cdd2e1400c48.png)

## ステップ9:完成！
下記の様に、クリエイトモデル画面で入力したプロンプト(※ステップ3で設定)に沿って画像が生成されます。
上記の手順で、誰でも簡単に画像生成AIをサイトに導入できます。

![image_script_9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3921729/eaf66070-b86f-8ba0-e780-2189d3c7249b.png)

# 今回のアップデートで進化した５つの利点
**・誰でも簡単に画像生成できるサイトが作れる！
・画像生成AIを自分好みにカスタマイズ可能！
・面倒なプロンプト入力作業を短縮！
・作成したサイトはURLクリックで即使用可能。ログイン不要！
・URLで共有が簡単！サイト訪問者が誰でも使える！**


# 最後に
今回のMarkdown AIのアップデートで、画像生成AIがさらに身近になりました。
これまでAI技術の活用にハードルを感じていた方も、Markdown AIなら直感的な操作でAIをカスタマイズでき、サイトを作成できます。

AI技術は日々、とてつもないスピードで進化しています。
その中で、私たちMarkdown AIが大切にしているのは、その技術をどう活用して人々の生活を豊かにするかです。
今回のアップデートで、Markdown AIがあなたのアイデアを簡単に、よりハイクオリティな内容で具現化するパートナーとなることを願っています。

ぜひ、この記事を参考に、あなたも新しいチャレンジに踏み出してみてください！
次回のアップデートでも、さらに便利で驚きの機能をお届けできるよう努力してまいります。

最後までお読みいただきありがとうございました！