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

ChatGPTを使用して、特定のプロジェクトの目標や要件を明確に定義できます。

以下は、鹿児島のクラフトビール工房のポスタープロジェクトにおけるChatGPTの利用例です。

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

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

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

ChatGPTに命じて、ダミーの画像を生成します。

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

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

最終的なデザイン作業は、ChatGPTの提案を基にデザイナーが手動で行います。

ChatGPTはデザイナーアシスタントとして活用され、制作プロセスを効率的にサポートします。

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

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コードをペーストします。