ポートフォリオ作成日記 #1

自分のポートフォリオ作成に当たり、日記にしてその方法を記しておきます。 また一から新しくまじめに作り直し中です。

どんなポートフォリオにするか

まずは、サイトのデザインを考える上で、自分の価値観は信用ならないので、既にポートフォリオとして公開されているエンジニアのポートフォリオを10個探しました。
私はITエンジニアなので、それっぽい感じの人のポートフォリオを探しました。

そして、探してきたサイトから共通点と相違点を書き出しました。 その結果がこれです。

- 共通部分
	・ヘッダー
		基本、左上に名前だったりアイコン（一部、名前と職業表記）
		右上に各種ページに飛べるやつ
		背景は白だったり、透過していたりがメイン

	・ページ構成
		・トップページの上部は背景が最初に表示される画面の一番下までいっぱい設定されており、そこに名前や職業、あんまり関係性のないもの？などが表記

		・一ページでおおよその要素を表示
			→ About(Profile), Skills, Works, Blog, Contact

		・Profile
			・About
				アイコン(一部顔写真)、名前、出身地、母校、何を学んできたかなどの自己紹介文、SNS情報

			・History(Carrier)
				棒があり、年が昇順表記。
				だいたい棒が真ん中にあり、丸表記の画像だったり、バナーが生えてる。
				生まれたところからやっているパターンと就職してからのパターンがある。

		・Skills
			今まで何を学んできた・やってきたかなどを簡単に説明
				色々なジャンル（Frontend, Backend, DB, Infra, Toolなど）ごとに各種紹介
				紹介方法はアイコンと名前、経験年数、実力(星やゲージ%)を表示

		・Works
			画像のみや、画像とタイトルで表示
			制作したサイトや制作物のサイトに飛ぶのが多い。


		・Blog
			基本的に別サイトへ遷移

		・Contact
			自身への連絡を可能とするフォームがある

	・フッター
		基本的にページ最下部に行ったら表示
		基本的には小さめで、Copyrightのみだったり、画面上部へ戻るボタンがあったり

- 特定のページにしかないもの
	・右側にヘッダーを表示
		→ その場合は複数ページで構成
	・このポートフォリオの説明をしている
	・スキルを五角形のグラフで表示
	・自身のAboutが最下部
	・Awardで表彰実績などを表示
	・Newsでサイトの更新情報などを表示
	・フッターがない
	・PromiseやPolicyという要素で、心がけているものや座右の銘的なものを表記
	・フッターが画面の中央あたりまで伸びて、SNSやアイコン、copyrightなどの様々な情報が出現
	・Skillを点数で表記。
	・Certificationで資格情報の表記

この結果から、私の作成するサイトのWireframeを考えました。

Wireframeとは

「なにを・どこに・どのように」配置するかを表現した設計図で、Webサイトの骨組みとなるものです。
何も考えずに作るのもいいですが、それだと後から「この機能も欲しい」 「ここもっとデザインよくしたいな」 などたくさんの悩みが出てきてしまうので、開発する前に事前に設計図を作成することで、そういった悩みを最大限でないようにするのが目的になります。

作成したWireframe

TopPage

TopPage

NewsPage

NewsPage

WorksPage

WorksPage

BlogPage

BlogPage