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の入口の物語を短くし、詳しい解説を分ける
物語と詳しいガイドの役割を分けた理由、修正した内容、まだ確かめていないことを記録します。