Webサイトを作りたいけれど、コードを一から書くのは大変ですよね。

ChatGPTに条件を伝えると、ホームページの下書きになるHTMLとCSSを出力してくれます。

この回では、女性向けカフェのホームページを例に、頼み方と出てきたコードの中身を紹介します。

Web制作の副業や勉強を始めたい方は、ぜひ読んで下さい！


ソースコードも出せるChatGPT

ChatGPTは、文章に加えて、ソースコードも出力できます。

Web制作の副業をしたい方や、これから学ぶ初心者におすすめです。

Web制作に使う言語は、HTML、CSS、JavaScriptの3つです。

条件を伝えるだけで、ChatGPTがソースコードを出してくれます。

今回は、簡単なホームページのテンプレートとして、カフェのホームページのコードを出してもらいました。


頼み方

前提条件（お店のタイプ、配色）と、出力条件（HTMLとCSSを分けて出す）を分けて書きました。


カフェのホームページのひな形を作ってください。


【前提条件】女性向けのカフェのサイト。

おしゃれな配色にしたい。

文字が目立つ配色にしてください。


【出力条件】HTMLとCSSをそれぞれ分けて出力してください。


出てきたHTMLの構成

出力されたHTMLは、上から順に、ナビゲーション、ヒーロー部分、人気メニュー、予約の案内、フッターという構成でした。

  • ナビゲーション：ホーム、メニュー、予約、アクセスの4つのリンクが並ぶ
  • ヒーロー部分：見出し「おしゃれカフェへようこそ」と、「心地よい空間で、おしゃれなひとときをお過ごしください。」という一文、「メニューを見る」ボタン
  • 人気メニュー：画像つきで、スイートブレンドコーヒー（香り高いブレンドコーヒー。甘いひとときを。）とフルーツパフェ（新鮮なフルーツをたっぷりと。季節の味わい。）を紹介
  • ご予約について：気軽に予約を受け付けている旨の説明と、「予約する」ボタン
  • フッター：「おしゃれカフェ」の著作権表示

HTMLの冒頭では、日本語ページであることの宣言、文字コード、スマホ対応の設定、CSSファイル（styles.css）の読み込み、ページタイトル「おしゃれカフェ」が指定されていました。


出てきたCSSの中身

配色は、薄いグレーの背景に、ピンクのボタンと文字、フッターは濃いグレーでした。

主な指定は、次のとおりです。

  • 全体：フォントはArial系。余白は0にそろえる
  • ヘッダー：背景色は#f7f7f7、上下に10pxの余白
  • ナビゲーション：リストを横並びにして中央寄せ。リンクは下線なし、色は#333、太字
  • ヒーロー：背景に画像（hero-image.jpg）を全面表示。見出しと文章の色は薄いピンク（#ff99cc）。上下の余白は100px
  • ボタン：背景は#ff66b2、文字は白、角丸は5px
  • 人気メニュー：中央寄せ。1品ごとに横並びで、最大幅は300px。画像は枠に合わせて縮小
  • 予約の欄：背景は#f7f7f7、中央寄せ
  • フッター：背景は#333、文字は白


条件を増やせば、もう少し複雑にもできる

今回は条件を最小限にしたので、シンプルなサイトに仕上がりました。

条件を増やせば、もっと凝った作りにもできます。

画像は、imgタグを使えば手軽に差し込めます。

背景色や文字色も、CSSを書き換えるだけで簡単に変更できます。


出力されたコードを使うときの注意

出力されたコードは、そのまま公開できる完成品ではなく、あくまで下書きです。

私なら、まず2つのファイルを同じフォルダに置き、ブラウザで開いて見た目を確かめます。

hero-image.jpgのような画像ファイルは自分で用意して、同じ場所に保存しておかないと表示されません。

店名や文章、メニューの内容も、実際のお店に合わせて書き直す必要があります。

気になる点があれば、「ボタンを大きくしてください」「背景色をもっと明るくしてください」と、ChatGPTに追加で頼むのがおすすめです。

何度かやり取りをしながら整えていけば、初心者でも形にしやすくなります。