koishiori 悩みに寄り添うメディア
世界観と、迷わない案内を両立する。
放課後の図書室を入口に、恋愛や学校生活の困りごとをほどく。読者が自分で選べる、やさしい相談メディアです。
koishioriを見る →COFFEE BREAK AGAIN / WEB GARDEN
AIでホームページを作る。
自分で育てる。
小さなアイデアを、誰かに届くサイトへ。
作り方も、直し方も、育てる過程も。
この庭で試したことを、ひとつずつ。
01 / START SOMEWHERE
ホームページの作り方も、
サイトの修正も。今の一歩から。
ブログを始めたい。お店の魅力を伝えたい。
まだぼんやりしたアイデアでも、入口はあります。
02 / IN OUR GARDEN
ホームページ制作の実例。
それぞれの、育て方。
koishiori 
PicoRoute 物語から学ぶメディア
物語で興味を持ち、解説で確かめる。
インターネットの仕組みを、キャラクターと物語、図で学ぶサイト。読み物から詳しい解説へ、理解に合わせて進めます。
PicoRouteを見る →
ストーリーアトリエ 学びと実践のメディア
記事の終わりに、小さな実践を置く。
小説や物語の作り方を学びながら、自分のアイデアを書き留める。説明を読んだあと、ひとつ手を動かせる創作の場所です。
ストーリーアトリエを見る →MORE PLACES TO GROW / それぞれの世界へ
物語も、暮らしも、仕事も。
届ける相手から生まれた、サイトの景色。
未来をのぞく場所。恋のもやもやを整理する場所。
同じサイト作りでも、色も、言葉も、入口も変わります。
あらいごろ
衣類や布団を運ばずに洗いたい人へ。
内容とサイト制作のヒントを読む
アソノメ
3〜8歳の男の子へ、おもちゃを贈りたい人へ。
内容とサイト制作のヒントを読む
ヨナカ電器
夜に家電のにおいや音、不調に気づいた人へ。
内容とサイト制作のヒントを読む
ソラトイ
星や宇宙を見上げて、身近な「なんで？」を調べてみたい人へ。
内容とサイト制作のヒントを読む
コノメク｜KONOMEKU
服の丈や靴のサイズが合わず、選び方に困っている人へ。
内容とサイト制作のヒントを読む
むしめく｜ムシメク
子どもと虫を見つけ、観察や飼育を楽しみたい家族へ。
内容とサイト制作のヒントを読む
かわみっけ
親子で川の魚や生き物を網ですくい、観察してみたい家庭へ。
内容とサイト制作のヒントを読む
ミライ分岐点
AIやロボットがある暮らしを、自分の生活に引き寄せて考えたい人へ。
内容とサイト制作のヒントを読む
ミオたちの恋ノート
返信の遅さや曖昧な関係に悩み、自分の希望も整理したい人へ。
内容とサイト制作のヒントを読む
アサヒナノート
子育てや家事、夫婦の分担で悩む保護者へ。
内容とサイト制作のヒントを読む
水野家の子育て科学ノート
子どもの行動や声かけを、家庭の状況に合わせて考えたい人へ。
内容とサイト制作のヒントを読む
なつめと、明日のしごと。
会社を辞めたいのか、今の役割を変えたいのか迷っている人へ。
内容とサイト制作のヒントを読む
余白灯舎
自分で作ったバナーやWebページを、もっと見やすくしたい人へ。
内容とサイト制作のヒントを読む
ときたび！
歴史を初めて楽しむ子どもと、一緒に読む保護者へ。
内容とサイト制作のヒントを読む
STAR WARRANT｜星間未解決事件簿
宇宙の疑問を、物語を追いながら考えたい人へ。
内容とサイト制作のヒントを読む03 / ROOTS BEFORE BRANCHES
レンタルサーバーと
ドメインの選び方。
サイトを置く場所と、あなたのサイトの住所。
作りたいものと、続けやすさから選びましょう。
04 / FIELD NOTES
サイト改善の記録を、
次の制作のヒントに。
関連記事 / 次に読む案内
ブログの関連記事の選び方と設置方法｜記事末尾の改善例
読み終えたあと、次の記事が見つからない。CBAの記事末尾へ関連記事を追加した前後を比べ、リンク先の選び方、読む理由の書き方、AIへの指示を説明します。
見出し / 装飾の使い分け
ブログの見出しデザイン｜装飾前後とCSSの実例
見出しを小さくしたら、今度は章の始まりが分かりにくい。CBAの実画面で装飾前後を比べ、文字を大きくせず下線で区別する方法とAIへの指示例を紹介します。
アニメーション / 表示する順番
ファーストビューのアニメーションをAIに頼む方法｜表示順を直した実例
CBAの木が育つ演出を、旧デザインと段階別の実画面で紹介。表示順、動く位置、タイトルを出すタイミングを、AIへの指示にする方法を説明します。
AI画像 / 人物の見た目
AI画像で顔が変わるときの直し方｜同じキャラクターを保つ修正例
kosodateで実際に残した基準画像・採用前の案・修正後の画像を比較。AIに伝える人物の特徴と場面の変更、サムネイルでの確認を具体的に説明します。
サムネイル / 画像と案内
ホームページのサムネイル画像はどう選ぶ？案内カードの改善前後で見る
文字中心の案内カードに画像を加えたMiraiの実例。PC・スマホの追加前後を切り替えて、サムネイルの選び方、置く場所、AIへの指示を紹介します。
余白と見出し / 読みやすい配置
ホームページの余白と文字サイズを整える｜見出しが大きすぎた修正例
ホームページの余白と見出しを直した実例。PC・スマホの本文サイズ、AIっぽい囲みを外す考え方、見出し・カードのCSS例とAIへの指示を紹介します。
スマホ表示 / 幅と折り返し
スマホでサイトが横にはみ出すときの直し方｜AIへの指示と確認例
本文と案内枠の幅、長いページ名の折り返しを直した実例。AIに渡す症状・残したい操作・修正後の確認を、使える指示例とともに紹介します。
PicoRoute / 読みやすさ
サイト改善の実例｜PicoRouteの入口の物語を短くし、詳しい解説を分ける
物語と詳しいガイドの役割を分けた理由、修正した内容、まだ確かめていないことを記録します。