IN OUR GARDEN / サイトの図鑑
ホームページ制作の実例から、
自分のサイトの作り方を見つける。
誰に、何を届けるかで、サイトの形は変わります。Coffee Break Againで作っているメディアを、読者・内容・作り方のヒントと一緒に紹介します。気になるテーマから、実際のページをのぞいてみてください。
34 読めるサイト
FIELD 01 / 学び・科学
学習サイトの作り方を考える、学びと科学のメディア
知らない言葉が多いテーマほど、最初の入口が大切です。物語、図解、学ぶ順番をどう組み合わせているか見てみてください。
PicoRoute（ピコルート）
Webやインターネットの仕組みを、最初から知りたい人へ。
動画が届く道や、ブラウザでページが開く仕組みを、漫画・図解・用語解説から学べます。物語を楽しむ入口と、順番に学ぶ道筋を用意しています。
サイト制作のヒント
専門用語の一覧に入る前に、身近な疑問と学ぶ順番を見せる。初心者向けの解説サイトに取り入れたい構成です。
まずは、Webの仕組みを学ぶ順番を見るところから。
このサイトの構成とAIへの指示例を読む →
余白灯舎
自分で作ったバナーやWebページを、もっと見やすくしたい人へ。
余白・配色・文字・レイアウトの基本を、初心者のつまずきと一緒に学ぶデザイン入門です。「どこを直せばいいか分からない」ときの見る順番を案内します。
サイト制作のヒント
「おしゃれにして」で終わらせず、文字や余白など直す場所を分けて説明する。サイト修正の依頼を考えるときにも参考になります。
まずは、デザインの基本を学び始めるところから。
英語の音 航海団
英文は読めるのに、音になると聞き取れない人へ。
文字の理解、音のつながり、意味を追う速さ、教材の難しさを分け、どこでつまずくか考える英語学習サイトです。聞き取りチェックから記事を選べます。
サイト制作のヒント
おすすめ教材へ進む前に、困っている理由を分ける。読者の状態によって読む記事が変わる案内の例です。
まずは、英語が聞き取れない理由を読むところから。
Kotoba Street
日本での日常会話を学びたい、大人の日本語初心者へ。
英語を案内の中心に、生活の場面で何と言うか、どうしてその言い方を使うか、どんな返事が来るかを学びます。レッスンと場面別の入口があります。
サイト制作のヒント
読者が使う言語と生活場面を先に決める。海外の人へ向けたサイトでは、説明の前提から変えることが分かります。
まずは、日本で使う会話の場面を見るところから。
ときたび！
歴史を初めて楽しむ子どもと、一緒に読む保護者へ。
戦国時代や古代エジプトへ旅する物語とクイズから、人々の暮らしを学びます。ふりがなや保護者向けの案内があり、史実・推定・創作を分けています。
サイト制作のヒント
子どもが楽しむ入口と、大人が読み方を確かめる入口を用意する。二つの読者に届けるサイトの構成例です。
まずは、親子で楽しむ歴史の読み方を見るところから。
STAR WARRANT｜星間未解決事件簿
宇宙の疑問を、物語を追いながら考えたい人へ。
宇宙で音が聞こえない理由などを、賞金稼ぎチームが追う架空の事件として描きます。事件を楽しむ読み物と、科学を確かめる解説の入口を分けています。
サイト制作のヒント
知りたい疑問を、読み進めたくなる事件にする。創作と事実の説明を区別しながら世界観を作る例です。
まずは、最初の事件「真空で鳴るベル」を読むところから。
FIELD 02 / 本・創作
読書・創作メディアのサイト制作事例
本を選ぶ、作品を読み直す、自分で書く。同じ「物語」でも、読者がしたいことによって案内の仕方が変わります。
コトハたちのストーリーアトリエ
小説を書きたいけれど、最初の一文や構成で止まっている人へ。
アイデアから人物、構成、最初の場面へと順番に進む創作サイトです。解説に加え、構成メーカーや自分の考えを書き留めるノートがあります。
サイト制作のヒント
記事で説明したあと、その場で試せる道具につなぐ。「分かった」で終わらず手を動かせるサイトの参考になります。
まずは、白紙から物語を作る手順を読むところから。
このサイトの構成とAIへの指示例を読む →
夜の文学喫茶
昔読んだ名作を思い出したい人、今の自分に合う読み方を探す人へ。
作品や作家の棚から一冊を選び、あらすじだけでなく原典の一節へ進む読書案内です。結末をどこまで知るか、読む前の準備も扱っています。
サイト制作のヒント
同じ本の紹介でも「今夜どこを読むか」まで絞ると、読者の行動が具体的になる。選書メディアの切り口の例です。
まずは、今夜読み直したい作品を探すところから。
本の処方箋薬局
読みたい本が増えるばかりで、次の一冊を選べない人へ。
今の悩みや読書の状態を入口に、一冊との相性を考える本の案内です。「処方箋」は本選びのたとえ。合う人だけでなく、合わない状況も紹介しています。
サイト制作のヒント
候補を大量に並べず、選ぶ理由と見送る理由を添える。比較記事やおすすめ記事の作り方を考えられます。
まずは、今の気分から一冊を探すところから。
神話の語り部の館
ゲームやアニメで知った神の名前から、神話を読んでみたい人へ。
物語の語り直し、神さまの紹介、共通する問いから神話へ入るサイトです。異なる伝承を一つにまとめず、依拠した原典や翻訳書へ案内しています。
サイト制作のヒント
読者がすでに知っている名前を入口に、詳しい資料へ橋をかける。趣味の深いテーマを紹介するサイトの参考になります。
まずは、気になる神話や神の名前を探すところから。
FIELD 03 / 暮らし
暮らしのブログ・情報サイトの作り方のヒント
知識を並べるだけでなく、今日の生活で使える順番へ。準備するものや確かめる条件を、読者の場面に合わせて整理しています。
茶の間1,2,3
家でお茶を楽しみたい人、いつもの一杯を調整したい人へ。
茶葉や道具を選び、淹れ、味わう流れで案内するお茶の入門サイトです。温度・量・時間など、一杯を見直す条件ごとに記事を探せます。
サイト制作のヒント
商品選びと使い方を同じ流れに置く。買ったあとの楽しみまで伝える、趣味のブログや専門店のサイトのヒントです。
まずは、お茶の淹れ方の基本を読むところから。
ひとり暮らし1,2,3
初めての一人暮らしで、何から準備するか迷っている人へ。
部屋を探す、家電や家具をそろえる、暮らしを続けるまでを整理しています。費用や契約などの疑問を、自分の数字や書面で確かめる順番へつなげます。
サイト制作のヒント
記事のテーマを、読者が体験する順番に並べる。引っ越しや開業など、準備が長いテーマの案内に応用できます。
まずは、一人暮らしの準備の全体像を見るところから。
片付け1,2,3
片付けが苦手で、最初にどこへ手を付けるか決めたい人へ。
分ける・減らす・整えるという流れから、片付け、収納、掃除、家事の工夫を案内します。広い暮らしの悩みを、始めやすい作業へ分けています。
サイト制作のヒント
大きな悩みを三つの動作へ整理する。初心者向けのホームページで、最初の案内を短く見せる方法です。
まずは、片付けたい場所に合う記事を探すところから。
そなえ1,2,3
防災用品や備蓄を、これから見直したい人へ。
そろえる・たくわえる・みなおすの流れで、持ち出し袋や家庭の備蓄を案内します。日頃の準備を扱い、災害時の判断では最新の公的情報を確認するよう伝えています。
サイト制作のヒント
自分のサイトで説明する範囲と、公的な案内へ渡す場面を明示する。生活に関わる情報を届ける際の参考です。
まずは、防災の備えを始める入口を見るところから。
暮らしロボット実装室
家庭用ロボットが、自分の家の家事に合うか考えたい人へ。
任せたい家事、部屋の環境、止める条件、手入れの時間を分けて考えるサイトです。商品を見る前に、家庭で減らしたい作業を一つに絞ります。
サイト制作のヒント
製品の機能を、読者の暮らしの条件へ置き換えて説明する。道具やサービスの紹介ページを作るときの考え方です。
まずは、ロボットに任せたい家事を整理するところから。
FIELD 04 / 子育て・家族
子育て・家族を支えるメディアの制作事例
子どもと読む時間、親への贈り物、介護の始まり。家族という広いテーマを、年齢や今困っていることから選べるようにしています。
アサヒナノート
子育てや家事、夫婦の分担で悩む保護者へ。
朝比奈家の物語を入口に、子どもの年齢や家族の困りごとから記事を選ぶ育児メディアです。夜泣き、仕事復帰、夫婦の会話など、日々の場面を扱います。
サイト制作のヒント
続けて読める家族の物語と、今の悩みから探す一覧を両方置く。読み物と実用記事の行き来を考えられます。
まずは、子どもの年齢や家族の悩みから探すところから。
水野家の子育て科学ノート
子どもの行動や声かけを、家庭の状況に合わせて考えたい人へ。
水野家の漫画と研究知見を通じて、起きていることを観察し、小さく試し、確かめ直す流れを案内します。主に3〜10歳の子育てを扱っています。
サイト制作のヒント
読む説明と、自分の家庭で振り返る記録をつなぐ。観察することや試すことを、分かりやすい動詞にする例です。
まずは、子育て科学ノートの使い方を見るところから。
コトノハポッケ
1〜6歳の子どもに、今の気分に合うお話を選びたい人へ。
短いお話や昔話、親子で解く事件、迷路やクイズを楽しむ読み聞かせサイトです。年齢だけでなく、読む時間や過ごし方から作品を選べます。
サイト制作のヒント
記事のジャンル以外に、年齢や使える時間でも探せるようにする。作品が増えたサイトの整理に役立つ例です。
まずは、親子で読みたいお話を探すところから。
ハハゴコロ
「何もいらない」と言う母に、どう感謝を伝えるか迷う人へ。
母が避けたい負担や、贈りたい気持ちから選び方を考えるサイトです。品物だけでなく、一緒に過ごす時間、手伝い、言葉も紹介し、三つの質問から整理できます。
サイト制作のヒント
商品一覧へ直行せず、贈る相手の事情を聞く。質問に答えて選ぶ仕組みを、サービスの相談入口にも応用できます。
まずは、物欲のない母への贈り方を考えるところから。
介護のはじまり案内所
親の介護が始まり、手続きや連絡を一度に抱えている人へ。
今週決めること、後でよいこと、専門家へ相談することを分ける案内です。制度や家族の分担を、最初の連絡と準備につなげる順番で扱います。
サイト制作のヒント
すべてを一度に説明せず、今必要な一歩へ絞る。情報量が多いサイトほど、読む順番を決める価値があります。
まずは、介護が始まったときの困りごとから探すところから。
FIELD 05 / ことば・人間関係
相談メディアのサイト制作に学ぶ、やさしい伝え方
悩みを抱えた日に読むサイトでは、言葉の温度も設計の一部です。答えを急がせず、状況を整理する入口を作っています。
koishiori（コイシオリ）
恋愛や学校生活のもやもやを、自分の言葉で整理したい高校生へ。
放課後の図書室を思わせる相談メディアです。恋愛だけでなく、友達、勉強、デジタル生活などの入口があり、物語と悩み別の記事を行き来できます。
サイト制作のヒント
サイトの雰囲気と、悩みを探す案内を両立する。世界観を作っても、読者が必要な情報へ進める構成です。
まずは、今のもやもやに近い入口を探すところから。
このサイトの構成とAIへの指示例を読む →
ミオたちの恋ノート
返信の遅さや曖昧な関係に悩み、自分の希望も整理したい人へ。
漫画と恋愛ガイドから、連絡、相手の行動、関係の境界線を考えるサイトです。具体的な場面ごとの記事へ進める案内が特徴です。
サイト制作のヒント
「恋愛」のような広い分類を、返信や約束など読者が検索する場面へ分ける。記事が多いサイトの入口を考えられます。
まずは、恋愛の悩みに近い場面を選ぶところから。
言い方の仕立て屋
断りやお願いの文面を、何度も書き直してしまう人へ。
伝えたいことを感情・事実・お願いに分けて整える、言葉の実用サイトです。例文に加え、その言い方を使える条件や送る前のチェックがあります。
サイト制作のヒント
例文を置くだけでなく、誰にどんな場面で使うかを添える。メールや問い合わせの説明ページにも役立つ考え方です。
まずは、断る・頼むなどの場面から文面を探すところから。
聞き方のラジオ局
会話を続けたいけれど、返し方や質問で迷う人へ。
深夜ラジオ局のブース裏を舞台に、相槌、間、質問の仕方を学ぶサイトです。面白い話題を用意することより、相手の話をどう受け取るかを扱います。
サイト制作のヒント
似たテーマのサイトと、扱う役割を分ける。「話す」中でも「聞く」に絞ることで、紹介の言葉も具体的になります。
まずは、相槌・間・質問のガイドを読むところから。
夜10時の台所
夫婦の会話が、予定や家事の連絡ばかりになっている人へ。
用事以外の話題を一つ選び、場所と最初の一言を考えるサイトです。大きな話し合いの前に、10分の会話を準備する読み物とメモがあります。
サイト制作のヒント
抽象的な悩みを「いつ、どこで、何から」に置き換える。読んだ人が次の行動を想像できる説明の例です。
まずは、今夜の会話を準備するメモを見るところから。
FIELD 06 / 仕事・未来
仕事・技術の情報サイト制作に役立つ実例
例文を使う、準備をする、情報を確かめる。仕事のサイトや事業のホームページにも応用できる、具体的な行動へのつなぎ方を紹介します。
なつめと、明日のしごと。
会社を辞めたいのか、今の役割を変えたいのか迷っている人へ。
営業企画のなつめの物語と一緒に、仕事の迷いを整理するキャリアメディアです。残る・休む・移る・始めるという選択を、判断ワークで比べます。
サイト制作のヒント
二択に見える悩みに、条件を並べて考える場所を作る。相談サービスや比較記事の構成を考える参考になります。
まずは、辞めるか残るかを整理するワークを見るところから。
一年目のリハーサル
社会人一年目で、質問や確認の仕方から学びたい人へ。
仕事で分からない場面を、登場人物と一緒に質問・確認・やり直しへ変えるサイトです。テーマ別の入口と、一年の流れから読む入口があります。
サイト制作のヒント
完成したお手本に加え、途中でつまずく場面を見せる。初心者向けガイドや研修用サイトを作る際のヒントです。
まずは、一年目の仕事の学び方を見るところから。
本番前の楽屋
発表や挨拶を控え、何を準備すればよいか迷っている人へ。
緊張との付き合い方、スピーチの構成、場面別の挨拶を扱います。本番の日時から逆算して準備するチェック進行表も用意しています。
サイト制作のヒント
悩みの説明から、期限のある準備へつなげる。イベントや講座など、本番が決まっているサービスの案内にも使える視点です。
まずは、発表前の準備を進行表で確認するところから。
ココロが動く営業ノート
商談での質問、値引きへの返答、見積後の連絡に困っている人へ。
営業の具体的な場面から、質問例・メール例文・準備の仕方を探せるサイトです。ヒアリングや保留への対応など、今日の仕事で困ったことから選べます。
サイト制作のヒント
知識の名前より、読者が困っている場面を見出しにする。事業サイトのよくある質問やサポートページにも通じる整理です。
まずは、営業の場面に合う質問・返答例を探すところから。
ミライ分岐点
AIやロボットがある暮らしを、自分の生活に引き寄せて考えたい人へ。
まだ来ていない世界を「もしも」の景色や物語からのぞく未来メディアです。想像する入口と、技術や暮らしの解説を読む入口があります。
サイト制作のヒント
抽象的な技術を、暮らしの場面として見せる。新しいサービスがある生活を説明するときの参考になります。
まずは、六つの「もしも」の未来をのぞくところから。
あしたの照合簿
AIやロボットの未来予測を、見出しだけで判断したくない人へ。
誰が、いつまでに、何を実現すると言ったのかを整理するサイトです。発言・計画・実証・運用・普及を分け、進み具合を確かめる入口を用意しています。
サイト制作のヒント
発表と実現を同じ意味にせず、今どの段階かを見せる。変化の速い分野の情報サイトで参考になる分け方です。
まずは、期限と条件が整理された未来予測を見るところから。
はたらくロボット職業案内所
ロボットが現場で何を担うのか、専門外から知りたい人へ。
実在するロボットを職場に配属された新人になぞらえ、仕事・できること・限界を紹介します。人の監督が必要な条件も一緒に読む構成です。
サイト制作のヒント
機能名の羅列を、任せる仕事と使う条件へ置き換える。製品や業務サービスの紹介ページを考える材料になります。
まずは、ロボットの仕事と現場の条件を読むところから。
ニュースの前提帳
ニュースを人に伝える前に、言葉や数字の前提を確かめたい人へ。
分母、比較する期間、決まった範囲などを短いカードで整理するサイトです。基礎解説を読む入口と、手元の見出しを点検する道具があります。
サイト制作のヒント
一つの記事で扱う問いを絞り、短い説明から確認へ進める。用語集や、事業サイトの説明不足を直す際の参考です。
まずは、ニュースを読むための前提カードを見るところから。
FIELD 07 / コーヒー・旧サイト
WordPressサイトの移行・保存の実例
今の研究室の前にあった、コーヒーの記録です。過去の記事を読める形で残すことも、サイトを長く育てる仕事の一つです。
Coffee Break Again｜旧コーヒーサイト
バリスタ大会やコーヒーについての過去の記録を読みたい人へ。
ワールドバリスタチャンピオンシップや国内大会、コーヒーの話題をまとめた旧サイトです。更新を終えたアーカイブとして保存しており、掲載情報は当時のものです。
サイト制作のヒント
WordPressで運営していた記事を、静的なページとして残す。サイトの作り直しで、過去のURLと記事を引き継ぐ実例です。
まずは、旧サイトのコーヒーと大会の記録を読むところから。
A CLOSER LOOK / 作り方を、もう少し深く
AIでサイトを作るには？
構成と指示の例を読む。
見た目の奥にある考え方を、三つのサイトで詳しく紹介しています。自分のブログや事業のホームページに置き換えて考えてみてください。
koishiori 悩みに寄り添うメディア / Astro
世界観と、迷わない案内を両立する。
放課後の図書室を入口に、恋愛や学校生活の困りごとをほどく。読者が自分で選べる、やさしい相談メディアです。
構成と作り方を読む →PicoRoute 物語から学ぶメディア / Astro
物語で興味を持ち、解説で確かめる。
インターネットの仕組みを、キャラクターと物語、図で学ぶサイト。読み物から詳しい解説へ、理解に合わせて進めます。
構成と作り方を読む →ストーリーアトリエ 学びと実践のメディア / Astro
記事の終わりに、小さな実践を置く。
小説や物語の作り方を学びながら、自分のアイデアを書き留める。説明を読んだあと、ひとつ手を動かせる創作の場所です。
構成と作り方を読む →