- デモ（ポートフォリオ）：
https://ユーザー名.github.io/リポジトリ名/ - リポジトリ（GitHub）：
https://github.com/ユーザー名/リポジトリ名
改善ログは「成長の証拠」になります。
Before/Afterで差分を見せるだけで、説得力が一気に上がります。
この記事でやること（3行）
- 改善ログの「型」を作る
- Before/Afterで差分を見せる
- 1作品に2〜3項目だけ書く
対象読者
- 作品の説明が弱いと感じる人
- 「作りました」で終わってしまう人
- 成長や工夫を伝えたい人
0. 改善ログの基本形（まずこれだけ）
**「Before → After → 効果」**の順で書きます。
例：
- Before：文字が詰まって読みにくい
- After：行間を1.7にして読みやすくした
- 効果：読むストレスが減った（自分でも読み返しやすい）
ポイント：**効果は“主観でもOK”**です。測定できていないなら「想定効果」で十分です。
1. 書く量は少なくてOK（2〜3項目で勝てる）
1作品につき 2〜3項目が読みやすくて強いです。
- Before：色が統一されていなかった
After：アクセントカラーを1色に固定（ボタン/見出し）
効果：ページ全体がまとまって見える
- Before：リンクが多く迷う
After：CTAを1つに絞った（「お問い合わせ」だけ）
効果：次に取る行動が分かりやすくなった
2. “良い改善ログ” と “弱い改善ログ” の違い
弱い例（抽象的）
- Before：見づらかった
- After：見やすくした
→ 何をどう変えたのかが伝わりません。
良い例（具体的）
- Before：本文が詰まって読みにくい（行間1.2）
- After：行間1.7＋段落間に余白を追加
- 効果：長文でも読みやすい（視線が止まりにくい）
3. 作品ページに入れる場合（HTML例）
<section class="improvement">
<h3>改善ログ</h3>
<ul>
<li>Before: 文字が詰まって読みにくい → After: 行間1.7に調整 → 効果: 読みやすくなった</li>
<li>Before: CTAが複数 → After: 1つに絞った → 効果: 迷いが減った</li>
</ul>
</section>
4. そのまま使える「改善ログ」テンプレ
## 改善ログ（Before / After）
- Before：
- After：
- 効果：
- Before：
- After：
- 効果：
5. 公開前のチェックリスト（5分でOK）
- Before/Afterが具体（行間/余白/色/配置/導線など）
- 2〜3項目に絞っている（全部書かない）
- 効果が書いてある（主観でもOK）
- 可能ならスクショ（Before/After）を1枚ずつ載せる
まとめ
- 改善ログは Before → After → 効果 で十分
- 1作品 2〜3項目が読みやすくて強い
- “差分” を見せるだけで、成長が伝わる
次に読む
- 【超初心者】採用目線で見るポートフォリオのNG集（回避ポイント付き）
https://qiita.com/ko_nagai_0801/items/508f30debc947dedacfa
→ 「やりがちな落とし穴」を先に潰すと、改善が早くなります