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

SPECIMEN 01 / 悩みに寄り添うメディア

相談メディアのホームページ制作事例|koishioriの世界観と案内の作り方

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

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

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

メディア制作は、読者が困っている場面を決めるところから

koishioriは、高校生活の小さな困りごとを扱うメディアです。恋愛だけでなく、友達、勉強、デジタル生活などの入口を分けています。

相談への答えは、相手の気持ちを勝手に決めつける形にはしません。読者が状況を整理し、自分で選べる材料を届けることを軸にしています。この軸があると、AIが書いた文章も、掲載してよい内容か判断しやすくなります。

ホームページの作り方に、世界観と探しやすさの両方を入れる

サイトの舞台は、放課後の図書室と、相談を受け取る「しおり箱」です。読者が少し立ち止まれる雰囲気を作りながら、困りごとの種類から記事へ進む道も用意しています。

自分のサイトで取り入れるなら、まずは入口の雰囲気と記事の分類を分けて考えてみてください。絵や物語に惹かれた人にも、答えを急いで探す人にも、次に進む場所が必要です。

AIにメディアのサイト構成を頼むなら、読者への姿勢も伝える

デザインを指定する前に、誰のどんな迷いを扱うか、断定しないことは何かを決めます。次の例は、koishioriの設計から考えた指示のたたき台です。制作時の会話をそのまま転載したものではありません。

悩みを整理するメディアのトップページ案を作ってください。
見る人:[具体的な読者]
扱う悩み:[分類を3〜5個]
大切にすること:相手の気持ちを決めつけず、読者が選べる材料を示す
雰囲気:静かな図書室のような、落ち着いて読める場所
見た目の演出とは別に、悩みの種類から記事を探せる案内を置いてください。

自分のホームページ制作に取り入れるなら、入口を二つ用意する

一つは「このサイトの雰囲気を知る入口」、もう一つは「必要な情報を探す入口」です。お店なら写真とサービス一覧、ブログなら運営者の紹介とテーマ別の記事一覧に置き換えられます。

この記事が紹介しているのは、実際のサイトの構成と、そこから考えられる制作のヒントです。この構成だけで検索順位や売上が上がると確認したものではありません。