📑

ポートフォリオサイトをデザインからAstroで実装までしてみた(ページ構成編)

2023/01/13に公開

前回の記事に引き続き、今回はポートフォリオサイトをデザインから実装までする時の「ページ構成を考える」ステップです。

おさらい

前回の記事はこちら

https://zenn.dev/motogram/articles/547ad157d2ddea

  1. デザインコンセプトを決める
  2. ページ構成を考える(←ココ)
  3. ワイヤーフレームを作る
  4. デザインカンプを作る
  5. コーディングする

フローチャートを作成

今回作るポートフォリオサイトはそれほどコンテンツが多くなさそうなので、
フローチャートはFigJamを使ってサクッと作ってしまいます。

FigJamをまだ使ったことがない・知らない方向けに

FigJamはFigmaに付随した「オンラインホワイトボード」の機能です。

あらかじめ用意されているシェイプを使って、マインドマップやフローチャートを簡単に作ることができます。

FigJam-Flowchart-sample

作ったフローチャート

今回作ったフローチャートはこちらです。

https://www.figma.com/file/cDp5wQHznHwzJ7J4nwdAuH/Portfolio-FlowChart?node-id=0%3A1&t=l3wVILNNRy3uvigr-1

  • ページ内コンテンツは円形、ページは四角形で表現。
  • ページ内コンテンツは直線で、ページ遷移は矢印で繋ぎました。

ページ構成のポイント

作成にあたりいくつかポイントをまとめておきます。

トップページ

  • 全体的にコンテンツが少なめで、外部サービスへのリンクも多めなので、トップページにコンテンツを集約させます。
  • トップページに「About」「Skill」「Note」「Work」「Contact」の各コンテンツをセクションで表示。

Skillセクション

「Skill」はデザインと技術の2つに分けて記載します。

Noteセクション

「Note」は、全ての記事からいくつかをピックアップして表示し、残りの記事が一覧で見れるアーカイブページへと遷移させます。

Workセクション

  • 「Work」はデザインと開発でプロダクトを分けます。
  • デザインプロダクトはDribbleへのリンクとデザインについて解説したNoteページへのリンクを設置。
  • 開発プロダクトはGithubへのリンクとプロダクトのプレビュー画面へのリンクを設置。

Contactセクション

フォームは自分で実装も考えましたが、時間がかかりそうだったので、newtさんのForm Appを使わせて頂きます。

https://www.newt.so/form-app

Noteページ

  • MarkdownファイルをそのままポストできるAstroの強みを活かしたページ。
  • 肝になるコンテンツなので、別ページとして用意。
  • アーカイブページはタイムラインで時系列に表示予定です。
  • 各記事のリンクをクリックすると、記事画面へ遷移させます。

最終的に必要なページは、トップページ、Noteページ、Note一覧ページ、404ページになりました。


このようにしてデザインを作る前にページ構成を考えておくと、全対像が見えて進捗が把握しやすくなりますね。

また、簡単にフローチャートを作れるFigJamのようなツールのおかげで、時間も大幅に短縮することができました。

次回は、Figmaを使ってワイヤーフレームを作成していきます。

Discussion

ログインするとコメントできます