ブログのトップページを作り替えた — 6つの構成案と画面

ブログのトップページを作り替えました。仮のまま置いていたページを、もう少しまともなものにしたかったからです。

Claude Code に5つの案を作ってもらい、各案を見比べたあと、よかった3つの案を混ぜたものに決めました。案はどれも、同じ記事データで動くところまで Claude Code が作ったので、6つの画面を並べておきます。

前のトップ

一行の説明の下に、記事のリンクが並ぶ形でした。公開していた記事は1本で、下書きを書きためていた時期です。

5つの案と、あとから足した1案です。

並びはどの案もほぼ同じで、違うのは見た目と、各ブロックの見せ方です。下の一言は、このとき私が画面を見て思ったことです。

選んだ案は、上から、プロフィール、作っているもの、カテゴリと続き、その下に最新の記事が並びます。

Claude Code に頼むと、トップページの案を実際のコンテンツで何案も作ってもらえます。実物を見ながら、気になったところを伝えて直してもらえるのは良いところだと思います。

今回やったのは、仮のトップページから最初のまともな形にするところまでです。選んだ形で気になっていたのは、次のあたりでした。

この記事を読むころには、トップページはもう直しているか、違う形になっているかもしれません。同じやり方で直していくつもりなので、案の出し方と見比べ方のところを見てもらえればと思います。

案ができるまでと、そのあとの細かい相談の記録です。Claude Code とのチャットを時系列に並べておきます。私の発言は原文をもとにしたもの、Claude Code の返答は要約です。

👤 ブログ主のプロンプト (1回目)

サンプルを5つくらい作るのをお任せしたいです。

一つは企業LPくらいのかっこいいやつもお願いしたいです
引き続きスマホでの見栄えが一番よくなるようにおねがいします。ただしPC版ももうちょっと見栄えよくしたいです
それぞれ今後メンテしていく必要があるので、各サンプルのメリットデメリットも整理おねがいします。今後もあなたに作成作業をお願いするので、あなたがメンテしやすいことが重要です
サンプルはシンプルなやつからかっこいいやつ (複雑なやつ) までいくつかパターンを考えておねがいしますね

🤖 Claude Code

すっきりミニマル、ほっこりマガジン、ペルソナハブ、プロダクトLP風、ビルドログの5案に決めて、同じ記事データで動く状態まで作りました。案ごとのメリットとデメリット、手を入れやすさをまとめた比較も添えています。案を切り替えるページも用意したので、ローカルで見比べられます。

👤 ブログ主のプロンプト (2回目・スマホで見たあと)

どれもいい感じ！コメントしますね。

🤖 Claude Code

記事の画像と、作っているものの欄 (公開中のアプリと開発中のもの) を各案に足しました。4は色味を温かくした版も作っています。

👤 ブログ主のプロンプト (3回目)

2〜4がよい感じです。コンテンツの内容や構成ベースは3で、色味や雰囲気は2で、信頼感がある感じというかそういうので4がいいなと。画像は2か4くらいの大きさはほしいです。3は小さすぎ。全部融合させた新しい案を作ってみてもらえますか？

🤖 Claude Code

3の見せ方を土台に、2の色とカード、4のヘッダとボタンの質感を合わせた案を作りました。記事の画像は2や4と同じ大きさにしています。

👤 ブログ主のプロンプト (4回目)

バナーの左をタップするとホームにいくのに、右側にもホームへのリンクがありますね。ここはどうにかならないでしょうか。一等地なのにもったいないなと。提案ありますか？

🤖 Claude Code

3案あります。A: バナーの右のリンクを「アプリ」に置き換えて、作っているものへ飛ばす。B: ホームへのリンクを外して「記事」を残す。C: 「について」のページを作って置く。A を推します。

👤 ブログ主のプロンプト (5回目)

案Aでよさそうです！

同じようにトップページの構成を考えた方の記事です。

トップ画面がただの新着記事一覧でもったいなかったのでホーム画面を作った話 (note・じぇいぴー) — はてなブログのトップを記事一覧から固定ページのホームに変えた記録。重要な記事が新着に埋もれること、サイトの全体像が分かりにくいことが理由 (2026年3月)
ブログのトップページについての悩みをつらつら書いてみます (note・あこ) — ブログ型・サイト型・ハイブリッド型・記事型の4つを比べて、何を書いているかがひと目で分かる形を考えた記事。SNS から初めて来た人をどう迎えるかにも触れています (2026年6月)