※この記事について
現在Nuxt+Netlify+Contentfulでポートフォリオサイトを構築しており、その連載記事となります。
連載記事はマガジンにまとめています。こちらをご覧ください。

ポートフォリオサイトを作ろう。今回で第4回目となりました。
今回は技術のことは一旦置いておいて、どのような画面にするかの設計をしたいと思います。

必要な画面と画面遷移の作成。

まず必要な画面ですが、下記のような構成を考えています。

TOP
  - about
  - work (contentfulで書いた記事を一覧表示)
    - work detail (contentful で書いた記事を表示)
  - note (noteからRSSで一覧取得)
  - contact

非常にシンプル。 
noteのRSSをうまく取得できるかが不明ですが、とりあえずこんな感じでいこうかなと思います。
work部分は前回のnote参考にcontentfulと連携をしたいと思います。

画面設計

それでは画面設計をしていきます。画面設計はAdobe XDを利用します。
また、Adobe XDで0から作るのではなく、用意されているテンプレートを利用して作ろうと思います。
今回はこちらのテンプレートを利用しようと思います。

Wires, free wireframe kits for Adobe XD

※すみません、Adobe XDの利用方法は今回は割愛します！詳しくは他の方の記事を見てみてください！

テンプレートを利用し下記のような感じにしました。

Adobe XDとテンプレート利用するとこんなに簡単に画面が作れます。便利。

以下それぞれをちょっと詳細に説明します。

TOP

サイトトップページは画像一枚をどーんと表示するようにしようと思います。どんな画像にするかは考え中。ポートフォリオサイトなので自分の特徴が表せるような画像にできればいいなと思っています。

about

自己紹介ページですね。経歴やできることなどをわかりやすく丁寧に書こうかなと。載せる情報としては

・画像
・名前
・自己紹介文
・SNSリンク
・参加しているプロジェクト一覧
・スキル

を予定しています。

work

過去の仕事を一覧で表示します。載せる情報としては

・プロジェクト名
・画像
・プロジェクト詳細
・制作時期

ですね。クリックすると詳細画面に遷移しようと思います。
また、workはcontentfulで作成したコンテンツを表示させるようにしようと思います。

work detail

workの詳細画面です。一覧よりもう少し詳しく内容について書こうと思います。載せる情報としては

・プロジェクト名
・画像
・プロジェクト詳細
・制作時期
・使用言語
・使用ツール

を予定しています。

note

こちらはnoteのRSSを引っ張ってきて一覧で表示させようと思います。載せる情報としては

・タイトル
・画像
・日付

を予定しています。ここの対応方法がまだ調査中なので、今回のポートフォリオサイトの一番のボトルネック部分ですね。

contact

お問い合わせフォームです。自前で用意するのではなく、Google formを埋め込む予定です。楽できるところは楽してやろうかなと思っています。

掲載コンテンツとしては以上です。

画面遷移図の作成

簡単な画面設計なので必要ないっちゃないですが、一応Overflowでも遷移図作ってみました。

こんな感じですね。

Overflowは簡単に画面遷移図が作れるツールです。（詳しくはこちら）
Adobe XDとOverflowは連携しているのでさらに便利です。（詳しくはこちら）

ということで短いですが今回は以上です。次回は実際にファイルを作っていこうと思います！

※連載記事一覧はこちら。