暇つぶしにポートフォリオサイトを作る
概要
2週間かけて写真ポートフォリオサイトを作ってみたいと思います。
趣味が写真撮影で、仕事ではWebGIS関連のシステムを作ることが多いので、その両方を取り入れたサイトを作成します。
最終的には技術的な部分を含めて紹介できるサイトにしたいので、リッチにしていきたいのですが、、、
時間かけると気力が抜けていきそうなので最初の段階ではシンプルなサイトを作っていきたいと思います。
流れ
個人開発は行き当たりばったりにいきたいので、大まかな流れだけ決めます。
0. 構想を練る: Today!
- Notionでモックを作る・データを作る: 1日
- Notion APIを利用してかなりシンプルなサイトをVercel上にデプロイする: 3日
- リリースして改善点をまとめつつ、設計に入る: 2日
- 実装: 7日
- いい感じに調整: ♾️日
0. 構想を練る
私が趣味で撮る写真は風景・野鳥・星空・植物の4種類です。
ほとんどの写真は大分県(中津が地元かつ大分市在住)で撮影しており、自然の写真が好きです。

↑よければフォローを!
せっかくなので花鳥風月をテーマにし、大分の自然をまとめたサイトにしようと思います。(九州の写真が多ければ、そこまで範囲を広げます。)
GISはここの部分で絡めていきたいと思います。地図から、リストから、ジャンルからの3つの入り口で写真を見れるようにします。
全体のサイトのイメージは自然風景、夜景など、ちょっと鳥や花を添える感じで。
欲を言えば、夜・夕方に見た場合と昼に見た場合で表示される写真やサイト全体の雰囲気が違う感じにしたいです。
1. Notionでモックを作る
スクラムに影響を受けているため、できるだけ早く実際に見れるものを公開していきたいと思います。
簡単かつ爆速で作るために、まずは実データを入れたシンプルなページをNotionで作成します。
実はNotionには地図機能もありまして、

こんな感じでデータのビューの中に地図を入れることができます。
リストの表示、種類ごとの表示、GISでの表示の3つがそのまま作れるので、デザインにそれほどこだわらなければなんならこれで十分まであります。
この辺を踏まえて、とりあえずNotionで作成・公開していきます!
🗒️ Notion -> Notionとは?
🏉 スクラム -> スクラムとは?
後日、Notionのテンプレートとして公開します!
2. Notion APIを利用してかなりシンプルなサイトをVercel上にデプロイする
Notionでサンプルページを作った後は、シンプルなサイトを作成してデプロイします。
データは初期の段階ではNotion APIから取得し、後でデータ層を入れ替えます。
公開用のサービスとしてはVercelを利用します。
色々理由はあるのですが、何より公開までの手順の少なさから採用しています。
この段階で利用する大まかなフレームワーク等は固定します。
3. リリースして改善点をまとめつつ、設計に入る
設計というほど細かいことをするわけではありませんが、後でぐちゃぐちゃにならないように整理を行う予定です。
リリース後の改善点やZennでもらえたアイデア等を落とし込みつつ全体の設計を行います。
この段階でライブラリ・データをどこに置くのかも固定し、実装の準備を進めます。
Figmaやフロー図などを作るのかは未定です。
最低でもExcalidrawないしFigmaを使って画面の構成は練りたいと思います。
4. 実装
ひたすら手を動かします。
何度も出戻りする予定ですので、ちょっと多めに日にちを決めています。
せっかくなのでNotionでタスク管理を行い、記事にまとめたいと思います。
5. いい感じに調整
一番楽しく沼理想なところです。
結局実装後にあれをこうしたかった、ここはこうやっとけばよかったが大量に発生するので、個人開発等いうことに甘えてどんどん変えていこうと思います。
まとめ
まだ中身がスカスカの頑張るぞーって感じの宣言記事になりますが、この内容で進めていきながらある意味リアルな個人(的な趣味)開発を届けていきたいと思います!
※宣言しないとやらない気がするので記事を書きました orz
Discussion