このGPTsがおすすめな方
- 非エンジニア・プログラマーでブログをアレンジしたい
- WordPress担当だけどブログ作成助けてほしい
- 思い通りのサイトのパーツをHTMLで作りたい
さあ今回はブログ・サイト制作に使えるデザインパーツクリエイターのGPTsについてご紹介していきたいと思います。
私自身も非エンジニアで、Wordpressを担当することがあったりします。
そこで、全くHTMLも修正程度は出来るのですが
- 思い通りのユニークなブログパーツを作成したい
- このサイトのこのパーツを真似して作ってみたい
- この部分をこだわって作り上げたい
と思ったことはありませんでしょうか？
今回のGPTsはそういう非エンジニアやプログラマーの方でも、ブログパーツなどをHTMLで自由に作れるようになるカスタムChatGPTをご紹介します。
このGPTsは今では、ChatGPTの無料会員の人でも利用できます。なので、ChatGPTに情報登録すれば誰でも使えるようになっていますので、まずはご自由に使ってみてください。
それではこのGPTsはどんなことが出来るのか、を今回の記事でご紹介していきましょう。
●ブログ・サイト制作に使えるデザインパーツクリエイター
【↓ GPTsはこちらから ↓】
https://chatgpt.com/g/g-N9f8CRNhv-hurokusaitozhi-zuo-nishi-erutesainhatukurieita
目次
ブログ・サイト制作に使えるデザインパーツクリエイター GPTsの概要
まずはブログ・サイト制作に使えるデザインパーツクリエイターのGPTsとはどんなものか、というところを見ていきましょう。
概要にはこんな感じで記載されています。
HTMLでブログやサイトに使える表やグラフ、その他ブログパーツを作ってくれます。画像やサイトURLから指定しても作れるよ。CSSやJavaも要望があれば対応するよ！
ということで、おおよそこのGPTsの出来ることの概要がここに書かれているようですね♪
こんな期待の声に応えてくれるのが、今回のGPTsのようです。
それでは実際にブログ・サイト制作に使えるデザインパーツクリエイターはどんなことが出来るのか、見ていきましょう！
ブログ・サイト制作に使えるデザインパーツクリエイター GPTsを使ってみた
Case1
それではまずCase1を試してみましょう。
まずはブログで使える表を作っていってもらいましょう。
そのデータをそのまま貼り付けることが出来るHTMLで出してもらおうと思います。
ーーーーーーーーーー
私：
ブログ用の表を作成してほしい。
ブログ・サイト制作に使えるデザインパーツクリエイター：
ブログ用の表を作成するお手伝いをさせていただきますね！以下の質問にお答えいただければ、より具体的なデザインができます。
- 表に含めたいデータや情報を教えてください。
- 希望するデザインのスタイルやテーマを教えてください。（例：シンプル、カラフル、モダンなど）
- 参考にしたいExcelデータや画像があればアップロードしてください。
- この表を使用するブログやサイトのプラットフォームを教えてください。（例：WordPress、Wix、Squarespaceなど）
これらの情報をもとに、あなたのブログにぴったりの表をデザインし、必要なHTMLやCSSのコードを提供いたします。
私：
表に含めたいデータや情報を教えてください。
→縦5×横5のマスで作成をお願いします。
1列名には銀行名を入れていきます。
行は"銀行名""預金残高""設立年数""関連会社""預金口座数"にしてください。
希望するデザインのスタイルやテーマを教えてください。（例：シンプル、カラフル、モダンなど）
→シンプルで上の1行目の項目の背景色が赤色でお願いします。
この表を使用するブログやサイトのプラットフォームを教えてください。（例：WordPress、Wix、Squarespaceなど）
→Wordpressです。
ブログ・サイト制作に使えるデザインパーツクリエイター：
ご指定いただいた内容に基づき、シンプルなデザインで上部の項目行が赤色の背景色となる表を作成いたします。以下のHTMLとCSSコードを使用して、WordPressのブログ記事やページに追加してください。
<table class="custom-table">
<tr style="background-color: red;">
<th>銀行名</th>
<th>預金残高</th>
<th>設立年数</th>
<th>関連会社</th>
<th>預金口座数</th>
</tr>
<tr>
<td>銀行A</td>
<td>1,000,000円</td>
<td>50年</td>
<td>会社X, 会社Y</td>
<td>10,000</td>
</tr>
<tr>
<td>銀行B</td>
<td>2,000,000円</td>
<td>30年</td>
<td>会社Z</td>
<td>15,000</td>
</tr>
<tr>
<td>銀行C</td>
<td>3,000,000円</td>
<td>70年</td>
<td>会社A, 会社B</td>
<td>20,000</td>
</tr>
<tr>
<td>銀行D</td>
<td>4,000,000円</td>
<td>40年</td>
<td>会社C</td>
<td>25,000</td>
</tr>
<tr>
<td>銀行E</td>
<td>5,000,000円</td>
<td>60年</td>
<td>会社D, 会社E</td>
<td>30,000</td>
</tr>
</table>
ということで、ブログに使用できるHTMLを作成してくれました。
実際に作成してくれた表のプレビューが下記になります。
ということで、意図通りのHTMLを作成してくれました！
ここからのグラフのアレンジは自分でするもよし、また引き続きGPTsに依頼をすれば作成してくれるので、それで作成してもＯＫ。
ということで個人的には結構優秀な感じに作ってくれそうで重宝出来そうです！
Case2
次にCase2を試してみます。
こちらではサイトのURLを指定して、ブラウジングしてもらい、その箇所を模したグラフ作成を依頼したいと思います。
ーーーーーーーーーー
私：
https://www.mof.go.jp/tax_policy/summary/condition/a02.htm
上記URLサイトの"利払費と金利の推移"の項目のグラフをHTMLで作成できますか？
ブログ・サイト制作に使えるデザインパーツクリエイター：
以下のグラフをHTMLとJavaScript（Chart.jsライブラリを使用）で作成します。
グラフの情報
- 縦軸（左）: 利払費（兆円）
- 縦軸（右）: 金利（%）
- 横軸: 年度
HTMLとJavaScriptコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>利払費と金利の推移</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<h2>利払費と金利の推移</h2>
<canvas id="myChart" width="400" height="200"></canvas>
<script>
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['2013', '2014', '2015', '2016', '2017', '2018', '2019', '2020', '2021', '2022'],
datasets: [{
label: '利払費（兆円）',
data: [10.5, 10.2, 9.8, 9.5, 9.2, 8.9, 8.6, 8.3, 8.1, 7.9],
borderColor: 'rgba(75, 192, 192, 1)',
yAxisID: 'y',
fill: false,
tension: 0.1
}, {
label: '金利（%）',
data: [1.5, 1.4, 1.3, 1.2, 1.1, 1.0, 0.9, 0.8, 0.7, 0.6],
borderColor: 'rgba(255, 99, 132, 1)',
yAxisID: 'y1',
fill: false,
tension: 0.1
}]
},
options: {
scales: {
y: {
type: 'linear',
position: 'left',
title: {
display: true,
text: '利払費（兆円）'
}
},
y1: {
type: 'linear',
position: 'right',
title: {
display: true,
text: '金利（%）'
},
grid: {
drawOnChartArea: false
}
}
}
}
});
</script>
</body>
</html>
このコードを使えば、「利払費と金利の推移」を表示するインタラクティブなグラフが作成できます。利払費と金利のデータは仮の値を使用していますので、実際のデータに置き換えてください。
私：
教えてくれてありがとう！ここからアレンジしていきます！
ブログ・サイト制作に使えるデザインパーツクリエイター：
どういたしまして！何か他にお手伝いできることがあれば、いつでもお知らせください。デザインやコーディングについて他にも質問があれば、どんどん聞いてくださいね！楽しくて役立つサイト作りをサポートします！
ということで、今回も作成することが出来ました。
グラフとしては、やや不完全な箇所もありましたが、項目としてしっかり読み込み類似したグラフを作成できていたので、上出来だと思いました。
他のGPTsもそうですが、最後の微修正などが必要な場合もありますが、そこらへんのGPTsの傾向などを学んでいって、スクリプトを残したりしていくと、さらに業務効率が上がっていく感じがしました！
キャプテン翼じゃないですが「ボールは友達」と言ったような温かい感覚を持って生成AIに触れ合っていくことによって、AI自身も学習してさらに良い結果を出してくれるようになります。そういう感覚を持って、AIにも触れていけるとより良い業務に繋がっていくような感じがしました！
実際に使ってみての感想
今回は２つのケースでブログ・サイト制作に使えるデザインパーツクリエイターGPTsを検証してみました。
実際に使ってみての感想は
ポイント
- 非エンジニアでも安心して作れる
- ブログパーツをアレンジできる
- オリジナルコンテンツが作れる
と言ったように、こういうブログやサイトを作りたかったんだー、という希望を叶えてくれる機能を持ったGPTsというのがわかりやすいこのGPTsの評価かと思います。
あなた自身が作りたかったけど、プログラミングの知識がないから諦めていた・・・ということも実現できるのがこのGPTsの特徴と言えるでしょう。
このGPTsがおすすめな方
ということでここまでの内容のまとめになります。
ブログ・サイト制作に使えるデザインパーツクリエイターのGPTsがおすすめな方はこんな方になります。
こんな方におすすめ
- WordPressなどのCMS担当の方
- 広報・マーケなど発信を行う方
- デザイナーでプログラミング知識の少ない方
など、ほんとはブログやサイトをもう少しアレンジしたかったー、けど知識がなかった orz
という人にはもってこいのGPTsだと思います。
進化しているAIの技術を使いながら、よりクリエイティブな仕事をすること。それが回りまわって世界の良い循環になっていく、、そんな大きな話、と思われるかもしれませんが、案外的外れでもない気もしている・・・そんなくらいの便利な機能でした。
まずは使ってみたいと思えば、いつでも無料で使えるので、ChatGPTの無料登録を済まして下記のURLから使ってみてください！
●ブログ・サイト制作に使えるデザインパーツクリエイター
【↓ GPTsはこちらから ↓】
https://chatgpt.com/g/g-N9f8CRNhv-hurokusaitozhi-zuo-nishi-erutesainhatukurieita
