本文へ移動
Coffee Break Again AIと育てる、サイト制作の研究室

SPECIMEN 03 / 学びと実践のメディア

学習サイトのホームページ制作事例|ストーリーアトリエで読むから書くへ

運営・編集:CBA編集部 / 監修者について
公開: / 更新:

制作:Coffee Break Again / 使用した道具:Astro

ストーリーアトリエを見る →
ストーリーアトリエのトップページ
公開サイトの画面 / 2026年9月28日

学習サイト制作では、読後にできることを決める

ストーリーアトリエでは、小説や物語づくりを、人物、世界、場面などの切り口から扱います。読者が「分かった気がする」で終わらず、自分の作品を考えるきっかけを作ることが課題です。

学習メディアを作るなら、読む前に困っていることと、読んだあとに試せることを一組で考えると、記事の役割が定まります。

ホームページに小さな記入欄を置き、実践につなげる

このサイトには、読んだことを自分の創作へ当てはめて書き留める作業メモがあります。説明から、自分のアイデアへ一歩進むための仕組みです。

同じ発想は、事業サイトにも使えます。たとえばサービスを選ぶ前の確認事項を書き出す、必要な準備をチェックするなどです。ただし、入力した内容をどこに保存するか、消えたときにどうなるかまで説明する必要があります。

AIへのホームページ制作の指示には、入力後の動作も含める

入力欄が見えているだけでは、機能の完成とは言えません。入力、保存、再表示、消去の動作をそれぞれ確認します。次は、学習サイトで作業メモを作る場合の指示例です。

記事を読んだ人が、[自分のアイデア]を書き留める欄を作ってください。
入力内容をどこに保存するかを先に説明してください。
保存できたかが画面で分かるようにしてください。
再読込したとき、空欄にしたとき、保存できない環境での動作を確認してください。
端末の変更で引き継げるか、削除する方法は何かも読者に伝えてください。

サイト改善では、説明と機能を一緒に確認する

言葉が分かりやすくても、書いた内容が残らなければ実践を続けにくくなります。機能が動いても、何を書けばよいか分からなければ入力は始まりません。

ストーリーアトリエでは、説明を具体例で補うことと、保存の動作を確かめることを合わせて見直しています。自分のサイトでも、画面の見た目に加えて、読者が行う一連の操作を試してみてください。