第7回 Astroブログのデザインを見直す―noteを参考に修正方針を決める

Astro、GitHub、Cloudflare Workersを接続し、独自ドメインbringain.comでの公開まで完了。

サイトを表示する仕組みは整ったものの、画面はAstro公式ブログテンプレートに近い状態のまま。記事を増やす前に、サイト名、トップページ、記事一覧、Aboutなどのデザインを見直すことにした。

今回の参考にするのは、文章と記事を中心にしたnoteのデザイン。ロゴや固有アイコンを複製するのではなく、余白の取り方、読みやすい本文幅、装飾を抑えた記事一覧などを参考にする。

この記事では、デザイン修正前の画面と、修正対象として整理した内容を記録する。

修正前のトップページ#

独自ドメインで最初に表示したトップページがこちら。

ページを開くと、大きな文字で「まだなんもできてねえ！」を表示。サイト作成中の確認用としては分かりやすいが、初めて訪れた人には何を扱うサイトなのか伝わらない。

画面には、Astroテンプレートの状態が分かる要素も残っていた。

• サイト名がAstro Blog
• Mastodon、Twitter、GitHubがAstro公式アカウントへのリンク
• トップページに記事への入口がない
• フッターがYour name here
• メイン領域に対して文字が大きい

公開確認用の画面から、記事を読んでもらうためのトップページへ変更する必要がある。

修正前の記事一覧#

記事一覧には、第1回から第6回までの構築記録を表示できている。

記事の取得やリンクは正常。ただし、日本語の長い記事タイトルに対して文字サイズが大きく、タイトルが複数行に分かれている。記事ごとの境界も分かりにくく、一覧を上から順番に読む際に視線を動かしづらい。

表示上の課題を次のように整理した。

• 長いタイトルが3行から4行に折り返される
• 日付がSep 5, 2026の英語表記
• 記事の説明文を表示していない
• カテゴリとタグを確認できない
• サムネイルがない記事の余白が大きい
• 記事数が増えた場合に目的の記事を探しにくい

記事一覧は、タイトルだけを大きく並べる構成から、タイトル、説明、公開日、カテゴリをまとめたカード形式へ変更する。

修正前のAboutページ#

Aboutページにもテンプレートの内容が残っている。

大きなサンプル画像、About Meというタイトル、2021年の日付、確認用の「てすとてすとてすと」を表示。公開サイトの紹介ページとしては使えないため、画像とテスト文章を削除し、「ゆまラボ」で扱う内容を掲載する。

運営者情報を無理に増やすのではなく、まずは次の内容に限定する予定。

• サイトで扱うテーマ
• サイトを作った目的
• 実際の作業記録を掲載する方針
• エラーや失敗例も残す理由

noteを参考にする理由#

今回のサイトは、画像を大量に見せるポートフォリオではなく、作業手順やエラー内容を文章で伝える技術ブログ。装飾の多さよりも、記事の探しやすさと本文の読みやすさを優先したい。

noteで参考にした要素は以下。

• 白を基調にした背景
• 黒に近い本文色
• 広めの余白
• 装飾を抑えたヘッダー
• 記事を中心にしたトップページ
• 読みやすい1カラムの記事本文
• 薄い罫線で区切った記事一覧
• スマートフォンでも崩れにくい構成

一方、noteのロゴ、画像、固有アイコン、文章、CSSをそのまま使用することは当然避ける。サイト名は「ゆまラボ」、アクセントカラーや構成はこのサイト用に調整する。

デザイン修正の対象#

修正内容を画面別にまとめる。

既存の記事本文、画像、slugは変更しない。デザインは共通レイアウトとCSSを中心に修正し、今後の記事にも自動的に適用される構成を目指す。

ローカルで確認しながら進める#

デザイン変更は、いきなり公開環境へ反映せず、ローカルプレビューで確認しながら進める。

プロジェクトへ移動して開発サーバーを起動。

cd C:\000pj\astro\yumaru-site
npm run dev

ブラウザで次のページを確認する。

http://localhost:4321/
http://localhost:4321/blog/
http://localhost:4321/about/
http://localhost:4321/blog/06-register-domain-and-connect-worker/

ファイルを保存すると、Astroの開発サーバーが変更を検知して画面を更新。トップページだけでなく、記事一覧、記事本文、About、スマートフォン幅を順番に確認する。

公開はデザイン完成後にまとめて実行#

修正途中の状態はGitHubへpushせず、ローカルで完成させる。最後に本番ビルドを実行し、エラーがないことを確認する。

npm run build
npm run preview

確認が終わった段階で、変更をまとめてコミットする予定。

git add .
git commit -m "ゆまラボのサイトデザインを刷新"
git push

GitHubへのpush後は、Cloudflareが変更を検知して自動デプロイを開始する。公開環境でトップページ、記事一覧、記事本文、Aboutを再確認すればデザイン変更は完了となる。

採用したデザイン方針#

• 公開直後の3画面を修正前の記録として保存
• noteの情報設計と読みやすさを参考にする
• ロゴや固有デザインの複製は行わない
• サイト名を「ゆまラボ」へ変更
• トップページを新着記事中心へ変更
• 記事一覧と記事本文を日本語の長文向けに調整
• Aboutとフッターからテンプレートの内容を削除
• ローカル確認完了後にまとめてpush

サイトを公開する仕組みは完成していても、初期テンプレートのままではサイトの目的が伝わりにくい。次は共通CSS、ヘッダー、フッター、トップページから順番に修正し、記事を読みやすく修正していく。