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

COFFEE BREAK AGAIN / WEB GARDEN

AIでホームページを作る。
自分で育てる。

小さなアイデアを、誰かに届くサイトへ。
作り方も、直し方も、育てる過程も。
この庭で試したことを、ひとつずつ。

自分のサイトを作りはじめる
土 芽 枝 サイトが育つ
作り方を見つける

01 / START SOMEWHERE

ホームページの作り方も、
サイトの修正も。今の一歩から。

ブログを始めたい。お店の魅力を伝えたい。
まだぼんやりしたアイデアでも、入口はあります。

01 — はじめて作る

何から決めれば
いいんだろう。

目的、載せる内容、更新のしかた。最初に決める5つを整理します。

ホームページの作り方 02 — 今のサイトを直す

作ったけれど、
うまく伝わらない。

読みづらい、スマホで崩れる。困っている場所を見つけ、AIに伝える方法。

サイト修正の進め方 03 — AIと作ってみる

どんなふうに
頼めばいいの？

「いい感じに」の一歩先へ。そのまま使って、書き換えられる指示の例。

AIへの指示の出し方

02 / IN OUR GARDEN

ホームページ制作の実例。
それぞれの、育て方。

34のサイトを見る →

MORE PLACES TO GROW / それぞれの世界へ

物語も、暮らしも、仕事も。
届ける相手から生まれた、サイトの景色。

未来をのぞく場所。恋のもやもやを整理する場所。
同じサイト作りでも、色も、言葉も、入口も変わります。

34のサイトを画像と紹介で見る →

03 / ROOTS BEFORE BRANCHES

レンタルサーバーと
ドメインの選び方。

サイトを置く場所と、あなたのサイトの住所。
作りたいものと、続けやすさから選びましょう。

サーバー・ドメインの基本を読む →
作る道具

WordPressとAstro、どちらを選ぶ？

自分で文章を更新したい？ 見た目を細かく作りたい？

→サイトを置く場所

レンタルサーバーでいいの？

料金だけでなく、使える機能と戻せる仕組みを確認。

→サイトの住所

独自ドメイン、いつ・どう選ぶ？

名前の決め方から、更新料金で見落としやすいことまで。

→

04 / FIELD NOTES

サイト改善の記録を、
次の制作のヒントに。

研究ノートを読む →
NOTE 08

関連記事 / 次に読む案内

ブログの関連記事の選び方と設置方法｜記事末尾の改善例

読み終えたあと、次の記事が見つからない。CBAの記事末尾へ関連記事を追加した前後を比べ、リンク先の選び方、読む理由の書き方、AIへの指示を説明します。

NOTE 07

見出し / 装飾の使い分け

ブログの見出しデザイン｜装飾前後とCSSの実例

見出しを小さくしたら、今度は章の始まりが分かりにくい。CBAの実画面で装飾前後を比べ、文字を大きくせず下線で区別する方法とAIへの指示例を紹介します。

NOTE 06

アニメーション / 表示する順番

ファーストビューのアニメーションをAIに頼む方法｜表示順を直した実例

CBAの木が育つ演出を、旧デザインと段階別の実画面で紹介。表示順、動く位置、タイトルを出すタイミングを、AIへの指示にする方法を説明します。

NOTE 05

AI画像 / 人物の見た目

AI画像で顔が変わるときの直し方｜同じキャラクターを保つ修正例

kosodateで実際に残した基準画像・採用前の案・修正後の画像を比較。AIに伝える人物の特徴と場面の変更、サムネイルでの確認を具体的に説明します。

NOTE 04

サムネイル / 画像と案内

ホームページのサムネイル画像はどう選ぶ？案内カードの改善前後で見る

文字中心の案内カードに画像を加えたMiraiの実例。PC・スマホの追加前後を切り替えて、サムネイルの選び方、置く場所、AIへの指示を紹介します。

NOTE 03

余白と見出し / 読みやすい配置

ホームページの余白と文字サイズを整える｜見出しが大きすぎた修正例

ホームページの余白と見出しを直した実例。PC・スマホの本文サイズ、AIっぽい囲みを外す考え方、見出し・カードのCSS例とAIへの指示を紹介します。

NOTE 02

スマホ表示 / 幅と折り返し

スマホでサイトが横にはみ出すときの直し方｜AIへの指示と確認例

本文と案内枠の幅、長いページ名の折り返しを直した実例。AIに渡す症状・残したい操作・修正後の確認を、使える指示例とともに紹介します。

NOTE 01

PicoRoute / 読みやすさ

サイト改善の実例｜PicoRouteの入口の物語を短くし、詳しい解説を分ける

物語と詳しいガイドの役割を分けた理由、修正した内容、まだ確かめていないことを記録します。

A little idea.
A place to grow.

あなたの「作ってみたい」に、
小さなきっかけを。

ホームページを作る最初の一歩 →