自分のポートフォリオサイトをReactを使って作成しました。

ポートフォリオの内容は上記記事に譲るとしてこの記事では、どうやってボートフォリオを作成したか 、またはポートフォリオの企画と設計について述べます。

課題:ボートフォリオサイトの作り方がわからん

ポートフォリオサイトをいざ作ろうとしたときに、どうやればいいのかネット上に情報がありませんでした。 ボーとフォリオの完成品は見つかります。知りたいのは、それをどうやって作ったかです。

しかし、しぶとくいろいろネットを探した結果、最終的に発見したのが次の動画シリーズです。

この動画では、どうやってポートフォリオを作成すればいいかが手順ごとに解説されています。 私は、さっそくぱくりました。

ポートフォリオ作成のためのテンプレート

動画の中で紹介されていたポートフォリオサイトを作成するための企画と設計を書きます。

目的の設定

  • 問題設定、目標設定
  • 解決方法、ゴールの洗い出し
  • 誰に対してのポートフォリオか？
  • アウトライン・サイトマップ
  • ユーザーのユースケース

まずは、問題設定をします。何のために作るのか？定義します。

次に、問題に対する解決方法、つまりはゴールを定めます。

そして、誰のために、ユーザーを明確に定義します。

目的に沿って、サイトマップを箇条書きしていきます。

最後に、ユーザーのユースケース、つまりどんなページを閲覧するのかを予想します。 場合によっては、サイトマップを並び替えます。

探索と発見

既存のポートフォリオの調査をします。Google検索です。

そして、情報をまとめます。いいなと思った箇所を盗んできて、メモしておきます。

ワイヤーフレーム

さて、設計の肝である、モックアップを書きます。 ユーザーインタフェースの定義、アニメーション、要素の状態を定義をします。

コンテンツ作成

コンテンツ、つまりポートフォリオに載せる自分の内容を準備します。 職務経歴書やGitHubで公開している作品など、整理します。

デザイン

サイトで利用する画像を探して、ワイヤーフレームに当てはめていきます。

探索と発見の記述

既存のポートフォリオの調査、特にReactで作られたサイトの調査、どんなことができるか？

ワイヤーフレームの作成

cacooで作成しました。

最後に

最後に、完成した私のポートフォリオのURLは以下です。