幼稚園の理事長がゼロからChatGPTを使ってWEBサイトのペライチトップページを構築してみた
ずっと捨て置いていた、法人のWEBトップページをChatGPTを使ってスクラッチから作ることにしてみた。CSSやHTMLを最初から書くのもめんどくさいし、良さげなテンプレート探していじるのもめんどくさいし、お金はらって頼む時に頼む準備時間や頼むときの支払いのコストも、なんだか支払いたくないしと、だいぶ怠慢だったなと反省をしつつ、でも、今ならできると思い、GPTを使って製作してみることに。
いい感じにして欲しいところは後で細かく調整するとして、最初に適当にプロンプトを思いつく範囲で書いてみた。
ChatGPT Model:GPT-4 prompt>
成果物： プロのデザイナーの目線で、HTML,CSS,JSで簡潔なコードとディレクトリ構成
要件：
* 背景は白
* 文字色は、やや落ち着いた黒
* 各タイトルは、他の文書とメリハリを付ける
* モバイル対応のレスポンシブでワンカラムコンテナ
* テキストは、適当に入れた状態のHTMLのスケルトン
* SEO用metaの設定
* ソーシャルシェアー用の設定
* GAの設定（仮IDで）
* IMGは、 適当な画像URLでOK
* IMGは、レイジーロードで読み込む
* SRCは、画像以外は、相対パス
* CSSは、クラスを使い、なるべくコンパクトにする
* CSSは、基本flexベースにする
* ファーストビュー（ファーストセクション）
* hタグをSEOに最適化した感じで
* imgタグはALTとwidth/heightを正しく設定
** 背景のカバー画像で埋め尽くす感じで、レイジーロードを採用
** カバー画像のフロントレイヤーの左半分のに、背景が白の透過の四角の左半分横幅に対して70％ぐらいのサイズのテキストを表示させるための画像にテキストが邪魔されないような下地を作り、その四角の中に横書きで目につくサイズのタイトルとそのしたに5行ぐらいでおさまる小さめのフォントのテキストを中央揃えで描く。
* セカンドセクションは、2カラムコンテナで、左カラムにスクエアの画像が入り、右カラムは、タイトルと4から5行ぐらいの説明文を表示
* サードセクションは、4カラムのコンテナで、各カラムはタイトルと簡単な文章スペースがある。
* 全体の見た目、余白をいい感じで使い、グルーピングやコントラストのデザイン概念を生かした、画像をあてこめば、創造性あふれる感じのバランスをたもった設定にしてほしいディレクトリ構成
project/
│
├── index.html
├── css/
│ ├── style.css
│ └── responsive.css
├── js/
│ └── main.js
└── img/
└── cover.jpgindex.html:
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="あなたのウェブサイトの説明">
<meta property="og:title" content="あなたのウェブサイトのタイトル">
<meta property="og:description" content="あなたのウェブサイトの説明">
<meta property="og:image" content="あなたのウェブサイトの画像URL">
<meta property="og:type" content="website">
<meta property="og:url" content="あなたのウェブサイトのURL">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="あなたのウェブサイトのタイトル">
<meta name="twitter:description" content="あなたのウェブサイトの説明">
<meta name="twitter:image" content="あなたのウェブサイトの画像URL">
<title>あなたのウェブサイトのタイトル</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/responsive.css">
<script async src="https://www.googletagmanager.com/gtag/js?id=仮ID"></script>
<script src="js/main.js" defer></script>
</head>
<body>
<!-- ファーストセクション -->
<section class="first-section">
<div class="cover-image">
<img data-src="img/cover.jpg" alt="カバー画像の説明" width="100%" height="auto" class="lazyload">
</div>
<div class="overlay">
<h1>タイトル</h1>
<p>ここに5行程度の説明文を入れます。</p>
</div>
</section>
<!-- セカンドセクション -->
<section class="second-section">
<div class="column">
<img src="適当な画像URL" alt="画像の説明" width="100%" height="auto">
</div>
<div class="column">
<h2>タイトル</h2>
<p>ここに4-5行程度の説明文を入れます。</p>
</div>
</section>
<!-- サードセクション -->
<section class="third-section">
<div class="four-columns">
<div class="column">
<h3>タイトル</h3>
<p>簡単な文章</p>
</div>
<div class="column">
<h3>タイトル</h3>
<p>簡単な文章</p>
</div>
<div class="column">
<h3>タイトル</h3>
<p>簡単な文章</p>
</div>
<div class="column">
<h3>タイトル</h3>
<p>簡単な文章</p>
</div>
</div>
</section>
</body>
</html>
style.css:
body {
background-color: white;
color: #333;
font-family: sans-serif;
margin: 0;
}
h1, h2, h3 {
font-weight: bold;
margin-bottom: 10px;
}
.first-section {
position: relative;
}
.cover-image {
position: absolute;
z-index: 1;
}
.overlay {
background-color: rgba(255, 255, 255, 0.7);
padding: 20px;
position: relative;
width: 70%;
z-index: 2;
}
.second-section, .third-section {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 20px 0;
}
.second-section .column {
flex-basis: 48%;
}
.third-section .column {
flex-basis: 23%;
}
img {
max-width: 100%;
}
.lazyload {
opacity: 0;
}
responsive.css:
@media (max-width: 768px) {
.second-section .column, .third-section .column {
flex-basis: 100%;
margin-bottom: 20px;
}
}main.js:
document.addEventListener("DOMContentLoaded", function() {
const lazyloadImages = document.querySelectorAll("img.lazyload");
const observerConfig = { rootMargin: "0px 0px", threshold: 0 };
const loadImage = function(image) {
image.src = image.dataset.src;
image.classList.remove("lazyload");
};
const observerCallback = function(entries, observer) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
loadImage(entry.target);
observer.unobserve(entry.target);
}
});
};
const observer = new IntersectionObserver(observerCallback, observerConfig);
lazyloadImages.forEach(function(image) {
observer.observe(image);
});
});
// Google Analytics
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '仮ID');とまぁ、10分ぐらいでプロンプト書いてコードをもらいました。さて、ちゃんと動くのかな？ということで、試し見みる。まずファイルの設置ディレクトリを構成に従って準備。
$ mkdir css js img
$ touch index.html css/style.css css/responsive.css js/main.jsとりあえず、画像を適当に設定して（img srcを書き換え）、index.html:を開いてみると、思ったような表示にはなっていない。プロンプトの指示が曖昧だったのだと思う。なので、続けて微調整をしていく。
まず、1つ目は、カバー画像上のテキストの配置が期待通りではなかったので修正を依頼してみる。
prompt>
カーバー画像上のテキストの配置の調整をしたCSSをください。
CSSは、まるっとコピーできる感じで新しくください。
以下、指示
カーバー画像セクションは、横並びの2カラムで、左半分を使って、テキストを配置したい。
白の四角の透過divは、左半分の70％ぐらいを埋め尽くす感じでお願いします。
タイトルと説明テキストは、中寄せ。
タイトルと説明テキストは、フォントサイズのコントラストとラインハイともいい感じで。まだ、期待通りじゃなかったので、もう少し違う指示をしてみた。
prompt>
フォントは明朝体で、白の透過divは、上下に70%で、widthは、
横幅半分に対して70%ぐらいのサイズにしたいので、該当のクラスのコードを再度作り変えて。だいぶ良くなってきたので、再度注文。
prompt>
白の透過divの左にもいい感じでマージンが欲しいのと、上下の余白ももう少し欲しい。
あと、全体的に透過divの位置を自然に見やすい印象にしたい。
あと、ブラウザーのウインドウサイズに合わせ、
そのサイズにうまいこと収まるようにしたいので、そのコードもください。さらに最後にファーストビューの仕上げとなるか？
prompt>
白透過divを左マージンは以前の感じがよいかなと思うので、それに変えてください。使っていると文脈をある程度保持しているので、文章量少なめの指示でもいけるので楽かも。多分、この程度のタスクであれば、GPT3を使ったほうがレスポンスが早いのでよいかもとも思う。
けっか、期待とちょっと違ったので、、、
prompt>
白透過divの左後少しだで余白が欲しい。変更箇所のみcopy codeでください。で、ほぼいい感じになった。カバーの設定は一旦ここまで。
残りは、セカンドセクションとサードセクション。CSSがわかれば直接修正すればよいけど、promptだけでやり続けてみる。
プロンプトの入力回数制限に引っかかりそなので、セカンドとサードセクションはまとめて修正の指示をだしてみる。
今までの、指示を教訓に適格な指示が出せるか？気になるところだけど、細かく考えるのがめんどくさいので、ざっと思いつく範囲で指示してみる。
prompt>
◎セカンドセクションの修正内容
・テキストは中央揃え
・タイトルと説明文のラインハイトとフォントのコントラスをいい感じで
◎サードセクション
・カラムを横並びにして、画面幅に応じていい感じで調整して
・タイトルと説明文の背景に少し注目を引くようなデコレーションをしてみて欲しい。例えば、円使って。
◎フッターの追加
・フッターセクション抜けていたので、フッターのコンテナの追加のDIVタグコードが欲しい。
・フッターにはコピーライトを記載するのでテキストを適当にあてておいて。サードセクションが思ったようになっていないので、再度注文してみる。
prompt>
サードセクションを横並びにして、各カラムはレスポンシブ対応にして、
ブラウザーのサイズに応じて、中央列に収まるようなイメージでCSSの調整をして欲しいのとの、
カラムごとのグレー背景の形を丸の白背景にして、
セクションの背景を薄いグレーでCSSを書き換えてみて欲しい。最後に、清書を依頼！
prompt>
サードセクションの4つのカラムを横並びにする設定にして、カラム内の真円にして、
style.cssとresponsive.cssを清書してください。HTMLの構造に問題ありそうだったので、再度注文。
prompt>
サードカラムが横並びになりません。HTMLの修正が必要であれば、その提案もください。なかなか決まらないので、再度、指示。
prompt>
サードカラムに先程お願いしたデザインで真円になるようにしてください。
左右に少し余白をいれて。最後に、セクション内全体のカラムが中央寄せになるようにして欲しい。
HTMLの修正が必要な場合は、その修正内容も教えて欲しい。サードセクションの位置が左によっていたので、その調整を依頼してみた。
その後、幾つか頼んだが納得行くような仕上がりにならなかったので、時間ももったいないので、自分で書き換えることにした。で、幾つかCSSに手で修正を加えて最終調整をした。
調整箇所はメディアクエリのmax-wdithの調整とサードセクションのカラムの幅の設定の2箇所を修正。多少知識が必要といった感じだけど。
トータルで1時間30分ぐらいの作業で今まで適当すぎたペライチのトップページを作ってみた。
最後に、CSSをリファクタリングしてもらい、HTML内のテキストを修正してもらった。
ちなみに画像は、"midjourney" を使って描いてもらった。ページのイメージや表現したいイメージを言語化してある程度のページが作れることがわかったので、作っていないページも作っていこうかなと思った。
一方で、ガッツリ個性的なデザインでページを作りたい場合は、限界もあるのかなといった感じ。今回は、そこまで凝ったものが必要なかったので、あありきたり構成で作ってみた。
最後の仕上げの作業にはりいます。多分ゆるくやって30分ぐらいで設定が終わった。
スクラッチから作ってみて3時間ぐらいかかった感じだけど、メディアクエリの調整やflex系のめんどくさいCSSの設定などある程度AIにやってもらった後の修正なので、3時間でここまでさくっとできたのは、自分としては、CSSやHTMLがめんどくさいので、助かった感じ。
あと、チャットしながらやるので、なんとなく楽しめた気もする。
以下が最終的に作ったページで、モバイルで見たときの調整がいまいちだけど、一旦、デザインは素人なので、これでよしとする。
今回最後の調整以外、95% AIを使って作成したページ。
サイト自体は、githubのactionsをmarster->prod branch PR マージアクションでデプロイしてます。S3とクラウドフロントの構成で管理しているので、その作業はカウントは入れていない。
まぁ、思ったよりサックとできたなできたな
この記事が気に入ったらサポートをしてみませんか？