はじめに

前回までで、Remix × Cloudflare テンプレートを使ってプロジェクトを作成し、Cloudflare Pages にデプロイするところまで完了しました。
今回からはいよいよ「ブログサイトらしい見た目」に仕上げていきます。

この記事では、**UI構成（見た目の全体像）**にフォーカスし、どのようなページやパーツが必要になるのかを整理します。
次回以降は、ここで決めた構成に基づいて各パーツを実際に作り込んでいきます。

UI構成の目標

今回は、以下の目標を設定しました。

• 一般的なブログサイト風（WordPress風の構成）
  → ヘッダー・サイドバー・記事一覧を備えたシンプルで馴染みやすいレイアウト
• モバイル対応したレスポンシブデザイン
  → スマホでも見やすく操作できることを意識

上記の目標を基に、UI構成を考えました。

サイト全体のページ構成

サイト全体のページ構成を以下イメージで考えました。

このような構成に対して、共通レイアウトとするものとURL毎に画面が切り替わる箇所を以下の様に整理しました。

• URL変更により画面を切り替える箇所
  • トップページ
  • 自己紹介ページ
  • 記事詳細ページ
  • お問い合わせページ
• 共通レイアウトとするもの
  • ヘッダー
  • サイドバー
  • フッター

また、モバイルサイズに対応する為に、以下のような表示がされるようにします。

• ヘッダーのモバイル表示
  • ナビゲーションボタンをハンバーガーメニューボタンにし、ボタンを押すとメニュー表示されるようにする
  • PC表示の際に表示されていたナビゲーションボタンを非表示にする
• サイドバーのモバイル表示
  • メインコンテンツの下に縦に配置されるようにする。

以下のようなイメージです👇

記事詳細ページのUI構成

記事一覧で選択した記事をクリックすると記事詳細ページに遷移し、

microCMS に登録した タイトル・本文・アイキャッチ画像・投稿日・カテゴリ を API 経由で取得して表示します。

UI構成のイメージは以下の通りです。

まとめ

今回は、ブログサイトの UI構成（見た目の全体像） を整理しました。

ブログサイトは、ページの種類も少なく私のようなWEB開発初心者でも比較的デザインしやすいと感じました。

このイメージを基に各ページに必要なパーツをプログラムで構築していきます。

詳細は、次回以降に記載します。

次回（第4回）は、microCMSやCloudflare Functionsを含めたバックエンド処理の全体像を整理していきます🔥