Nuxt3 + ヘッドレスCMSのブログをサーバーレスで構築する話 ２-１（デザイン周り）

はじめに

この記事は次のような方向けの記事となります。
・Nuxt3 でブログを構築したい
・AWSを使ったサーバーレスでのサーバー構築を考えている
・nuxt/content じゃなくヘッドレス CMS を使ってブログ運用をしたい
今回はデザイン、周りの構成などをまとめています。(一つ目)

この記事のそもそもの経緯などは以下の記事を読んでください。
Nuxt3 + ヘッドレス CMS のブログをサーバーレスで構築する話 1

デザインフレームワーク

nuxt2 + nuxt/content で作った際、vuetify を使ったので新しいブログでもそのまま利用したかったのですが、何も入れてません。
インストールや運用、プレーンのHTMLとの共存が面倒だったので入れないで自前で実装するようにしました。
アイコンのみNuxt Iconを使っています。

ブレイクポイント

最適解がわからなかったので現在携わっているプロジェクトを参考に設定しました。
・フルスクリーン：1920px以上
・PC大サイズ：1280px ~ 1919px
・PC中サイズ：1080px ~ 1279px
・PC小、タブレットサイズ：770px ~ 1079px
・SPサイズ：769px以下
現在、1080pxからスマホ表示にしているのですが、769pxからスマホ表示に修正する予定です。
gridレイアウトを使ってメイン部分と再度コンテンツの部分を分けて表示するようにしています。

ワイヤーフレーム

サイト構築する際にあらかじめワイヤーフレームを作成して実装を行いました。
当初の予定から表示するコンテンツが若干変わってますが、大枠は想定通り実装できました。
最初からデザインをがっちりするほどデザインセンスが無いのでとりあえずはワイヤーレベルで作成
段段と雑になってるのは気にしないでください。

トップ

トップページはブログの入り口になるのでそのうちアニメーションなど入れていろいろと遊ぶ予定
初期段階では作る予定はないので一旦記事一覧ページへリダイレクトするようにします。

共通レイアウト

共通レイアウト
特にこだわりはないので以下の内容で構成してます。

・ヘッダー
・グローバルメニュー
・サイドメニュー
　ワイヤーでは人気記事としてますが、「人気」の部分のロジックを最初から入れるのが手間だったので現状は最新の記事としています。
・フッター
　バージョンアップ前のデザインに合わせました。
　サイトマップは作るのが手間だったので作っていません。

記事一覧（カテゴリ含む）

パンくずリストと記事一覧を表示するくらいで終わりにします。
ワイヤーではページャとしてますが、今回使っているdynamoDBの仕様上ページャでの実装が難しかったので無限スクロールにしています。

記事詳細

一般的なブログで表示する機能を載せてます。
まとめてみると意外と項目が多くてびっくりしてます。
コメントあたりはロジックをどうするか考える必要がありますが、あったほうが勉強になるので入れます。
※これも手間だったので初期段階では実装していません。

・パンくずリスト
・カテゴリ一覧
・記事タイトル
・公開日
・記事画像
・本文 　（記事の概要、目次、内容）
・シェアボタン
・前の記事、次の記事
　※dynamoDBの仕様上前、後の記事を取得するのが手間だったので実装では最近の投稿にしました。
・関連記事
　※初期段階では実装しないこととしました。（そのうち入れたい）
・コメント一覧、フォーム
　※初期段階では実装しないこととしました。（そのうち入れたい）

おわり
ワイヤーフレーム作ってたら 1 ページでまとまらなかったのです。
次もデザイン周りの記事にしますので付き合ってください。。。
次の記事はこちら
Nuxt3 + ヘッドレスCMSのブログをサーバーレスで構築する話 ２-２（デザイン周り）