こんにちは、採用担当のでーもんです。
今回は、これまで学んできた技術を活用して、最終制作に向けたプロトタイプ制作の第一歩に挑戦しました。
今回制作するテーマは、
「初めて使う人もが簡単にHTMLページを作成できるページビルダー」
です。
まだ完成形ではありませんが、実際に手を動かしてみることで、必要な機能や改善点が見えてきました。
この記事では、制作した背景やプロトタイプの内容、制作過程、実際に作ってみて感じた気づきをまとめます。
👇これまで検討してきたアイデアはコチラ
なぜこのプロトタイプを作ろうと思ったのか
現在、採用業務では学生向けページや案内ページを作成する機会があります。
しかし、ページを作成する際には、
- HTMLタグの知識が必要
- デザインを整えるためにコード修正が必要
- 少し変更したいだけでも時間がかかる
といった課題があります。
特に採用担当者は、イベント準備や学生対応など多くの業務を並行しているため、
「もっと簡単にページを作成できたら便利なのでは？」
と感じました。
そこで今回は、HTMLの知識がなくても直感的にページを作成できるツールのプロトタイプ制作に挑戦しました。
作成したもの
今回のプロトタイプでは、最終制作の中でも特に検証したかった
「HTMLを意識せずにページ装飾ができる仕組み」
の第一歩の部分を作成しました。
実装した機能はこちらです。
実装した機能
✅ 画面の全体像
✅ テキスト入力
✅ 作成したページのプレビュー表示
使用した技術
今回のプロトタイプ制作では、以下のツールを活用しました。
| 技術 | 用途 |
|---|---|
| CodePen | 画面作成・HTML/CSS/JavaScript実装 |
| 生成AI | コード作成や改善案の検討 |
| HTML/CSS | ページ装飾の実装 |
特に生成AIを活用することで、実装方法を調べながら短期間でも試作品を作成することができました。
制作過程
① まずは最低限の画面を作成
最初から多くの機能を入れるのではなく、
「入力した文字がプレビューに反映される」
という一番小さい機能から作成しました。
実際に動くものを作ることで、
「この部分は便利そう」
「ここはもっと改善したい」
という新しい発見がありました。
1-1.画面の大枠を作成
今回は、
・ツールバー
・入力画面
・PCプレビュー
・スマホプレビュー
が見える画面作成を目指しているので、まずはこの大枠を作成。
ChatGPTに、作成したい大枠を相談し、
HTMLとCSSを作成。
▼作成したHTML
<div class="header">
<h1>HTML Builder</h1>
</div>
<div class="container">
<!-- 左側 -->
<div class="toolbar">
<h2>ツールバー</h2>
<button>🅱 太字</button>
<button>U 下線</button>
<button>🔗 リンク</button>
<hr>
<button>📢 お知らせ</button>
<button>⚠ 注意</button>
<button>📝 メモ</button>
<button>⭐ ポイント</button>
</div>
<!-- 真ん中 -->
<div class="editor">
<h2>編集エリア</h2>
<textarea placeholder="ここに文章を入力してください"></textarea>
<button class="copy">📋 HTMLをコピー</button>
</div>
<!-- 右側 -->
<div class="preview">
<div class="pc">
<h3>💻 PCプレビュー</h3>
</div>
<div class="mobile">
<h3>📱 スマホプレビュー</h3>
</div>
</div>
</div>
▼作成したCSS
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial, sans-serif;
}
body{
background:#f5f5f5;
}
/* ヘッダー */
.header{
background:#ff6fa8;
color:white;
padding:20px;
box-shadow:0 2px 5px rgba(0,0,0,.2);
}
/* 全体 */
.container{
display:flex;
gap:20px;
padding:20px;
}
/* 左 */
.toolbar{
width:220px;
background:white;
border-radius:10px;
padding:20px;
box-shadow:0 2px 8px rgba(0,0,0,.1);
}
.toolbar h2{
margin-bottom:15px;
}
.toolbar button{
width:100%;
padding:12px;
margin-bottom:10px;
border:none;
border-radius:8px;
background:#ffe5ef;
cursor:pointer;
transition:.2s;
}
.toolbar button:hover{
background:#ffb6d2;
}
/* 真ん中 */
.editor{
flex:1;
background:white;
border-radius:10px;
padding:20px;
box-shadow:0 2px 8px rgba(0,0,0,.1);
}
textarea{
width:100%;
height:500px;
margin-top:15px;
padding:15px;
border-radius:8px;
border:1px solid #ccc;
resize:none;
}
.copy{
margin-top:15px;
background:#ff6fa8;
color:white;
border:none;
padding:12px 25px;
border-radius:8px;
cursor:pointer;
}
/* 右 */
.preview{
width:420px;
}
.pc{
background:white;
height:300px;
border-radius:10px;
margin-bottom:20px;
padding:20px;
box-shadow:0 2px 8px rgba(0,0,0,.1);
}
.mobile{
width:220px;
height:380px;
background:white;
margin:auto;
border-radius:30px;
padding:20px;
box-shadow:0 2px 8px rgba(0,0,0,.1);
}
1-2.入力したテキストをプレビュー表示する
大枠ができたところで、入力した内容がプレビューに表示されるように設定。
本来はJavaScriptを別ファイル（JS欄）に記述して動作させる予定でしたが、
CodePen上でうまく読み込まれずエラーが発生しました。
原因を調査した結果、今回はHTML内にJavaScriptを記述する形で実装し、まずは「動くプロトタイプを作る」ことを優先しました。
ChatGPTに、相談して、HTMLを変更✨
▼変更後のHTML
<div class="header">
<h1>HTML Builder</h1>
</div>
<div class="container">
<!-- 左側 -->
<div class="toolbar">
<h2>ツールバー</h2>
<button>🅱 太字</button>
<button>U 下線</button>
<button>🔗 リンク</button>
<hr>
<button>📢 お知らせ</button>
<button>⚠ 注意</button>
<button>📝 メモ</button>
<button>⭐ ポイント</button>
</div>
<!-- 真ん中 -->
<div class="editor">
<h2>編集エリア</h2>
<textarea placeholder="ここに文章を入力してください"></textarea>
<button class="copy">
📋 HTMLをコピー
</button>
</div>
<!-- 右側 -->
<div class="preview">
<!-- PCプレビュー -->
<div class="pc">
<h3>💻 PCプレビュー</h3>
<div id="pcPreview">
</div>
</div>
<!-- スマホプレビュー -->
<div class="mobile">
<h3>📱 スマホプレビュー</h3>
<div id="mobilePreview">
</div>
</div>
</div>
</div>
<script>
const textarea = document.querySelector("textarea");
const pcPreview = document.getElementById("pcPreview");
const mobilePreview = document.getElementById("mobilePreview");
textarea.addEventListener("input", function(){
pcPreview.innerHTML = textarea.value;
mobilePreview.innerHTML = textarea.value;
});
</script>
実際に作ってみて分かったこと
制作前は、
「ボタンを増やし、詳細設定可能な便利なツールにしたい」
と考えていました。
しかし、実際に作ってみると、
便利な機能を増やすことよりも、使用者が迷わず使えることが何より重要
だと気づきました。
例えば、
- 装飾ボタンが多すぎると逆に迷う
- HTMLを知らない人でも使える説明が必要
- 作成後の修正方法も考える必要がある
など、実際に触ってみたからこそ見えてきた課題がありました。
周囲からのフィードバック
作成したプロトタイプについて、周囲から以下のような意見をもらいました。
👩💼Bさん「初めて見る画面なので、少し慣れない」
🧑🔧Cさん「こういったものも、作成できるんですね。これから機能が増えるの楽しみにしてます」
👩💼Bさん「左側にHTMLやCSSなどのコードが見えているので、ごちゃごちゃしている印象」
改めて、第一印象など率直な意見をいただくことができ、
より使いやすい見た目を考慮していくべきだと改めて考えることができました！
今後追加したい機能
今回作成したプロトタイプをさらに発展させるため、以下の機能を検討しています。
- 装飾ボタンの実装
- AIによるデザイン提案、色彩サポート
- 採用ページ向けテンプレート作成
- 実際のPC・スマホ表示の同時確認
- よく使う装飾パーツ追加登録
- URLや画像差し替え機能
ただ機能を増やすだけではなく、
「誰でも時間をかけず、質の高いページを作れる」
という目的を意識して改善していきたいです。
🐾 小さな一歩ずつ
今回、プロトタイプ制作を通じて感じたことは、
考え続けるより、まず作ってみることで見える課題がある
ということです。
制作前は曖昧だったアイデアも、実際に形にしてみることで必要な機能や改善点が具体的になりました。
まだ第一歩ではありますが、今後もフィードバックを取り入れながら、より実際の業務で役立つツールへ成長させていきたいと思います。