ポートフォリオサイトをデザインからAstroで実装までしてみた(ページ構成編）
Published on 2023-01-13
Written by motogram
この記事はZennでも公開しています。
https://zenn.dev/motogram/articles/611687e538e0ef
前回の記事に引き続き、今回はポートフォリオサイトをデザインから実装までする時の「ページ構成を考える」ステップです。
おさらい
前回の記事はこちら
https://zenn.dev/motogram/articles/547ad157d2ddea
- デザインコンセプトを決める
- ページ構成を考える(←ココ)
- ワイヤーフレームを作る
- デザインカンプを作る
- コーディングする
フローチャートを作成
今回作るポートフォリオサイトはそれほどコンテンツが多くなさそうなので、 フローチャートはFigJamを使ってサクッと作ってしまいます。
FigJamをまだ使ったことがない・知らない方向けに
FigJamはFigmaに付随した「オンラインホワイトボード」の機能です。
あらかじめ用意されているシェイプを使って、マインドマップやフローチャートを簡単に作ることができます。
作ったフローチャート
今回作ったフローチャートはこちらです。
- ページ内コンテンツは円形、ページは四角形で表現。
- ページ内コンテンツは直線で、ページ遷移は矢印で繋ぎました。
ページ構成のポイント
作成にあたりいくつかポイントをまとめておきます。
トップページ
- 全体的にコンテンツが少なめで、外部サービスへのリンクも多めなので、トップページにコンテンツを集約させます。
- トップページに「About」「Skill」「Note」「Work」「Contact」の各コンテンツをセクションで表示。
Skillセクション
「Skill」はデザインと技術の2つに分けて記載します。
Noteセクション
「Note」は、全ての記事からいくつかをピックアップして表示し、残りの記事が一覧で見れるアーカイブページへと遷移させます。
Workセクション
- 「Work」はデザインと開発でプロダクトを分けます。
- デザインプロダクトはDribbleへのリンクとデザインについて解説したNoteページへのリンクを設置。
- 開発プロダクトはGithubへのリンクとプロダクトのプレビュー画面へのリンクを設置。
Contactセクション
フォームは自分で実装も考えましたが、時間がかかりそうだったので、newtさんのForm Appを使わせて頂きます。
Noteページ
- MarkdownファイルをそのままポストできるAstroの強みを活かしたページ。
- 肝になるコンテンツなので、別ページとして用意。
- アーカイブページはタイムラインで時系列に表示予定です。
- 各記事のリンクをクリックすると、記事画面へ遷移させます。
最終的に必要なページは、トップページ、Noteページ、Note一覧ページ、404ページになりました。
このようにしてデザインを作る前にページ構成を考えておくと、全対像が見えて進捗が把握しやすくなりますね。
また、簡単にフローチャートを作れるFigJamのようなツールのおかげで、時間も大幅に短縮することができました。
次回は、Figmaを使ってワイヤーフレームを作成していきます。