架空のユーザーポータルページを作ります。ChatGPTにお願いして。
背景(なぜユーザーポータルページ？)
所属部署でユーザポータルページのリニューアルが検討されており、リソース不足および優先順位の問題で進んでいない状況あり。
ユーザポータルページの要件(後述します)を考えると、動くものを一式作ることで、
- HTML
- CSS
- PHP
- データベース
が一通り学べるものと考えており、曲がりなりにも動くものができればそれを叩き台にしてもらうなど、少しはリニューアルに向けて貢献できるのではないか、ということと、あわよくばそこに少し(できればガッツリ)絡んでいければ自分のスキルアップにつながる、との考えでいます。
ポータルページの要件
さて、ポータルページの要件ですが、現行のポータルページを参考にし、最小の構成要素としては次のようなものであると考えています。
- 会社からのお知らせ
- サービス機能紹介/マニュアル
- 消耗品購入
- 契約情報確認
- サポートの問い合わせ先
一つずつ見ていきます。
会社からのお知らせ
会社の長期休業や臨時休業、システムメンテナンスやシステム更新履歴などのお知らせを掲載します。
サービス機能紹介/マニュアル
システムの各機能の概要および使い方、活用シーンなどの紹介や、利用/操作方法についてのマニュアルへのリンクページです。
消耗品購入
システム利用に際しての消耗品(サーマルロール紙など)のご購入・ご注文ページです。
契約情報確認
現在のご契約のプランやオプションの契約情報の確認と変更、過去〜次月の請求明細の確認ができるページです。
サポートの問い合わせ先
サポートの問い合わせ先(TEL,FAX,Mail)ならびにサポートの営業時間についてフッターに記載しています。
まずは静的なページをChatGPTに書いてもらおう
とりあえず、上記要件を満たすページについてChatGPTに書いてもらおうと思います。
消耗品購入ページや契約情報確認ページへの移動にはログイン認証が必要でしょうし、会社からのお知らせについてについてもこのブログで使われているWordPressのようなCMS(コンテンツ・マネジメント・システム)で管理することと思いますが、とりあえずは外側から作っていきます。
(先に白状しておくと、私はサポートの連絡先については考慮から漏れていましたが、ユーザポータルのページに必要な要素ということでChatGPTが保管してくれたようです。)
指定したプロンプトは下記の通りです。
自社サービスを契約されているユーザ向けにポータルページを作ろうと考えています。要素は次の4つです。 ・会社からのお知らせ ・サービス機能紹介/マニュアル ・消耗品購入 ・契約情報確認 まずはトップページについて上記の4要素をメインカラムとしたものをHTML,CSSのコードで作成してもらえますか？
結果、作成してもらったコードは下記の通りです。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ユーザポータル</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<header>
<h1>ユーザポータル</h1>
</header>
<div class="container">
<div class="main-column">
<section class="news">
<h2>会社からのお知らせ</h2>
<ul>
<li><a href="#">重要なアップデートのお知らせ</a></li>
<li><a href="#">休業のお知らせ</a></li>
<!-- 他のお知らせもここに追加 -->
</ul>
</section>
<section class="features">
<h2>サービス機能紹介/マニュアル</h2>
<p>サービスの使い方や機能に関する情報をこちらで提供します。</p>
<a href="#">マニュアルをダウンロード</a>
</section>
<section class="purchase">
<h2>消耗品購入</h2>
<p>必要な消耗品の購入手続きを行えます。</p>
<a href="#">購入する</a>
</section>
<section class="contract">
<h2>契約情報確認</h2>
<p>契約内容やお支払い情報を確認できます。</p>
<a href="#">契約情報を確認する</a>
</section>
</div>
</div>
<footer>
<div class="footer-content">
<h3>サポートお問い合わせ先</h3>
<ul>
<li>TEL: 012-345-6789</li>
<li>FAX: 012-345-6790</li>
<li>Mail: support@example.com</li>
<li>サポート受付時間 平日 08:00-20:00 土曜 08:00-18:00</li>
<li>※日祝および夏季・年末年始期間は休業致します</li>
</ul>
</div>
</footer>
</body>
</html>
次に、CSSのファイルです。
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #ffffff;
}
header, footer {
color: #fff;
text-align: center;
padding: 10px 0;
background-color: #a9a9a9;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.main-column {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
section {
background-color: #fff;
padding: 20px;
border: 1px solid #ddd;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
h2 {
margin-top: 0;
}
a {
color: #007bff;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
結果として、出来上がったサンプルページが下記です。
これからやっていくこと
先ほども少し触れましたが、これからやっていくこととしては
- 消耗品購入ページの中身＝商品選択画面兼申込フォームの作成
- 契約情報確認のログイン画面(データベースとの突き合わせによるログインの仕組み)の作成
- ログイン後の契約情報の確認ページ(ログイン情報を保持した状態でDB登録で紐付けされた情報を参照する画面)の作成
- ページデザインのブラッシュアップ
かと思っています。
自身の学習と実際の成果物(おそらく叩き台にできればいいくらいのレベルかと思いますが)を目指していきたいと思います。
コメント