ChatGPTはデザイン作成もできるって本当？サイト制作の方法も併せてご紹介！

2024.4.2

新しい技術に興味があり、より効率的にサイト制作をしたいとお考えの方もいらっしゃるのではないでしょうか。
本記事では、ChatGPTと画像生成AIを用いたデザイン作成について、またChatGPTで効率化するウェブサイト制作についてご紹介します。

ChatGPTと画像生成AIを用いたデザイン作成

デザインにおけるChatGPTの利点は多岐にわたり、特にアイデアの生成、プロジェクトの目標と要件の明確化、カラーパレットの定義、アタリ画像生成、そしてダミーテキストからの実際のテキスト生成など、様々な段階で有益なサポートを提供します。
以下は、それぞれのステップにおけるchatgptの利用例です。

デザインアイデアの生成

ChatGPTを使用して、特定のプロジェクトの目標や要件を明確に定義できます。
以下は、鹿児島のクラフトビール工房のポスタープロジェクトにおけるChatGPTの利用例です。

ChatGPTを活用してアイデアを生成する

ChatGPTに対して、A4両面フルカラーのポスターの構成案を考えるように指示します。

画像生成AIを利用してラフデザインを生成する

ChatGPTが提案したアイデアに基づき、画像生成AIを使用してビジュアルを具体化します。

サイトのカラーパレットを定義する

ChatGPTによって提案されたアイデアに基づき、カラーパレットを定義します。

アタリ画像生成をしてもらう

ChatGPTに命じて、ダミーの画像を生成します。
これは、撮影ラフの段階であり、AI画像生成を使用してダミーのビジュアルを得ます。

ダミーの文字から実際にテキスト生成する

ChatGPTに対して、キャッチコピーなどのダミーテキストを生成してもらいます。

最終的なデザインは手動で

最終的なデザイン作業は、ChatGPTの提案を基にデザイナーが手動で行います。
ChatGPTはデザイナーアシスタントとして活用され、制作プロセスを効率的にサポートします。

これらのステップによって、ChatGPTをデザインプロセスに組み込むことで、アイデアの生成やプロジェクトの進行がスムーズに行え、デザイナーがよりクリエイティブな側面に集中できるでしょう。

ChatGPTで効率化するウェブサイト制作

Webサイトの基となるHTMLとCSSコードを生成する

Web開発初心者の方が、ポートフォリオサイトを作成する際に使用する基本的なHTMLとCSSコードをchatgptに生成してもらいましょう。
以下がその手順です。

1.フォルダの作成
まず、自分のパソコンの好きな箇所に、「index.html」と「styles.css」を入れるための一つのフォルダを作成します。

2.VScodeにペーストする
次に、VScode上で「index.html」と「styles.css」を作成します。
このセクションでは、chatgptに生成してもらったプログラムコードをコピーし、「index.html」と「styles.css」にそれぞれペーストします。

3.chatgptで生成されたコードをコピーする
chatgptに、以下のようなプロンプトを投げて、HTMLとCSSコードを生成してもらいます。

「htmlとcssを用いて、ポートフォリオサイトを作りたいと思っています。サイト内の項目には、
・自己紹介
・経歴
・プロジェクト
・スキル
・お問い合わせフォーム
を作成してください。
僕自身プログラミング初心者なので、1からコードの生成を手伝って欲しいです。」

生成されたコードは、「Copy code」をクリックしてコピーします。

4.VScodeにペーストする
VScodeを開き、「index.html」を選択し、chatgptで生成されたHTMLコードをペーストします。同様に、「styles.css」にもchatgptで生成されたCSSコードをペーストします。