MENU
  • サイト健康診断のご案内
  • コンテンツ
    • 講座内容のご紹介
  • コラム
  • お問合せ
プロンプト×実務で自分らしい働き方を叶える
  • サイト健康診断のご案内
  • コンテンツ
    • 講座内容のご紹介
  • コラム
  • お問合せ
  • サイト健康診断のご案内
  • コンテンツ
  • コラム
  • お問合せ
プロンプト×実務で自分らしい働き方を叶える
  • サイト健康診断のご案内
  • コンテンツ
    • 講座内容のご紹介
  • コラム
  • お問合せ
  1. ホーム
  2. ChatGPT
  3. 期間限定無料プレゼント🎁プロンプト(GPTs)でウェブサイト制作♪

期間限定無料プレゼント🎁プロンプト(GPTs)でウェブサイト制作♪

2026 2/11
ChatGPT IT Website 業務効率化
2026年2月11日

ヒアリングアシスタントにご興味をお持ちいただき誠にありがとうございます♪

この記事で使い方を説明させていただきますので、是非最後までお読みいただき、お役立てください 

目次

プロンプト(GPTs)の使い方

ステップ1:アカウントとその使い方を把握する

お持ちのChatGPTのアカウントにログインして、下記のリンクを開いてみてください♪

プロンプト(GPTs)はこちら

※ChatGPTを初めて使うよ〜って方は、アカウントを新規作成する必要があります。

会社や個人情報の取り扱いについて、情報の送信にはサービスの利用規約についてご一読ください。

OpenAI 利用規約

GPTsのリンクを開くと、以下のような画面になりますので、順番に質問に答えながら入力してください。

ステップ2:質問に答えてコンセプトを固める

質問に回答して、要件整理をしましょう♪

コーポレートサイトを作る方であればどんどんと長くなっていくので、長くなりすぎるようであれば NotebookLMをつかってレポートにまとめるのがおすすめです。

コンセプトがWebサイト制作の土台となりますので、GPTsに壁打ちしながらしっかりとコンセプトを決めましょう♪

こだわりポイントを明確にしよう♪

ステップ3:ワイヤーフレームを作成する

なんとなくでもいいので、イメージ通りの構成を固めていきます。

コンセプトが固まってサイトの構成が決まったら、ワイヤフレームを作りましょう。

最初なので、簡単で構いません。ChatGPTが文字起こししてくれたのを、Google Documentなどを使ってコピペしてワイヤーフレームを形にしましょう。

サンプルのリンク

ステップ4:サイトの具体化

GPTsの質問に回答しながら好きなところから具体化していきましょう♪

今回わたしはキャッチコピーを出してもらうことにしました  

例)トップページ キャッチコピー案

案① 王道・安心重視タイプ(いちばん無難で使いやすい)

メインコピー : はじめての方でも、安心してご相談いただけるサービスです

専門的な知識がなくても大丈夫。
お悩みや状況を丁寧にお伺いし、わかりやすくご説明します。

向いているケース

  • 信頼感を最優先したい
  • 40〜50代に広く刺さる表現にしたい
  • 長く使えるサイトにしたい  など

プラス おすすめCTA(ボタン)文言(キャッチコピーとセットで使うと効果的です。)

  • 「まずは相談してみる」
  • 「無料で相談する」
  • 「不安や質問を相談する」

👉 「お問い合わせ」よりも柔らかい表現が◎

サンプル

https://subconcious-lp.netlify.app/

ステップ5:トップページの文章作成

載せたい文章を洗い出して決定します。

骨組みだけでも決めてしまえば、サイト完成まで5割終わったようなものです。もう少し頑張りましょう♪

文章を決めてひとつづつ丁寧に仕上げていく必要があります。

これもGPTに聞きながら決めていきます。

かなりざっくりではありますが、売利上げアップにつながるWebサイトのベースが完成しました!

まとめ

このGPTsを利用し、要件定義を決めていくことで、コンセプトを固めて実務レベルで使えるウェブサイトのデザインカンプまで作れます。

ぜひ実践して、売上アップに繋がホームページを作って見てください 

出来上がりサンプルサイト

PR

Yukyco’s Design サイト制作実績のポートフォリオ:https://bootstrap-v5.netlify.app

ChatGPT IT Website 業務効率化
  • プロンプトエンジニア認定試験に合格するためのステップ
  • マーケティング戦略プロンプト

関連記事

  • プロンプトエンジニア認定試験に合格するためのステップ
    2026年1月28日
  • NotebookLMで動画5本作ってみたら超楽しかった!
    2026年1月22日
  • 【永久保存版】大事なLINEの個人情報を守る方法~スマホ初心者でも大丈夫~
    2026年1月19日
  • Webデザイナーが暗号とセキュリティを軽視してはいけない理由
    2026年1月7日
  • 同じに見えて実は違うIllustrator・Photoshop・Figmaのペンツールの違い
    2025年12月27日
  • 8年前に作ったBootstrapサイトをポートフォリオに!
    2025年12月21日
  • localStorageの基礎知識と使い方-JavaScriptで作るWebサイト-
    2025年12月16日
  • 9匹のにゃんこで今日の運勢占い!JavaScriptの実装解説
    2025年12月13日

コメント

コメントする コメントをキャンセル

© プロンプト×実務で自分らしい働き方を叶える.

目次